Dreamweaver CC教程：元素显示

Dreamweaver CC教程：元素显示

了解如何在实时视图中设计、编辑和预览网页。重新排列或插入元素、应用选择器、编辑图像属性、插入、编辑文本和设置文本格式，无需切换到代码视图。
实时视图使用一个基于 Chromium 的渲染引擎，使您的内容看上去与您喜爱的 Web 浏览器中的 Dreamweaver 相同。在开发过程中，可以切换到实时视图以快速预览页面。然后，若要节省在不同视图（代码和设计视图）之间切换的时间，您可以直接在实时视图中编辑 HTML 元素。
实时视图立即刷新，以显示页面的变化。
您可以使用以下组件在“实时视图”中编辑页面：

DOM 面板：（“窗口”>“DOM”）显示文档的 HTML 结构，允许您在视图中拷贝、粘贴、复制、删除和重新排列元素。请参阅 DOM 面板了解更多信息。 元素显示：显示在实时视图中所选的 HTML 元素的上方。元素显示用于将 HTML 元素与类和 ID 关联在一起。有关详细信息，请参阅“将 HTML 元素与类和 ID 关联在一起”。 快速属性检查器：当单击元素显示中的 sandwich 或选择文本时出现。您可以通过快速属性检查器在实时视图中编辑属性和设置文本格式。有关详细信息，请参阅“快速属性检查器”。 实时视图属性检查器：显示在文档窗口下方，用于编辑实时视图中的各种 HTML 和 CSS 属性。有关详细信息，请参阅“实时视图属性检查器”。 “插入”面板：（“窗口”>“插入”）可以直接从面板拖动元素到实时视图。有关详细信息，请参阅“在实时视图中直接插入元素”。

注意:
如果页面（由于脚本）发生动态变化或启用了元数据刷新，则可能会丢失在实时视图中编辑的内容。
提示：

如果在编辑页面时实时视图变为空白，则关闭实时视图，然后重新打开它。 如果发现编辑的内容未反映在页面上，则单击实时视图中的刷新按钮。

无法在实时视图中编辑通过数据库或 JavaScript 动态呈现的内容以及模板中不可编辑的区域。在实时视图中单击此类元素时，元素四周将出现一个灰色边框以指示无法编辑这些元素。

不能编辑实时视图中具有灰色边框的元素

注意:
在实时视图中，主菜单中仅提供适用于所选元素的那些选项。选择元素后，不适用的选项即变为灰色。
元素显示
使用元素显示，可以将 HTML 元素与实时视图中的类和 ID 关联在一起。“元素显示”提示您有助于您快速查看和选择所需选项的可用类和 ID。 
您还可以使用元素显示设置表格格式。有关详细信息，请参阅相关链接。

将 HTML 元素与类和 ID 相关联

在实时视图中单击所需的元素。将显示元素显示和当前关联的类和 ID。
在实时视图中，您还可单击 DOM 面板的 HTML 元素来查看该元素的元素显示。

适用于该元素的元素显示

若要解除 HTML 元素与类或 ID 的关联，请单击该类或 ID 旁的“x”。 若要更改与 HTML 元素相关联的类或 ID，请单击相应的框。将显示可用的类和 ID 列表。单击所需选项。 若要添加类或 ID 并将其应用于元素，请单击“+”并输入名称。若要保存更改，请单击“+”或按 Enter 键。

您可以使用 CSS Designer 来定义包含此类或 ID 的选择器。有关详细信息，请参阅使用 CSS Designer 进行页面布局。
注意:
触发过渡时，过渡元素的元素显示不与元素一起移动。但是，使用元素显示作出的更改将生效，即使它与过渡元素不在同一位置也是如此。