[ MENU PAGE ]     Step [1〜3][4][5][6][7][ホームページのUL方法]
Step 8  テーブル(表)を使ったデザイン/レイアウト
このStepではテーブルを使ったデザイン/レイアウトを説明します。
「Step5」でイメージの設置を行いましたが、実際イメージの配置/文章の配置など調整が難しく、思うように、うまくレイアウトができません。 そこでテーブルを使いイメージ配置/文章の配置を行います。
サンプルページ
サンプルページStep 8
アジサイの花は綺麗ですね。
サンプルページのソース
<html>
<head>
<title>サンプルページ</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><font size="7" color="#0000FF">サンプルページStep 8ー2<br>
</font>
<table width="534" border="2" height="112" cellpadding="5" cellspacing="4">
<tr>
<td width="200" height="245"><font size="4">アジサイの花は綺麗ですね。</font></td>
<td width="348" height="245"><img src="hana01.jpg" width="348" height="245"></td>
</tr>
</table>
</div>
</body>
</html>
サンプルページ2
サンプルページStep 8ー2
サンプルページ2のソース
<html>
<head>
<title>サンプルページ</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><font size="7" color="#0000FF">サンプルページStep 8ー2<br>
</font>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#66FFFF" width="50" height="50">
<div align="center">1</div>
</td>
<td width="50" height="50"> </td>
<td rowspan="5"><img src="hana01.jpg" width="348" height="245"></td>
</tr>
<tr>
<td width="50" height="50"> </td>
<td bgcolor="#3300FF" width="50" height="50">
<div align="center">2</div>
</td>
</tr>
<tr>
<td bgcolor="#FF99CC" width="50" height="50">
<div align="center">3</div>
</td>
<td width="50" height="50"> </td>
</tr>
<tr>
<td width="50" height="50"> </td>
<td bgcolor="#FFCCFF" width="50" height="50">
<div align="center">4</div>
</td>
</tr>
<tr>
<td bgcolor="#FFFF99" width="50" height="50">
<div align="center">5</div>
</td>
<td width="50" height="50"> </td>
</tr>
</table>
</div>
</body>
</html>
テーブルを使ったレイアウトのポイント
<table border="0" cellpadding="0" cellspacing="0">
全て"0"に、することによってテーブルの存在を表示画面から消すことができます。
サンプルページ3(リンクの追加)
サンプルページStep 8ー3
 
 
 
 
 
サンプルページ3のソース
<html>
<head>
<title>サンプルページ</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><font size="7" color="#0000FF">サンプルページStep 8ー3<br>
</font>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#66FFFF" width="50" height="50">
<div align="center"><a href="#">1</a></div>
</td>
<td width="50" height="50"> </td>
<td rowspan="5"><a href="#"><img src="hana01.jpg" width="348" height="245" border="0"></a></td>
</tr>
<tr>
<td width="50" height="50"> </td>
<td bgcolor="#3300FF" width="50" height="50">
<div align="center"><a href="#">2</a></div>
</td>
</tr>
<tr>
<td bgcolor="#FF99CC" width="50" height="50">
<div align="center"><a href="#">3</a></div>
</td>
<td width="50" height="50"> </td>
</tr>
<tr>
<td width="50" height="50"> </td>
<td bgcolor="#FFCCFF" width="50" height="50">
<div align="center"><a href="#">4</a></div>
</td>
</tr>
<tr>
<td bgcolor="#FFFF99" width="50" height="50">
<div align="center"><a href="#">5</a></div>
</td>
<td width="50" height="50"> </td>
</tr>
</table>
</div>
</body>
</html>
ソースの説明
<a href="#">1</a>

「"#"」にはジャンプ先URLを記述します。


このソースコードを「コピー」&「ペースト」で実行してみてください。 同じ結果が得られるはずです。
イロイロ試してみましょう。

ホームページ制作基礎編についての説明は、これで終了となります。 説明不足の点があると思いますがご勘弁下さい。 また、時間を見ては内容の更新を行いたいと思います。 長い時間お付き合いいただきありがとうございました。 

次のStepは制作したホームページをWeb上へのUL(アップロード)方法について説明します。
[ ホームページのUL方法へ ]
Copyright © 2000 asarinet,co.all rights reserved.