店舗：商品紹介

さくらソフトクリームのページを作成

季節限定商品を紹介するページを作成します。

１つ目は、さくらソフトクリームのページです。
「w001.html」をコピーして「s001.html」にしましょう。

コンテンツ部の修正

まずは商品の写真や説明文などを入れ換えます。

作り方の説明を付け加えるため、タイトルとYoutubeの動画を入れます。
練習用ですので、動画は「ソフトクリームの作り方」で検索したものを使っています。アカウントを登録すると自分で撮影した動画をアップロードして貼り付けることもできます。
最適な動画を見つけ「共有」「埋め込みコード」というボタンを押すと<iframe>が表示されますので、これをコピーして貼り付けます。

動画の代わりに、テーブルを組んで画像と解説文を並べても良いでしょう。

<div id="mainmenu">
	<div class="menutitle">さくらソフトクリーム</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<th>写真</th>
			<td><img src="img/104.png" width="49" height="100"></td>
		</tr>
		<tr>
			<th>説明文</th>
			<td>桜の風味を生かした4月限定のソフトクリーム。</td>
		</tr>
		<tr>
			<th>単価</th>
			<td>200円</td>
		</tr>
		<tr>
			<th>原材料</th>
			<td>牛乳、砂糖、卵、さくらペースト</td>
		</tr>
		<tr>
			<th>提供時期</th>
			<td>4月1日～4月30日</td>
		</tr>
		<tr>
			<th>備考</th>
			<td>長野県産の牛乳を使っています。さくらペーストには国産の天然さくらエキスを使用。</td>
		</tr>
	</table>
	<div class="menutitle">作り方</div>
	<iframe width="420" height="315" src="http://www.youtube.com/embed/R7XFNBNKld0" frameborder="0" allowfullscreen></iframe>
</div>

さくらかき氷のページを作成

2つ目の商品として、さくらかき氷のページを作成します。
「s001.html」をコピーして「s002.html」とします。

実例

コンテンツ部の修正

写真、説明文、単価、提供時期など必要箇所を手直します。

<div id="mainmenu">
	<div class="menutitle">さくらかき氷</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<th>写真</th>
			<td><img src="img/108.png" alt="" width="100" height="100"></td>
		</tr>
		<tr>
			<th>説明文</th>
			<td>春の暖かな日差しの中でかき氷を楽しみましょう。<br>桜のシロップで春の香りも満喫できます。<br>3月から5月までの季節限定です。</td>
  		</tr>
		<tr>
			<th>単価</th>
			<td>350円</td>
    	</tr>
		<tr>
			<th>原材料</th>
			<td>氷、さくらシロップ（さくらエキス、アーモンドエキス、甜菜糖）</td>
		</tr>
        <tr>
			<th>提供時期</th>
			<td>3月1日～5月31日</td>
    	</tr>
		<tr>
			<th>備考</th>
			<td>氷は井戸水から作っています。</td>
		</tr>
	</table>
	<div class="menutitle">作り方</div>
	<iframe width="420" height="315" src="http://www.youtube.com/embed/mB7FeohnU1A" frameborder="0" allowfullscreen></iframe>
</div>

戻る