■フレームを実際に作ってみましょうフレームの構造は、説明文にすると難解なようですが、実際に作ってしまえば簡単に習得できます。では、いきなり作り始めましょう!!●最初に最低限必要な書類 ・フレームの分割方法を指定した空枠のHTML書類 ・その分割されたそれぞれの中身を書いたHTML書類(分割したセル数だけ必要) 【例 題】 例えば横2段で、下段のみがさらに縦に2列に分割している、3つのセルからなるページを作る場合を考えてみよう。
【STEP 1】まず、フレームの枠を作ってみましょう。
<HTML>
<FRAMESET>
<NOFRAMES> これがフレームによる分割を指定する基本形です。では、実際のソースをいきなり書いちゃいますので、分からない部分をクリックして見て下さい。詳細はこのページの上のセルに出ますので、文字が見えないときは枠をドラッグして調整してください。
<HTML> <HEAD><TITLE>マイ・ホームページ</TITLE></HEAD> <FRAMESET ROWS="72,*"> <FRAME SRC="ue.html" NAME="ueframe" SCROLLING="no"> <FRAMESET COLS="160,*"> <FRAME SRC="hidari.html" NAME="hidariframe" SCROLLING="auto"> <FRAME SRC="migi.html" NAME="migiframe" SCROLLING="auto"> </FRAMESET> </FRAMESET> <NOFRAMES> <CENTER> フレーム機能をサポートしていないブラウザの方は <A HREF="noframe.html">こちら</A>をご覧ください。 </CENTER> </NOFRAMES> </HTML> 【STEP 2】それぞれのセル内に表示するHTML書類を作ります 上記のベースとなる書類のほかに、それぞれのセル内に表示するHTML書類が必要です。各セルの中に使用する書類の書式は通常のHTMLでかまいません。通常と異なるのはリンクに関する部分だけです。ただし、先ほど分割指定しましたので、ページレイアウトは、それぞれのセルの表示エリアを意識して作っておいてください。これも前述のテーブルタグなどを利用すれば便利でしょう。 では、先ほど作った左下のセルに、リンクボタンを作り、上のセルに表示される内容を変更するようにしてみましょう。 <A HREF="ue2.html" TARGET="ueframe">ここを押してね</A> さて、リンクの指定ですが、フレームを使用したページでは、リンク指定したhtml書類を何処へ表示するかを<A HREF>タグのTARGETで指定しなければなりません。
TARGETには大きく分けて下記の種類があります。
※この他、TARGET="_self"(自フレームに表示)。
■ベースタグでまとめて指定
<HTML><HEAD><TITLE>タイトル</TITLE>
■ソース例
●上記作業までのテスト用完成品を見る
○Webでの使用例(大量情報の整理)
【応用編】一つのリンクスイッチで2つのフレームをスイッチする。
※この他にも、フレームの境界線の色を変えたり・消したり、またJavaScriptを使用してサイズ指定をした新規ブラウザウインドウを表示したりと、いろいろな楽しみ方があります。詳しくは本書をご覧ください。
|