Dreamweaver 使您可以查看与主文档相关的文件而不会失去主文档的焦点。例如，如果已向主文档附加了 CSS 和 JavaScript 文件，则使用 Dreamweaver 可以在保持主文档可见的同时在“文档”窗口中查看和编辑这些相关文件。 注： 下一个帮助章节中将介绍动态相关文件（例如内容管理系统中的 PHP 文件）。

默认情况下，Dreamweaver 在主文档标题下的“相关文件”工具栏中显示与主文档相关的所有文件的名称。工具栏中按钮的顺序遵循主文档内存在的相关文件链接的顺序。

注： 如果缺少某个相关文件，Dreamweaver 仍会在“相关文件”工具栏中显示对应的按钮。但是，如果单击该按钮，Dreamweaver 将不显示任何内容。

Dreamweaver 支持以下类型的相关文件：

• 客户端脚本文件

• Server Side Includes

• Spry 数据集源（XML 和 HTML）

• 外部 CSS 样式表（包括嵌套样式表）

从相关文件工具栏中打开相关文件

请执行下列操作之一：

• 在文档顶部的“相关文件”工具栏中，单击要打开的相关文件的文件名。

• 在“相关文件”工具栏中，右键单击要打开的相关文件的文件名，然后从上下文菜单中选择“作为单独文件打开”。使用此方法打开相关文件时，主文档不会同时保持可见。

从代码导航器中打开相关文件

1. 将插入点放置在已知受相关文件影响的行或区域中。

2. 等待代码导航器指示器出现后，单击它以打开代码导航器。

3. 将鼠标指针悬停在代码导航器中的项目上可以查看有关这些项目的更多信息。例如，如果想更改特定的 CSS 颜色属性，但不知道它位于哪个规则中，您可以通过将鼠标指针悬停在代码导航器中可用的规则上来查找该属性。

4. 单击您感兴趣的项目以打开对应的相关文件。

返回到主文档的源代码

 单击“相关文件”工具栏中的“源代码”按钮。

更改相关文件的显示

您可以使用多种方式查看相关文件：

• 从“设计”视图或“代码”和“设计”视图（“拆分”视图）中打开相关文件时，将在主文档的“设计”视图上方的拆分视图中显示相关文件。

  如果想让相关文件改为显示在“文档”窗口的底部，可以选择“视图”>“顶部的“设计”视图”。

• 从纵向拆分的“代码”和“设计”视图（“视图”>“垂直拆分”）中打开相关文件时，将在与主文档的“设计”视图并排的拆分视图中显示相关文件。

  根据您希望“设计”视图所处的位置，可以选择或取消选择“左侧的“设计”视图”（“视图”>“左侧的“设计”视图”）。

• 根据已选择的选项，在从“拆分代码”视图或“垂直拆分代码”视图（“视图”>“拆分“代码”视图”和“视图”>“垂直拆分”）中打开相关文件时，将在主文档源代码下方、上方或并排的拆分视图中显示相关文件。

  显示选项中的““代码”视图”是指主文档的源代码。例如，如果选择“视图”>“顶部的“代码”视图”，Dreamweaver 将在“文档”窗口的上半部分中显示主文档的源代码。如果选择“视图”>“左侧的“代码”视图”，Dreamweaver 将在“文档”窗口的左侧显示主文档的源代码。

• 标准“代码”视图不允许在显示主文档源代码的同时显示相关文档。

禁用相关文件

1. 选择“编辑”>“首选参数”(Windows) 或“Dreamweaver”>“首选参数”(Macintosh)。

2. 在“常规”类别中，取消选择“启用相关文件”。