店舗:商品紹介

前のページ

ページの作成

商品の全体的なカタログを作成します。一覧で商品を並べて表示し、個別のページへのリンクを提供します。

「p1.html」をコピーして「p3.html」にします。
mainmenu(ID)部分については「index.html」からコピーしたものに入れ替えると良いでしょう。

実例

ヘッダーの修正

ヘッダの一部を変更します。

<h1 id="header">●●●●商店:商品カタログ</h1>

コンテンツ部の修正

mainmenu(ID)のメインコンテンツは、index.htmlで使った定番商品のテーブルを季節限定にも使います。
定番商品の下3つは内容を同じにして、上の2つと定番商品の2つを作ります。

<div id="mainmenu">
<div class="menutitle">季節限定</div>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td rowspan="2"><img src="img/104.png" width="49" height="100"></td>
<td><a href="s001.html" class="t_name">さくらソフトクリーム</a></td>
<td class="t_right">1個</td>
<td class="t_right">200円</td>
</tr>
<tr>
<td colspan="3">桜の風味を生かした4月限定のソフトクリーム。</td>
</tr>
<tr>
<td rowspan="2"><img src="img/108.png" width="100" height="100"></td>
<td><a href="s002.html" class="t_name">さくらかき氷</a></td>
<td class="t_right">1個</td>
<td class="t_right">350円</td>
</tr>
<tr>
<td colspan="3">春の暖かな日差しの中でかき氷を楽しみましょう。<br>
桜のシロップで春の香りも満喫できます。<br>
3月から5月までの季節限定です。</td>
</tr>
</table>
<div class="menutitle">定番商品</div>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td rowspan="2"><img src="img/001.png" width="100" height="100"></td>
<td><a href="w001.html" class="t_name">あんこぼたもち</a></td>
<td class="t_right">1個</td>
<td class="t_right">180円</td>
</tr>
<tr>
<td colspan="3">当店自慢の一品です。<br>
職人が1つ1つ丹精込めて作っています。</td>
</tr>
<tr>
<td rowspan="2"><img src="img/002.png" width="100" height="100"></td>
<td><a href="w002.html" class="t_name">きなこぼたもち</a></td>
<td class="t_right">1個</td>
<td class="t_right">180円</td>
</tr>
<tr>
<td colspan="3">当店自慢の一品です。<br>
職人が1つ1つ丹精込めて作っています。</td>
</tr>
<tr>
<td rowspan="2"><img src="img/003.png" width="100" height="100"></td>
<td><a href="w003.html" class="t_name">どら焼き</a></td>
<td class="t_right">1個</td>
<td class="t_right">150円</td>
</tr>
<tr>
<td colspan="3">当店自慢の一品です。<br>
職人が1つ1つ丹精込めて焼いています。</td>
</tr>
<tr>
<td rowspan="2"><img src="img/006.png" width="100" height="100"></td>
<td><a href="w006.html" class="t_name">三色団子</a></td>
<td class="t_right">1本</td>
<td class="t_right">80円</td>
</tr>
<tr>
<td colspan="3">お花見のお伴にも最適な三色団子です。<br>
ピンクは桜、白は雲、緑は若草をイメージしています。</td>
</tr>
<tr>
<td rowspan="2"><img src="img/007.png" width="100" height="100"></td>
<td><a href="w007.html" class="t_name">みたらし団子</a></td>
<td class="t_right">1本</td>
<td class="t_right">80円</td>
</tr>
<tr>
<td colspan="3">毎日1000本も売れているみたらし団子は、3本で150円。<br>
大人も子どもも大好きですよね。</td>
</tr>
</table>
</div>

次のページ

戻る