HTML フレームセットのサンプルコード

この記事では、Frameset が作成した、できるだけシンプルなフレームワークを紹介します。

さて、まずはこのフレームワークのページ構造を見てみましょう。これは完全に手動のテストプログラムなので、Notepa++ で非常に大まかなコードをいくつか作成しただけです。ただし、フレームセットの一般的なコンテンツはそのまま含まれています。さて、本題に戻って、まずファイル構造を見てみましょう。

1.Frame.htmlにはフレームの構造が含まれています

2.link.htmlにはフレームの左側にメニューバーが含まれています

3.firstPage.html にはフレームワークのメインページのテキスト行が含まれています (私は怠け者なのでうまくできませんでした)

4.secondPage.html は上記の 3 と似ており、テストに使用されます。

スクリーンショットはこちらです（初めてなので鮮明ではありません）

Frame.htm のコードを見てみましょう。

簡単だと思いませんか？これは主にFrameset要素であり、属性cols="159px,*"が設定されています。この属性の目的は、ページを 159 px と他の 2 つの領域に分割することです。上の写真の通りです。

次にフレームタグが続きます。上記の cols 属性には複数の値があり、その下の <frame> 子要素にも同じ数の値が必要です。次に、<frame> の共通属性をいくつか示します。境界線の幅、スクロールバーの表示の有無、境界線の色、ユーザーがサイズを変更できるかどうかなどが含まれます。どのソースファイルかなど。

次に、2 番目のソースファイルはテストのために firstPage を指します。

次はlink.htmlです:

<スタイルタイプ="text/css">

＃親{
幅:180ピクセル;
}
*＃親{
幅:100%;
}
</スタイル>
<div id="親">
<ul id="nav">
<li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">私のウェブサイト</a>
<ul id="子メニュー1" class="折りたたまれている">
<li><a href="firstPage.html" target="a2">最初のページ</a></li>
<li><a href="secondPage.html" target="a2">2 ページ目</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">マイアカウント</a>
<ul id="子メニュー2" class="collapsed">
<a href="#">お支払い</a></li>
<li><a href="#">管理</a></li>
<li><a href="#">オンライン決済</a></li>
<li><a href="#">送金登録</a></li>
<li><a href="#">オンラインで見つかりました</a></li>
<li><a href="#">歴史的記録</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">ウェブサイト管理</a>
<ul id="子メニュー3" class="折りたたまれている">
<li><a href="#">ログイン</a></li>
<a href="#">役割管理</a></li>
<li><a href="#">ユーザー管理</a></li>
</ul>
</li>
</ul>
</div>
<スクリプトタイプ=テキスト/javascript>

</スクリプト>