受到团队的信任
探索如何在画布上与项目中的元素进行视觉交互。
当你在设计师，您可以在画布上与项目中的元素进行可视化交互。这是处理元素的一种更简单的方法，而不是为想要编辑的元素查找代码片段。您可以单击画布上的元素。
控件还可以与设计器中的元素进行交互导航器，导航栏，但在本文中，我们将重点关注画布以及与画布上的元素交互的四个方面:
要在画布上选择一个元素，将光标指向该元素，然后单击它。
注意，当您将鼠标悬停在画布上的元素上时，一个蓝色的轮廓会突出显示每个元素的边缘。这表示您在画布上选择的是哪个元素。
选择一个元素将会在所选元素的左上角显示元素标签。对于有更多设置选项的元素，一个齿轮图标将出现在标签的右边。您可以单击该图标来访问这些设置。
您可以查看元素的层次结构并通过以下几种方式选择它的父元素或祖父元素:
点击标签-当一个元素被选中时，点击它的标签以查看它的父元素和父元素的名称。您可以通过在此菜单中单击父元素的标签来选择父元素。如果子元素位于难于选择的父元素中，这将很有帮助。
使用导航breadcrumb栏-你也可以在画布下面的底部导航栏上做这些选择。
右键单击元素-你也可以访问一个元素的层次结构，从上下文菜单出现，当你右键单击它。
键盘上的向上箭头这是跳转到父元素的最快方法。看看其他方便的快捷方式．
如果您想移动一个元素，只需单击并拖动它到指定位置。
当您移动一个元素时，您可以看到您将它移动到哪里。在画布上，蓝色指示器显示元素相对于其他兄弟元素的位置。橙色的指示器告诉您要将它移动到哪个父元素中。
移动元素的位置取决于该元素的显示设置和其他属性。了解更多关于盒子模型和定位如何在网络上工作．
与预览，您无需离开设计器就可以看到您的元素将如何出现在已发布的站点上。
在预览模式下，您还可以看到您的动画将如何在已发布的网站上播放。
切换预览模式会隐藏设计器界面。这可以让你看到你的网站在全宽度。还可以通过单击左上角的箭头图标来隐藏Designer界面的其余部分。这将切换顶部栏的可见性。
处于预览模式时，无法像在设计器中那样选择或修改元素。这是因为您正在查看页面的预览，就像它已经发布一样。
当你完成预览，你可以再次点击预览图标返回或按ESC键。
