当前位置:首页> 正文

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 面板移动到用户界面上的任意便利位置。您还可以将此面板与其他面板一起停放。
如何使用 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 对页面进行布局。

 

展开全文阅读

相关内容