撰写1. 设置元件位置
拖拽“元件库”中的元件，就可以将其添加到画布中。你也可以使用用户界面左上方的“插入”菜单下的选项，来绘制一些形状元件。
想要移动一个元或一组被选中的元件，只需要将其拖放到指定的位置即可，或者使用左右箭头键在画布中进行微调。你也可以使用顶部工具栏或“样式”面板中的“X”和“Y”字段来设置具体的画布坐标。
当你把元件拖放到画布中，可以将它们对齐到画布网格，或你设置的任何辅助线，或其他附近的元件。你可以在有关网格、辅助线和对齐的文章中了解更多信息。
一次布置多个元件
当你在画布中选中多个元件时，你可以将整个选区作为一个整体来设置它的坐标，也可以单独设置选区中每个元件的坐标。
要设置选区的坐标，可以使用顶部工具栏中的“X”和“Y”字段。这样可以将选中的元件作为一个整体移动到画布指定的位置，而且每个元件都会保持其相对位置不变。
要重新设置每个元件的坐标，使用“样式”面板中的“X”和“Y”字段，就可以将选取中的元件移动到画布的指定坐标。
注意：当选中的多个元件在画布的不同位置时，样式面板中的“X”或“Y”字段将会为空。
2. 调整元件大小
想要调整元件的大小，选中元件，然后拖动它的调节点。你可以在拖动的时候按住SHIFT键来保持它的长宽比不变。
你也可以使用顶部工具栏或“样式”面板中的“W”和“H”字段来设置元件的尺寸。如果想要保持元件的长宽比不变，可以点击W和H之间的锁定长宽比图标；或者，你可以在其中一个字段中输入数字后，按SHIFT ENTER键盘。
一次调整多个元件的大小
当你在画布中选中多个元件时，你可以通过以下选项，将整个选区作为一个整体调整其大小，或单独调整选区中某一个元件的大小。
调整整个选区的大小，使用工具栏中的“W”和“H”字段，这将调整整个选区的大小，然后按照比例调整选区中所有的元件的大小和位置。
调整单个元件的大小，使用样式面板中的“W”和“H”字段，这将应用到选区中没一个单独的元件上。例如设置每个元件的宽度为150px。
注意：当选中的多个元件在画布的不同位置时，样式面板中的“W”或“H”字段将会为空。
3. 距离辅助线/红线
当你在画布上移动元件，并且靠近其他元件时，就会出现红色的辅助线，来显示两个元件之间的距离。当元件边缘对齐或者中心点对齐时，辅助线也会自动出现。
在有关网格、辅助线和对齐的文章中，对此行为做了更详细的说明。
你也可以不用移动元件，就可以查看两个元件之间的辅助线，这样做：
- 选中一个元件；
- 按下ALT键，将你的光标移动到另外一个元件上。
4. 给元件命名
默认情况下，元件是没有名称的，在概要面板中和其他可以显示元件名称的地方，未命名的元件是以它们的类型来标识，如：（矩形），(图像)，等等。
如果你在一个没有名称的元件上输入文本，它将以文本的前几个单词来标识。例如，文本段落元件在概要面板中默认显示的是“Lorem ipsum dolor si”。
想要给元件命名，缓慢双击概要面板中的元件，或者，你可以选中它，在“交互”、“样式”或“说明”面板的顶部输入名称。
5. 组合元件
你可以将多个元件组成一个组合，以便对组合进行命名、调整位置以及设置交互。同时选中多个元件，点击顶部工具栏中的“组合”就可以将元件组合；想要取消组合，选中元件组合后，点击“取消组合”即可。
可以浏览元件组合章节了解更多。
6. 层顺序/纵深顺序/顶层和底层
当两个或多个元件彼此覆盖时，它们的“层顺序”决定了哪个元件可以显示在最前面。层次顺序较高的元件将显示在前面，而层次顺序较低的元件将显示在后面。
层顺序（或“z-index”），还决定了元件在Web浏览器中使用Tab键切换的顺序（如文本框和下拉列表等表单元件）。Tab键首先使最底层的元件获得焦点，然后逐渐向前切换。
你可以在概要面板中看到元件的深度/纵向排序规则，默认情况下是由顶层至底层排序，所以概要面板中最上面的元件在最前面（上面）显示，最下面的元件在最后面（下面）显示。（如果需要，你可以点击概要面板右上角的排序和过滤图标来更改元件的排序方式。）
重新排序元件
在“概要”面板中，上下拖动元件，就可以改变它的纵深位置。
在工具栏中，也有按钮可以实现相同的操作。选中元件后，点击“顶层”按钮可以将元件移动到最上面；点击“底层”按钮则可以将其移动到最下面。你也可以自动以工具栏显示的按钮，将“上移一层”和“下移一层”按钮显示出来，通过这两个按钮，可以将选中的元件，一层一层的向上或向下移动。
7. 对齐和分布元件
顶部工具栏中的对齐和分布工具可以用来组织排列多个选中的元件。
对齐工具可以将两个或多个选定的元件在左侧、中心或右侧进行水平对齐，或在顶部、中间或底部进行垂直对齐。对齐的位置则是参照第一个被选中的元件，对齐操作至少需要选择两个元件。
分布工具可以水平或垂直的分布排列三个或三个以上的元件，分布操作至少需要选择三个元件。
备注：如果需要，可以将这些工具合并到两个图标（对齐和分布）下面。
8. 锁定元件
当你将元件锁定在画布上时，将无法通过拖动来改变元件的位置和大小；只能使用工具栏或“样式”面板中的字段来设置。这可以防止被锁定的元件被不小心移动位置或改变大小。
锁定或取消锁定元件，在选中的元件上点击鼠标右键，在弹出的右键菜单中选择锁定选项，你可以可以自定义顶部工具栏将“锁定”和“取消锁定”图标显示出来。
提示：当选中被锁定的元件时，元件的边框显示红色。当你无法移动某个元件或设置其大小时，通过选中元件来检查它的边框颜色以判断是否被锁定。
9. 隐藏元件
你可以在画布上隐藏元件，以使它们在浏览器中不可见。然后你可以通过“显示”操作来动态显示元件。（查看“隐藏和显示元件”教程了解更多。）
要想隐藏元件，选中它，然后点击顶部工具栏或“样式”面板中的“隐藏”图标。
隐藏的元件，在画布上显示为黄色遮罩，你可以在顶部菜单“视图→遮罩”下设置遮罩选项。