店舗：店舗紹介

ページの作成

店舗の営業時間や会社の基礎データを紹介します。

「index.html」をコピーして「p1.html」とします。デザインを踏襲させるので、コンテンツ部分だけを入れ替えて作業を簡便化しましょう。

ヘッダーの修正

<body>内、ヘッダーの部分から画像を外し、次のようにタイトルを変更しましょう。

<h1 id="header">●●●●商店：店舗紹介</h1>

メニュー部の修正

leftmenu（ID）のあるメニュー部からリンクのメニューだけを残して他の項目を消します。
トップページへ戻るリンクを追加しておきます。

<div id="leftmenu">
	<div class="menutitle">メニュー</div>
	<div><a href="index.html" class="menulink">トップページ</a></div>
	<div><a href="p1.html" class="menulink">店舗紹介</a></div>
	<div><a href="p2.html" class="menulink">案内地図</a></div>
	<div><a href="p3.html" class="menulink">商品カタログ</a></div>
	<div><a href="p4.html" class="menulink">社長の部屋</a></div>
	<div><a href="p5.html" class="menulink">職人の工房</a></div>
	<div><a href="p6.html" class="menulink">地域の名所</a></div>
</div>

コンテンツ部の修正

mainmenu（ID）のメインコンテンツを入れ替えます。
中のテーブルはそっくり入れ替わっています。menutitile（クラス）の部分も変更しています。

<div id="mainmenu">
	<div class="menutitle">営業のご案内</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<td rowspan="6"><img src="img/shop01.gif" width="150" height="120"></td>
			<td class="t_right">店舗名：</td>
			<td>駅前本店</td>
		</tr>
		<tr>
			<td class="t_right">営業時間：</td>
			<td>朝８時３０分～夕方６時３０分</td>
		</tr>
		<tr>
			<td class="t_right">定休日：</td>
			<td>年中無休（年末年始は休み）</td>
		</tr>
		<tr>
			<td class="t_right">最寄り駅：</td>
			<td>JR●●駅より徒歩２分</td>
		</tr>
		<tr>
			<td class="t_right">所在地：</td>
			<td>●●県●●市●●町1-1</td>
		</tr>
		<tr>
			<td class="t_right">電話番号：</td>
			<td>０００－０００－００００</td>
		</tr>
	</table>

	<div class="menutitle">会社のご案内</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<td rowspan="6"><img src="img/shop01.gif" width="150" height="120"></td>
			<td class="t_right">会社名：</td>
			<td>株式会社●●●●商店</td>
		</tr>
		<tr>
			<td class="t_right">営業内容：</td>
			<td>和菓子の製造・販売</td>
		</tr>
		<tr>
			<td class="t_right">創業：</td>
			<td>昭和35年</td>
		</tr>
		<tr>
			<td class="t_right">資本金：</td>
			<td>5000万円</td>
		</tr>
		<tr>
			<td class="t_right">所在地：</td>
			<td>●●県●●市●●町1-1</td>
		</tr>
		<tr>
			<td class="t_right">電話番号：</td>
			<td>０００－０００－００００</td>
		</tr>
	</table>
</div>

フッタ部分はそのまま残します。

戻る