目次 | 索引 |
---|---|
目次のようなホームページを作り、その各項目から対応するホームページにリンクを張るようなリンク構造は、しばしば用いられます。 このようなホームページでは、目次の各項目を順に訪れようとしますと、
という操作を繰り返すことになります。
フレーム ( frame )を利用しますと、この操作がより簡単になります。 ブラウザは、ウィンドウをいくつかの成分に分割し、それぞれの成分に別々のホームページを表示することができます。 これらの成分がフレームです。 あるフレームのアンカーをクリックして、別のフレームに次のホームページを表示することもできます。
ウィンドウを二つに分割し、一方のフレームに目次を常に表示させ、もう一方のフレームにクリックした項目に対応するホームページを表示すれば、「戻る」ボタンを押す手間が省けるわけです。
フレームを利用するためには、ウィンドウをどのように分割するかをブラウザに指示する必要があります。 フレームの配置は、 フレームセット・ドキュメント ( frameset document )とよばれる特別なHTMLドキュメントで表します。 フレームセット・ドキュメントには、フレームの配置のみを書きます。 フレームの中に表示する内容は、別のHTMLドキュメントに書きます。
はじめに、ウィンドウを左右に分割してみます。
二つのフレームの幅を定めますが、これには相対指定による方法と絶対指定による方法があります。
相対指定では、幅の割合をパーセントで表しコンマで区切ります。
例えば、1対3の幅で分割したければ、
25%, 75%
と書きます。
フレームセット・ドキュメントには、まずフレームの個数だけタグ
<frame>
を書きます。
このタグに終了タグはありません。
そして、
<frame>
タグの並びを
<frameset>
〜
</frameset>
で囲みます。
左右に分割するときは、
<frameset>
タグで
cols
属性
を用います。
先ほどの
25%, 75%
などの文字列を、
cols
属性の値とします。
<frameset cols="25%, 75%"> <frame> <frame> </frameset>
ウィンドウは2分割だけでなく、3分割以上もできます。 3分割するときは、
<frameset cols="30%, 40%, 30%"> <frame> <frame> <frame> </frameset>
などと書きます。
一方、絶対指定では、ピクセル(画素)数で表しコンマで区切ります。
ただし、ウィンドウの幅のピクセル数をあらかじめ知ることはできませんので、一つのフレームを残りの幅だと指定する必要があります。
残りの幅は、記号
*
で表されます。
次の例では、ウィンドウを左、中央、右の3つに分割し、左は50ピクセル、中央は100ピクセル、右は残りと指定しています。
<frameset cols="50, 100, *"> <frame> <frame> <frame> </frameset>
ウィンドウを上下に分割するときは、
cols
属性の代わりに
rows
属性
を用います。
rows
属性の値は、
cols
属性のときと同様に、パーセンテージやピクセル数をコンマで区切ったものです。
<frameset rows="200, *"> <frame> <frame> </frameset>
いったんウィンドウを左右に分割し、その一つのフレームをさらに上下に分割するといったこともできます。
フレームセット・ドキュメントでは、さらに分割するフレームを、
<frame>
タグではなく、
<frameset>
〜
</frameset>
タグで表します。
<frameset>
タグは、フレームの集まりを示しているのです。
<frameset cols="100, *"> <frame> <frameset rows="50%, 50%"> <frame> <frame> </frameset> </frameset>
フレームセット・ドキュメントには、
<body>
タグを書かないでください。
ブラウザは、ドキュメントの中に
<body>
タグがありますと、
<frameset>
タグを無視します。
フレームセット・ドキュメントにタイトルなどを指定するには、次のように書きます。
<html> <head> <title>document title ...</title> other header information ... </head> <frameset> frames and framesets ... </frameset> </html>
携帯端末などのブラウザは、フレームに対応していないかもしれません。
<noframes>
タグを用いますと、そのようなブラウザで代替のメッセージが表示できます。
<html> <head> <title>...</title> ... </head> <frameset> ... <noframes> このページはフレームを使います。 <a href="top-noframes.html"> フレームを使わないページはこちらです。</a> </noframes> </frameset> </html>
フレームに対応しているブラウザは、
<noframes>
〜
</noframes>
に囲まれている範囲を無視しますので、メッセージは表示されません。
一方、フレームに対応していないブラウザは、
<frameset>
,
<frame>
, および
<noframes>
タグを理解しませんので、これらのタグは無視され、残りのメッセージが表示されるわけです。
フレームの配置ができましたら、次にそれぞれのフレームに対して名前を付けます。 また、各フレームの最初に表示するHTMLドキュメントを指定します。
フレームの名前はかなり自由に決められますが、英字から始まる英数字の並びが安全です。 フレームの名前は、フレーム同士を区別するものですから、一つのフレームセット・ドキュメントの中で重複しないようにしてください。
フレームセット・ドキュメントでは、
<frame>
タグの
name
属性
でそのフレームの名前を指定します。
フレームに最初に表示するHTMLドキュメントは、
<frame>
タグの
src
属性
で指定します。
以下の例では、ウィンドウを左右に分割し、左側のフレームに
items
と名前を付け、HTMLドキュメント itemlist.html を表示し、右側のフレームに
detail
と名前を付け、HTMLドキュメント about-us.html を表示しています。
<frameset cols="50%, 50%"> <frame name="items" src="itemlist.html"> <frame name="detail" src="about-us.html"> </frameset>
・活動内容
・入会手続き
・今後の予定このサークルは、テニスサークルと名前がついていますが、あまりテニスはやりません。
<ul> <li><a href="about-us.html">活動内容</a></li> <li><a href="to-join.html">入会手続き</a></li> <li><a href="schedule.html">今後の予定</a></li> </ul>
<p> このサークルは、 テニスサークルと名前がついていますが、 あまりテニスはやりません。 </p>
上の例で、例えば「入会手続き」をクリックしますと、そのフレームにHTMLドキュメント to-join.html が表示されてしまいます。
食堂の奥が私たちのたまり場です。誰かに一声かけてください。入会金は無料です。 このサークルは、テニスサークルと名前がついていますが、あまりテニスはやりません。
<p> 食堂の奥が私たちのたまり場です。 誰かに一声かけてください。 入会金は無料です。 </p>
今までのリンクの張り方では、クリックしたフレームがウィンドウ全体だと見なされます。 したがって、そのフレームに次のHTMLドキュメントが表示されるのです。
この例でやりたいことは、左側のフレームでクリックすると、右側のフレームにHTMLドキュメントがロードされることです。 これは、始点となるアンカーの指定を書き換えるとできます。
HTMLドキュメントで、始点のアンカーは
<a href="
file
">
〜
</a>
の範囲でした。
このタグに
target
属性
を追加し、その値をフレームの名前
name
としますと、そのアンカーをクリックしたときに、フレーム
name
にHTMLドキュメント
file
がロードされます。
右側のフレームの名前は
detail
ですので、itemlist.html を次のように書き換えます。
<ul> <li><a href="about-us.html" target="detail"> 活動内容</a></li> <li><a href="to-join.html" target="detail"> 入会手続き</a></li> <li><a href="schedule.html" target="detail"> 今後の予定</a></li> </ul>
そして、もう一度 frames.html を表示します。
・活動内容
・入会手続き
・今後の予定このサークルは、テニスサークルと名前がついていますが、あまりテニスはやりません。
「入会手続き」をクリックしますと、今度は右側のフレームに to-join.html がロードされ、左側のフレームはそのままとなります。
・活動内容
・入会手続き
・今後の予定食堂の奥が私たちのたまり場です。誰かに一声かけてください。入会金は無料です。
「今後の予定」をクリックしますと、右側のフレームに schedule.html がロードされ、左側のフレームはそのままです。
・活動内容
・入会手続き
・今後の予定毎月一回はコンパがあります。夏合宿と冬合宿を予定しています。
<p> 毎月一回はコンパがあります。 夏合宿と冬合宿を予定しています。 </p>
フレームは便利な機能なのですが、このままウィンドウが分割されっぱなしなのは困ります。 ウィンドウの分割を解除し、もとのウィンドウいっぱいにHTMLドキュメントをロードすることもできます。
これには、特別なターゲット
_top
を用います。
(先頭のアンダースコアを忘れないでください。)
始点となるアンカーを
<a href="
file
" target="_top">
〜
</a>
で指定し、そのアンカーをクリックしますと、ウインドウの分割が解除され、HTMLドキュメント
file
がウィンドウ全体にロードされます。
上の例で、itemlist.html にアンカーを追加します。
<ul> <li><a href="about-us.html" target="detail"> 活動内容</a></li> <li><a href="to-join.html" target="detail"> 入会手続き</a></li> <li><a href="schedule.html" target="detail"> 今後の予定</a></li> </ul> <a href="index.html" target="_top">トップページへ</a>
そして、frames.html を表示します。
・活動内容
・入会手続き
・今後の予定
トップページへこのサークルは、テニスサークルと名前がついていますが、あまりテニスはやりません。
「トップページへ」をクリックしますと、ウィンドウの分割が解除され、もとのウィンドウいっぱいにHTMLドキュメント index.html がロードされます。
のんびりテニスサークル
詳細はこちらへ
<h1>のんびりテニスサークル</h1> <a href="frames.html">詳細はこちらへ</a>
もし始点のアンカーで指定されたフレームの名前が、どのフレームのものとも一致しない場合、そのアンカーをクリックしますと、新しいウィンドウが開き、そのウィンドウにHTMLドキュメントがロードされ、以後、そのウィンドウがその名前のフレームのように振る舞います。
以下の例を参考にして、「私の用語集」(またはこれと同様なホームページ)を作成してください。 用語集には少なくとも2つの用語(この例では"DOM"と"XML")を登録します。 用語が2つですと、作成するHTMLドキュメントは5つになります。
<frameset>
,
<frame>
タグを用います。)
target
属性を用います。)
操作イメージは次の通りです。
はじめに表紙(cover.html)を表示します。
私の用語集
用語集を開く
「用語集を開く」をクリックしますと、フレームの配置(frames.html)に従ってウィンドウが左右に分割され、左側に用語リスト(termlist.html)、右側に用語XMLの解説文(xml-is.html)が表示されます。
・DOM
・XML
表紙に戻る XMLeXtensible Markup Languageの略
用語リストの「DOM」をクリックしますと、左側はそのままで、右側には用語DOMの解説文(dom-is.html)がロードされます。
・DOM
・XML
表紙に戻る DOMDocument Object Modelの略
用語リストの「XML」をクリックしますと、やはり左側はそのままで、右側には再び用語XMLの解説文がロードされます。
・DOM
・XML
表紙に戻る XMLeXtensible Markup Languageの略
用語リストの「表紙に戻る」をクリックしますと、フレームが解除され、ウィンドウいっぱいに最初の表紙がロードされます。
私の用語集
用語集を開く
今日の演習7に従ってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付けを明記してください。