【授業課題】全部のページ作ってみた「Wants Cake」

base.css

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

/*リセット*/
* {
	margin: 0;
	padding: 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.5em;
}

/*いちばんうしろ*/
body {
	background-color: #015790;
	background-image: url(images/bg.jpg);
  background-repeat: repeat-x;
}

/*いちばんうしろに乗ってるエリア*/
#container {
	margin: 0 auto;
	background-color: #fff;
	width: 720px;
	height: auto;
}

h1 {
	margin: 0 20px 10px;
	padding-top: 10px;
}

#bb img {
	margin: 0 20px;
}

/*ナビゲーションバー*/
#nav {
	background-image: url(images/menubar.jpg);
	background-repeat: repeat-x;
	margin: 0 20px 10px;
	width: 680px;
	height: 36px;
}
#nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#nav li {
	float: left;
	margin: 0;
	width: 136px;
}
#nav li a {
	display: block;
	overflow: hidden;
	height: 0;
	padding-top: 36px;
	background-repeat: no-repeat;
}
#nav li.home {
	background-image: url(images/menu_index.gif);
}
#nav li.pro {
	background-image: url(images/menu_products.gif);
}
#nav li.shop {
	background-image: url(images/menu_shop.gif);
}
#nav li.order {
	background-image: url(images/menu_mail.gif);
}
/*擬似クラス*/
#nav li a:hover {
  background-position: 0px -36px;
}

/*contentとside*/
#wrapper  {
	margin: 10px 0;
	width: 720px;
}

#content {
	float: right;
	width: 475px;
	margin-bottom: 10px;
}

/*contentの中*/
#info {
	width: 475px;
	margin-left: -20px;
	margin-right: 20px;
}
#info dl {
	margin: 10px 10px 20px;
}
#info dt {
	border-left: 5px solid #e3e3e3;
	text-indent: 0.5em;
	font-weight: bold;
}
#info dd {
	margin-left: 13px;
}
#info dd span.deco {
	color: #F06;
	font-weight: bolder;
}

#reco {
	width:475px;
	height: auto;
	margin: 10px 20px 10px -20px;
}

#wrap_in {
	margin: 10px 0 20px;
	padding-bottom: 20px;
	width: 475px;
	height: auto;
	border-bottom: 2px dotted #666;
}

#wrap_in.cap {
	float: right;
	width: 315px;
	height: auto;
}
#wrap_in.cap h2 {
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size: 1.5em;
	color: #015791;
	font-weight: bold;
}

#wrap_in.ph {
	float: left;
	width: 150px;
	margin-right: 10px;
	background-color: #C60;
}

#wrap_in p {
	font-size: 0.9em;
}
#wrap_in p.price {
	color: #555;
	font-size: 0.875em;
	line-height: 2.0em;
}

/*ここからside*/
#side {
	float: left;
	margin-left: 20px;
	width: 195px;
}
#side ul li {
	display: block;
	margin-bottom: 10px;
}
/*wrapperおわり*/
#footer {
	clear: both;
	width: 720px;
	height: 62px;
	background-image: url(images/footer_back.gif);
  background-repeat: repeat-x;
}

#footer p {
	font-size: 0.875em;
	text-align: center;
	padding-top: 20px;
}

style.css

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

/* product */
div#main {
	width: 475px;
}
div#main ul {
  margin: 15px 0 20px 1em;
  font-weight: bold;
  font-size: 1em;
}
div#main ul li {
  margin: 0 0 16px;
}
div#main ul li a {
  color: #746224;
  text-decoration: none;
  background-image: url(images/mark.gif);
  background-repeat: no-repeat;
  background-position: left top;
  padding: 0 0 5px 20px;
}
div#main ul li a:hover {
  color: #ae2d56;
  text-decoration: underline;
}
div#wrap_in h3 {
	color: #fff;
	line-height: 32px;
	text-indent: 1.0em;
	background-image: url(images/bg_h3.jpg);
	margin-bottom: 10px;
}
/* item */
div#content {
	margin: 0 20px 10px -20px;
}
p.product_popular {
	font-size: 1.4em;
	font-weight: bold;
	color: #F03;
	margin: 20px 0 0 0;
	padding: 0 0 0 8px;
	border-left: 5px solid #F03;
}
div.product {
	border-bottom: dotted 1px #C0C0C0;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
h3.product_category {
  background-color: #9F8638;
  color: white;
  font-size: 16px;
  background-image: url(images/bg_h3.jpg);
  background-repeat: no-repeat;
  height: 33px;
  line-height: 33px;
  padding-left: 1em;
}
h3.product_category a {
	color: white;
}
h3.product_name {
	margin: 15px 0 6px 10px;
	font-size: x-large;
	color: #015790;
}
p.product_name a {
  font-size: 18px;
  font-weight: bold;
  font-family: "Times New Roman", Times, serif;
  text-decoration: none;
}
p.product_name a:hover {
  color: #ae2d56;
  text-decoration: underline;
}
p.product_price {
	font-size: 12px;
}

/* shop */
table {
	width: 476px;
}
td {
  border-right: 1px #B2B2B2 solid;
  border-bottom: 1px #B2B2B2 solid;
  width: 70%;
  background-color: #FFF;
  padding: 7px 5px 5px 1em;
  line-height: 1.3;
}
th {
  text-align: right;
  vertical-align: middle;
  width: 30%;
  border-right: 1px #B2B2B2 solid;
  border-bottom: 1px #B2B2B2 solid;
  background-color: #D0C89B;
  padding: 6px 1em 5px 5px;
}
p.map {
	text-align: center;
}

/* order */
form {
	margin: 0 0 0 14px;
}
form div {
	margin: 0 0 6px 0;
	display: block;
}

styleに関しては先生の解答があったので、使用させていただいて。
index以外のページは、この解答cssから逆算する形でhtml指定。
逆にbaseはほとんど自力なので、先生のstyleにbase絡みの項目を少し足してます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Wants Cake|ホーム</title>
<link rel="stylesheet" type="text/css" href="base.css">
</head>

<body>
<div id="container">
<h1><img src="images/logo.jpg" alt="Wants Cake"></h1>
<div id="nav">
<ul>
<li class="home"><a href="#" style="background-position: 0px -36px;">ホーム</a></li>
<li class="pro"><a href="products.html">商品のご案内</a></li>
<li class="shop"><a href="shop.html">店舗案内</a></li>
<li class="order"><a href="order.html">お問い合せ</a></li>
</ul>
</div>
<div id="bb"><img src="images/main_photo.jpg" width="680" height="236" alt="Wants Cakeイメージ"></div>
<div id="wrapper">
<div id="content">
<div id="info">
<img src="images/news_title.gif" alt="新着情報">
<dl>
<dt>2008.10.10</dt>
<dd>スペシャルキャンペーン期間中、お休みをさせて頂いておりました、<span class="deco">N.Y.チーズケーキ</span>、<span class="deco">レアチーズケーキ</span>のオーダー受付を再開させて頂きました。</dd>
<dt>2008.09.25</dt>
<dd><span class="deco">スペシャルキャンペーン</span>実施中！ 人気のケーキが<span class="deco">5%オフ</span>！</dd>
</dl>
</div>
<div id="reco">
<img src="images/recommend_title.gif" alt="おすすめ商品">
<div id="wrap_in">
<div class="ph"><img src="images/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ 商品写真"></div>
<div class="cap">
<h2>チーズスフレ</h2>
<p class="price">1個 480円</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<a href="item.html"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る"></a>
<a href="images/item_photo01.jpg"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る"></a>
</div>
</div>
<div id="wrap_in">
<div class="ph"><img src="images/top_item_photo2.jpg" width="150" height="120" alt="苺のバースデーケーキ 商品写真"></div>
<div class="cap">
<h2>苺のバースデーケーキ</h2>
<p class="price">1個 2,480円</p>
<p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<a href="item.html"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る"></a>
<a href="images/item_photo02.jpg"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る"></a>
</div>
</div>
<div id="wrap_in">
<div class="ph"><img src="images/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真"></div>
<div class="cap">
<h2>焼菓子の詰め合わせ</h2>
<p class="price">1箱 1,680円</p>
<p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<a href="item.html"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る"></a>
<a href="images/item_photo03.jpg"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る"></a>
</div>
</div>
</div>
</div>
<div id="side">
<ul>
<li><img src="images/banner01.jpg"></li>
<li><img src="images/banner02.jpg"></li>
</ul>
</div>
</div>
<div id="footer"><p>Copyright (C) 2008 Wants Cake Corporation. All Rights Reserved.</p></div>
</div>

</body>
</html>

products.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Wants Cake|products</title>
<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="container">
<h1><img src="images/logo.jpg" alt="Wants Cake"></h1>
<div id="nav">
<ul>
<li class="home"><a href="home.html">ホーム</a></li>
<li class="pro"><a href="#">商品のご案内</a></li>
<li class="shop"><a href="shop.html">店舗案内</a></li>
<li class="order"><a href="order.html">お問い合せ</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<div id="main">
<img src="images/item_title.gif" alt="商品のご紹介">
<ul>
<li>チーズケーキ</li>
<li>苺のバースデーケーキ</li>
<li>焼き菓子の詰め合わせ</li>
</ul>
</div>
<div id="wrap_in">
<h3>ショートケーキ</h3>
<div class="ph"><img src="images/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ 商品写真"></div>
<div class="cap">
<h2>チーズスフレ</h2>
<p class="price">1個 480円</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<a href="item.html"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る"></a>
<a href="images/item_photo01.jpg"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る"></a>
</div>
</div>
<div id="wrap_in">
<h3>バースデーケーキ</h3>
<div class="ph"><img src="images/top_item_photo2.jpg" width="150" height="120" alt="苺のバースデーケーキ 商品写真"></div>
<div class="cap">
<h2>苺のバースデーケーキ</h2>
<p class="price">1個 2,480円</p>
<p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<a href="item.html"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る"></a>
<a href="images/item_photo02.jpg"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る"></a>
</div>
</div>
<div id="wrap_in">
<h3>洋菓子</h3>
<div class="ph"><img src="images/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真"></div>
<div class="cap">
<h2>焼菓子の詰め合わせ</h2>
<p class="price">1箱 1,680円</p>
<p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<a href="item.html"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る"></a>
<a href="images/item_photo03.jpg"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る"></a>
</div>
</div>
</div>
<div id="side">
<ul>
<li><img src="images/banner01.jpg"></li>
<li><img src="images/banner02.jpg"></li>
</ul>
</div>
</div>
<div id="footer"><p>Copyright (C) 2008 Wants Cake Corporation. All Rights Reserved.</p></div>
</div>

</body>
</html>

item.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Wants Cake|item</title>
<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="container">
<h1><img src="images/logo.jpg" alt="Wants Cake"></h1>
<div id="nav">
<ul>
<li class="home"><a href="index.html">ホーム</a></li>
<li class="pro"><a href="products.html">商品のご案内</a></li>
<li class="shop"><a href="shop.html">店舗案内</a></li>
<li class="order"><a href="order.html">お問い合せ</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<img src="images/item_title.gif" alt="商品のご紹介">
<h3 class="product_name">チーズスフレ</h3>
<img src="images/item_photo01.jpg" width="475" alt="チーズスフレ 商品写真">
<p class="product_popular">当店人気メニュー！</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。チョコとオレンジのトッピングが、やわらかな味わいの中にアクセントを与えてくれます。</p>
<p>甘さ控えめとなっておりますので、カロリーが気になる方も安心です。お茶のお供にも是非どうぞ。</p>
<p class="product_price">価格：480円（税込）</p>
<a href="order.html"><img src="images/buy_btn.gif"></a>
</div>
<div id="side">
<ul>
<li><img src="images/banner01.jpg"></li>
<li><img src="images/banner02.jpg"></li>
</ul>
</div>
</div>
<div id="footer"><p>Copyright (C) 2008 Wants Cake Corporation. All Rights Reserved.</p></div>
</div>

</body>
</html>

shop.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Wants Cake|shop</title>
<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="container">
<h1><img src="images/logo.jpg" alt="Wants Cake"></h1>
<div id="nav">
<ul>
<li class="home"><a href="index.html">ホーム</a></li>
<li class="pro"><a href="products.html">商品のご案内</a></li>
<li class="shop"><a href="#">店舗案内</a></li>
<li class="order"><a href="order.html">お問い合せ</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<img src="images/shop_title.gif" alt="店舗案内">
<img src="images/shop.jpg" width="475" alt="店舗写真">
<table>
<tr>
<th>社名</th><td>ウォンツケーキ</td>
</tr>
<tr>
<th>住所</th><td>ウォンツ県一途市三番町4-1-3<br />ケーキビル1F</td>
</tr>
<tr>
<th>TEL</th><td>000-0000-0000</td>
</tr>
<tr>
<th>定休日</th><td>水曜日</td>
</tr>
<tr>
<th>営業時間</th><td>午前9:00〜午後8:00</td>
</tr>
</table>
<p class="map"><img src="images/map.png" width="475" alt="地図"></p>
</div>
<div id="side">
<ul>
<li><img src="images/banner01.jpg"></li>
<li><img src="images/banner02.jpg"></li>
</ul>
</div>
</div>
<div id="footer"><p>Copyright (C) 2008 Wants Cake Corporation. All Rights Reserved.</p></div>
</div>

</body>
</html>

order.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Wants Cake|order</title>
<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="container">
<h1><img src="images/logo.jpg" alt="Wants Cake"></h1>
<div id="nav">
<ul>
<li class="home"><a href="index.html">ホーム</a></li>
<li class="pro"><a href="products.html">商品のご案内</a></li>
<li class="shop"><a href="shop.html">店舗案内</a></li>
<li class="order"><a href="#">お問い合せ</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<img src="images/shopping_title.gif" alt="商品のご購入">
<form action="#" method="post">
<p>お名前：<input type="text" name="name" size="20" maxlength="10" value="お名前"></p>
<p>Eメール：<input type="text" name="name" size="20" value="Eメール"></p>
<p>郵便番号：<input type="text" name="name" size="10" maxlength="7" value="郵便番号">（ハイフンなし）</p>
<p>ご住所：<textarea name="subject" rows="5" cols="20">ご住所</textarea></p>
<p>注文商品<br />
  <input type="checkbox" name="mobile" value="1">チーズスフレ<select name="cheese">
  <option value="1" selected>1個</option>
  <option value="2">2個</option>
  <option value="3">3個</option>
  <option value="4">4個</option>
  <option value="5">5個</option>
</select><br />
  <input type="checkbox" name="mobile" value="2">バースデーケーキ<select name="birth">
  <option value="1" selected>1個</option>
  <option value="2">2個</option>
  <option value="3">3個</option>
  <option value="4">4個</option>
  <option value="5">5個</option>
</select><br />
  <input type="checkbox" name="mobile" value="3">洋菓子<select name="bis">
  <option value="1" selected>1個</option>
  <option value="2">2個</option>
  <option value="3">3個</option>
  <option value="4">4個</option>
  <option value="5">5個</option>
</select>
</p>
<p>当店をどこでお知りになりましたか？<br />
  <input type="radio" name="know" value="site">検索サイトから<br />
  <input type="radio" name="know" value="family">ご家族・ご友人から<br />
  <input type="radio" name="know" value="add">広告・チラシ等から<br />
  <input type="radio" name="know" value="other" checked>その他
</p>
<p><input type="submit" value="送信"></p>
</form>
</div>
<div id="side">
<ul>
<li><img src="images/banner01.jpg"></li>
<li><img src="images/banner02.jpg"></li>
</ul>
</div>
</div>
<div id="footer"><p>Copyright (C) 2008 Wants Cake Corporation. All Rights Reserved.</p></div>
</div>

</body>
</html>

細かい見た目調整などの余地はありまくり。
こんなこともできないのかっ、と自虐的になっていたら、
今回は「ガワ」が作れることが目的だとのことで、
そういう意味では達成できていたらしい。
…「なんでもできる」って険しい道のり。
富士山0.5合目くらいにはなってるといいなあ。