8.フレームに挑戦


ここからは高度なテクニックと思考能力を要します。

フレームとは、複数のページを1画面に表示させるものです。
この講座はフレームを使っています。お分かりになりますでしょうか。
上のタイトルの部分のページ、左のメニューのページ、そしてここ説明するページ
の3つのページが1画面に表示されています。

フレームファイルというものが必要になります。
フレームファイルは、フレームに分割するページを指定するためのものなので、画面には現れません。

実際に作っていきましょう。


まず、フレームファイル「frame.html」を作ります。以下をコピーしてください。
<html> <head> <title></title> </head> <frameset cols="30%,*"> <frame src="left.html"> <frame src="right.html"> </frameset> </html> お気づきだと思いますが、フレームファイル内にはbodyタグがありません。
bodyタグを使うことによって画面に文章を表示させていたのですから、
bodyタグの無いフレームファイルが画面に現れないのは当然だと分かるわけです。

cols
 ・・・ 
横分割する」という意味です。「rows」に変えることで「縦分割」になります。

frame src="ファイル名"
 ・・・ 
ここに分割して表示したいファイル名を書きます。
ここに書くファイルは今まで作ってきた普通のファイルです。
横分割の場合、一つ目に書いたファイルが左に表示され、
縦分割の場合、一つ目に書いたファイルが上に表示されます。

なので、ひとつめに「left.html」という名前を付けました。

30%、*
 ・・・ 
これは、一つ目のファイルを30%の幅で表示し、二つ目を残りの%で表示する、という意味です。


「frame.html」「left.html」「right.html」3つのファイルを作り、実践してみてください。



この講座のように、左メニューの各項目を押すと、指定したページが右に現れる、というリンクフレームを作りましょう。 <frameset cols="30%,*"> <frame src="left.html"> <frame src="right.html" name="yamada"> </frameset> 表示させたい方向(今回は右側)に「name=""」を上のように挿入します。
フレームファイルはこれだけ設定すればよいです。

次に、左側のファイル「left.html」を編集します。
<a href="2.html" target="yamada">2.文字をいじる</a> <a href="3.html" target="yamada">3.画像を使ってみる</a> <a href="4.html" target="yamada">4.表を作ってみる</a> まず普通にページを作り、リンクを貼ります。
そして、右側に表示させたいリンクの中に、「target=""」を挿入するのです。
さきほど、「name="yamada"」としましたから「target="yamada"」としなければなりません。



やってみて、うまくいかなくても、何度も繰り返しトライしてください。
私もイライラするほど全然出来ませんでしたが、よく読み、考えてやっていけば必ず出来るようになります。




フレームで制作されたページを開く事の出来ないパソコンがあります。
そういう人たちのために以下のタグを挿入してあげてください。
<noframe> このページはフレームを使用しております。 </noframe> 文章はもちろん変えられます。



フレームで作ったページには、縦又は横に灰色の立体的なラインが表示されます。
そのラインが境界線となっているわけですが、このラインはマウスで動かすことが出来ます

しかし、レイアウトにうるさい人なら思うと思いますが、勝手に動かされて
デザインを壊してほしくないですよね。
そういう人のために、ラインを動かせなくすることが出来ます。 <frame src="" noresize> こうすることで、もう二度と動くことはありません。



境界線を消すことも出来ます。
この講座は境界線を消してあるので綺麗にフレーム分割されています。
<frameset cols="30%,*" FRAMESPACING=0 BORDER=0 FRAMEBORDER=0> <frame src="left.html" FRAMEBORDER=0> <frame src="right.html"> </frameset> frameset には、FRAMESPACING=0 BORDER=0 FRAMEBORDER=0 、
frame には、FRAMEBORDER=0
を挿入します。これで境界線が消えました。




スクロールバーを表示させないことが出来ます。 <frame src="right.html" SCROLLING="NO"> これでどんなに長い文章を書いてもスクロールバーは表示されません。



左側のページに、ヤフーへのリンクを張ったとします。
クリックします。
すると、左側しかヤフーへ飛びません。
とても見にくい、というかこれではとても困りますね。
<a href="" target="_top"></a> とすることで左側だけではなく、ちゃんと全体がヤフーへ飛ぶようになります。
<a href="" target="_brank"></a> こうすると、新しいウインドウを開きます。



ページの左右と上に、若干のスペースがある事に気付きましたでしょうか。
デザインを追及する上で、このスペースを詰めたいな、と思うことがあります。 <frame src="right.html" marginwidth=0 marginheight=0> こうすることで、びっちり詰める事が出来ます。
試してみてください。



次は9へゴ→

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送