96's blog

WEBサイト制作科　６ヶ月コース

ケーキショップサイト02

サイト制作田中先生

htmlデータは先生から配布。

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

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

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

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>ウォンツケーキ店 | テンプレート</title>
<linkhref="css/base.css"rel="stylesheet"type="text/css">
<linkhref="css/common.css"rel="stylesheet"type="text/css">
</head>

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