Dreamweaver CC 以降では、ユーザーインターフェイスが簡素化されています。そのため、この記事で説明されているオプションの一部が Dreamweaver CC 以降には存在しない場合があります。詳しくは、こちらの記事を参照してください。
フレームおよびフレームセットの仕組み
フレーム はブラウザーウィンドウの一領域で、ブラウザーウィンドウの他の領域で表示されているものとは別の HTML ドキュメントが表示されます。フレームによって、ブラウザーウィンドウを複数の領域に分け、各領域に異なる HTML ドキュメントを表示することができます。1 つのフレームにナビゲーションコントロール用のドキュメントを表示し、別のフレームにドキュメントのコンテンツを表示するのが、フレームの最も一般的な使用方法です。
フレームセット は、複数のフレームのレイアウトとプロパティを一組のセットとして定義する HTML ファイルです。このファイルには、フレームの数、サイズ、配置、および各フレームに最初に表示するページの URL が含まれます。フレームセットファイル自体には、noframes セクション以外は、ブラウザーに表示される HTML コンテンツは含まれません。フレームセットファイルは、フレームセットの表示方法とフレームに表示されるドキュメントの情報をブラウザーに提供するだけです。
ブラウザーで一組のフレームを表示するには、フレームセットファイルの URL を入力します。すると、ブラウザーが該当するドキュメントをフレーム内に表示します。通常、サイトのフレームセットファイルは、ビジターがファイル名を指定しない場合にデフォルトで表示されるように、index.html という名前にします。
次の例は、3 つのフレームで構成されるフレームレイアウトを示したものです。ページの端にある縦長のフレームにはナビゲーションバーが、上端のフレームには Web サイトのロゴとタイトルが表示されます。そして、ページの残りの部分を占める大きなフレームにメインコンテンツが表示されます。これらのフレームには、それぞれ独立した HTML ドキュメントが表示されます。
この例では、最上部のフレームに表示されるドキュメントは、ビジターがサイトをナビゲートしても変わりません。端にあるフレームナビゲーションバーにはリンクがあります。その中のリンクを 1 つクリックすると、メインコンテンツフレームのコンテンツが変わり、端のフレームは変わりません。右側にあるメインコンテンツフレームには、ビジターが左側でクリックしたリンクに該当するドキュメントが表示されます。
フレームはファイルではありません。フレームに現在表示されているドキュメントは、フレームの一部であって分離できないと考えられがちですが、実際にはドキュメントはフレームの一部ではありません。フレームはドキュメントを保持するコンテナです。
「ページ」という語は、1 つの HTML ドキュメントを指すこともあれば、一度に複数の HTML ドキュメントが表示されている場合も含む、ある時点のブラウザーウィンドウのコンテンツ全体を指すこともあります。「フレームを使用するページ」という場合、通常は、一組のフレームと各フレームに初期状態で表示されるドキュメントを指します。
3 つのフレームで構成される単一ページとしてブラウザーに表示されるサイトは、実際には少なくとも 4 つの独立した HTML ドキュメントで構成されています。つまり、フレームセットファイルに加えて、各フレームに初期状態で表示されるコンテンツを格納する 3 つのドキュメントが使われています。Dreamweaver でフレームセットを使用してページをデザインする場合、ブラウザー内でページを正しく表示するためには、これらの 4 つのファイルをそれぞれ保存する必要があります。
フレームを使用するかどうかの決定
Web ページのレイアウト用途にフレームを使用することはお勧めしません。フレームを使用すると、次のような点をはじめ様々な不利が生じます。
フレーム間でグラフィック要素を正確に整列させるのが難しいことがあります。
ナビゲーションのテストに時間がかかることがあります。
フレーム内の個別のページの URL はブラウザーに表示されません。そのため、フレーム内に表示されている特定のページをロードするためのサーバーコードを提供しない限り、ビジターが特定のページをブックマークするのは困難です。
ビジターのブラウザーで、ナビゲーション関連のグラフィックをページごとに再ロードする必要がありません。
コンテンツが大きすぎてウィンドウに収まりきらない場合、各フレームに各フレーム用のスクロールバーがあるので、その他のフレームに無関係にスクロールできます。例えば、1 つのフレームの長いコンテンツページを最下部までスクロールした場合、ナビゲーションバーが別のフレームにあれば、ナビゲーションバーを使用するために最上部までスクロールして戻る必要はありません。
多くの場合は、フレームを使用しなくても、フレームセットを使用する場合と同等の機能を持つ Web ページを作成できます。例えば、ページの左側にナビゲーションバーを配置するには、ページを一組のフレームに置き換えるか、サイト内のすべてのページにナビゲーションバーを配置します(Dreamweaver を使用すると、同じレイアウトを使用する複数のページを簡単に作成できます)。次の例は、フレームを使用せずにフレームに類似したレイアウトを実現しているページデザインを示したものです。
設計が適切でないサイトではフレームが不必要に使われており、例えば、ビジターがナビゲーションボタンをクリックするたびに、ナビゲーションフレームのコンテンツが再ロードされるようにフレームセットが設計されていることがあります。適切に使用すればフレームはサイトにとって非常に便利な存在で、例えば、あるフレーム内のナビゲーションコントロールを保持したまま、別のフレーム内のコンテンツだけを更新するといったことが可能になります。
ブラウザーによってはフレームを十分にサポートしておらず、また、障害を持つビジターにはフレーム操作が困難なこともあります。そのためフレームを使用する場合は、フレームセット内にフレームを見られないビジター向けの noframes セクションを用意する必要があります。サイトのフレームなしバージョンへの明示的なリンクを提供することも可能です。
ネストされたフレームセット
他のフレームセットの内側にあるフレームセットは、ネストされたフレームセットと呼ばれます。1 つのフレームセットファイルに、ネストされたフレームセットを複数含めることができます。実際、フレームを使用している Web ページのほとんどで、ネストされたフレームが使用されています。また、Dreamweaver の大部分の定義済みフレームセットでもネストが使用されています。行または列によってフレームの数が異なるフレームセットでは、フレームセットをネストさせる必要があります。
例えば、最も一般的なフレームセットでは、上部に(会社のロゴが表示される)フレームが 1 つあり、下部にはフレームが 2 つ(ナビゲーションフレームとコンテンツフレーム)あります。このレイアウトではネストされたフレームセットが必要になります。つまり、2 行で構成されるフレームセットに加えて、その 2 行目に 2 列で構成されるフレームセットをネストする必要があります。
A. メインフレームセット B. メニューフレームとコンテンツフレームがメインフレームセットの中にネストされています。
Dreamweaver では必要に応じてフレームセットをネスト処理します。そのため、Dreamweaver のフレーム分割ツールを使用する場合は、どのフレームがネストされ、どのフレームがネストされないかの詳細に気を配る必要はありません。
HTML でフレームセットをネストする方法は 2 通りあります。内側のフレームセットを外側のフレームセットと同じファイルで定義する方法と、それぞれを個別のファイルで定義する方法です。Dreamweaver の各定義済みフレームセットは、1 つのファイルでフレームセットすべてを定義しています。
いずれの方法でネストされていても表示結果は同じで、コードを調べない限り、どの方法でネストしているかは簡単には判別できません。Dreamweaver で外部フレームセットファイルが使用される可能性が最も高いのは、「フレーム内に開く」コマンドを使用してフレーム内にフレームセットファイルを開く場合です。これを実行すると、リンクのターゲットの設定に問題が発生することがあります。一般に、すべてのフレームセットを 1 つのファイルに定義する方法が最も簡単です。
ドキュメントウィンドウでのフレームセットの操作
Dreamweaver では、1 つのドキュメントウィンドウで、一組のフレームと関連付けられたすべてのドキュメントを表示および編集できます。これにより、編集しながらブラウザーにフレーム付きページがどのように表示されるか、だいたいわかります。ただし、この方法には、慣れるまではわかりにくい面もあります。特に、各フレーム内に個別の HTML ドキュメントが表示される点に注意してください。ドキュメントが空であっても、プレビューする前にドキュメントをすべて保存する必要があります(これは、フレームセットに、各フレームに表示するドキュメントの URL が含まれていないと、フレームセットを正確に表示できないためです)。
フレームセットがブラウザーに適切に表示されることを確認するには:
-
フレームセットを作成し、各フレームに表示されるドキュメントを指定します。
-
フレームに表示されるすべてのファイルを保存します。各フレームに表示される HTML ドキュメントはそれぞれ別のドキュメントなので、フレームセットファイルと共に各ドキュメントを保存する必要があります。
-
各フレームおよびフレームセットのオプションを設定します(各フレームの名前、スクロールオプション、非スクロールオプションの設定など)。
-
すべてのリンクについてプロパティインスペクターの「ターゲット」プロパティを設定し、リンクされたコンテンツが適切な領域に表示されるようにします。
フレームおよびフレームセットの作成
Dreamweaver でフレームセットを作成する方法は 2 通りあります。複数の定義済みフレームセットの中から選択するか、または、ユーザー自身でフレームセットをデザインします。
定義済みフレームセットを選択すると、レイアウトの作成に必要なすべてのフレームセットとフレームが設定されます。これは、フレームを使用したレイアウトを素早く作成する最も簡単な方法です。定義済みのフレームセットは、ドキュメントウィンドウのデザインビューからのみ挿入できます。
ドキュメントウィンドウに「分割バー」を追加すれば、Dreamweaver 内でユーザー独自のフレームセットをデザインすることも可能です。
フレームセットを作成または操作する前に表示/ビジュアルエイド/フレームボーダーを選択して、ドキュメントウィンドウのデザインビューにフレームボーダーを表示してください。
定義済みフレームセットを作成してフレーム内に既存のドキュメントを表示
-
ドキュメント内に挿入ポイントを置き、次のいずれかの操作を行います。
挿入/HTML/フレームを選択し、定義済みフレームセットを選択します。
挿入パネルの「レイアウト」カテゴリーで、「フレーム」ボタンの下向き矢印をクリックし、定義済みフレームセットを選択します。
フレームセットアイコンは、現在のドキュメントに適用される各フレームセットを視覚的に表現しています。フレームセットのアイコンの青い領域は現在のドキュメント用のフレームで、白い領域は他のドキュメントを表示するフレームです。
-
フレームのアクセシビリティ属性を要求するよう Dreamweaver を設定してある場合は、ポップアップメニューからフレームを選択し、フレームの名前を入力して「OK」をクリックします。スクリーンリーダーを使用するビジターの場合は、ページでフレームが検出されると、スクリーンリーダーがこの名前を読み上げます。注意:
新しい名前を入力せずに「OK」をクリックすると、Dreamweaver により、フレームセット内の場所(左フレーム、右フレームなど)に対応した名前が自動的に設定されます。
注意:「キャンセル」を押すと、フォームセットはドキュメント内に表示されますが、Dreamweaver は、アクセシビリティタグや属性をこのフォームオブジェクトに関連付けません。
注意:名前を付けるフレームのダイアグラムを表示するには、ウィンドウ/フレームを選択します。
空の定義済みフレームセットの作成
-
ファイル/新規を選択します。
-
新規ドキュメントダイアログボックスで、「サンプルから作成」カテゴリーを選択します。
-
「サンプルフォルダー」列のフレームセットフォルダーを選択します。
-
「サンプルページ」列からフレームセットを選択し、「作成」をクリックします。
-
「環境設定」でフレームアクセシビリティ属性をアクティブにしている場合は、フレームタグのアクセシビリティ属性ダイアログボックスが表示されます。各フレームについてこのダイアログボックスに情報を入力し、「OK」をクリックしてください。注意:
「キャンセル」を押すと、フォームセットはドキュメント内に表示されますが、Dreamweaver は、アクセシビリティタグや属性をこのフォームオブジェクトに関連付けません。
フレームセットの作成
-
修正/フレームセットを選択し、サブメニューから分割用のアイテム(「フレームを左に分割」または「フレームを右に分割」 など)を選択します。
Dreamweaver により、ウィンドウが複数のフレームに分割されます。既に既存のドキュメントを開いている場合は、そのドキュメントがいずれかのフレーム内に表示されます。
フレームを小さいフレームに分割
- 挿入ポイントがあるフレームを分割するには、修正/フレームセットサブメニューを選択し、分割用のアイテムを選択します。
1 つのフレームまたは一組のフレームを縦または横に分割するには、デザインビューの端から中央に向けてフレームボーダーをドラッグします。
デザインビューの端以外の位置にあるフレームボーダーを使用してフレームを分割するには、Alt キー(Windows)または Option キー(Mac OS)を押しながら、フレームボーダーをドラッグします。
1 つのフレームを 4 つのフレームに分割するには、デザインビューの 1 つの角からフレームボーダーをフレームの中央までドラッグします。
フレームを 3 つ作成するには、2 つフレームを作成してから、そのいずれかを分割します。隣接する 2 つのフレームをマージするには、フレームセットのコードを編集しなければならないことがあります。そのため、4 つのフレームを 3 つに変更するのは、2 つのフレームを 3 つに変更するよりも困難です。
フレームの削除
-
フレームボーダーをドラッグしてページの外で放すか、親フレームのボーダーにドラッグします。
削除するフレーム内のドキュメントに保存されていないコンテンツがあると、Dreamweaver からドキュメントを保存するよう要求されます。
注意:フレームセットは、ボーダーのドラッグでは完全には削除できません。フレームセットを削除するには、それが表示されているドキュメントウィンドウを閉じます。フレームセットファイルが保存されている場合は、ファイルを削除します。
フレームのサイズ変更
- フレームのおおよそのサイズを設定するには、ドキュメントウィンドウのデザインビューでフレームボーダーをドラッグします。
- プロパティインスペクターを使用すると正確なサイズを指定できるほか、ブラウザーウィンドウのサイズが小さいためにフレームが完全に表示できない場合にブラウザーがフレームの行または列に割り当てるスペースも指定できます。
フレームとフレームセットの選択
フレームまたはフレームセットのプロパティを変更するには、まず変更するフレームまたはフレームセットを選択します。フレームまたはフレームセットの選択は、ドキュメントウィンドウ内で行うか、フレームパネルを使用して行います。
フレームパネルは、フレームセット内のフレームを視覚的に表現したものです。フレームパネルには、フレームセット構造の階層が表示されます。ドキュメントウィンドウでは、この階層は明確に判別できないことがあります。フレームパネルでは、フレームセットは太いボーダーで囲まれています。また、フレームは細いグレーの線で囲まれており、それぞれのフレームはフレーム名で識別されます。
ドキュメントウィンドウのデザインビューでフレームを選択すると、そのボーダーが点線で表示されます。また、フレームセットを選択すると、そのフレームセットに含まれるすべてのフレームのボーダーが明るい点線で表示されます。
フレームに表示されたドキュメントに挿入ポイントを配置することは、フレームを選択することとは異なります。フレームを選択するには、(フレームプロパティの設定など)様々な操作をする必要があります。
フレームパネル内でのフレームまたはフレームセットの選択
-
ウィンドウ/フレームを選択します。
-
フレームパネルで、次の操作を行います。
フレームを選択するには、目的のフレームをクリックします。フレームパネルとドキュメントウィンドウのデザインビューの両方で、フレームの周囲に選択アウトラインが表示されます。
フレームセットを選択するには、フレームセットを囲むボーダーをクリックします。
ドキュメントウィンドウ内でのフレームまたはフレームセットの選択
- フレームを選択するには、デザインビューで Alt キー(Windows)または Option + Shift(Mac OS)を押しながら、フレームの内側をクリックします。
- フレームセットを選択するには、デザインビューでフレームセット内のフレームボーダーの 1 つをクリックします。これを行うには、フレームボーダーが表示されている必要があります。非表示になっている場合は、表示/ビジュアルエイド/フレームボーダーを選択してフレームボーダーを表示してください。
通常、フレームセットは、ドキュメントウィンドウよりもフレームパネルで選択する方が簡単です。詳しくは、前のトピックを参照してください。
別のフレームまたはフレームセットの選択
- 現在選択しているものと同じ階層レベルにある次または前のフレームまたはフレームセットを選択するには、Alt キー(Windows)または Command キー(Mac OS)を押しながら、左向き矢印キーまたは右向き矢印キーを押します。これらのキーを使用すると、フレームセットファイルに定義された順序で、フレームおよびフレームセットを順番に切り替えることができます。
- 親フレームセット(現在選択されているものを含むフレームセット)を選択するには、Alt キー(Windows)または Command キー(Mac OS)を押しながら上矢印キーを押します。
- 現在選択しているフレームセットの最初の子フレームまたはフレームセット(フレームセットファイルで一番最初に定義されているもの)を選択するには、Alt キー(Windows)または Command キー(Mac OS)を押しながら下矢印キーを押します。
フレーム内にドキュメントを開く
フレームの最初のコンテンツを指定するには、フレーム内の空のドキュメントに新しいコンテンツを挿入するか、フレーム内で既存のドキュメントを開きます。
-
フレームに挿入ポイントを置きます。
-
ファイル/フレーム内に開くを選択します。
-
フレーム内に開くドキュメントを選択し、「OK」(Windows)または「選択」(Mac OS)をクリックします。
-
(オプション)そのドキュメントを、ブラウザーでフレームセットを開いたときにフレームに表示される初期設定のドキュメントにするには、フレームセットを保存します。
フレームファイルとフレームセットファイルの保存
ブラウザーでフレームセットをプレビューできるようにするには、フレームセットファイルとフレームに表示するすべてのドキュメントを保存する必要があります。フレームセットファイルとフレームに表示されるすべてのドキュメントは、それぞれ個別に保存することも一括して保存することもできます。
Dreamweaver のビジュアルツールを使用してフレームのセットを作成する場合、フレームに表示される各新規ドキュメントには初期設定のファイル名が指定されます。例えば、最初のフレームセットファイルの名前は UntitledFrameset-1 に、フレーム内の最初のドキュメントの名前は UntitledFrame-1 になります。
フレームセットファイルの保存
-
フレームパネルまたはドキュメントウィンドウで、フレームセットを選択します。
フレームセットファイルを保存するには、ファイル/フレームセットの保存を選択します。
フレームセットファイルを新しいファイルとして保存するには、ファイル/フレームセットの新規保存を選択します。
注意:まだフレームセットファイルが保存されていない場合は、2 つのコマンドは同じです。
フレーム内に表示されるドキュメントの保存
-
フレーム内をクリックし、ファイル/フレームの保存、またはファイル/フレームの新規保存を選択します。
一組のフレームと関連付けられたすべてのファイルの保存
-
ファイル/すべてのフレームを保存を選択します。
この操作によって、フレームセットファイルおよびフレームに表示されるドキュメントすべてを含む、フレームセット内の開いているすべてのドキュメントが保存されます。フレームセットファイルがまだ保存されていない場合は、デザインビューでフレームセット(または保存されていないフレーム)の周りに太いボーダーが表示されて、ファイル名を選択できます。
注意:ファイル/フレーム内に開くを選択してフレーム内にドキュメントを開いた場合、フレームセットを保存するときにフレーム内に開いたドキュメントが、そのフレームで表示される初期設定のドキュメントになります。そのドキュメントを初期設定にしない場合は、フレームセットファイルを保存しないでください。
フレームのプロパティおよび属性の表示と設定
大部分のフレームプロパティの表示および設定には、プロパティインスペクターを使用できます(ボーダー、マージン、フレームにスクロールバーを表示するかどうかなど)。フレームのプロパティを設定すると、フレームセットでそのプロパティの設定が上書きされます。
title 属性(name 属性とは異なります)などのフレーム属性を設定して、アクセシビリティを向上させることもできます。フレームのアクセシビリティオーサリングオプションを有効にすると、フレーム作成時に属性が設定されます。また、フレームの挿入後に属性を設定することも可能です。フレームのアクセシビリティ属性を編集するには、タグインスペクターを使用して HTML コードを直接編集してください。
フレームのプロパティの表示または設定
-
以下のいずれかの操作を行って、フレームを選択します。
ドキュメントウィンドウのデザインビューで、Alt キー(Windows)または Option + Shift キー(Mac OS)を押しながらフレームをクリックします。
フレームパネル(ウィンドウ/フレーム)でフレームをクリックします。
-
プロパティインスペクター(ウィンドウ/プロパティ)の右下隅にある縮小の三角形をクリックして、すべてのフレームプロパティを表示します。
-
フレームのプロパティインスペクターオプションを設定します。
フレーム名
リンクの target 属性またはフレームを参照するためにスクリプトで使用される名前を指定します。フレーム名は 1 語にします。アンダースコア(_)は使用できますが、ハイフン(–)、ピリオド(.)、およびスペースは使用できません。フレーム名は、数字ではなく文字で始まる必要があります。フレーム名では、大文字と小文字が区別されます。フレーム名には、top や navigator などの JavaScript の予約語は使用しないでください。
注意:リンクから別のフレームのコンテンツが変わるようにするには、ターゲットフレームに名前を付ける必要があります。後でフレーム間のリンクを作成しやすくするには、各フレームの作成時に名前を付けます。
ソース
フレームに表示するソースドキュメントを指定します。フォルダーアイコンをクリックし、ファイルを参照して選択します。
スクロール
フレームにスクロールバーを表示するかどうかを指定します。このオプションを「初期設定」に設定すると、対応する属性の値は設定されず、各ブラウザーの初期設定値が使用されます。多くのブラウザーでは初期設定に「自動」が設定されており、ブラウザーウィンドウの現在のフレームに全コンテンツを表示する領域がない場合のみ、スクロールバーが表示されます。
サイズ変更なし
選択すると、ビジターがブラウザー内でフレームボーダーをドラッグしてフレームサイズを変更できません。
注意:Dreamweaver では、いつでもフレームのサイズを変更できます。このオプションは、ブラウザーでフレームを表示しているビジターにのみ適用されます。
ボーダー
現在のフレームのボーダーをブラウザーに表示するかどうかを指定します。フレームの「ボーダー」オプションを選択すると、フレームセットに定義されているボーダー設定が上書きされます。
ボーダーのオプションには、「はい」(ボーダーを表示)、「いいえ」(ボーダーを非表示)、および「指定なし」があります。親フレームセットで「ボーダー」が「いいえ」に設定されていない限り、ほとんどのブラウザーでは初期設定でボーダーが表示されます。ボーダーが非表示になるのは、そのボーダーを共有するすべてのフレームで「ボーダー」が「いいえ」に設定されている場合、または、親フレームセットの「ボーダー」プロパティが「いいえ」に設定されており、かつボーダーを共有するフレームで「ボーダー」が「指定なし」に設定されている場合に限られます。
ボーダーカラー
フレームのすべてのボーダーのボーダーカラーを設定します。このカラーは、フレームに接するすべてのボーダーに適用され、フレームセットに指定されたボーダーカラーを上書きします。
マージン幅
左右のマージン(フレームボーダーとコンテンツの間のスペース)の幅をピクセル単位で設定します。
マージンの高さ
上下のマージン(フレームボーダーとコンテンツの間のスペース)の高さをピクセル単位で設定します。
注意:フレームのマージン幅と高さの設定は、修正/ページプロパティダイアログボックスを選択して設定したマージンとは異なります。
注意:フレームの背景色を変更するには、ページプロパティでフレームのドキュメントの背景色を設定します。
フレームのアクセシビリティ値の設定
-
フレームパネル(ウィンドウ/フレーム)で、いずれかのフレームに挿入ポイントを置いて、フレームを選択します。
-
修正/タグを編集 <タグ名> を選択します。
-
左のカテゴリーリストで「スタイルシート/アクセシビリティ」を選択し、値を入力して「OK」をクリックします。
フレームのアクセシビリティ値の変更
-
現在デザインビューが表示されている場合は、ドキュメントのコードビュー、またはコードビューとデザインビューの両方を表示します。
-
フレームパネル(ウィンドウ/フレーム)で、いずれかのフレームに挿入ポイントを置いて、フレームを選択します。Dreamweaver により、コード内のフレームタグがハイライト表示されます。
-
コードを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、「タグの編集」を選択します。
-
タグエディターを使用して必要な変更を加え、「OK」 をクリックします。
フレーム内ドキュメントの背景色の変更
-
フレームに挿入ポイントを置きます。
-
修正/ページプロパティを選択します。
-
ページプロパティダイアログボックスで背景色メニューをクリックし、背景色を選択します。
フレームセットプロパティの表示および設定
大部分のフレームセットプロパティの表示および設定には、プロパティインスペクターを使用できます(フレームセットのタイトル、ボーダー、フレームサイズなど)。
フレームセットドキュメントのタイトル設定
-
以下のいずれかの操作を行って、フレームセットを選択します。
ドキュメントウィンドウのデザインビューで、フレームセット内の 2 つのフレーム間のボーダーをクリックします。
フレームパネル(ウィンドウ/フレーム)で、フレームセットを囲むボーダーをクリックします。
-
ドキュメントウィンドウのツールバーの「タイトル」フィールドに、フレームセットドキュメントの名前を入力します。
ビジターがブラウザー上にフレームセットを表示すると、ブラウザーのタイトルバーにそのタイトルが表示されます。
フレームセットプロパティの表示または設定
-
以下のいずれかの操作を行って、フレームセットを選択します。
ドキュメントウィンドウのデザインビューで、フレームセット内の 2 つのフレーム間のボーダーをクリックします。
フレームパネル(ウィンドウ/フレーム)で、フレームセットを囲むボーダーをクリックします。
-
プロパティインスペクター(ウィンドウ/プロパティ)の右下隅にある縮小の三角形をクリックして、以下のフレームセットオプションを設定します。
ボーダー
ドキュメントをブラウザーで表示するときに、フレームの周りにボーダーを表示するかどうかを指定します。ボーダーを表示するには「はい」を選択します。ボーダーを非表示にするには「いいえ」を選択します。ボーダーを表示するかどうかの決定をブラウザーに任せるには「指定なし」を選択します。
ボーダー幅
フレームセットに含まれるすべてのボーダーの幅を指定します。
ボーダーカラー
ボーダーのカラーを設定します。カラーピッカーを使用してカラーを選択するか、カラーの 16 進値を入力します。
行列選択
選択したフレームセットの行と列のフレームサイズを設定します。「行列選択」領域の左側または上部にあるタブをクリックし、「値」テキストボックスに高さまたは幅を入力してください。
-
各フレームに対して割り当てられるブラウザーのスペースを指定するには、単位メニューから次の選択肢を選択します。
ピクセル
選択した列または行のサイズを絶対値で設定します。このオプションは、ナビゲーションバーなどの、サイズを固定する必要があるフレームに適しています。ピクセルでフレームのサイズを指定すると、パーセントまたは相対でサイズを指定するよりも前にスペースが割り当てられます。フレームサイズの最も一般的な設定方法では、左側のフレームは固定ピクセル幅、右側のフレームは相対幅に設定します。右側のフレームは、ピクセル幅が割り当てられた後の残りのスペース全体を占めるように拡張されて表示されます。
注意:すべての幅をピクセル単位で指定した場合、ビジターがブラウザーでフレームセットを表示するときの幅が指定された幅よりも広すぎるか狭すぎると、使用可能なスペースと一致するようにすべてのフレームが同じ比率で拡張または縮小されます。これは、高さをピクセルで指定した場合も同じです。したがって、少なくとも 1 つの幅と高さを「相対」に設定することをお勧めします。
%
選択した列または行を、そのフレームセットの合計の幅または高さに対する特定の割合に指定します。単位が「%」に設定されているフレームは、単位が「ピクセル」に設定されているフレームより後にスペースを割り当てられ、単位が「相対」に設定されているフレームより前にスペースを割り当てられます。
相対
選択した列または行に、ピクセルおよびパーセントを指定したフレームにスペースが割り当てられた後の残りの使用可能スペースを割り当てます。残りのスペースは、サイズが「相対」に設定されたフレームの間で比例して分けられます。
注意:単位メニューで「相対」を選択すると、「値」フィールドに入力した数値は消去されます。数値を指定する場合は、再入力する必要があります。「相対」に設定された行または列が 1 つだけの場合は、数値を入力する必要はありません。その行または列に、他の行または列にスペースが割り当てられた後の残りのスペースがすべて割り当てられるからです。異なるブラウザー間での互換性を完全に確保するには、「値」フィールドに 1 を入力します。これは、何も値を入力しない場合と同じです。
リンクを持つフレームコンテンツの制御
あるフレーム内のリンクから別のフレームにドキュメントを開くには、リンクのターゲットを設定する必要があります。リンクされたコンテンツをどのフレームまたはウィンドウで開くかは、リンクの target 属性で指定します。
例えば、ナビゲーションバーが左側のフレームにあり、リンクされたコンテンツを右側のメインコンテンツフレームに表示したい場合、ナビゲーションバーのそれぞれのリンクのターゲットとして、メインコンテンツフレームの名前を指定します。ビジターがナビゲーションリンクをクリックすると、指定されたコンテンツがメインフレームに表示されます。
-
デザインビューで、テキストまたはオブジェクトを選択します。
-
プロパティインスペクター(ウィンドウ/プロパティ)の「リンク」ボックスで、次のいずれかの操作を行います。
フォルダーアイコンをクリックし、リンク先のファイルを選択します。
ファイルの指定アイコンをファイルパネルにドラッグし、リンク先のファイルを選択します。
-
プロパティインスペクターのターゲットメニューで、リンクされたドキュメントを表示するフレームまたはウィンドウを選択します。
_blank は、リンクされたドキュメントを新しいブラウザーウィンドウに開き、現在のウィンドウをそのままの状態に保ちます。
_parent は、リンクされたドキュメントを、リンクが表示されるフレームの親フレームセット内で開き、フレームセット全体を置き換えます。
_self は、現在のフレーム内でリンクを開き、そのフレームのコンテンツを置き換えます。
_top は、リンクされたドキュメントを現在のブラウザーウィンドウ内で開き、すべてのフレームを置き換えます。
フレーム名はこのメニューにも表示されます。名前の付いたフレームを選択して、リンクされたドキュメントをそのフレーム内で開きます。
注意:フレーム名は、フレームセット内でドキュメントを編集しているときにのみ表示されます。ドキュメントをドキュメント自体のドキュメントウィンドウで編集している場合、フレーム名はターゲットポップアップメニューに表示されません。フレームセット外でドキュメントを編集している場合は、「ターゲット」テキストボックスにターゲットフレーム名を入力できます。
注意:サイト外のページにリンクする場合、そのページがサイトの一部のように表示されないよう、必ず target="_top" または target="_blank" を使用してください。
フレームをサポートしていないブラウザー向けコンテンツの提供
Dreamweaver では、フレームをサポートしないテキストベースのブラウザーおよび古いグラフィカルブラウザーに表示するコンテンツを指定できます。このコンテンツは、noframes タグで囲まれ、フレームセットファイルに保存されます。フレームをサポートしていないブラウザー上にフレームセットファイルをロードすると、noframes タグで囲まれたコンテンツだけが表示されます。
noframes 領域に表示するコンテンツは、「フレーム処理が可能なブラウザーにアップグレードする必要があります」だけでは不十分です。例えば、サイトビジターが使用しているシステムがフレームに対応していない可能性もあります。
-
修正/フレームセット/NoFrames(ノーフレーム)の内容編集を選択します。
Dreamweaver によってデザインビューがクリアされ、「(ノーフレーム)コンテンツ」とデザインビューの上部に表示されます。
-
次のいずれかの操作を実行します。
ドキュメントウィンドウで、通常のドキュメントの場合と同じようにコンテンツを入力または挿入します。
ウィンドウ/コードインスペクターを選択し、挿入ポイントを noframes タグ内に表示される body タグの中に配置して、コンテンツの HTML コードを入力します。
-
再度修正/フレームセット/NoFrames(ノーフレーム)の内容編集を選択し、フレームセットドキュメントの標準表示に戻ります。
フレームでの JavaScript ビヘイビアーの使用
特にフレームでの使用に適した JavaScript ビヘイビアーとナビゲーション関連のコマンドがいくつかあります。
フレームテキストを設定
フレームのコンテンツとフォーマットが、指定したコンテンツに置き換わります。コンテンツには、有効な HTML を含めることができます。このアクションを使用して、フレームに情報を動的に表示します。
URL に移動
現在のフレームまたは指定したフレーム内に新しいページが開きます。このアクションは、2 つ以上のフレームのコンテンツを 1 回クリックするだけで変更する場合に特に便利です。
ジャンプメニューの挿入
リンクのメニューリストを設定できます。このリストをクリックすると、ブラウザーウィンドウ内にファイルが開きます。また、ドキュメントが表示される特定のウィンドウまたはフレームをターゲットにすることもできます。
詳細は、JavaScript ビヘイビアーの追加を参照してください。