フレームメニューを使ってみる
フレームってのはですね、ひとつのページに二つのhtmファイルを表示するやつです。
空色装填でも、左にメニューのhtmファイル、右にコンテンツのhtmファイルを表示していますね。
で、メニューは変わらずにコンテンツのhtmファイルだけが入れ替わっていきます。
製作側はいちいちページごとにリンクを書かなくて良いのでかなり楽です。
見る側もコンテンツをスクロールせずにメニューを操作できるので楽です。
では早速作ってみましょう。
必要なのはメニューのhtmファイル、コンテンツのhtmファイル、フレームのhtmファイルです。
フレームのhtmファイルからメニュー、コンテンツを読み込む形になるわけです。
コンテンツのhtmファイルは特に変えなければいけないところはありません。
フレームのhtmファイル
今までやってきたhtmファイルとはかなり違います。
なのでとりあえずコピー、貼り付けでどうぞ。
<html>
<head>
<title>タイトル</title>
</head>
<frameset cols="175,*">
<frame src="メニューのアドレス" name="メニューのフレームの名前" frameborder=0>
<frame src="最初に表示するコンテンツのアドレス" name="コンテンツのフレームの名前" frameborder=0>
</frameset>
<noframe>
<body>
<font size=1>!!フレーム対応ブラウザでご覧下さい!!</font>
</body>
</noframe>
</html>
太字の部分を変えて使いますが、解説しましょう。
cols="175,*"の部分ですが、これは
横分け、左フレーム175ピクセル、右フレームは残り
という意味です。
rows="150,200,*"なら
縦分け、上フレーム150ピクセル、真ん中のフレーム200ピクセル、下フレーム残り
という意味になります。でもまぁ使う大体が2分割だけでしょうね。
メニューのアドレスは、そのまんま。リンクするときに使うようなアドレスです。
メニューのフレームの名前は、後で必要になったり。ここではmenuとしときます。
コンテンツも同様。名前はcontentとします。
メニューのhtmファイル
普通のページにリンクを貼りまくるだけですが、リンクを
<a href="ページのアドレス" target="変えたいフレーム">リンクにする文章</a>
と書く必要があります。普通のリンクに「target=」の部分を加えただけです。
この変えたいフレームのところに、フレームの名前を入れてみましょう。今回は「content」でしたね。
これで右のフレームだけが変わります。target=を抜くとメニューのフレームが変わってしまいます。
さぁ、完成です。フレームのhtmファイルから開いてみましょう。
ちゃんと表示されるハズです。
リンクは、新しいウィンドウで開きたいときはtarget="_blank"、フレームを解除して表示したいときはtarget="_top"とすればOKです。
←FirstStepのまとめ+a
メニューへ
スタイルシート(CSS)を使う→