メニューを作成し、トップページを完成させる
演習1.9 メニューを作成し、トップページを完成させる
☑<table>タグの属性
cellpadding, cellspacing, td bgcolor
続いて、他のページにリンクするためのメニューを作成します。ここでもテーブルを利用して、下図のような、「トップページ」、「子猫写真」、「子犬写真」からなるメニューを作成していきます。
図 1.9.1
1. メニュー用のテーブルを作成する
早速、メニュー部分となる1行・3列の表のテーブルを作成していきます。
以下のように、「かわいい動物たちの写真館」という見出しの下に新しく記述を追加して、メニューとなるテーブルを作成しましょう。
➢ index.html (※必要部分のみ記載)
~前略~ <body bgcolor="#FFFFCC"> <center> <h1><font color="#2A7e55">子猫と子犬の部屋</font></h1> <h3><font color="red">かわいい動物たちの写真館</font></h3> <table border="3" cellpadding="4" cellspacing="4” width="660"> <tr> <td width="220" align="center"><strong><font color="#FFFFFF">トップページ</font></strong></td> <td width="220" align="center"><strong><font color="#FFFFFF">子猫写真</font></strong></td> <td width="220" align="center"><strong><font color="#FFFFFF">子犬写真</font></strong></td> </tr> </table> <br> <img src="img/img01.jpg" border="0" alt="メイン写真"><br><br> ~後略~
上の記述を追加したことで、メニュー用のテーブルが作成されました。しかし、この時点で、ブラウザで確認すると、次の図のように、文字が白いために、背景の色とかぶってしまい、何が書かれているのかがわからない状態となっています。
文字が見えるように、メニューの背景を別の色にします。
図 1.9.2
2. メニューの背景に色をつける
では、以下のように、メニュー部分のテーブルの<td>タグにbgcolor属性を追加して、背景の色をつけましょう。次のように、記述を追加してください。
➢ index.html (※必要部分のみ記載)
~前略~ <td width="220" align="center" bgcolor="#333333" ><strong><font color="#FFFFFF">トップページ </font></strong></td> <td width="220" align="center" bgcolor="#333333" ><strong><font color="#FFFFFF">子猫写真</font></strong></td> <td width="220" align="center" bgcolor="#333333" ><strong><font color="#FFFFFF">子犬写真</font></strong></td> ~後略~
それぞれの<td>タグに、「bgcolor=”#333333″」という属性を追加しました。
3. HTMLファイルを保存
ここまでの記述が終わったら、上書き保存をしてください。
4. ブラウザで表示
では、ここまで記述した内容がブラウザでどのように表示されるか、確認してみましょう。
図 1.9.3
メニュー部分の背景に、濃いグレーの色がつき、メニューに書かれた文字がはっきりとわかるようになりました。また、ページ全体に、色のメリハリがついて、全体的に締まった雰囲気になりました。
これで、トップページが一通り完成しました。