(8)フレームを使ったレイアウト

フレームとは:

ひとつのページをいくつかに分割して、それぞれに別々のHTMLを表示させる機能です。表示する情報の量が多い場合にひとつのフレームに目次を表示させたり、タイトルやメニューを本文と分離することで、サイト全体の構成を常に明示したり、表示速度を上げたりすることが出来ます。

フレームの使用例:

(1) タイトルやメニューの固定表示
画面を3つのFrame(フレーム)に分割し、変化するのは右下のフレームに留める。

タイトル
メニュー

1.XXX

2.YYY

3.ZZZ


1.XXX

本文の内容



(2) 目次の表示

論文や技術資料などの本文が非常に長い場合、フレームを使った目次を用意しておくと、目次の各章へのリンクをクリックすることによって、ずばりその章にジャンプすることが出来る。

(3) 他のサイトのページの組入れ

フレームを利用すれば、他のサイトのページを自サイトのコンテンツの一部のように見せることが出来ます。但し、他のサイトが著作権のある他人のサイトである場合はこの方法は著作権に抵触します。



フレームの仕組み:

フレームは、
A. ページの分割方法を指定するHTMLと
B. 分割された枠内に表示されるHTMLとで構成されます。
A.はフレーム頁とでも言い、ホオムページ・ビルダーのメニュー・バーの「ファイル」 → 「フレーム設定ページの新規作成」より起動するウィザードを使って、視覚的に希望の枠組みの設計をすることが出来ます。

B.はコンテンツを含んだ普通のHTMLで、リンクの設定の際のジャンプ先のページにあたり、そのジャンプ先のターゲットがA.の指定された枠に相当します。

フレーム使用上の考慮点:

1. 表示速度に就いて注意する
2. リンクの指定ミスによる混乱
3. サポートしていないブラウザーがある

ホームページ・ビルダーによるフレーム頁の作り方:


@ メニューから「ファイル」→「フレーム設定ページの新規作成」」を選択するか、新規サイト作成ウィザードでトップ頁を生成する過程の「白紙ページの作成」ダイアログで、「PCページ」→「フレームページ」→「標準モード」を選択すると、「フレーム作成ウィザード」が起動します。

A フレーム作成ウィザード」ダイアログではフレームの分割方法が視覚的パターンから選択出来ます。



フレーム境界線の表示は通常「なし」の指定の方がスマートなデザインです。 「次へ」ボタンをクリックして、次のステップに進みます。

B 次のダイアログではフレーム名とそのフレームが最初に開いた時に自動的にリンクされるべきHTMLファイルを指定します。



上の例では、フレーム名を「top」、「left」、「right」と初期設定されていますが、「frame_hesder」、「frame_menu」、「frame_main」等と自分で判りやすい名前に変更しておきます。

「開くファイル」はこのフレーム設定の時点でまだファイルが作成されていない場合が多いでしょうから指定しないで、後ほど指定する方が良いでしょう。 存在しないファイルを指定すると、エラーになります。

C 「完了」ボタンをクリックすると、所望のフレーム頁が表示されます。



D 各フレーム内を右クリック → 「フレームの属性」を選択し、フレームの属性を記述します。

「フレーム名」や「URL」(初期的にリンクされる頁のアドレス)はこの時点でも変更できます。
「フレームのサイズ」はメニュー・フレームやヘッダー・フレームに就いては固定的に指定しておいた方が良いでしょう。

「スクロール・バー」は出来れば表示されない方がスマートですので、自動に指定しておいてリンクされる頁が大きい時だけ表示されるようにするのが好ましいと思います。

「境界線」も出来れば表示されない方がスマートですので、特別の場合を除いてなしにしておいた方が良いでしょう。

上のようなフレームの属性の変更は、フレーム編集画面で何時でも出来ますので、保守作業の折にもフレームの改善に利用できます。

フレームを使った場合のリンクの作成:

フレーム機能を使う際に気を付けなければならないのは、ページへのリンクの作成です。

これまでの単純なリンク作成ではリンク先を指定するだけでしたが、フレームを使用している場合は、表示先のフレームの名前をターゲット欄に指定する必要があります。若し、これを省略してしまうと、リンクを表示してあるページと同じフレーム内にリンク先のページが表示されてしまいます。