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

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 对页面进行布局。