|
左側がメニューになっていて、その中の項目を
クリックすると右側のページが変わる形式の作り方です。
通常、ＴＯＰページは index.htmlという名前で作ります。
フレームの場合、index.htmlを作りますが、その中身は
「そのページがフレーム形式ですよ」という事を示すためのページになります。
では、サンプルで１つ作ってみましょう。 順番に進んでください。
<html>
<head>
<title>ようこそ、おいでくださいました。</title>
</head>
<frameset cols="134,*" border=0>
<frame src="menu.html" name="MENU">
<frame src="top.html" name="MAIN">
</frameset>
</html>
これをコピー＆ペーストしてファイル名を「index.html」にして保存してください。
★ポイント
ここで大切なのは 赤字の MENU
と MAIN です。
左側部分と右側部分に名前を付けています。フレームページではこれが重要です。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
<meta name="GENERATOR"
content="Microsoft FrontPage Express
2.0">
<title></title>
</head>
<body bgcolor="#D7EBFF">
<p><a href="top.html"
target="MAIN">ＴＯＰページ</a></p>
<p><a href="link.html"
target="MAIN">リンク集</a></p>
</body>
</html>
これをコピー＆ペーストしてファイル名を「menu.html」にして保存してください。
★ポイント
ここで大切なのは赤字の MAIN
です。
ＴＯＰページをクリックすると
右側（ステップ１で MAIN
と名前をつけた場所）に表示するように指定してます。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
<meta name="GENERATOR"
content="Microsoft FrontPage Express
2.0">
<title></title>
</head>
<body bgcolor="#FFFFFF">
<p align="center">ＴＯＰページ</p>
</body>
</html>
これをコピー＆ペーストしてファイル名を「top.html」にして保存してください。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
<meta name="GENERATOR"
content="Microsoft FrontPage Express
2.0">
<title></title>
</head>
<body bgcolor="#FFFFFF">
<p align="center"><font
size="3">リンク集</font></p>
</body>
</html>
これをコピー＆ペーストしてファイル名を「link.html」にして保存してください。
ここまでの段階で４つのファイルを作りました。
①index.html
②top.html
③menu.html
④link.html
では、index.htmlをダブルクリックしてみてください。
このような画面が出れば成功です。
では、左側のメニューの「リンク集」というところをクリックしてみましょう。
右側が「リンク集」になります。
では、左側のメニューの「ＴＯＰページ」というところをクリックしてみましょう。
右側が「ＴＯＰページ」になります。
これがフレームを利用したページです。
|