设计器结构说明

顶部操作栏

为您从左至右介绍顶部操作栏功能。

• 返回功能：最左侧返回图标，单击可返回网站后台。
• 切换页面功能：单击当前页面名称，可切换页面进行设计。
• 中间可切换设计PC/手机端；旁边可切换语言进行设计。
• 单击…，可查看帮助中心、标尺、操作记录。说明
  • 标尺注重人性化，随页面风格变换颜色，使用不会影响您的设计灵感。
  • 操作记录：可查看您在设计器中的操作记录，也可快捷键shift+H打开操作记录。
• 撤销恢复保存功能：除了在顶部有直接的按钮，还可使用快捷键：
  • Windows快捷键：撤销：Ctrl+Z；恢复：Ctrl+Y；保存：Ctrl+S。
  • Mac快捷键：撤销 ：⌘+Z：恢复：Shift+⌘+Z；保存：⌘+S。
• 预览功能：可预览效果后再发布网站。
• 层次功能：通过检查层次可以发现自己的设计漏洞。
• 发布：单击发布可发布网站。
• 备份功能：单击表状图标，开启自动备份后，可备份当前网站设计。

左侧资源区

• 内容：包括文字、图片、图文组合，以及文章、产品、文件等主要内容为文字、图片的控件。
• 功能：包括阿里云视频、地图、分类、搜索、留言板、评论、分享、音乐、会员电商等功能。
• 设计：
  • 栏目导航：主要包括各种导航。
  • 排版布局：包括按钮、线条、各种布局控件（容器、标签）、弹窗。
• 高级：包括Html/Css/Js代码控件、配置爱番番所需代码控件、配置CNZZ所需代码控件、配置第三方视频所需代码控件。
• 表单：可设置表单。

中间设计区

选择好模板后可对中间设计区进行设计，设计区分为页头页尾和页面内容两部分。

说明

• 页面内容的页头页尾可设置为空，多个页面内容可选择相同的页头页尾统一设计。
• 可制作多个页头页尾。

网站切换到手机端，可在左侧设置网站在不同设备展示的网站

• 手机端访问开启：选择响应式按钮，手机端访问默认访问PC网站（应用响应式效果），自动适应用户所用设备。
• 手机端访问开启：选择独立设计按钮,手机端访问默认访问手机端设计网站
• 手机端访问关闭：响应式按钮+独立设计按钮+下部文案不显示

快速设置面板

右键快捷设置：鼠标右键单击某一控件，将弹出下图所示弹框。单击属性会弹出快速设置面板，单击对齐可设置对齐方式，选中多个组件时，单击分布，可设置分布方式，单击层级可调整层级。

说明 按住键盘的Ctrl或command键，同时鼠标逐个单击选中，即可选中多个组件。

快速设置面板：单击设置，可弹出快速设置面板，用于设置当前组件的样式、数据、动效、排列。

样式：一般是像PPT一样的调整阴影、格式等样式。

数据：可添加或更改数据、设置数据跳转链接及数据打开方式。

交互：可设计控件内部动效。

动效：可设置控件整体动效。

排列：可设置尺寸和位置。