フレームタグは、<frameset>〜</frameset>です。
ここでは、表示させるhtmlを「f_a.html」,「f_b.html」としそれぞれ「mane」を「a」,「b」とします｡
注意したいことは<body>タグで、<frameset>タグの後に記述しないと
Netscapeでは、フレームが表示されなくなります。
-
<html>
<title>***</title>
<frameset rows="*,145"> ←縦に分割したい時は、｢rows｣でなく｢cols｣を使う
<frame src="f_a.html" name="a">
<frame src="f_b.html" name="b">
</frameset>
<body bgcolor="#000000">←フレームボーダーの色になる
</body>
</html>
上記の記述で<frameset rows="*,145">
がありますが、「f_a.html」,「f_b.html」それぞれのの画面の大きさを
"*,145"で指定してます。これは、「f_b.html」の画面サイズを145としていて見本を見て分かると思いますが
ブラウザを小さくしても「f_b.html」の画面サイズは、145(ドット)のままです。
これを「％」で指定します。 「f_a.html」を65%としてみます。通常は「％」指定が多いですが、
後で述べる「scrolling="no"」と言う記述をする時に使いたくなる時があります。これを使い分けると結構良いFramePageが、
出来ると思います。
(「"65%,*"」,「"65%,35%"」,「"*,35%"」どれも良い)
<frameset rows="65%,*">
<frame src="f_a.html" name="a">
<frame src="f_b.html" name="b">
</frameset>
これで、ブラウザを大小させてみて下さい。違いが分かります。
|
.
今度は、三つに割りましょう。先ほどは横で割ったので縦で割ってみます。
三つに割るので数値記述も三で「"*,*,*"」となり、
ここに「"18%,66%,16%"」とそれぞれの画面の大きさを指定します。
<frameset cols="18%,66%,16%">
<frame src="f_1.html" name="1">
<frame src="f_2.html" name="2">
<frame src="f_3.html" name="3">
</frameset>
これを記述した物を仮に「frame3.html」と名前を付けてみます。
|
.
ここで、最初に作った二分割した「a」の部分に先ほど作った三分割した「frame3.html」を
指定します。
<frameset rows="*,145">
<frame src="frame3.html" name="a">
<frame src="f_b.html" name="b">
</frameset>
これで、私のHomePageと同じ分割が出来ました。
|
.
ａ.四分割
「３.フレームの中にフレームを表示」では、二つのフレームを使い四つに分割しましたが、
今度は、いきなり四つに割ります。まず最初に作ったのが
<frameset rows="*,145">
<frame src="f_a.html" name="a">
<frame src="f_b.html" name="b">
</frameset>
です。
この「a」の部分を三分割したいのですから上記の緑の文字の記述の所に
先ほど三分割した記述の
<frameset cols="18%,66%,16%">
<frame src="f_1.html" name="1">
<frame src="f_2.html" name="2">
<frame src="f_3.html" name="3">
</frameset>
を、そのまま入れ替えます。すると以下の様な書き方になります。
<frameset rows="*,145">
<frameset cols="18%,66%,16%">
<frame src="f_1.html" name="1">
<frame src="f_2.html" name="2">
<frame src="f_3.html" name="3">
</frameset>
<frame src="f_b.html" name="b">
</frameset>
「３.フレームの中にフレームを表示」での分割と見分けるのは
ちょっと難しいのでソースを見るしかないでしょう。
又、他の記述でも割れますがInternet Explorerで表示しても、
Netscapeでは表示できなくなる場合もありますので注意してください。
|
.
ｂ.五分割その１
ここでは、「４.分割の応用」ａ.四分割で作ったソースを使いさらに上段中央の「2」を
分割します。
<frameset rows="*,145">
<frameset cols="18%,66%,16%">
<frame src="f_1.html" name="1">
<frame src="f_2.html" name="2">
<frame src="f_3.html" name="3">
</frameset>
<frame src="f_b.html" name="b">
</frameset>
先ほどの要領と同じです。この上記の緑の文字の記述の所「2」を
二分割する記述と入れ替えるだけです。仮に「rows="20%,*"」しましょう。
<frameset rows="20%,*">
<frame src="f_a.html" name="a">
<frame src="f_2.html" name="2">
</frameset>
とします。これと入れ替えて
<frameset rows="*,145">
<frameset cols="18%,66%,16%">
<frame src="f_1.html" name="1">
<frameset rows="20%,*">
<frame src="f_a.html" name="a">
<frame src="f_2.html" name="2">
</frameset>
<frame src="f_3.html" name="3">
</frameset>
<frame src="f_b.html" name="b">
</frameset>
後は、何も言いません。とりあえず見本を見てみましょう。
|
.
ｃ.五分割その２
今度は、新たに作って見ましょう。まず横割り三分割を「"20%,50%,30%"」として
ソースを書いてみます。
<frameset rows="20%,50%,30%">
<frame src="f_a.html" name="a">
<frame src="f_b.html" name="b">
<frame src="f_c.html" name="c">
</frameset>
この三分割の中央の「f_b.html」が表示される場所を、
更に縦に三分割したいと思います。
<frameset cols="20%,60%,20%">
<frame src="f_1.html" name="1">
<frame src="f_2.html" name="2">
<frame src="f_3.html" name="3">
</frameset>
として、そのまま入れ替えます。
<frameset rows="20%,50%,30%">
<frame src="f_a.html" name="a">
<frameset cols="20%,60%,20%">
<frame src="f_1.html" name="1">
<frame src="f_2.html" name="2">
<frame src="f_3.html" name="3">
</frameset>
<frame src="f_c.html" name="c">
</frameset>
まあ、見本を見ましょう。
|
続きは、次のPAGEへ
|
