ホームページを作る上での基本形に、ヘッダー＋フッター＋２カラムの形がありますね。
よくブログでみかけるこの形です。
ブログはCSSデザインで構築してある場合がほとんどですが、初心者にとってCSSデザインを覚えるのは壁が高い・・・かも？？
というわけで、初心者さんにオススメなのがテーブルを使って作る方法。
今回はテーブルデザインのポイントと初心者さんが間違いやすい部分のお話です。
（１）基本形はこれになります
ソース
<table width="500" border="1">
<tr>
<td height="22" colspan="2">ヘッダー</td>
</tr>
<tr>
<td width="129">サイドナビ</td>
<td width="355">メイン</td>
</tr>
<tr>
<td colspan="2">フッター</td>
</tr>
</table>
（２）１を改良するコツとしては、すべてのセルに valign="top"を入れて上にくるようにすること
<table width="500" border="1">
<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="132" height="113" valign="top">サイドナビ</td>
<td width="352" valign="top">メイン</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>
（３）で、サイドナビを入れたいですよね・・・。基本枠の中にさらに枠を作りたいときの基本は、こんなふうにするのではなく
（これは悪い例です）
<table width="500" border="1">
<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="145" valign="top">メイン</td>
<td width="339" rowspan="5" valign="top">メニュー１</td>
</tr>
<tr>
<td valign="top">メニュー２</td>
</tr>
<tr>
<td valign="top">メニュー３</td>
</tr>
<tr>
<td valign="top">メニュー４</td>
</tr>
<tr>
<td valign="top">メニュー５</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>
（４）このように、さらに中にテーブルを入れると制御しやすくなります
<table width="500" border="1">
<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="203" height="113" valign="top"><table width="200" border="1">
<tr>
<td>メニュー１</td>
</tr>
<tr>
<td>メニュー２</td>
</tr>
<tr>
<td>メニュー３</td>
</tr>
<tr>
<td>メニュー４</td>
</tr>
<tr>
<td>メニュー５</td>
</tr>
</table></td>
<td width="281" valign="top">メイン</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>
制御しやすいからと、テーブルの入れ子入れ子入れ子・・・をどんどん繰り返していると、
複雑なソースになって、あとで修正したいときなどに混乱する場合もあるので
入れ子は最低限に使うようにしましょう。
この方法の応用編を動画マニュアルにて解説しています。
ドリームウィーバーを使ったテーブルデザインの方法
（１）から（６）まで順番で見ていただくと、どんな手順でやったら効率が良いかわかっていただけると思います。
0 件のコメント:
コメントを投稿