当前位置:首页> 正文

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

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

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

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

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

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

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

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

 

展开全文阅读

相关内容