フレームに挑戦だ |
---|
フレームのページというのは今あなたがご覧になっているように上下、または左右に
画面が分割されているページのことです。こんなページが作りたいという方のために
これから説明いたします。一部分、理解するのにヘビーなところもあります。
準備はよろしいですか?
まずは |
---|
<frameset>
ここにさまざまなタグを書き込む(のちほど説明)
</frameset>
フレームのページの基本となるタグです。 フレームのページには<body></body>タグは必要ありません。 そのかわりに<frameset></frameset>のタグを置くことになります。
画面の割りかた |
---|
<frame>タグに少し付け足していきます。
横割り 縦割り ______________________________ ______________________________ | | | | | | | | | | | | | | | | | | | | |----------------------------| | | | | | | | | | | | | | | | | | | | | | | | |____________________________| |_____________|______________|
<frameset rows="数字%,数字%"> <frameset cols="数字%,数字%">
<1> 数字は画面を分割する比率です。当たり前のことですが、数字合計は100にして下さい。
<2> 数字%が2つの組み合わせなら2分割、3つの組み合わせなら3分割になります。
3分割の時も合計は100になるようにして下さい。
初期画面のフレーム内に表示させるページの指定 |
---|
ここでは上下に50%、50%の2分割の例ですすめます。
<frameset rows="50%,50%">
<frame src="上段に表示させるページ名.html" name="お好きなウインドウ名">
<frame src="下段に表示させるページ名.html" name="お好きなウインドウ名">
</frameset>
<1> 2分割の場合は<frame src=・・・>の部分が2段になり、3分割の時は3段になります。
<2> 「上段に表示させるページ名.html」には上段に表示させたいページ名を書きます。下段も同様です。
<3> 「name="お好きなウインドウ名"」には上段のウインドウ(窓)の名前を書きます。
(ただし半角英数字)。これはあくまで窓の名前です。ですから[window1]とか[windou2]とすれば分かりやすいでしょう。
<4> <3>で付けた名前があとで効いてきます。リンクさせたページをどのウインドウに表示させるかは
このウインドウ名を後々指定することにより決定します。
リンク先のページをどのウインドウに表示させるのか |
---|
<a href="リンクページ" target="表示させたいウインドウ名">リンクのボタン</a>
<1> あなたのさまざまなページにリンクのボタンがあると思います。タグはいつもといっしょですが
1つ「target="表示させたいウインドウ名"」というのが書き加えられています。
<2> ここで指定したウインドウにリンクページが表示されます。
実際にやってみよう |
---|
タグはもちろんこうです。
こんどは「link2.html」というリンクページを「window1」という上段の窓に表示させてみます。
タグはもちろんこうです。
上段・下段に表示させる方法は、わかりましたね。最後の3つめは、フレーム内に表示させるのではなく、全く新しい、
もう1つのブラウザを開かせそこに表示させる方法です。「link3.html」というページを新しいブラウザに表示
させて見ましょう。
タグはこうです。下記「TOP」の文字は必ず大文字にしてください。
ねっ。新しいブラウザが開いたでしょ。よーくわかりましたね。それでは次いきます。
これを1つ置くだけでOKです。<body>タグのあとに置いて下さい。
<1> <noframes></noframes>の間に、フレームを認識しないブラウザのために
普通文の<body>以降を挿入します。
<frame src="ページ名.html" name="ウインドウ名" marginwidth=数字 marginheight=数字 scrolling="yes/no/auto" noresize>
<1> 「marginwidth=数字」・・・フレーム内の左側にスペースを作ります。
上図のタグはこうです。
フレームについてはこれにて終了!消化しきれましたか?少々心配・・・。
それでは「link1.html」というリンクページを「window2」という下段の窓に実際に表示させてみます。
表示させる基本のウインドウが同じ場合
同じページのどのリンク先も、同一ウインドウに表示させてよい場合は、それぞれのリンクのタグに
いちいち「target=・・・」と書く必要はありません。1つ書くだけで済んでしまうタグがあります。
フレームを認識しないブラウザのために
フレームを認識しないブラウザのために、普通のページを貼り付けます。
<html>
<head>
<title>ページタイトル</title>
</head>
<frameset rows="50%,50%">
<frame src="ページ名" name="ウインドウ名">
<frame src="ページ名" name="ウインドウ名">
<noframes>
<body>
フレームを認識しないブラウザのための普通ページの挿入
</body>
</noframes>
</frameset>
</html>
<2> こうすることにより認識しないブラウザでは、認識出来ないタグはすべて無視されますので、
<frameset>などのタグは無視され、フレームなしの通常ページとして認識されるのです。
<3> もし普通文の挿入をしなければフレームを認識出来ないブラウザでは、認識すべきもの
がないということになり、そのページは、まったく表示されず、ないものとみなされますので注意。
<frame src=・・・>タグへの指定の付け足し
たとえば、こうです。
<2> 「marginheight=数字」・・・フレーム内の上部にスペースを作ります。
<3> 「scrolling="yes/no/auto"」・・・ページがフレーム内に収まりきらない場合スクロールバーを
付けるかどうかの指定です。「yes」はバーが付きますが、もしフレーム内に収まってもバーは付いたままです。
「no」はバーがつかずスクロール出来ません。「auto」はそのページの状況により対応します。ちなみに
この指定がまったくない時は自動的に「auto」となっております。
<4> 「noresize」・・・この設定がないと、画面を見ている人は自由にフレームを広げたり、狭くしたりできます。
フレームを固定したい時はこの設定を書いて下さい。
複雑な画面分割
________________________________
| | | |
| | | |
|______________| |_______|
| | | |
| |_______| |
| | | |
|______________| |_______|
| | | |
| | | |
|______________|_______|_______|
<frameset cols="50%,25%,25%">
<frameset rows="30%,40%,30%">
<frame src=・・・>
<frame src=・・・>
<frame src=・・・>
</frameset>
<frameset rows="50%,50%">
<frame src=・・・>
<frame src=・・・>
</frameset>
<frameset rows="30%,40%,30%">
<frame src=・・・>
<frame src=・・・>
<frame src=・・・>
</frameset>
</frameset>