六一活动页面html,HTML5教程|如何制作六一儿童节答题测试H5页面?

叮咚,六一儿童节又快到了,不知道各位小伙伴们准备好如何用H5页面这种方式借势营销了嘛?本期我们使用的是意派Epub360H5编辑器,希望本期教程可以给你带来一些灵感和启发~

工具/原料

联网的电脑一台

意派epub360账号

儿童节相关的图片、音频等素材

方法/步骤

1、网上搜索 Epub360 ,进入官网注册登录,进入工作台,点击左侧创建第一个空白的H5作品

393e1e3c6e37d06f500af824a16a41b9.png

2、进入工作台,点击左上角的“+”,创建第一个作品

fac2dd3443189a289fcfee02c6de60bc.png

3、我们在第一页添加六一儿童节相关的图片素材,并排版好,在左侧资源面板可以找到对应的图层进行替换

86dd357845ad0314e169d44161246219.png

4、我们在第二页添加背景、题目和选项图片按钮,接着添加“按钮组”组件和参数变量,绑定这四个选项,并设置每个选项的得分,在触发器上设置点击总分=总分+ 按钮组组件

5904f1ddbc0f6c854f0c74e98d6922c4.png

5、我们复制第二页,修改题目和选项的图片,并调整好选项的得分,按照这个方法,我们复制出九个页面(一共十道题),调整好每个页面的内部

5904f1ddbc0f6c854f0c74e98d6922c4.png

6、然后我们新建一个界面,设置六一儿童节的结果海报和不同分值的文案,添加截屏组件,关联需要参与截屏的元素,并赋值到一张空白的图片上,这个图片需要勾选“允许微信长按识别保存图片”

a85caddfc2deecc7f73726f708641799.png

7、这样,我们整体的案例就做好,可以点击编辑器左上角预览和发布,进行查看和发布出去啦

END

注意事项

如果需要跨页显示,则需要添加文本类型的全局变量

请使用谷歌浏览器编辑制作

最后的图片需要勾选支持微信识别长按保存

本期教程较为笼统介绍制作思路,适合中级epub360的同学

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值