元素快速视图呈现包含静态和动态内容的交互式 HTML 树。此视图有助于直观地在实时视图中通过 HTML 标记以及 CSS 设计器中所应用的选择器,对元素进行映射。您也可在元素快速视图中编辑 HTML 结构,并在实时视图中查看即时生效的更改
若要打开元素快速视图,请在标签选择器中单击 </>。也可使用键盘快捷键(Ctrl +/-(在 Windows 中);Cmd +/(在 Mac 中)),打开元素快速视图。
当您拖动元素以直接将其插入实时视图时,在放置元素之前会出现 </> 图标。您可以单击此图标打开元素快速视图并在文档结构中的适当位置插入此元素。
当您从“代码”或“设计”视图中打开元素快速视图时,将仅显示静态元素,当从“实时视图”中打开时,将同时显示静态和动态元素。
在流体网格文档中,元素快速视图只能将 HTML DOM 结构可视化,而不能编辑 HTML 结构。
注意:元素快速视图中只能编辑静态内容。只读或动态元素以较深的灰色阴影显示。
元素快速视图
可将元素快速视图移动到用户界面上的任意便利位置。
注意:如果在标签选择器中看到深色背景,请转到 %user configuration%CodeColoring 并删除 colors.xml 文件。
仅在页面模板中提供元素快速视图,而从模板创建的子页面中不提供。
如何使用元素快速视图
切换至实时视图,并单击希望检查或编辑的元素。
在标签选择器中单击 </>,打开元素快速视图。
选定元素的 HTML 标记在元素快速视图中突出显示。
所应用的选择器在 CSS 设计器中突出显示。
相关代码在代码视图中突出显示。
相关标签在标签选择器中(以蓝色)突出显示。
或者,也可在元素快速视图中选择一个 HTML 元素。在元素快速视图中单击任意元素时:
实时视图滚动到相应的元素。
如果代码视图打开,则代码视图滚动到与该元素对应的代码。
CSS 设计器(选择器窗格)滚动到最接近的相应选择器(类似于在实时视图中单击元素)。
此标签在标签选择器中突出显示。
不同视图和 CSS 设计器之间的同步让您能够概览与选定元素相关联的 HTML 标记和样式。
元素快速视图中的选定与代码、标签、CSS 选择器和实时视图同步
继续根据要求编辑该元素(HTML 或 CSS 编辑)。
使用元素快速视图编辑 HTML 结构
页面上当前选定的元素在元素快速视图中突出显示。可使用箭头键,导航到所任意节点或元素。
若要选择元素或节点,请单击相应的元素或节点。要展开或折叠元素或节点,单击 HTML 标签或在标签周围双击选择器。
若要重复元素或节点,右键单击相应的元素或节点,并单击“重复”。
若要复制元素或节点,右键单击相应的元素或节点,然后单击“复制”。如果复制了包含子项的元素,该子项元素也被复制。
若要粘帖元素或节点,单击希望在其下嵌套所复制元素的相应元素或节点。然后,右键单击该元素或节点,并单击“粘帖”。
要移动或重新排列元素,请将元素拖动到元素快速视图中的所需位置。
出现的绿线指明放置拖动的元素的位置。如果将元素放在灰色突出显示的元素(引用元素)上面,则放置的元素将被作为参考元素的第一个子项。
若要删除元素或节点,右键单击相应的元素或节点,并单击“删除”。
注意:可撤销 (Ctrl/cmd + Z) 或重做 (Ctrl/cmd + Y) 在元素快速视图中执行的操作
键盘快捷方式:
拷贝- Ctrl+D (Win) Ctrl/Cmd + D (Mac)
删除- DEL 或 Backspace
复制- Ctrl + C (Win) /Cmd + C (Mac)
粘贴(Ctrl + V (Win) /Cmd + V (Mac)
还原- Ctrl+z (Win) /Cmd + Z (Mac)
重做- Ctrl + Y (Win) /Cmd + Y (Mac)
注意: 通常,在编辑页面后,文档工具栏中的“刷新”按钮将变为“停止”按钮,指示正在重新加载该页面。重新加载页面后,将再次出现“刷新”按钮以指示页面已加载完毕。
在元素快速视图中作出更改后,即使在“刷新”按钮变为“停止”按钮后重新出现后,仍可能需要一段时间加载页面。
元素快速视图中的编辑选项
使用元素快速视图移动 HTML 元素
A. 放置拖动的元素的位置 B. 参考元素 C. 正在移动的元素
重要说明:如果页面包含 JavaScript,则元素快速视图中的右键单击菜单将显示一会,然后变为不可用。要使用右键单击菜单,请隐藏实时视图显示(“实时视图选项”>“隐藏实时视图显示”),然后禁用 JavaScript(“实时视图选项”>“禁用 JavaScript”)。