Dreamweaver CC教程：如何使用 DOM 面板

了解如何通过映射实时视图中的元素或 CSS Designer 中应用的选择器及其 HTML 标记，使用 DOM 面板来编辑 HTML 结构。
DOM 面板呈现包含静态和动态内容的交互式 HTML 树。此视图有助于直观地在实时视图中通过 HTML 标记以及 CSS Designer 中所应用的选择器，对元素进行映射。您也可在 DOM 面板中编辑 HTML 结构，并在实时视图中查看即时生效的更改。
要打开 DOM 面板，请选择“窗口”>“DOM”。也可使用键盘快捷键（Ctrl + /（在 Windows 中）；Cmd + /（在 Mac 中）），打开 DOM 面板。
当您拖动元素以直接将其插入实时视图时，在放置元素之前会出现 </> 图标。您可以单击此图标打开 DOM 面板并在文档结构中的适当位置插入此元素。有关详细信息，请参阅直接在“实时视图”中插入元素。
DOM 面板在代码视图或设计视图中仅显示静态元素，在实时视图中则同时显示静态和动态元素。
在流体网格文档中，DOM 面板只能将 HTML DOM 结构可视化，而不能编辑 HTML 结构。
注意:
在 DOM 面板中，您只能编辑静态内容。只读或动态元素以较深的灰色阴影显示。

DOM 面板

可将 DOM 面板移动到用户界面上的任意便利位置。您还可以将此面板与其他面板一起停放。
如何使用 DOM 面板
1、打开所需的文档，然后依次选择“窗口”>“DOM”即可打开 DOM 面板。
2、切换至实时视图，并单击希望检查或编辑的元素。

选定元素的 HTML 标记在 DOM 面板中突出显示。所应用的选择器在 CSS Designer 中突出显示。相关代码在代码视图中突出显示。相关标签在标签选择器中（以蓝色）突出显示。

或者，您可以在 DOM 面板中选择一个 HTML 元素。当您单击 DOM 面板中的任何元素时：

实时视图滚动到相应的元素。如果代码视图打开，则代码视图滚动到与该元素对应的代码。 CSS Designer（选择器窗格）滚动到最接近的相应选择器（类似于在实时视图中单击元素）。此标签在标签选择器中突出显示。

不同视图和 CSS Designer 之间的同步让您能够概览与选定元素相关联的 HTML 标记和样式。
3、继续根据要求编辑该元素（HTML 或 CSS 编辑）。有关使用 DOM 面板编辑 HTML 标记的信息，请参阅使用 DOM 面板编辑 HTML 结构。有关 CSS Designer 的信息，请参阅使用 CSS Designer 对页面进行布局。