设计器结构说明

想要快速掌握网站制作方法，参考帮助文档内容进行实践，需预先了解设计器的结构及功能。本文介绍设计器的结构，各部分的名称及如何使用。

设计器包括顶部操作栏，左侧资源区，中间设计区，右侧快速设置面板四部分，具体位置如下图所示。

说明 为避免设计器页面和管理后台顶部名称重复，将设计器内的顶部称作顶部操作栏。

顶部操作栏

左侧资源区

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

中间设计区

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

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

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

快速设置面板

1. 右键快捷设置：鼠标右键单击某一控件，将弹出下图所示弹框。单击属性会弹出快速设置面板，单击对齐可设置对齐方式，选中多个组件时，单击分布，可设置分布方式，单击层级可调整层级。
   说明 按住键盘的Ctrl或command键，同时鼠标逐个单击选中，即可选中多个组件。
2. 快速设置面板：单击设置，可弹出快速设置面板，用于设置当前组件的样式、数据、动效、排列。
   • 样式：一般是像PPT一样的调整阴影、格式等样式。
   • 数据：可添加或更改数据、设置数据跳转链接及数据打开方式。
   • 交互：可设计控件内部动效。
   • 动效：可设置控件整体动效。
   • 排列：可设置尺寸和位置。