设计器结构说明

更新时间:

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

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

说明

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

设计器结构2.2

顶部操作栏

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

  • 返回功能:最左侧返回图标,单击可返回网站后台。

  • 切换页面功能:单击当前页面名称,可切换页面进行设计。

  • 中间可切换设计PC/手机端;旁边可切换语言进行设计。

  • 单击,可查看帮助中心、标尺、操作记录。

    说明
    • 标尺注重人性化,随页面风格变换颜色,使用不会影响您的设计灵感。

    • 操作记录:可查看您在设计器中的操作记录,也可快捷键shift+H打开操作记录。

  • 撤销恢复保存功能:除了在顶部有直接的按钮,还可使用快捷键:

    • Windows快捷键:撤销:Ctrl+Z;恢复:Ctrl+Y;保存:Ctrl+S。

    • Mac快捷键:撤销 :⌘+Z:恢复:Shift+⌘+Z;保存:⌘+S。

  • 预览功能:可预览效果后再发布网站。

  • 层次功能:通过检查层次可以发现自己的设计漏洞。

  • 发布:单击发布可发布网站。

  • 备份功能:单击表状图标,开启自动备份后,可备份当前网站设计。

左侧资源区

  • 内容:包括文字、图片、图文组合,以及文章、产品、文件等主要内容为文字、图片的控件。

  • 功能:包括阿里云视频、地图、分类、搜索、留言板、评论、分享、音乐、会员电商等功能。

  • 设计:

    • 栏目导航:主要包括各种导航。

    • 排版布局:包括按钮、线条、各种布局控件(容器、标签)、弹窗。

  • 高级:包括Html/Css/Js代码控件、配置爱番番所需代码控件、配置CNZZ所需代码控件、配置第三方视频所需代码控件。

  • 表单:可设置表单。

中间设计区

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

说明
  • 页面内容的页头页尾可设置为空,多个页面内容可选择相同的页头页尾统一设计。

  • 可制作多个页头页尾。

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

  • 手机端访问开启:选择响应式按钮,手机端访问默认访问PC网站(应用响应式效果),自动适应用户所用设备。

  • 手机端访问开启:选择独立设计按钮,手机端访问默认访问手机端设计网站

  • 手机端访问关闭:响应式按钮+独立设计按钮+下部文案不显示

设备展示网站选择说明

快速设置面板

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

    说明

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

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

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

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

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

    • 动效:可设置控件整体动效。

    • 排列:可设置尺寸和位置。