2.四个页面结构介绍

小常发表于:2017年08月28日 11:59:33更新于:2019年01月02日 12:33:36

视频教程1:页面结构简介

视频教程2:四个页面实际应用

为方便大家理解Masterpage/页面/Background三个页面间的关系,以及Layer 页面的用法,用一个简单的结构图示来讲解。

0015b0f6ecd04aeb0171d7fef1495a2

Page

blob.png

MasterPage

Masterpage,简称M页。也可以称之为母版。M页元素可以在所有页面中显示。

M页可放置图片、文字、背景音乐、视频、全局参数等,可制作全局的导航按钮等。要想修改或删除这些元素,也只能在Masterpage上修改。

关键点:在最顶层/只有一页/里面的元素支持定位        

操作顺序:Masterpage放置元素——切换至页面预览效果。

00159a38b2dd43da2e9ccda83df2d5b

Background

顾名思义,是一个H5作品的背景。  在Background中添加元素时,每个页面都会显示Background上的元素,但Masterpage上不显示。若要修改背景图也必须在Background中修改。        

要想在页面中看见Background上的元素,需要查看右侧属性面板是否已勾选显示Background;并将页面的不透明度调低,里面的元素才可显示。

注意:按照页面结构逻辑,页面覆盖于Background页面的上方,在Background页面的元素只具备自身以及自身动画的展示功能,元素并不能被手势接触到,因此放置在Background里的元素虽有触发器的设置,但设置无效。

关键点:Background在最底层/只有一页/里面的元素支持定位

操作顺序:Background放置元素——切换至页面预览效果。

00159a39005802aa0e0b8f90446328b

小结提示:MasterpageBackground都只有一个,但可以新建或复制多个。

Layer(需要结合Layer容器等组件使用)

blob.png

Layer页面的用法:主要是用来编辑高级组件内的内容。本身和其他三个页面的逻辑关系割裂,以组件的形式放置在其他页面显示。如图:

操作顺序:Layer页面放置元素——切换至页面添加Layer组件——预览效果。00159a3947475c30b60e7cc3bb38e6d