gomiichan's diary

WEB初心者の勉強奮闘記です☆

cake shopサイト作成(画像切り出し作業と商品紹介ページの作成） 

FWで画像の切り出し作業後、商品紹介ページのHTML、cssの作成
（1）
<!DOCTYPE HTML>
<html>
<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_productsOn">商品のご紹介</a></li>
    <li><a href="shop.html" class="menu_shop">店舗案内</a></li>
    <li><a href="order.html" class="menu_order">商品のご購入</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  -->
</body>
</html>
（2）
<!DOCTYPE HTML>
<html>
<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_productsOn">商品のご紹介</a></li>
    <li><a href="shop.html" class="menu_shop">店舗案内</a></li>
    <li><a href="order.html" class="menu_order">商品のご購入</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_photo02.jpg" width="475" height="285" alt="苺のバースデーケーキ商品写真">
    <p class="product_detail">当店人気メニュー！</p>
    <p class="product_detail">大切な方のお誕生日に、程よい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
    <p class="product_detail">大切な方のお誕生日に、程よい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
    <p>価格：2,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  -->
</body>
</html>
（3）
<!DOCTYPE HTML>
<html>
<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_productsOn">商品のご紹介</a></li>
    <li><a href="shop.html" class="menu_shop">店舗案内</a></li>
    <li><a href="order.html" class="menu_order">商品のご購入</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_photo03.jpg" width="475" height="285" alt="焼菓子の詰め合わせ商品写真">
    <p class="product_detail">当店人気メニュー！</p>
    <p class="product_detail">当店自慢の焼菓子の詰め合わせです。無添加の素材で一つ一つ丹念におつくりしています。</p>
    <p class="product_detail">当店自慢の焼菓子の詰め合わせです。無添加の素材で一つ一つ丹念におつくりしています。</p>
    <p>価格：1,680円（税込）</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  -->
</body>
</html>

次回はショップページからの作成