Ⅷ-８　ページの上にフレームでバーを入れる

フレームの構造を変えて、ページの上にバーを入れたページを作成します。

１）フレームの構造を考えます

ここでは、上下２つのフレームに分けて、上にメニュー、下にコンテンツを表示するようにします。
そのため、上に表示するメニュー用のページと、下に表示するコンテンツは、
これまでに作成した「link.htm」を利用して作成します。【参考】
上のテーブルをメニューページとし、下のテーブルをメインページとします。

２）メニューページを作成します

まず、上のフレームに表示するメニューページを作成します。
まずメモ帳でlink.htmを開き、ファイル名を「menu-iro.htm」と指定して保存します。
ここでは上のテーブルをメニュー部分として、ソースとデザインを残して、関係の無い部分を削除します。
このときテーブルまわりの余白を取り除くため、body{margin:0}を追加します。【参考】

３）フレームで利用するための設定をします

<a>にtargetを追加し、リンク先を表示したいフレームの名前を指定します。
ここでは下のフレームに表示するために「iro」と指定しておきます。
また、table{～}にheightを設定を追加し、「150px」と指定します。
これはテーブルの高さをフレームの高さに合わせるためです。【参考】

<html>
<head>
<title>日本の伝統色</title>
<style type="text/css"></style>
</head>
<body>
<table class="head" cellspacing="0"><tr>
<td class="head1"rowspan="2"><h1>日本の伝統色</h1></td>
<td class="head2" colspan="8">幸いにも日本には、ずっと昔から大切にされてきた色の世界があります。
忘れかけている昔からの日本の色、もう一度見直してみませんか？
それぞれの色系統別にまとめています。クリックすればそのページが開きます。</td>　
</tr>
<tr><td><a href="aka.htm"target="iro">赤系統<img src="red.gif"></a></td>
<td><a href="daidai.htm"target="iro">橙系統<img src="orange.gif"></a></td>
<td><a href="tya.htm"target="iro">茶系統<img src="brown.gif"></a></td>
<td><a href="ki.htm"target="iro">黄系統<img src="yellow.gif"></a></td>
<td><a href="midori.htm"target="iro">緑系統<img src="green.gif"></a></td>
<td><a href="ao.htm"target="iro">青系統<img src="blue.gif"></a></td>
<td><a href="murasaki.htm"target="iro">紫系統<img src="purple.gif"></a></td>
<td><a href="hai.htm"target="iro">灰系統<img src="gray.gif"></a></td>
</tr>
</table>

</body>
</html>

４）下のフレームで表示するコンテンツページを作成します

「link.htm」のページの下のテーブルをコンテンツとして表示させます。
「link.htm」をメモ帳で開き、ファイル名を「iro.htm」と指定して保存します。
ソースとデザインを残して、関係の無い部分を削除します。
body{～}の中に、メニュー部分と同じく「;margin:0」を追加し、他のページと同じスクロールバーの設定も追加します。
「;scrollbar-base-color:#2e8056;scrollbar-track-color:#c8dad8;scrollbar-arrow-color:#2f2f63」【参考】【sauce】

５）フレームページを作成します

フレームの構造を指定するためのページを作成します。
前節で作ったフレームページを元に作成します。flame.htmをメモ帳で開きます。【参考】（表示→ソース）
「flame-iro.htm」として保存します。タイトルは「日本の伝統色」とします。
このとき、上下に分割したフレームを作成するため「cols」を「rows」に変更します。
上のフレーム名を「mokuji」下のフレーム名を「iro」とします。【参考】
フレームを読み込むページを修正していないため、前節のページ表示されています。

６）作成したページを表示します

作成したページをフレームに表示させるため、srcの値を「menu-iro.htm」と「iro.htm」に変更します。【参考】

７）スクロールバーの表示を消します

標準ではスクロールバーの表示エリアが確保されているため、上の右端が白く表示されています。
しかし、メニュー部分はフレームにぴったり収まるように作っているため、スクロールバーを使う必要がありません。
そこで、<frame>にscrollingの設定を追加し、値を「no」と指定します。

<html>
<head>
<title>日本の伝統色</title>
</head>
<frameset rows="150,*"border="0">
<frame src="flame-iro.htm" scrolling="no" name="mokuji">
<frame src="iro.htm" name="iro">
</frameset>
</html>

Ⅷ-８ ページの上にフレームでバーを入れる