所有栏目 | 云社区 美国云服务器[国内云主机商]
你的位置:首页 > 云社区 » 正文

H5微场景工具如何制作长页面?

发布时间:2020-04-15 16:48:51

资讯分类:h5  页面  场景  工具  页面  背景  步骤
H5微场景工具如何制作长页面?

长页面H5制作步骤非常简单,基本上大部分的H5平台都支持长页面制作,其中人气比较高的就是人人秀、易企秀、兔展这些。

长页面H5如何制作?

步骤一:创建空白活动

首先选择一个可以制作长页面的H5平台,比如说人人秀,先注册一个账号,如果已经有账号就直接登录,然后点击个人中心——创建活动——空白活动,然后就会进入人人秀编辑器。

步骤二:加入长页面背景

进入H5编辑器之后,选择背景,更换背景。在更换背景中,您可以上传自己设计的长页面,也可以在我们的背景库中寻找合适的使用。

步骤三:设置长页面背景

我们在背景库中选择一款背景,勾选长页面,并为您的页面设置像素数。(单页为1008像素)

调节背景选区,让背景中的图案显示在合适位置。

预览栏中明亮部分为长页面在手机中显示的第一页。设定背景模式为固定。

固定代表页面会自动填充。如果设定为滚动,在背景大小和长页面大小不一致的情况下页面会出现空白。

步骤四:设置停止翻页

对于单页的长页面,可以勾选停止翻页。因为下划长页面和向后翻页手势一致,如果不勾选,则在滑动长页面时有可能会翻页至后一页。至此,一个长页面背景就制作完成,您只需要在长页面上添加诸如图片、音乐、互动等其它元素,就能够成功的制作出一个完整的长页面了。

步骤五:直接套用模板

除了以上的方法之外,还可以直接选择一个长页面模板直接套用,更加简单方便。

H5微场景工具如何制作长页面?

制作长页面H5十分简单,使用意派Epub360 h5工具往往只是需要几个步骤:

一、场景应用

长页面常用于连续的内容展示,并可以配合手势滑动效果去做一些相关的交互。

我们知道可以使用layer容器制作长页面的效果(点击查看),这一篇讲一下如何通过改变页面属性的方式制作长页面。

二、功能设置

1.点击空白画布,来到右侧的属性面板,如下图

2.在页面信息处勾选“启用长页面”。勾选后,画布的底部会出现可以拖动的灰色条,拖动它就可以将画布纵向加长,如下图,

3.向下拖动后,画布会延长,此时画布上会留下一跳灰色的线条,这个线条就是正常画布的出血线,以方便观察长页面中一屏的位置,如下图,

4.除了拖动外,还可以直接输入数值,如下图,

5.长页面案例:一个页面搞定所有

留言与评论(共有 0 条评论)
   
验证码:
Top