ゼミI実習


ゼミIで使用しているテキストがあります

HTML実習(その8)フレーム


前回のクリッカブルマップの作業は大変だったと思います。しかし、このようにJavascriptと組み合わせることでおもしろいページを作ることができます。

今回はワールドカップも決勝トーナメントに入ったことですから、今まで習ったことの復習を兼ねて戦績についてまとめるページを作ってみましょう。

予選リーグの戦績をまとめたページについて考えてみましょう。その前にフレームを使用したページの構成について考えてみます。

次のページを用意します。2006yosen.htmとします。

<html>
<head>
<title>
ワールドカップ2006戦績表
</title>
<frameset cols="20%,*">
<frame src="./yosen.htm" noresize>
<frame src="./kumi_top.htm" name="s">
</frameset>
</head>
</html>

このページの説明は以下の様になります。

・タグにフレームの定義を書いておきます。
・フレームの定義はタグで囲みます。
・タグの属性colsを使うとページを縦に分割できます。分割の割合はこのように比を用いることもできますし、直接数値を使うこともできます。横に分割するときにはrowsを用います。
・それぞれのフレームはタグを用いて定義します。タグの並びは、縦に分割した時には左から、横に分割した時には上から指定することになります。
・タグでは、属性srcにそのフレームに読み込むファイル名を指定しています。
・タグの属性noresizeを使えば、フレームの境界線を固定して移動できないようにします。
・タグの属性nameを使えばそのフレームに名前を指定できます。あとで、この名前を使ってフレームを指定することができます。

yosen.htmでは

<a href="./a.htm" target="s">A組</a>

のようにタグのtargetパラメータにフレームの名前を指定することで、このリンクがクリックされた時にそのフレームにページの内容を表示することができます。

さてyosen.htmは以下のようになります。

<html>
<head>
<title>
ワールドカップ2006組別戦績表
</title>
</head>
<body>
ワールドカップ<br>
2006<br>
組別戦績表
<br>
<a href="./a.htm" target="s">A組</a>
<br>
<a href="./b.htm" target="s">B組</a>
<br>
<a href="./c.htm" target="s">C組</a>
<br>
<a href="./d.htm" target="s">D組</a>
<br>
<a href="./e.htm" target="s">E組</a>
<br>
<a href="./f.htm" target="s">F組</a>
<br>
<a href="./g.htm" target="s">G組</a>
<br>
<a href="./h.htm" target="s">H組</a>
<br>
<a href="./st.htm" target="s">決勝トーナメント</a>
<br>
</body>
</html>

これに対しそれぞれのファイルを用意してください。それぞれのファイルはtableタグを使って作ってみましょう。

最初に開くkumi_top.htmは次のようにメッセージだけ表示します。

<html>
<head>
<title>
組別戦績表<トップページ>
</title>
</head>
<body>
<center>
ワールドカップ2006<br>
組別戦績表
<br><br>
<hr>
<br>
ここでは予選リーグの各組の戦績をまとめています。<br>
フレーム左側の組ごとのリンクをクリックしてください。
</center>
<br>
</body>
</html>

例としてA組は次のような感じのページにまとめるとよいでしょう。

<html>
<head>
<title>
組別戦績表<A組>
</title>
</head>
<body>
<center>
ワールドカップ2006<br>
A組戦績表
<br><br>
<hr>
<br>
<table border="1" cellpadding="5" cellspacing="0">
<tr height="38">
<td width="100"> </td>
<td width="100">ドイツ</td>
<td width="100">コスタリカ</td>
<td width="100">ポーランド</td>
<td width="100">エクアドル</td>
<td width="10">勝</td>
<td width="10">分</td>
<td width="10">負</td>
<td width="15">勝点</td>
<td width="15">順位</td>
</tr>
<tr height="38">
<td width="100">ドイツ</td>
<td width="100"> </td>
<td width="100" align="center">−</td>
<td width="100" align="center">−</td>
<td width="100" align="center">−</td>
<td width="10"> </td>
<td width="10"> </td>
<td width="10"> </td>
<td width="15"> </td>
<td width="15"> </td>
</tr>
<tr height="38">
<td width="100">コスタリカ</td>
<td width="100" align="center">−</td>
<td width="100"> </td>
<td width="100" align="center">−</td>
<td width="100" align="center">−</td>
<td width="10"> </td>
<td width="10"> </td>
<td width="10"> </td>
<td width="15"> </td>
<td width="15"> </td>
</tr>
<tr height="38">
<td width="100">ポーランド</td>
<td width="100" align="center">−</td>
<td width="100" align="center">−</td>
<td width="100"> </td>
<td width="100" align="center">−</td>
<td width="10"> </td>
<td width="10"> </td>
<td width="10"> </td>
<td width="15"> </td>
<td width="15"> </td>
</tr>
<tr height="38">
<td width="100">エクアドル</td>
<td width="100" align="center">−</td>
<td width="100" align="center">−</td>
<td width="100" align="center">−</td>
<td width="100"> </td>
<td width="10"> </td>
<td width="10"> </td>
<td width="10"> </td>
<td width="15"> </td>
<td width="15"> </td>
</tr>
</table>
</center>
<br>
</body>
</html>

今までの戦績はインターネット上で調べてください。

練習1.予選リーグの残りのB組からH組までの戦績をまとめたページを作りなさい。

練習2.決勝トーナメントの戦績をまとめるためのページを作りなさい。