菜单栏

1. WWARE

在编辑页面时想快速回到站点编辑界面,点击WWARE能直接返回到主界面。

注意:返回之前一定要保存,不然写的内容会消失。

2. 标准编辑

标准编辑界面里包含编辑、拖拽、删除等按钮,可以通过这些按钮控制布局、元素的位置等,灵活操作页面。当页面内元素过多时,按钮同样会增多,对选择元素或查看页面布局会造成困扰,此时推荐使用下文中提到的全屏编辑。

3. 全屏编辑

全屏编辑与标准编辑的区别是去掉编辑、拖拽、删除按钮和左侧栏,当页面信息点过多时比较适用。全屏编辑下区分行列的边框和包围在元素外边的色块仍存在,当鼠标放在元素上会显示此色块。此时通过鼠标右键编辑页面,点击右键→编辑可以进入默认的文档流编辑页面。

Tips:色块—wide中以色块区分行和元素所在位置。

4. 预览编辑

预览编辑是一种“所见既所得”的编辑方式。点击右键→编辑到文档流编辑界面对页面进行编辑,保存后在预览编辑模式下查看的页面与发布后查看的页面基本一致。

预览编辑下去掉区分行列的边框,只显示元素以及包围元素的色块,使得页面可直观预览。

鼠标放在元素上,显示蓝色部分为元素所在区域,紫色部分代表除元素以外的其它区域。

5. 文件

文件栏包含保存、发布、存为宽屏和窄屏、导入导出功能。

(1) 保存:当前页面的保存,快捷键(ctrl+s),且具有自动检查页面的功能,但不会修改。如下图所示,保存页面时,页面黄色提示下载图片失败,没有找到对应图片;黄色提示图片没有裁剪等。

(2) 保存为宽屏:页面设置为宽屏模式,页面发布后宽度占满全屏。

(3) 保存为窄屏:页面设置为窄屏。页面发布后屏幕左右留有空白。默认存为窄屏。

(4) 发布:发布具有保存功能,页面编辑完可以直接发布,发布快捷键(ctrl+p),发布的详细知识请参考发布页面。

(5) 导出:将当前页面的内容和配置信息(下文“页面设置”的信息)导出,快捷键(ctrl+e)。导出的目地是为了做一个一模一样的页面,或者页面部分内容有用,导出然后在新页面中导入,再继续修改。点击“导出”在弹出的代码中单击一下,颜色变蓝,表示全部选中,复制(ctrl+c)。

(6) 导入:将其它页面的内容和配置信息导入,快捷键(ctrl+i)。将导出的代码粘贴过来,这样会生一个和导出页面相同的页面。

(7) 导出HTML:导出的是HTML代码,可以在别处使用。自适应宽度是指会随着浏览器屏幕大小自动适应屏幕大小;固定宽度是指不会随着屏幕大小而改变的,可能会引发页面不完整。

(8) 重新加载:刷新本页面。

(9) 清空:删除页面全部内容,清空后将无法恢复。

6. 编辑

编辑包含:页面设置、拷贝地址、样式类文件、逻辑文件、真实数据、模拟数据。

6.1 页面设置

(1) 宽度样式:设定宽度的样式。

l  固定宽度:页面的宽度是固定的,不会随着显示设备的尺寸自适应。

l  自适应宽度:页面的宽度不是固定的,会随着显示设备的尺寸自适应,例如:手机。

(2) 显示设备:设置需要显示本页面的目标设备。

l  投影:适用于投影设备上。

l  计算机:本页面适用显示在计算机设备上。

l  pad:适用于pad设备的页面。

l  手机:适用于手机设备的页面。

(3) 可缩放性:设置页面是否可以缩放,例如手机地图,当两个手指,按住屏幕,往相反的方向移动时,地图会放大;当两个手指往相向的方向移动时,地图就缩小了。这个过程就是缩放。

l  可缩放:页面可以缩放。

l  不可缩放:页面不可以缩放。

(4) 页面标题:页面顶部标题。

(5) 主题名称:选择本页面的主题,主题需要提前设置好,主题的相关资料

(6) 启用离线模式:设备离线时使用。

(7)显示页面条件:设置何时开始显示页面。

l  永远显示:不干涉客户端的显示逻辑,只要有可能就显示,由于初始化动作的存在,这可能会造成闪烁,但是呈现速度最快。

l  初始化结束:直到页面初始化完毕才开始显示,页面不会闪烁,但是加载速度会慢。

l  数据同步结束:不会出现加载中这样的字样,但是呈现速度最低。

(8)启用客户端调试模式

l  禁用:禁止启用调试模式,生产环境下选择此项。

l  远程调试:对于不方便调试的设备,例如真实环境的手机、电视等设备,可以执行远程调试。注意:打开客户端调试对性能有巨大影响,因此,生产环境下,确保调试模式被关闭。

(9) 多终端自适应:访问设备不同显示的页面不同。例如:使用苹果手机访问显示的index.html;使用安卓手机访问显示login.html

l  规则:选择访问者使用的设备,例如:手机、电脑等。

l  目标页面:如果符合前面规则指定的条件,则立即跳转当前填入的页面。填写时不要带域名,添加相对地址即可。

l  add自适应规则:添加新的自适应规则,需要添加多个规则使用。

l  Delete自适应规则:删除当前自适应规则。

l  Move up:将当前自适应规则向上移动(两个规则以上会出现此按钮)。

l  Move down:将当前自适应规则向下移动(两个规则以上才可以用此功能)。

l  Delete All:删除所有的规则(两个规则以上会出现此按钮)。

(10) 预加载库:预加载特定库,会无条件加载指定库,这会确保页面呈现时,相关资源会确保被呈现出来,但是这会延长页面的加载时间。而默认的按需加载,会确保页面第一时间呈现,然后才根据需要加载依赖资源,这会让相关资源分层出现,有一个视觉上的闪烁。可以使用shift多选。

直观效果:选择图标库发布页面后,页面打开会不选择稍慢,但是打开的页面view是跟页面同时显示出来的。而不勾选view会在页面出现后有一定时间的延迟后出现。

6.2 拷贝地址

拷贝地址是复制页面url地址,复制的是相对地址。

6.3 样式类文件

点击跳转到样式类文件页面,添加一些样式类,样式类格式是点或者#+变量名字+{ css样式}例如: .test{ css样式}

6.4 逻辑文件

点击跳转到逻辑文件页面,添加一些逻辑事件。添加方法:逻辑—事件逻辑—写入代码。

6.5 真实数据

当程序员需要动态化时,关闭所有同步元素的调试模式,让页面访问真实数据。

6.6 模拟数据

当产品需要修改页面时,打开所有同步元素的调试模式,让页面不访问网络,方便产品阶段工作。

7. 设置

设置栏包括:合并列中元素、额外图片路径、静默删除、粘贴自动定位和禁止粘贴时格式转化。

7.1 合并列中元素

合并列中元素能把同一个黄色编辑按钮下多个元素合并成一个元素。

(1)  如下图把“1、2、3”合并列中元素。

(2) 选中:“合并列中元素”。当选中“合并列中元素”时,背景出现蓝色代表选中。

(3) 点击黄色“编辑”,弹出提示框,选择“OK”。

(4) 点击“ok”之后,跳到新的页面,点击保存退出。

(5) 退出后会发现灰色按钮只有一个,把多个元素合成一个元素了。

(6) 如果想在分成多个元素,让“合并列中元素”不选中,不选中时没有蓝色背景。重复第(3)(4)步,元素又恢复没合并之前的状态。

7.2 额外图片路径:当选中“额外图片路径”时,拖拽图片到文档流编辑页面(注意是拖拽,不是添加)无论图片从哪个位置获取过来,保存或发布页面后都会自动在对应的img文件夹保存。

7.3 静默删除:当选中“静默删除”字条时,颜色变为蓝色,这时候,在删除页面时,将不再有提示框提示,直接就会删除。

7.4 粘贴时自动定位:没有选中的情况下,复制量很大时,不容易找到粘贴的东西在哪个位置了,当选中“粘贴时自动定位”功能,粘贴完成后,自动跳到所在位置,方便寻找。

7.5 禁止粘贴时格式转化:当从别的地方复制文件到wide操作页面时,如果不选择此功能,复制过来的文件跟原始一样;当选择此功能后,wide会根据情况做出适当的自动调整。