【８】フレームの活用

○基礎知識

１．『フレーム』とは、一つのウィンドウを分割して、それぞれの領域に別々のページ
    を表示させる機能のことです。　　　　

２．『フレーム』を設定するには、「フレームを定義するページ（ファイル）」と「そ
　　れぞれのフレームに表示させるページ（ファイル）」が必要になります。

３．「index.html」ファイルは、ＨＰの先頭のファイルで、ＨＰのアドレスを入力する
　　とこのファイルにアクセスします。　

　☆今回は「index.html」ファイルを、「フレームを定義するページ」とします。そし
　　て、これまでの「index.html」ファイルを２回コピーし、別の名前をつけて「それ
　　ぞれのフレームに表示させるページ」とします。コピーしたものは「タイトルペー
　　ジ」と「リンクページ」に修正します。


○ファイルコピー

１．「index.html」ファイルを「ｈｐ」フォルダの中にコピーし、新しい方のファイル
　　名を「top.html」に変更します。

２．「index.html」ファイルを「ｈｐ」フォルダの中にもう一度コピーし、新しい方の
　　ファイル名を「frame.html」に変更します。

　☆現在「ｈｐ」フォルダの中には、同じ内容の３つのファイル「index.html」「top.
　　html」「frame.html」と、「kensyo.html」ファイル、さらには、２つの画像ファ
　　イル「hp1.jpg」「hp2.gif」の、計６つのファイルが入っています。


○ＨＴＭＬ入力

１．「top.html」ファイルを、「タイトル〜平成維新の誓い」のみに修正します。

　ａ．「top.html」のソースを表示させます。

　ｂ．最初のリンク先指示文の ＜a href="kensyo.html"＞平成維新憲章＜/a＞ から、
　　  ＜a href="http://homepage3.nifty.com/ne/se/syukennokai-towa.html"
　　 　 target="_blank"＞生活者主権の会とは＜/a＞ までを削除します。

　ｃ．上書き保存し、ＨＰに画面を切り替え、更新して、リンク先の部分が削除されて
　　　いることを確認して下さい。


２．「frame.html」ファイルを、「リンク先」のみに修正します。

　ａ．「frame.html」のソースを表示させます。

　ｂ．＜font size="7"＞生活者主権の会＜/font＞ から、２本目の水平線指示の、
　　　＜hr size="5" width="400" align="center" color="#008000"＞までを削除しま
　　　す。

　ｃ．「平成維新憲章」のリンク先指示文には、target 属性で _top を指定し、
　　　 ＜a href="kensyo.html" target="_top"＞平成維新憲章＜/a＞ とします。

　☆ _top 指定をすると、フレームが解除されてリンク先のページが表示されます。

　ｄ．＜body bgcolor＞ を、"#ffffcc" から "#eeffff" に変更し、ページ背景の色を
　　　水色に変更します。

　ｅ．上書き保存し、ＨＰに画面を切替え、更新し、リンク先の部分のみが残っている
　　　ことを確認して下さい。


３．「index.html」ファイルを修正し、『フレーム』を設定します。

　ａ．「index.html」のソースを表示させます。

　ｂ． ＜/head＞ の下の行に、＜frameset cols="30%,70%"＞ と入力します。

　☆左右のフレームの比率を３対７に設定してみました。また、上下にページを分割し
　　たい場合は、cols の代わりに、rows を使います。

　ｃ．続けて、＜frame src="frame.html"＞ さらに、＜frame src="top.html"＞ と入
　　　力し、左側に「リンクページ」が、右側に「タイトルページ」が表示されるよう
　　　に設定します。

　ｄ．次に、『フレーム終了タグ』の ＜/frameset＞ を入力します。

　ｅ．上書き保存し、ＨＰに画面を切り替え、更新して、２つのページが左右に並んで
　　　いることを確認して下さい。また、「平成維新憲章」をクリックして、フレーム
　　　が解除されることも確認して下さい。

　☆＜body＞〜＜/body＞ の指示文は必要ありませんので、削除しておいた方が錯覚し
　　にくいかと思います。
　　（フレームを定義した段階でこの部分は見ませんので残っていても差し支えはあり
　　　ません。）


　《委員会ＨＰ・第２回学習会−その８の完成ＨＰの画面と同じになればＯＫです。》

　　　　　　　↓

◎これで第８回目は終了です。

◎「ＨＰの作成」の学習はこれで終了です。次回は「公開」についてです。

　　　　　　　　　　　　　　　　　　　　　　　　　　　第２回学習会【その９】へ

　　　　　　　　　　　　　　　　　　　　　　　　　　　第２回学習会　目次へ