支援訓練 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 (C)2013 Wants Cake Corporation.All Rights 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 (C)2013 Wants Cake Corporation.All Rights 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 (C)2013 Wants Cake Corporation.All Rights 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 (C)2013 Wants Cake Corporation.All Rights 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 (C)2013 Wants Cake Corporation.All Rights Reserved. </address> </div> <!-- footer end --> </div> <!-- contents end --> </body> </html>