Dreamweaver CC教程：导航到相关代码

导航到相关代码
代码导航器可显示与页面上特定选定内容相关的代码源列表。使用代码导航器导航到相关的代码源，例如内部和外部 CSS 规则、服务器端包含、外部 JavaScript 文件、父模板文件、库文件和 iframe 源文件。在代码导航器中单击某一链接时，Dreamweaver 将打开包含相关代码片段的文件。如果启用该文件，则该文件将显示在相关文件区域。如果未启用相关的文件，则 Dreamweaver 将在“文档”窗口中将所选文件作为单独的文档打开。
当单击代码导航器中的 CSS 规则时，Dreamweaver 直接将您转到该规则。如果该规则在文件内部，则 Dreamweaver 会在“拆分”视图中显示该规则。如果该规则位于外部 CSS 文件中，则 Dreamweaver 会打开该文件并在主文档上方的相关文件区域中显示该文件。
可以从“设计”视图、“代码”视图和“拆分”视图以及“代码检查器”访问代码导航器。
Dreamweaver 工程团队提供了有关使用代码浏览器的视频概览，如欲获得该视频资料，请访问 www.adobe.com/go/dw10codenav_cn。
有关使用“实时”视图、相关文件和代码导航器的视频教程，请参阅 www.adobe.com/go/lrvid4044_dw。

打开“代码导航器”

按住 Alt 并单击 (Windows) 或按住 Command+Option 并单击 (Macintosh) 页面上的任何位置。“代码导航器”可显示指向影响所单击区域的代码的链接。
在“代码导航器”的外部单击以将其关闭。
注意:
还可以通过单击“代码导航器”指示器来打开“代码导航器”。当鼠标空闲 2 秒钟时，该指示器将显示在页面上插入点的旁边。

使用“代码导航器”导航到代码

1、从您感兴趣的页面区域打开“代码导航器”。
2、单击要转到的代码片段。
“代码导航器”根据文件对相关的代码源分组并按字母顺序列出文件。例如，假设三个外部文件中的 CSS 规则影响文档中的选定内容。在这种情况下，“代码导航器”会列出这三个文件以及与选定内容相关的 CSS 规则。对于与给定内容相关的 CSS，“代码导航器”功能类似于“当前”模式中的“CSS 样式”面板。
注意:
当鼠标悬停在指向 CSS 规则的链接上方时，“代码导航器”将显示该规则中属性的工具提示。当要区分共享某个名称的多个规则时，这些工具提示非常有用。

禁用“代码导航器”指示器

1、打开“代码导航器”。
2、选择右下角的“禁用指示器”。
3、在“代码导航器”的外部单击以将其关闭。
若要重新启用“代码导航器”指示器，请按住 Alt 并单击 (Windows) 或按住 Command+Option 并单击 (Macintosh) 以打开“代码导航器”，然后取消选择“禁用指示器”选项。