Dreamweaver CC教程：直接在实时视图中插入元素

Dreamweaver CC教程：直接在实时视图中插入元素

直接在实时视图中插入元素
使用“插入”面板，可以在实时视图中直接将元素拖动到文档中的所需位置。实时视图中的可视化助理（如 Live Guides 和 DOM 图标）可帮助您定位与某个悬停元素有关的拖动元素。
在放置元素之前，当您将鼠标悬停在页面中的不同元素上时，将会出现 Live Guides（绿色）。这些指南将指示可插入该元素的位置。它们可以出现在悬停元素的上面、下面、左侧或右侧。

上面和下面 - 当鼠标悬停在所有类型的元素/标签（内联标签除外）上时出现。将鼠标悬停在元素的上半部分（顶部）时，指南将出现在悬停元素的上方。将鼠标悬停在元素的下半部分（底部）时，指南将出现在悬停元素的下方。

悬停元素顶部和底部的 Live Guides

左侧和右侧 - 当鼠标悬停在内联标签（如 <a>、<span>）上或悬停在设置了“浮动属性”的标签上时出现。

悬停元素左侧和右侧的实时参考线

如果在放置元素之前暂停一段时间，将会出现 DOM 图标 (</>)。当您将鼠标悬停在该图标上时，将会打开 DOM 面板，您可以将该元素放置在文档的 DOM 结构内。
若要将元素直接插入实时视图，请执行以下步骤：
1、切换到实时视图。
2、从“插入”面板中单击所需的元素并将其拖动到文档。或者，只需在“插入”面板中单击所需的元素。
提示：如果无法将元素从“插入”面板拖至页面上，则重新启动计算机，然后重试。
3、根据实时参考线，将该元素放置在某个元素的顶部、底部、右侧或左侧。或者，单击 </> 并使用 DOM 面板，将元素放置到文档结构中的精确位置。
此元素被插入页面并突出显示。