２．フレーム機能の活用

フレーム機能は、画面を分割する機能で、Ｎｅｔｓｃａｐｅのバージョン ２.０、Ｉｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒのバージョン３.０以上で サポートされています。
活用法としては、例えば

など、工夫しだいで従来とは違うホームページの表示方法が可能となります。

（ フレーム機能の活用例 ）




（クリックして下さい）

各フレームは、それぞれが独立したウインドウのように、背景色を変えたり
することができます

（１）フレーム分割を記述する

フレーム機能を用いるためには、各フレームごとにその内容を記述する ＨＴＭＬ文書の他に、各フレームに分割する方法を記述するＨＴＭＬ文書 が必要となります。

（ 例１ ）上下に分割




（クリックして下さい）

　　　・ＨＴＭＬ文書（フレーム分割の記述）

<HTML>
<HEAD><TITLE>例２−１</TITLE>
</HEAD>
<FRAMESET　ROWS="40%,60%">
　　<FRAME　SRC="2-1-1.html"　NAME="frame1">
　　<FRAME　SRC="2-1-2.html"　NAME="frame2">
</FRAMESET>
<NOFRAMES>
フレームに未対応のブラウザ用に記述します。
</NOFRAMES>
</HTML>


フレーム分割を記述するタグは＜ＨＥＡＤ＞部でも＜ＢＯＤＹ＞部でもありません。
（フレーム１の記述）
<HTML>
<HEAD>
<TITLE>例２−１（フレーム１）</TITLE>
</HEAD>
<BODY>
<H2>フレーム１</H2>
上側のフレームです。<BR>
（４０％）<BR>
フレームからはみ出た場合はスクロールします。
</BODY>
</HTML>
（フレーム２の記述）
<HTML>
<HEAD><TITLE>例２−１（フレーム２）</TITLE>
</HEAD>
<BODY>
<H2>フレーム２</H2>
下側のフレームです。<BR>
（６０％）
</BODY>
</HTML>



（ 例２ ）左右に分割




（クリックして下さい）

　　　・ＨＴＭＬ文書（フレーム分割の記述）

<HTML>
<HEAD><TITLE>例２−２</TITLE>
</HEAD>
<FRAMESET　COLS="40%,60%">
　　<FRAME　SRC="2-2-1.html"　NAME="frame1">
　　<FRAME　SRC="2-2-2.html"　NAME="frame2">
</FRAMESET>
<NOFRAMES>
フレームに未対応のブラウザ用に記述します。
</NOFRAMES>
</HTML>




（ 例３ ）３分割の場合




（クリックして下さい）

　　　・ＨＴＭＬ文書（フレーム分割の記述）

<HTML>
<HEAD><TITLE>例２−３</TITLE>
</HEAD>

<FRAMESET　ROWS="40%,60%">
　　<FRAME　SRC="2-3-1.html"　NAME="frame1">
　　<FRAMESET　COLS="40%,60%">
　　　<FRAME　SRC="2-3-2.html"　NAME="frame2">
　　　<FRAME　SRC="2-3-3.html"　NAME="frame3">
　　　</FRAMESET>
</FRAMESET>

<NOFRAMES>
フレームに未対応のブラウザ用に記述します。
</NOFRAMES>
</HTML>



　　　・書き方

　　　（ 分割方法 ）


＜ＦＲＡＭＥＳＥＴ ＣＯＬＳ＝“フレーム１の大きさ、フレーム２の大きさ”＞
                                                            …… 上下に分割
＜ＦＲＡＭＥＳＥＴ ＲＯＷＳ＝“フレーム１の大きさ、フレーム２の大きさ”＞
                                                            …… 左右に分割

         フレームの大きさ：ピクセル数、または％


　　　（ 表示フレームの設定 ）


＜ＦＲＡＭＥ　ＳＲＣ＝“ファイル名”   …… 表示フレームを記述したＨＴＭＬ
    ＳＣＲＯＬＬＩＮＧ＝“スクロール”…… スクロールバーの表示

スクロール：ｙｅｓ ；表示する
            ｎｏ ；表示しない 
            ａｕｔｏ；必要に応じて表示

    ＮＯＲＥＳＩＺＥ ＞ …… フレーム枠の変更不可の指定




（２）リンクしたファイルをフレームに表示させる

リンクしたファイルをどのフレームに表示させるかを指定するために、 ＴＡＲＧＥＴオプションを用いて記述します。




（クリックして下さい）

　　　・ＨＴＭＬ文書（フレーム分割の記述）

<FRAMESET　COLS="25%,75%">
　　<FRAME　SRC="2-4-1.html"　NAME="frame1">
　　<FRAME　SRC="2-4-2.html"　NAME="frame2">
</FRAMESET>

<NOFRAMES>
<!--フレームに未対応のブラウザ用に記述します。-->
<BODY>
<H2>目次</H2>
<UL>
　<LI><A　HREF="2-4-2.html"><H4>第１章</H4></A>
　<LI><A　HREF="2-4-3.html"><H4>第２章</H4></A>
　<LI><A　HREF="2-4-4.html"><H4>第３章</H4></A>
</UL>
</BODY>
</NOFRAMES>



　　　（ フレーム１ ）

<H2>目次</H2>
<UL>
　<LI><A　HREF="2-4-2.html"　TARGET="frame2"><H4>第１章</H4></A>
　<LI><A　HREF="2-4-3.html"　TARGET="frame2"><H4>第２章</H4></A>
　<LI><A　HREF="2-4-4.html"　TARGET="frame2"><H4>第３章</H4></A>
</UL>


　　　（ フレーム２ ）

<H4>第１章</H4>
<P>
まず始めに・・・・<BR>
：<BR>
</P>
<H4>第２章</H4>
<P>
次に・・・・<BR>
：<BR>
</P>
<H4>第３章</H4>
<P>
最後に・・・・<BR>
：<BR>
</P>


　　　・書き方

　　　（ フレーム名の記述 ）

  ＜ＦＲＡＭＥ ＳＲＣ＝“ファイル名”ＮＡＭＥ＝“フレーム名”＞

        フレーム名：英数字でつける。最初の文字は
                    アンダースコア（ ＿ ）以外に限る。




　　　（ リンク先のフレーム指定 ）

 ＜Ａ ＨＲＥＦ＝    “ファイル名”ＴＡＲＧＥＴ＝“フレーム名”＞


　　　・特殊なフレーム名

 ・ＴＡＲＧＥＴ＝“＿ｂｌａｎｋ”：
          新しいウインドウを別に開き、そこに表示する

 ・ＴＡＲＧＥＴ＝“＿ｓｅｌｆ” ：
          今と同じフレームにファイルを表示する

 ・ＴＡＲＧＥＴ＝“＿ｐａｒｅｎｔ”：
          フレームに表示したＨＴＭＬファイルがさらに
          フレーム分割されている時に、もとのフレーム
          にリンク先を表示する

 ・ＴＡＲＧＥＴ＝“＿ｔｏｐ”：
          すべてのフレームを破棄し、ウインドウに表示する




（３）フレームを表示できないブラウザへの配慮

フレーム分割を記述したＨＴＭＬ文書には＜ＢＯＤＹ＞部に当る記述がな いため、フレーム機能に未対応のブラウザでは何も表示されなくなります。
このためのＨＴＭＬ文を＜ＮＯＦＲＡＭＥＳ＞タグを使って記述します。
なお、フレーム機能対応のブラウザでは＜ＮＯＦＲＡＭＥＳ＞タグで囲んだ 部分は無視されます。

　　　・書き方

　　＜ＮＯＦＲＡＭＥＳ＞〜 ＜／ＮＯＦＲＡＭＥＳ＞


　　　（ 例 ）
　　　・ＨＴＭＬ文書

<FRAMESET　COLS="25%,75%">
　　<FRAME　SRC="2-4-1.html"　NAME="frame1">
　　<FRAME　SRC="2-4-2.html"　NAME="frame2">
</FRAMESET>

<NOFRAMES>
<!--フレームに未対応のブラウザ用に記述します。-->
<BODY>
<H2>目次</H2>
<UL>
　<LI><A　HREF="2-4-2.html"><H4>第１章</H4></A>
　<LI><A　HREF="2-4-3.html"><H4>第２章</H4></A>
　<LI><A　HREF="2-4-4.html"><H4>第３章</H4></A>
</UL>
</BODY>
</NOFRAMES>


　　　（ Ｉｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒ２．０で表示 ）



　　

　　　［練習問題２］

　次のようなフレーム機能を使ったページを作成して下さい。

　　　　　・練習問題２の作成例




（クリックして下さい）


　　[目次へ]　[次へ]




GigaHit