現在までで何も無い部分に色をつけていく。
実際に色付けする部分は、テーブルの２段目の一番左と、３段目全部である。
なお、今回はテーブルの背景色を変更するだけでよい。
前者を濃い茶色、後者を薄い茶色とし、
背景色を分かりやすくするために、
３段目に改行を２０個ほど埋め込むことにした。
タグは
--------------------------------------------------------------------
<div align="center">
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5"><img src="ロゴの場所" width="700" height="100"></td>
</tr>
<tr>
<td width="268" bgcolor="#663300"> </td>
<td width="108" bordercolor="#000000"><a href="#" onMouseover="swImg('img1','マウスが乗ったときのtopボタンの場所')" onMouseout="swImg('img1','通常時のtopボタンの場所')"><img src="通常時のtopボタンの場所" width="108" height="35" name="img1" border="0"></a></td>
<td width="108" bordercolor="#000000"><a href="#" onMouseover="swImg('img2','マウスが乗ったときのdesignボタンの場所')" onMouseout="swImg('img2','通常時のdesignボタンの場所')"><img src="通常時のdesignボタンの場所" width="108" height="35" name="img2" border="0"></a></td>
<td width="108" bordercolor="#000000"><a href="#" onMouseover="swImg('img3','マウスが乗ったときのaboutボタンの場所')" onMouseout="swImg('img3','通常時のaboutボタンの場所')"><img src="通常時のaboutボタンの場所" width="108" height="35" name="img3" border="0"></a></td>
<td width="108" bordercolor="#000000"><a href="#" onMouseover="swImg('img4','マウスが乗ったときのaboutボタンの場所')" onMouseout="swImg('img4','通常時のbbsボタンの場所')"><img src="通常時のbbsボタンの場所" width="108" height="35" name="img4" border="0"></a></td>
</tr>
<tr bgcolor="#996633">
<td colspan="5"> <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br></td>
</tr>
</table>
</div>
--------------------------------------------------------------------
こうなる。
ここで、スタールシートを用いて背景色を指定する。
→→「TIPS HTMLタグ、スタイルシート、ジャバスクリプト」参照
タグは、<head>と</head>の間（jabascriptの後ろか前）に
--------------------------------------------------------------------
<style type="text/css">
<!--
body {
background-color: #E1D7A4;
}
-->
</style>
--------------------------------------------------------------------
を埋める。（納得いく色が無かったので背景色はウェブセーフカラーを外しました。）
→→「TIPS ページの配色法」を参照。
そうすれば、このようになっているはず。
次の項でテキストエリアを作って完成です。
次へ（テキストエリアを作る→完成）
戻る |
