Dreamweaver CC教程:直接在实时视图中插入元素
Dreamweaver CC教程:直接在实时视图中插入元素
直接在实时视图中插入元素
使用“插入”面板,可以在实时视图中直接将元素拖动到文档中的所需位置。实时视图中的可视化助理(如 Live Guides 和 DOM 图标)可帮助您定位与某个悬停元素有关的拖动元素。
在放置元素之前,当您将鼠标悬停在页面中的不同元素上时,将会出现 Live Guides(绿色)。这些指南将指示可插入该元素的位置。它们可以出现在悬停元素的上面、下面、左侧或右侧。
悬停元素顶部和底部的 Live Guides
悬停元素左侧和右侧的实时参考线
如果在放置元素之前暂停一段时间,将会出现 DOM 图标 (</>)。当您将鼠标悬停在该图标上时,将会打开 DOM 面板,您可以将该元素放置在文档的 DOM 结构内。
若要将元素直接插入实时视图,请执行以下步骤:
1、切换到实时视图。
2、从“插入”面板中单击所需的元素并将其拖动到文档。或者,只需在“插入”面板中单击所需的元素。
提示:如果无法将元素从“插入”面板拖至页面上,则重新启动计算机,然后重试。
3、根据实时参考线,将该元素放置在某个元素的顶部、底部、右侧或左侧。或者,单击 </> 并使用 DOM 面板,将元素放置到文档结构中的精确位置。
此元素被插入页面并突出显示。
相关内容
-
Dreamweaver CC教程:Dreamweaver 支持的编程语言
Dreamweaver CC教程:Dreamweaver 支持的编程语言,编程语言,支...
-
Dreamweaver CC教程:正则表达式
Dreamweaver CC教程:正则表达式,正则表达式,搜索,换行符,教程,...
-
Dreamweaver CC教程:设置代码外观
Dreamweaver CC教程:设置代码外观,设置,选项,缩进,教程,视图,...
-
Dreamweaver CC教程:默认在代码视图中打开文件
Dreamweaver CC教程:默认在代码视图中打开文件,默认,视图,打开...
-
Dreamweaver CC教程:设置代码改写首选参数
Dreamweaver CC教程:设置代码改写首选参数,设置,参数,标签,选...
-
Dreamweaver CC教程:在Dreamweaver中处理代码
Dreamweaver CC教程:在Dreamweaver中处理代码,工作区,拆分,文...
-
Dreamweaver CC教程:服务器行为代码
Dreamweaver CC教程:服务器行为代码,服务器,教程,检测,显示,代...
-
Dreamweaver CC教程:XHTML 代码
Dreamweaver CC教程:XHTML 代码,清理,文档,元素,教程,属性,标...
-
Dreamweaver CC教程:创建 Getter/Setter
Dreamweaver CC教程:创建 Getter/Setter,光标,重构,表达式,教...
-
Dreamweaver CC教程:重构代码
Dreamweaver CC教程:重构代码,教程,函数,选项,重构,代码重构,...
-
Dreamweaver CC教程:编辑 main.less 文件中的选
Dreamweaver CC教程:编辑 main.less 文件中的选择器,文件,教程...
-
Dreamweaver CC教程:使用“插入”面板
Dreamweaver CC教程:使用“插入”面板插入代码,教程...
-
Dreamweaver CC教程:使用“环绕标签”
Dreamweaver CC教程:使用“环绕标签”,标签,教程,文...
-
Dreamweaver CC教程:设置颜色主题和代码主题
Dreamweaver CC教程:设置颜色主题和代码主题,设置,教程,选择,...
-
Dreamweaver CC教程:使用“编码”上下
Dreamweaver CC教程:使用“编码”上下文菜单,编码,...