12. フレームを使えば、上級編

サンプルページ

1 フレームの仕組み
最初に、例をあげて、フレームの作り方と、仕組みを説明します。

フレームだけのhtmlファイルに、A枠には、「メニュー」を表示
  B枠には、「空の写真」「海の写真」「光の写真」を表示するとします。

前準備として、それぞれ「メニュー」、「空の写真」、「海の写真」、「光の写真」のページを作成します。
例:各ページのファイル名
タイトル ファイル名
メニュー menu.htm
空の写真 sky.htm
海の写真 sea.htm
光の写真 light.htm
2 最初に決めておくこと
まず、フレームそれぞれに、名前を決めます。(必ず、半角英数字で
例: フレーム名
fa
fb
                ↓
次に、フレームページを表示したとき、一番最初に表示されるページを決めます。
 ここでは次のように、表示することにします。
フレームfa 「メニュー」(menu.htm)
フレームfb 「空の写真」(sky.htm)

では、この設定で実際にフレームを作ってみましょう。


フレームへの表示例:
fa→menu.htm fb→sky.htm

3 フレームの設定



◇「新規ファイル」ボタンをクリックして、白紙ページを開きます。
            ↓
メニューバーから、「フレーム」→「フレームの分割」を選択して、
 「左右方向」または、「上下方向」を選択します。

 2分割以上する場合は、「指定して分割」を、クリック
            ↓
 「フレームの指定分割」のダイアログが開くので、分割数を入れ
 「水平分割」または、「垂直分割」ボタンをクリックする。

            ↓ 
左右に分割した後、さらに上下に分割するときは、(または、その逆のとき)
 分割する画面をクリックして、上の動作を繰り返します。
            ↓           
「フレームの分割」ダイアログが表示されます。そのまま「OK」を、クリック。
            ↓
白紙ページが、フレームに分割されました。
4 フレームの属性




フレームfaを右クリックして、「フレームの属性」を選択します。
フレームの「属性」ダイアログを、表示されます。
「フレームの属性」タブが開いているのを、確認します。
            ↓
 「URL」ボックスの「参照」をクリックして、フレームfaに開くメニュー(menu.htm)を選択し、「開く」をクリックします。
            ↓
 「フレーム名」のボックスに「fa」を入力します。
            ↓
 「サイズ設定」が必要なときは、「%値設定」または、「ピクセル値設定」を選択して、右に数値を入力します。
   例:ここでは、「150ピクセル」に設定します。

「*指定」は、一方をピクセル指定した場合、もう一方は、数値を特定できないので、この表示にします。フレームfbは、「*指定」にしてください。

サイズの設定は、フレームの枠をドラッグして変更することもできます。

「ブラウザでサイズ変更させない」にチェックマークを入れると、ホームページを訪れる人が、勝手に、フレームの幅を変えることが、できなくなります。
これは、レイアウトを変えられたくないときに、チェックしてもいいのですが、小さい画面(800×600)で見てる人には、見るづらくなってしまうことがあります。
            ↓
 「余白設定」が必要なときは、「左右(または上下)余白を指定する」をオンにして、右のボックスに、ピクセル単位で余白を指定します。
            ↓
 「スクロールバー」スクロール バーの表示について設定します。
   これは、「自動」に設定しておくことを、おすすめします。
            ↓
同様にして、フレームBで右クリックして、フレームの「属性」ダイアログを、表示します。

 「URL」に「空の写真」(sky.htm)を選択します。

 「フレーム名」「fb」を入力します。

 「サイズ設定」は、「*指定」にしてください。
            
フレームのファイルを保存するには、メニューバーの「ファイル」「フレームを名前を付けて保存」を選択して、半角英数字で名前を入力して保存してください。
  (例:ファイル名「frame1.htm」

上書きの時も、「ファイル」「フレームを上書き保存」を選択してください。
◆フレーム枠の非表示◆

フレームの枠線を、表示させなくするには、「フレームHTMLソース」を開いて、
フレーム属性のタグに、border="0" frameborder="0" framespacing="0"を、追加します。
(border="0"→ネスケの枠線用、 frameborder="0" framespacing="0"→IEの枠線用)
例:
<FRAMESET cols="170,*">
         
<FRAMESET cols="170,*" border="0" frameborder="0" framespacing="0">

5 リンクの設定の仕方
「フレームA」→「フレームB」

フレームfaで、リンク元の文字列または、画像をクリックして、「リンク」ボタンをクリックします。リンクの「属性」ダイアログが開きます。
         ↓
「ファイル名」に、「参照」ボタンをクリックして、リンク先のファイルを選択します。
         ↓
「ターゲット」のボックスで「」ボタンをクリックして、フレームfbのフレーム名を選択します。

フレームファイル上で、編集している場合は、ターゲットボックス右のボックスで、リンク先のフレーム場所をクリックします。 選択されたフレーム部分が、青く表示され、ターゲットボックスに、フレーム名が表示されます。
         ↓
「OK」をクリックします。

「フレームB」→「フレームB」

 リンクの「属性」ダイアログの「ターゲット」で、「同一ウィンドウ」を選択します。
 
 上記同様、フレーム名を、入力しても、OKです。

◆「フレーム」→「全画面」
 リンクの「属性」ダイアログの「ターゲット」で、「全画面」を選択します。

◆「全画面」→「フレーム」

全画面表示(たとえば、トップページ)から、フレームページへのリンクは、
 リンクの「属性」ダイアログで「ファイル名」の所に、
 フレーム枠だけののhtmlファイル
を、指定します。
  (例:ファイル名「frame1.htm」)


*プルダウンメニューが使えない方は、申し訳ありませんが、トップより、各ページにジャンプしてください。