関連ファイル機能を利用して、作業中のファイルに関連付けられているサポートファイルと関連ファイルにアクセスできます。関連ファイルには、CSS ファイル、スクリプトファイル、サーバーサイドインクルード（SSI）ファイル、XML ファイルなどがあります。
例えば、CSS ファイルがメインファイルに関連付けられている場合、この CSS ファイルの表示と編集にこの機能を活用できます。さらに、関連ファイルを編集しながらメインファイルも表示できます。
ドキュメントがローカルサイトのパスから開かれ、それがテストサーバーから読み込まれない場合、リソースがローカルマシン上にないプロトコル相対 URL (// で始まる) とファイルプロトコル URL (file:// または file:/// で始まる) は、http を省略しないことで解決されるようになりました。
- アセットが http で利用できない場合、Dreamweaver は https から関連するファイルを読み込もうとします。
- アセットが https でも利用できない場合、Dreamweaver は関連ファイルまたはアセットの読み込みに失敗します。また、アセットが配置されているネットワークサーバーで認証が必要な場合は、サインインダイアログが表示されます。
関連ファイルの動作
関連ファイルを利用することで、次のような操作を実行でき、編集作業の効率が高まります。
メインファイルを表示しながら関連ファイルを表示し、アクセスすることができます。関連ファイル（CSS ファイルなど）を含むページは、次のように表示できます。
一方にページのデザイン
もう一方に関連ファイル
関連ファイルバーには、親 HTML の生成に影響するドキュメントが表示されます。ソース HTML、生成 HTML、第 1 レベルの子ドキュメントを表示できます。
関連ファイルバーに表示される関連ファイルを選択すると、次の操作を実行できます。
コードビューに関連ファイルを表示し、編集できます。
デザインビューに親ページを表示できます。
デザインビューでコンテンツを選択して、関連ファイルに変更を加え、デザインビューを更新しても、選択は維持されます。
関連ファイルのコードを変更すると、その変更がデザインビューに反映されます。
ファイルが見つからない場合、空白のウィンドウ枠の上部のバーに、ファイルが見つからないという内容のメッセージが表示されます。
関連ファイルの用語
関連ファイルに関してよく使用される用語を以下で説明します。
用語 |
説明 |
例 |
|---|---|---|
最上位のドキュメント |
ユーザーが開く任意のドキュメント |
|
親ドキュメント |
デザインビューに表示される任意の最上位ドキュメント |
|
第 1 レベルの子ドキュメント |
親ドキュメントから 1 レベル下にある任意のドキュメント。このドキュメントは HTML コードの生成に影響します（CSS は例外）。CSS ファイルには他の CSS ファイルもインクルードできますが、ページに適用される最終的なスタイルはすべての CSS ファイルによって決定されます。 |
|
下位レベルの子ドキュメント |
親ドキュメントから 2 レベル以上離れた任意のドキュメント。このドキュメントは HTML コードの生成に影響します。 |
|
非関連ファイル |
HTML コードの生成に影響しない任意のドキュメント、またはユーザーが現在編集していない任意のファイル。 |
|
サポートされている関連ファイルは以下のとおりです。
タイプ |
説明 |
ネストレベル |
|---|---|---|
クライアントサイドスクリプト |
全言語 |
1 （スクリプトのネストは不可） |
サーバーサイドインクルード |
次の拡張可能条件がすべて満たされる場合
例外： HTML ドキュメントでは、Apache スタイルのインクルードファイルステートメント（<!--#include ... -->）は認識されます。 |
1 |
Spry データセット |
1 （スクリプトのネストは不可） |
|
CSS |
|
無制限 |
関連ファイル API
関連ファイルメニューをカスタマイズすることで、次の内容を表示できます。
関連ファイルのファイル名
ソース HTML と生成ソースコード
dreamweaver.openRelatedFile() 関数を使用すると関連ファイルがコードビューに表示され、dreamweaver.getActiveRelatedFilePath() 関数を使用すると現在開いている関連ファイルのパスが表示されます。これらの API の使用方法について詳しくは、『Dreamweaver API リファレンス』の「関連ファイル関数」を参照してください。
