ケーキショップサイト02

サイト制作 （田中先生）
  • htmlデータは先生から配布。

商品紹介ページ（チーズスフレ、苺のバースデーケーキ、焼菓子詰め合わせ）

  • FireWorksでカンプから画像の切り出し。
  • 各ページの内容（div id="main"）の画像（タイトル、商品画像、購入リンクボタン）を切り出し。
  • DreamWeaverでcommon.css（またはstyle.css）を新規作成し、ページ内容を整える。

HTML（チーズスフレのページ）

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ウォンツケーキ店 | テンプレート</title>
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/common.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="contents">
<div id="header">
  <h1><a href="index.html">ウォンツケーキ店 | TOPページ</a></h1>
  <ul id="menu">
    <li><a href="index.html" class="menu_index">ホーム</a></li>
    <li><a href="products.html" class="menu_products">商品のご紹介</a></li>
    <li><a href="shop.html" class="menu_shop">店舗案内</a></li>
    <li><a href="mail.html" class="menu_mail">商品のご購入</a></li>
  </ul>
</div>
<!--   header end  -->
<div id="container">
  <div id="sidebar"> <a href="item2.html" class="banner" title="	バースデーケーキのご注文はこちら"><img src="images/banner01.jpg" width="195" height="175" alt="バースデーケーキのご注文はこちら"></a> <a href="yumi.html" class="banner" title="ユミの奮闘日記"><img src="images/banner02.jpg" width="195" height="88" alt="ユミの奮闘日記"></a> </div>
  <!--   sidebar end  -->
  <div id="main">
    <h2><img src="images/item_title.gif" width="475" height="25" alt="商品のご紹介"></h2>
    <h3 class="product_name">チーズスフレ</h3>
    <img src="images/item_photo01.jpg" width="475" height="285" alt="チーズスフレ商品写真">
    <p class="product_detail">当店人気メニュー！</p>
    <p class="product_detail">ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。チョコとオレンジのトッピングが、やわらかな味わいの中にアクセントを与えてくれます。</p>
    <p class="product_detail">甘さ控えめとなっておりますので、カロリーが気になる方も安心です。お茶のお供に是非どうぞ。</p>
    <p>価格：480円（税込）</p>
    <div class="buy"> <a href="order.html"> <img src="images/buy_btn.gif" width="120" height="20" alt="この商品を購入する"> </a> </div>
    <!--   main end  --> 
  </div>
  <!--   container end  -->
  <div id="footer">
    <address>
    Copyright&nbsp;(C)2013&nbsp;Wants&nbsp;Cake&nbsp;Corporation.All&nbsp;Rights&nbsp;Reserved.
    </address>
  </div>
  <!--   footer end  --> 
</div>
<!--   contents end  -->
</div>
</body>
</html>

CSS（#mainの部分）

@charset "utf-8";
/* CSS Document */
/* itemページ */
p.product_detail {
  text-indent: 1em;
}
h3.product_name {
  font-size: x-large;
  color: #7c0725;
}
div.buy{
  margin: 20px 0;
  padding-top:20px;
  border-top: dotted 1px #c0c0c0;
}


商品紹介トップページ

  • FireWorksでカンプから画像の切り出し。
  • common.cssでページ内容を整える。