H5页面微场景制作入门(初级)教程PPT
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
点击“场景共享” 和“友情展示”下 拉键，可参加易企 秀官方活动和尾页 设置。
52
特效组件是给某一个页面加上一个特殊的效果。 点击“特效”即可为当前页面选择合适的特效
2020/3/6
53
很重要，很重要，很重要……
重要的事情要说三遍
“保存”只是对操作进行保存，如果不点击 “发布”此场景未发布的编辑内容，在场景 分享出去时，别人看不到最新编辑的内容。 点击“退出”则推出编辑页面。
• 点击“开放”/“关闭”，对场 景进行开放和关闭。
57
在微信里分享场景
微信扫一扫场 景二维码→打 开场景→点击 右上角菜单→ 选择分享方式
2020/3/6
58
初级教程完毕
2020/3/6
59
制作小窍门
资料准备全，图片要清晰 文字要简洁，重点更突出 制作很简单，就看熟练度 场景有创意，谁也挡不住
2020/3/6
60
分享经验 共同成长
2020/3/6
61
? ????
自我反思中
2020/3/6
21
站在上司 的角度思考一下 他是否认为我是一 个合格的下属
? ????
2020/3/6
22
站在孩子 的角度思考一下
他是否获得了一个孩 子应有的童年生活
? ????
2020/3/6
23
小故事
为什么要站在他人 的角度考虑问题呢 因为你认为对的事
情未必是对的
请体验一下
2020/3/6
24
先看 一个国外的
这是美女吗
我们倒过来看
2020/3/6
25
再看 一个国内的
这是美女吗
我们倒过来看
2020/3/6
26
进入制作教程
2020/3/6
27
制作小提示
• 制作H5场景推荐使用PC（电脑）端浏览器 • 也可在手机上下载制作工具客户端，在手机上进行制作 （但是在手机上制作，相对复杂一些，还是建议用PC端来做。）
H5页面微场景 制作入门教程
王玲工作室
2
1
what 什么是H5
C目录 ONTENTS
why 为什么要做H5 where 我们要在哪里使用H5 how 怎么制作H5（易企秀）
end 经验分享，共同成长
2020/3/6
2
什么是H5
2020/3/6
3
什么是H5？
• H5是指第5代HTML（超文本标记语言），也指用H5语言 制作的一切数字产品。
1.邮箱注册： 输入邮箱和密码，点击
“注册”即可。
2020/3/6
2.第三方登录：
无需注册，直接点击图
标，使用微信或者QQ进行登
录。
31
2020/3/6
登录易企秀账号
点击官网右上角“登录”
1.邮箱登录： 输入邮箱和密码，点击
“登录”即可。
2.第三方登录：
无需注册，直接点击图
标，使用微信或者QQ进行登
• 通俗地说，H5是一种创建网页的方式。 它会让手机网页看上去更炫酷，功能也更丰富多彩。
• 对于用户而言，H5具有流量入口多、分发效率高、使用门 槛低等明显优势。
2020/3/6
4
H5的特点
2020/3/6
5
H5 为什么要做
2020/3/6
6
为什么要做H5页面?
1. 随着移动互联网的高速发展，智能手机、平板电脑等移动终端设备越来越普及， 用户在移动端花的时间也越来越长。
2020/3/6
49
【设置动画】
动画设置主要应用于：文字、图片、图形、一键拨号、输入框等组件 设置方法：点击组件→选择“动画”→进入动画设置页面
2020/3/6
50
制作小提示
• 点击预览图标，即可对此页面的 动画设置进行整体预览。
2020/3/6
51
2020/3/6
设置是对场景的基 本信息进行设置， 主要包括：场景封 面、场景名称、场 景描述、翻页方式。
2020/3/6
36
页面模板
在易企秀制作页面的左侧栏， 易企秀官方为大家提供了分 门别类的“页面模板”，在 制作场景的过程中，可以参 考或者直接套用页面模板进 行场景创建。 自己制作的页面，也可以保 存为“我的”模板，以供下 次使用。 企业账号将自己的场景设置 为“企业页面模板”，子账 号可以直接使用。
2020/3/6
12
站在他人的角度
问
题
2020/3/6
13
圣诞节母亲带 女儿出去逛街 街上非常热闹 她想女儿一定 会非常的高兴
2020/3/6
14
然而 她绝对没有想到 在人潮汹涌的大街上 女儿却紧拽着她衣角
呜呜地哭个
不停
2020/3/6
15
原来 是女儿的鞋带开了 她蹲下身帮女儿系鞋带 系好鞋带无意中抬起头
录。
32
创建场景
点击右上角 创建场景
2020/3/6
33
【套模板】选择一个模板，把模板中需要修改的地方修改即可快捷制作。 【自主创建】点击“+”进入自主创建，一页一页创建场景。
2020/3/6
34
填写名称 后期可改
填写完毕 点击创建
2020/3/6
场景名称
点击选择 为了自己 管理方便
35
制作页面
2020/3/6
28
H5场景制作与运用流程
1
资料
准备
2
Hale Waihona Puke Baidu场景
制作
3
发布
宣传
4
信息
收集
2020/3/6
29
制作前，准备好4个资料
2020/3/6
创意：
展示什么，用什么方式
音乐：
烘托氛围，MP3格式
图片：
提前备好，视觉效果好
文字：
准备充分，具有感染力
30
免费注册易企秀账号
http://www.eqxiu.com/ 进入官网后点击右上角“注册”
组件是构成场景的基本要素
1.文本 2.背景 3.音乐 4.视频 5.图片 6.形状 7.图集 8.互动 9.表单 10.特效
2020/3/6
39
1.点击“文本”后 →即可创建 2.单击文本框 →出现编辑菜单 3.双击文本框 →进入基础编辑
2020/3/6
40
点击“背景”后，选择“背景库”中的背景图 也可点击“上传”上传图片到“我的背景”库
她惊奇的发现
……
2020/3/6
16
我什么 也看不到
没有彩灯 没有圣诞礼物 除了一双双粗大的脚 和来来往往的双腿 什么也看不见
母亲震惊了
2020/3/6
17
母亲立即抱起女儿 女儿笑了母亲流泪了 第一次从女儿的角度眺望 世界她感到非常震惊 从此这位母亲牢记
要站在孩子的立 场上看待问题
2020/3/6
H5页面几乎适用于所有企业和个人
2020/3/6
9
H5页面制作要求
• 背景图片尺寸：640px * 1010px
说明：px单位，中文叫像素
• 图片格式：.png、.jpg、.gif
说明：图片尽量控件在500K以内。 图片压缩工具：http://www.zuiku.com/web/bbs/topic?topicId=128
形状素材和文字一样可以做 “颜色、大小”等设置。
46
图集：是几张图片的集合 主要设置：图片比例、切换方式
2020/3/6
47
“互动”是方便制作者与观看者互动的组件 互动组件目前主要是“一键拨号”，正在不断增加
2020/3/6
48
表单（也叫信息收集表、报名表、信息反馈表等）是 场景创建者用来收集查看场景的用户反馈信息的重要 工具。可点击“表单”创建也可直接在互动模板里直 接快捷创建。
• 背景音乐格式：.mp3
说明：背景音乐尽量控件在1M以内。 音乐剪切工具：http://www.zuiku.com/web/bbs/topic?topicId=129
• 页面数：无限制
说明：为了更好的用户体验，建议尽量控制在15页以内。
2020/3/6
10
H5 怎么制作
2020/3/6
11
开场小故事
2020/3/6
43
点击“视频”后，给场景添加网络视频
点击“什么是视频通用代码”，出现详细操作
2020/3/6
44
点击“图片”后，选择“图片库”中的图片素材 或点击“上传”上传图片到“我的图片”库
2020/3/6
45
点击“形状”后，选择“形状组件” 库中选择形状组件
2020/3/6
“形状”是便于用户制作扁 平化页面的素材，
2. 用户时间碎片化，接收信息爆炸性增长，企业营销需要迅速抓住眼球，众多企业 已经站在互联网转型的风口。
3. 微信H5页面中触摸、滑动、摇一摇，辅之以文字、图片、动画、声音，给互联网 用户带来了全新体验，技术本身带来的新奇感让人们口口相传。
4. H5技术正被用于商业展示、会议活动、数字出版与教育、电子贺卡、个人展示等 各类场景中。
2020/3/6
41
背景编辑
→背景创建后，点击编辑栏上的背景齿轮，即可对背景 进行编辑。 →背景编辑主要包括：剪切、更换、效果（放大、缩 小）、删除。
2020/3/6
42
点击“音乐”即可创建【背景音乐】
1.【音乐库】为官方提供的音乐素材 2.【外部链接】插入网络音乐链接 3.【我的音乐】自主上传音乐
2020/3/6
7
我们要在哪里使用
H5
2020/3/6
8
什么场合可以用到H5页面?
微信互动营销：摇一摇、大转盘、刮刮卡、优惠券、投票调查、小游戏…… 商业展示：企业宣传、产品展示、品牌传播、优惠促销、企业招聘、数据年报…… 本次培训的目的：企业宣传、每月工作汇报、工作展示 会议活动：会议、展览会、发布会、活动…… 数字出版与教育：电子杂志、多媒体课件、培训课程…… 电子贺卡：商业贺卡、节日贺卡、生日贺卡、祝福卡…… 个人应用：个人秀、婚礼邀请、聚会Party、求职简历……
18
反思
不要轻易地 将自己的喜好逻辑 强加于他人的身上 站在不同的角度看 风景各有各的感受
冷暖自知
2020/3/6
19
不仅仅 一位好母亲需要 站在孩子立场上看问题 每个人都需要站在他人 的角度看问题只有 换位思考将心比心 才能够真正了解 他人的所思所想
2020/3/6
20
站在妻子 的角度思考一下 她是否愿意以我 这样的人为丈夫
2020/3/6
54
点击发布后，可获得场景二维码、场景连接和 更多的一键分享方式。
2020/3/6
55
下载更大的场景二维码 （在“我的推广”里找到二维码，如下图）
2020/3/6
56
2020/3/6
“我的场景”管理
• 点击“我的场景”可看到自己创 建的所有场景列表。
• 点击单个场景右下角的齿轮，即 可对此场景进行“设置、编辑、 复制、转送和删除”操作。
2020/3/6
37
右侧的“页面管理”
5大管理操作
1. 复制：点中条框，点击“复制” 2. 我的模板 ：点中条框，点击“我的
复制”，出现在左侧“页面模板”中， 可删除
3. 删除：点中条框，点击“删除” 4. 移动：点中条框，可上下拖动 5. 添加：点击“+”，添加一页
2020/3/6
38
10个基本组件+设置+发布
52
特效组件是给某一个页面加上一个特殊的效果。 点击“特效”即可为当前页面选择合适的特效
2020/3/6
53
很重要，很重要，很重要……
重要的事情要说三遍
“保存”只是对操作进行保存，如果不点击 “发布”此场景未发布的编辑内容，在场景 分享出去时，别人看不到最新编辑的内容。 点击“退出”则推出编辑页面。
• 点击“开放”/“关闭”，对场 景进行开放和关闭。
57
在微信里分享场景
微信扫一扫场 景二维码→打 开场景→点击 右上角菜单→ 选择分享方式
2020/3/6
58
初级教程完毕
2020/3/6
59
制作小窍门
资料准备全，图片要清晰 文字要简洁，重点更突出 制作很简单，就看熟练度 场景有创意，谁也挡不住
2020/3/6
60
分享经验 共同成长
2020/3/6
61
? ????
自我反思中
2020/3/6
21
站在上司 的角度思考一下 他是否认为我是一 个合格的下属
? ????
2020/3/6
22
站在孩子 的角度思考一下
他是否获得了一个孩 子应有的童年生活
? ????
2020/3/6
23
小故事
为什么要站在他人 的角度考虑问题呢 因为你认为对的事
情未必是对的
请体验一下
2020/3/6
24
先看 一个国外的
这是美女吗
我们倒过来看
2020/3/6
25
再看 一个国内的
这是美女吗
我们倒过来看
2020/3/6
26
进入制作教程
2020/3/6
27
制作小提示
• 制作H5场景推荐使用PC（电脑）端浏览器 • 也可在手机上下载制作工具客户端，在手机上进行制作 （但是在手机上制作，相对复杂一些，还是建议用PC端来做。）
H5页面微场景 制作入门教程
王玲工作室
2
1
what 什么是H5
C目录 ONTENTS
why 为什么要做H5 where 我们要在哪里使用H5 how 怎么制作H5（易企秀）
end 经验分享，共同成长
2020/3/6
2
什么是H5
2020/3/6
3
什么是H5？
• H5是指第5代HTML（超文本标记语言），也指用H5语言 制作的一切数字产品。
1.邮箱注册： 输入邮箱和密码，点击
“注册”即可。
2020/3/6
2.第三方登录：
无需注册，直接点击图
标，使用微信或者QQ进行登
录。
31
2020/3/6
登录易企秀账号
点击官网右上角“登录”
1.邮箱登录： 输入邮箱和密码，点击
“登录”即可。
2.第三方登录：
无需注册，直接点击图
标，使用微信或者QQ进行登
• 通俗地说，H5是一种创建网页的方式。 它会让手机网页看上去更炫酷，功能也更丰富多彩。
• 对于用户而言，H5具有流量入口多、分发效率高、使用门 槛低等明显优势。
2020/3/6
4
H5的特点
2020/3/6
5
H5 为什么要做
2020/3/6
6
为什么要做H5页面?
1. 随着移动互联网的高速发展，智能手机、平板电脑等移动终端设备越来越普及， 用户在移动端花的时间也越来越长。
2020/3/6
49
【设置动画】
动画设置主要应用于：文字、图片、图形、一键拨号、输入框等组件 设置方法：点击组件→选择“动画”→进入动画设置页面
2020/3/6
50
制作小提示
• 点击预览图标，即可对此页面的 动画设置进行整体预览。
2020/3/6
51
2020/3/6
设置是对场景的基 本信息进行设置， 主要包括：场景封 面、场景名称、场 景描述、翻页方式。
2020/3/6
36
页面模板
在易企秀制作页面的左侧栏， 易企秀官方为大家提供了分 门别类的“页面模板”，在 制作场景的过程中，可以参 考或者直接套用页面模板进 行场景创建。 自己制作的页面，也可以保 存为“我的”模板，以供下 次使用。 企业账号将自己的场景设置 为“企业页面模板”，子账 号可以直接使用。
2020/3/6
12
站在他人的角度
问
题
2020/3/6
13
圣诞节母亲带 女儿出去逛街 街上非常热闹 她想女儿一定 会非常的高兴
2020/3/6
14
然而 她绝对没有想到 在人潮汹涌的大街上 女儿却紧拽着她衣角
呜呜地哭个
不停
2020/3/6
15
原来 是女儿的鞋带开了 她蹲下身帮女儿系鞋带 系好鞋带无意中抬起头
录。
32
创建场景
点击右上角 创建场景
2020/3/6
33
【套模板】选择一个模板，把模板中需要修改的地方修改即可快捷制作。 【自主创建】点击“+”进入自主创建，一页一页创建场景。
2020/3/6
34
填写名称 后期可改
填写完毕 点击创建
2020/3/6
场景名称
点击选择 为了自己 管理方便
35
制作页面
2020/3/6
28
H5场景制作与运用流程
1
资料
准备
2
Hale Waihona Puke Baidu场景
制作
3
发布
宣传
4
信息
收集
2020/3/6
29
制作前，准备好4个资料
2020/3/6
创意：
展示什么，用什么方式
音乐：
烘托氛围，MP3格式
图片：
提前备好，视觉效果好
文字：
准备充分，具有感染力
30
免费注册易企秀账号
http://www.eqxiu.com/ 进入官网后点击右上角“注册”
组件是构成场景的基本要素
1.文本 2.背景 3.音乐 4.视频 5.图片 6.形状 7.图集 8.互动 9.表单 10.特效
2020/3/6
39
1.点击“文本”后 →即可创建 2.单击文本框 →出现编辑菜单 3.双击文本框 →进入基础编辑
2020/3/6
40
点击“背景”后，选择“背景库”中的背景图 也可点击“上传”上传图片到“我的背景”库
她惊奇的发现
……
2020/3/6
16
我什么 也看不到
没有彩灯 没有圣诞礼物 除了一双双粗大的脚 和来来往往的双腿 什么也看不见
母亲震惊了
2020/3/6
17
母亲立即抱起女儿 女儿笑了母亲流泪了 第一次从女儿的角度眺望 世界她感到非常震惊 从此这位母亲牢记
要站在孩子的立 场上看待问题
2020/3/6
H5页面几乎适用于所有企业和个人
2020/3/6
9
H5页面制作要求
• 背景图片尺寸：640px * 1010px
说明：px单位，中文叫像素
• 图片格式：.png、.jpg、.gif
说明：图片尽量控件在500K以内。 图片压缩工具：http://www.zuiku.com/web/bbs/topic?topicId=128
形状素材和文字一样可以做 “颜色、大小”等设置。
46
图集：是几张图片的集合 主要设置：图片比例、切换方式
2020/3/6
47
“互动”是方便制作者与观看者互动的组件 互动组件目前主要是“一键拨号”，正在不断增加
2020/3/6
48
表单（也叫信息收集表、报名表、信息反馈表等）是 场景创建者用来收集查看场景的用户反馈信息的重要 工具。可点击“表单”创建也可直接在互动模板里直 接快捷创建。
• 背景音乐格式：.mp3
说明：背景音乐尽量控件在1M以内。 音乐剪切工具：http://www.zuiku.com/web/bbs/topic?topicId=129
• 页面数：无限制
说明：为了更好的用户体验，建议尽量控制在15页以内。
2020/3/6
10
H5 怎么制作
2020/3/6
11
开场小故事
2020/3/6
43
点击“视频”后，给场景添加网络视频
点击“什么是视频通用代码”，出现详细操作
2020/3/6
44
点击“图片”后，选择“图片库”中的图片素材 或点击“上传”上传图片到“我的图片”库
2020/3/6
45
点击“形状”后，选择“形状组件” 库中选择形状组件
2020/3/6
“形状”是便于用户制作扁 平化页面的素材，
2. 用户时间碎片化，接收信息爆炸性增长，企业营销需要迅速抓住眼球，众多企业 已经站在互联网转型的风口。
3. 微信H5页面中触摸、滑动、摇一摇，辅之以文字、图片、动画、声音，给互联网 用户带来了全新体验，技术本身带来的新奇感让人们口口相传。
4. H5技术正被用于商业展示、会议活动、数字出版与教育、电子贺卡、个人展示等 各类场景中。
2020/3/6
41
背景编辑
→背景创建后，点击编辑栏上的背景齿轮，即可对背景 进行编辑。 →背景编辑主要包括：剪切、更换、效果（放大、缩 小）、删除。
2020/3/6
42
点击“音乐”即可创建【背景音乐】
1.【音乐库】为官方提供的音乐素材 2.【外部链接】插入网络音乐链接 3.【我的音乐】自主上传音乐
2020/3/6
7
我们要在哪里使用
H5
2020/3/6
8
什么场合可以用到H5页面?
微信互动营销：摇一摇、大转盘、刮刮卡、优惠券、投票调查、小游戏…… 商业展示：企业宣传、产品展示、品牌传播、优惠促销、企业招聘、数据年报…… 本次培训的目的：企业宣传、每月工作汇报、工作展示 会议活动：会议、展览会、发布会、活动…… 数字出版与教育：电子杂志、多媒体课件、培训课程…… 电子贺卡：商业贺卡、节日贺卡、生日贺卡、祝福卡…… 个人应用：个人秀、婚礼邀请、聚会Party、求职简历……
18
反思
不要轻易地 将自己的喜好逻辑 强加于他人的身上 站在不同的角度看 风景各有各的感受
冷暖自知
2020/3/6
19
不仅仅 一位好母亲需要 站在孩子立场上看问题 每个人都需要站在他人 的角度看问题只有 换位思考将心比心 才能够真正了解 他人的所思所想
2020/3/6
20
站在妻子 的角度思考一下 她是否愿意以我 这样的人为丈夫
2020/3/6
54
点击发布后，可获得场景二维码、场景连接和 更多的一键分享方式。
2020/3/6
55
下载更大的场景二维码 （在“我的推广”里找到二维码，如下图）
2020/3/6
56
2020/3/6
“我的场景”管理
• 点击“我的场景”可看到自己创 建的所有场景列表。
• 点击单个场景右下角的齿轮，即 可对此场景进行“设置、编辑、 复制、转送和删除”操作。
2020/3/6
37
右侧的“页面管理”
5大管理操作
1. 复制：点中条框，点击“复制” 2. 我的模板 ：点中条框，点击“我的
复制”，出现在左侧“页面模板”中， 可删除
3. 删除：点中条框，点击“删除” 4. 移动：点中条框，可上下拖动 5. 添加：点击“+”，添加一页
2020/3/6
38
10个基本组件+设置+发布