.

2.四个页面结构介绍

小常发表于:2017年08月28日 11:59:33更新于:2019年04月22日 15:11:28

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


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


一、页面结构

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

0015b0f6ecd04aeb0171d7fef1495a2

二、页面详解


1.页面/Page

blob.png


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

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

(2)M页在所有页面的最顶层,并且只有一页,M页上的元素支持定位。  

(3)Masterpage放置元素——切换至页面预览效果。

00159a38b2dd43da2e9ccda83df2d5b


(4)如果不想某个页面显示M页的元素,可以去掉页面上的显示M页的设置。

0015cbd643531c670d9f0fa64d83456


3.Background页,后面简称B页。可作为整个H5作品的背景。  B页中添加元素时,每个页面都会显示B页上的元素,若要修改背景图也必须在B页中修改。        

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

0015cbd67c0a0c0f1f6e3e3c2b151d5


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


(3)B页在所有页面最底层,并且只有一页,B页的元素支持定位。

(4)B页放置元素——切换至页面预览效果。

00159a39005802aa0e0b8f90446328b


4.小结提示:Masterpage跟Background都只有一个,但页面可以新建或复制多个。


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

blob.png


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

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