| 目次 | 索引 |
|---|---|
目次のようなホームページを作り、その各項目から対応するホームページにリンクを張るようなリンク構造は、しばしば用いられます。 このようなホームページでは、目次の各項目を順に訪れようとしますと、
という操作を繰り返すことになります。
フレーム （ frame ）を利用しますと、この操作がより簡単になります。 ブラウザは、ウィンドウをいくつかの成分に分割し、それぞれの成分に別々のホームページを表示することができます。 これらの成分がフレームです。 あるフレームの始点アンカーをクリックして、別のフレームに終点アンカーのホームページを表示することもできます。
ウィンドウを2つに分割し、一方のフレームに目次を常に表示させ、もう一方のフレームにクリックした項目のホームページが表示されるようにすれば、「戻る」ボタンをクリックする手間が省けるわけです。
フレームを利用するためには、ウィンドウをどのように分割するかをブラウザに指示する必要があります。 フレームの配置は、 フレームセット・ドキュメント （ frameset document ）とよばれる特別なHTMLドキュメントで表します。 フレームセット・ドキュメントには、フレームの配置のみを書きます。 フレームに表示する内容は、別のHTMLドキュメントに書きます。
はじめに、ウィンドウを左右に分割してみます。
2つのフレームの幅を決めればよいのですが、これには相対指定による方法と絶対指定による方法があります。
相対指定では、幅の割合をパーセントで表しコンマで区切ります。
例えば、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>
<p>
<a href="index.html" target="_top">トップページへ</a>
</p>
そして、frames.htmlを表示します。
・ 活動内容 ・ 入会手続き ・ 今後の予定 トップページへ |
このサークルは、テニスサークルと名前がついていますが、あまりテニスはやりません。 |
「トップページへ」をクリックしますと、ウィンドウの分割が解除され、もとのウィンドウいっぱいにHTMLドキュメントindex.htmlがロードされます。
のんびりテニスサークル 詳細はこちらへ |
<h1>のんびりテニスサークル</h1> <p> <a href="frames.html">詳細はこちらへ</a> </p>
もし始点アンカーで指定されたフレームの名前が、どのフレームのものとも一致しない場合、その始点アンカーをクリックしますと、新しいウィンドウが開きます。 そして、そのウィンドウにHTMLドキュメントがロードされ、以後、そのウィンドウがその名前のフレームのように振る舞います。
以下の例を参考にして、「私の用語集」（またはこれと同様なホームページ）を作成してください。 用語集には少なくとも2つの用語（この例では"DOM"と"XML"）を登録します。 用語が2つですと、作成するHTMLドキュメントは5つになります。
操作イメージは次の通りです。
はじめに表紙（cover.html）を表示します。
私の用語集 用語集を開く |
「用語集を開く」をクリックしますと、フレームセット・ドキュメント（frameset.html）に従ってウィンドウが左右に分割され、左側に用語リスト（termlist.html）、右側に用語XMLの解説文（xml.html）が表示されます。
・ DOM ・ XML 表紙に戻る |
XMLとは、eXtensible Markup Languageの略である。 |
用語リストの「DOM」をクリックしますと、左側はそのままで、右側には用語DOMの解説文（dom.html）がロードされます。
・ DOM ・ XML 表紙に戻る |
DOMとは、Document Object Modelの略である。 |
用語リストの「XML」をクリックしますと、やはり左側はそのままで、右側には再び用語XMLの解説文がロードされます。
・ DOM ・ XML 表紙に戻る |
XMLとは、eXtensible Markup Languageの略である。 |
用語リストの「表紙に戻る」をクリックしますと、フレーム分割が解除され、ウィンドウいっぱいに最初の表紙がロードされます。
私の用語集 用語集を開く |
今日の演習8に従ってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付け（6/6）を明記してください。