メニューとコンテンツの作成

メニューとコンテンツの作成
HPの作り方(簡単HP作成法)

HPの作り方TOP >メニューとコンテンツの作成

関連リンク

スポンサードリンク

メニューとコンテンツの作成

続いてメニュー1を作成していきます。

<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2"><img src="gif/4.gif" alt="sample page" width="150" /></td>
</tr>
<tr>
<td colspan="2">| Sample1 | Sample2 | Sample3 |</td>
</tr>
<tr>
<td>メニュー2</td>
<td>コンテンツ</td>
</tr>
<tr>
<td colspan="2">アドレス</td>
</tr>
</table>
sample page
| Sample1 | Sample2 | Sample3 |
メニュー2 コンテンツ
アドレス

メニュー1という文字が入っているtdと/tdで囲まれている場所に、|(たてぼう)とスペースで区切ってメニューを記述します。

メニュー2も同様にしてtdと/tdの間に記述しますが、ここでは、看板としてmenuの文字が入った画像を配置してみます。

改行をしたいので、改行のタグ、<br />を記述しています。

<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2"><img src="gif/4.gif" alt="sample page" width="150" /></td>
</tr>
<tr>
<td colspan="2">| Sample1 | Sample2 | Sample3 |</td>
</tr>
<tr>
<td><img src="gif/5.gif" alt="menu" width="40" /><br />・Lesson1<br />・Lesson2<br />・Lesson3</td>
<td>コンテンツ</td>
</tr>
<tr>
<td colspan="2">アドレス</td>
</tr>
</table>
sample page
| Sample1 | Sample2 | Sample3 |
menu
・Lesson1
・Lesson2
・Lesson3
コンテンツ
アドレス

次に適当に作成した画像をコンテンツの欄の上部に配置し、その下にそれっぽいコンテンツを記述します。

<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2"><img src="gif/4.gif" alt="sample page" width="150" /></td>
</tr>
<tr>
<td colspan="2">| Sample1 | Sample2 | Sample3 |</td>
</tr>
<tr>
<td><img src="gif/6.gif" alt="menu" width="40" /><br />・Lesson1<br />・Lesson2<br />・Lesson3</td>
<td>
<img src="gif/5.gif" alt="" width="100" height="" />
<br /> ■Lesson1<br />
<br />
Lesson1ではSample1を用いたHPの作成方法を解説しています。
<br />

</td>
</tr>
<tr>
<td colspan="2">アドレス</td>
</tr>
</table>
sample page
| Sample1 | Sample2 | Sample3 |
menu
・Lesson1
・Lesson2
・Lesson3

■Lesson1

Lesson1ではSample1を用いたHPの作成方法を解説しています。
アドレス

最後はアドレスの欄に著作権情報を記述したらおしまいです。

<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2"><img src="gif/4.gif" alt="sample page" width="150" /></td>
</tr>
<tr>
<td colspan="2">| Sample1 | Sample2 | Sample3 | </td>
</tr>
<tr>
<td><img src="gif/6.gif" alt="menu" width="40" /><br />・Lesson1<br />・Lesson2<br />・Lesson3</td>
<td>
<img src="gif/5.gif" alt="" width="100" />
<br /> ■Lesson1<br />
<br />
Lesson1ではSample1を用いたHPの作成方法を解説しています。
<br />
</td>
</tr>
<tr>
<td colspan="2"><address>Copyright(C) ○○○ all right reserved.</address></td>
</tr>
</table>
sample page
| Sample1 | Sample2 | Sample3 |
menu
・Lesson1
・Lesson2
・Lesson3

■Lesson1

Lesson1ではSample1を用いたHPの作成方法を解説しています。
Copyright(C) ○○○ all right reserved.

通常、著作権情報はaddressタグでくくり、ブラウザ上には斜体で表示されます。

Copyright @2007 nkdesk all right reserved.