支援訓練 26日目

FireWorksで画像をスライスする。
[Control]+[Shift]+[d]で画像のコピー

item.html

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

<body>
<div id="contents">
<div id="header">
  <h1><a href="index.html"><em>ウォンツケーキ店 | TOPページ</em></a></h1>
  <ul id="menu">
    <li><a href="index.html" class="menu_index"><span>ホーム</span></a></li>
    <li><a href="products.html" class="menu_productsOn"><span>商品のご紹介</span></a></li>
    <li><a href="shop.html" class="menu_shop"><span>店舗案内</span></a></li>
    <li><a href="order.html" class="menu_order"><span>商品のご購入</span></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>

item2.html

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

<body>
<div id="contents">
<div id="header">
  <h1><a href="index.html"><em>ウォンツケーキ店 | TOPページ</em></a></h1>
  <ul id="menu">
    <li><a href="index.html" class="menu_index"><span>ホーム</span></a></li>
    <li><a href="products.html" class="menu_productsOn"><span>商品のご紹介</span></a></li>
    <li><a href="shop.html" class="menu_shop"><span>店舗案内</span></a></li>
    <li><a href="order.html" class="menu_order"><span>商品のご購入</span></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>

index3.html

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

<body>
<div id="contents">
<div id="header">
  <h1><a href="index.html"><em>ウォンツケーキ店 | TOPページ</em></a></h1>
  <ul id="menu">
    <li><a href="index.html" class="menu_index"><span>ホーム</span></a></li>
    <li><a href="products.html" class="menu_productsOn"><span>商品のご紹介</span></a></li>
    <li><a href="shop.html" class="menu_shop"><span>店舗案内</span></a></li>
    <li><a href="order.html" class="menu_order"><span>商品のご購入</span></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>

products.html

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

<body>
<div id="contents">
  <div id="header">
    <h1><a href="index.html"><em>ウォンツケーキ店 | TOPページ</em></a></h1>
    <ul id="menu">
      <li><a href="index.html" class="menu_index"><span>ホーム</span></a></li>
      <li><a href="products.html" class="menu_productsOn"><span>商品のご紹介</span></a></li>
      <li><a href="shop.html" class="menu_shop"><span>店舗案内</span></a></li>
      <li><a href="order.html" class="menu_order"><span>商品のご購入</span></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>
      <ul class="anchor">
        <li><a href="#item1">チーズスフレ</a></li>
        <li><a href="#item2">バースデーケーキ</a></li>
        <li><a href="#item3">洋菓子</a></li>
      </ul>
      
      <!--  ショートケーキ 始まり  -->
      <h3 class="product_category"><a name="item1" id="item1">チーズスフレ</a></h3>
      <div class="product">
        <p class="cake"><img src="images/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ 商品写真"></p>
        <p class="product_name"><a href="item.html" title="生クリームをたっぷり乗せたチーズスフレ">チーズスフレ</a></p>
        <p class="product_price">1個 480円</p>
        <p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
        <ul class="button">
          <li> <a href="item.html"> <img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"> </a> </li>
          <li> <a href="images/item_photo01.jpg" class="lightbox"> <img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"> </a> </li>
        </ul>
      </div>
      <!-- ショートケーキ おわり  --> 
      
      <!-- バースデーケーキ 始まり  -->
      <h3 class="product_category"><a name="item2" id="item2">バースデーケーキ</a></h3>
      <div class="product">
        <p class="cake"><img src="images/top_item_photo2.jpg" width="150" height="120" alt="苺のバースデーケーキ 商品写真"></p>
        <p class="product_name"><a href="item2.html" title="苺のバースデーケーキ ホール">苺のバースデーケーキ</a></p>
        <p class="product_price">1個 2,480円</p>
        <p>大切な方のお誕生日に、程よい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
        <ul class="button">
          <li> <a href="item2.html"> <img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"> </a></li>
          <li> <a href="images/item_photo02.jpg" class="lightbox"> <img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"> </a> </li>
        </ul>
      </div>
      <!--  バースデーケーキ おわり  --> 
      
      <!--  焼菓子の詰め合わせ 始まり  -->
      <h3 class="product_category"><a name="item3" id="item3">焼菓子の詰め合わせ</a></h3>
      <div class="product">
        <p class="cake"><img src="images/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真"></p>
        <p class="product_name"><a href="item3.html" title="当店自慢の焼菓子の詰め合わせ">焼菓子の詰め合わせ</a></p>
        <p class="product_price">1箱 1,680円</p>
        <p>当店自慢の焼菓子の詰め合わせです。無添加の素材で一つ一つ丹念におつくりしています。</p>
        <ul class="button">
          <li> <a href="item3.html"> <img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"> </a> </li>
          <li> <a href="images/item_photo03.jpg" class="lightbox"> <img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"> </a> </li>
        </ul>
      </div>
      <!--  洋菓子 おわり  --> 
    </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>

style.css

@charset "utf-8";
/* CSS Document */

/* itemページ */
p.product_detail {
  text-indent: 1em;
}
h3.product_name {
  font-size: x-large;
  color: #7c0725;
  margin-bottom: 5px;
}
div.buy {
  margin: 20px 0;
   padding-top:20px; 
   border-top: dotted 1px #c0c0c0;
}
/* produgtsページ */
ul.anchor{
  margin-bottom: 15px;
  padding-left: 10px;
}
ul.anchor li{
  padding-left: 20px;
  background: url(../images/Sikaku.gif) no-repeat;
}
h3.product_category {
  margin-bottom: 10px;
  padding: 4px;
  color: #FFF;
  background-color: #7c0725;
}
div.product {
  margin-bottom:20px;
  padding-bottom: 10px;
  border-bottom: dotted 1px #c0c0c0;
}
p.cake {
  float: left;
  margin: 0 10px 10px 10px;
}
p.product_name {
  font-size: 18px;
  font-weight: bold;
}
ul.button {
  margin-top: 10px;
  overflow: hidden;
}
ul.button li {
  float: left;
  margin-right: 10px;
}||<

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

<body>
<div id="contents">
  <div id="header">
    <h1><a href="index.html"><em>ウォンツケーキ店 | TOPページ</em></a></h1>
    <ul id="menu">
      <li><a href="index.html" class="menu_index"><span>ホーム</span></a></li>
      <li><a href="products.html" class="menu_products"><span>商品のご紹介</span></a></li>
      <li><a href="shop.html" class="menu_shopOn"><span>店舗案内</span></a></li>
      <li><a href="order.html" class="menu_order"><span>商品のご購入</span></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/shop_title.gif" width="475" height="25" alt="店舗案内"></h2>
      <img src="images/shop.jpg" width="475" height="317" alt="店舗写真">
      <table class="shop_table" >
        <tr>
          <th>社名</th>
          <td>ウォンツケーキ</td>
        </tr>
        <tr>
          <th>住所</th>
          <td>ウォンツ県一途市三番町4-1-3<br>
            ケーキビル1F</td>
        </tr>
        <tr>
          <th>TEL</th>
          <td>000-000-0000</td>
        </tr>
        <tr>
          <th>定休日</th>
          <td>水曜日</td>
        </tr>
        <tr>
          <th>営業時間</th>
          <td>午前9:00~午後8:00</td>
        </tr>
        <tr>
          <td colspan="2"><img src="images/map.gif" width="462" height="365" alt="所在地図" class="mapImg"></td>
        </tr>
      </table>
    </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>