H5页面微场景制作入门教程—20150714版本
- 格式：pptx
- 大小：2.33 MB
- 文档页数：34
下载文档原格式
合集下载
H5页面微场景制作入门教程(共34张)
第22页，共34页。
表单（也叫信息收集表、报名表、信息反馈表等）是场景创建者用 来收集查看场景的用户反馈信息的重要工具。可点击(diǎn jī)“表 单”创建也可直接在互动模板里直接快捷创建。
第23页，共34页。
【设置动画】
动画设置主要应用于：文字(wénzì)、图片、图形、一键拨号、输入框等组件 设置方法：点击组件→选择“动画”→进入动画设置页面
方式
第32页，共34页。
制作 小窍门 (zhìzuò)
资料准备全，图片要清楚
文字要简洁，重点更突出 制作很简单，就看熟练度
场景有创意，谁也挡不住 愿您出佳作，祝君展宏图
第33页，共34页。
分享 经验 (fēn xiǎnɡ) 共同成长
感谢您的聆听
第34页，共34页。
也可点击“上传”上传图片到“我的背景”库
第15页，共34页。
背景 编辑 (bèijǐng)
→背景创建后，点击编辑栏上的背景齿轮，即可对背景进行 编辑。 →背景编辑主要包括：剪切、更换、效果（放大、缩小）、删除。
第16页，共34页。
点击(diǎn jī)“音乐”即可创建【背景音乐】
1.【音乐库】为官方提供的音乐素材 2.【外部链接】插入网络音乐链接 3.【我的音乐】自主上传音乐
组件是构成场景的基本要素
1.文本 2.背景 3.音乐 4.视频 5.图片 6.形状 7.图集 8.互动 9.表单 10.特效
第13页，共34页。
1.点击“文本”后 →即可创建 2.单击文本框
→出现(chūxiàn)编辑菜 单
3.双击文本框
→进入基础编辑
第14页，共34页。
点击(diǎn jī)“背景”后，选择“背景库”中的背景图
表单（也叫信息收集表、报名表、信息反馈表等）是场景创建者用 来收集查看场景的用户反馈信息的重要工具。可点击(diǎn jī)“表 单”创建也可直接在互动模板里直接快捷创建。
第23页，共34页。
【设置动画】
动画设置主要应用于：文字(wénzì)、图片、图形、一键拨号、输入框等组件 设置方法：点击组件→选择“动画”→进入动画设置页面
方式
第32页，共34页。
制作 小窍门 (zhìzuò)
资料准备全，图片要清楚
文字要简洁，重点更突出 制作很简单，就看熟练度
场景有创意，谁也挡不住 愿您出佳作，祝君展宏图
第33页，共34页。
分享 经验 (fēn xiǎnɡ) 共同成长
感谢您的聆听
第34页，共34页。
也可点击“上传”上传图片到“我的背景”库
第15页，共34页。
背景 编辑 (bèijǐng)
→背景创建后，点击编辑栏上的背景齿轮，即可对背景进行 编辑。 →背景编辑主要包括：剪切、更换、效果（放大、缩小）、删除。
第16页，共34页。
点击(diǎn jī)“音乐”即可创建【背景音乐】
1.【音乐库】为官方提供的音乐素材 2.【外部链接】插入网络音乐链接 3.【我的音乐】自主上传音乐
组件是构成场景的基本要素
1.文本 2.背景 3.音乐 4.视频 5.图片 6.形状 7.图集 8.互动 9.表单 10.特效
第13页，共34页。
1.点击“文本”后 →即可创建 2.单击文本框
→出现(chūxiàn)编辑菜 单
3.双击文本框
→进入基础编辑
第14页，共34页。
点击(diǎn jī)“背景”后，选择“背景库”中的背景图
H5页面微场景制作触发功能制作教程
• 文字 • 图片 • 形状
总结：触发逻辑
1.一个组件只能触发其他组件无法触发自己 2.一个组件可以触发多个组件，也可以被多个组件触发 3.被其他组件触发的组件还可以再触发其他组件
第二步：添加“动画”
点击想要触发的组件，并选择触发方式
第二步：添加“动画”
点击想要触发的组件，并选择触发方式
触发方式
1.显示：组件先不出现，点击触发源后从无到有 2.隐藏：组件先出现，点击触发源后从有到无
第三步：确定触发设置
当触发设置后 点击除组件外的其他阴影区域 即可完成触发设置
哪些组件可以设置动画
H5页面微场景制作教程
H5动画设计触发功能指南
触发：在H5页面中，点击一个文字/图片，让其他文
字/图片出现的一个功能。使用触发可以做出与用户互动效 果的H5页面，十分好玩、实用。
扫描二维码 体验一下场景中的触发应用
接下来 进入触发制作过程教学
第一步：调出“触发”
点击图片/文字→选择“触发”→添加触发 →选择触发内容（界面元素/随机图片） →点击元素添加需要触发的元素
总结：触发逻辑
1.一个组件只能触发其他组件无法触发自己 2.一个组件可以触发多个组件，也可以被多个组件触发 3.被其他组件触发的组件还可以再触发其他组件
第二步：添加“动画”
点击想要触发的组件，并选择触发方式
第二步：添加“动画”
点击想要触发的组件，并选择触发方式
触发方式
1.显示：组件先不出现，点击触发源后从无到有 2.隐藏：组件先出现，点击触发源后从有到无
第三步：确定触发设置
当触发设置后 点击除组件外的其他阴影区域 即可完成触发设置
哪些组件可以设置动画
H5页面微场景制作教程
H5动画设计触发功能指南
触发：在H5页面中，点击一个文字/图片，让其他文
字/图片出现的一个功能。使用触发可以做出与用户互动效 果的H5页面，十分好玩、实用。
扫描二维码 体验一下场景中的触发应用
接下来 进入触发制作过程教学
第一步：调出“触发”
点击图片/文字→选择“触发”→添加触发 →选择触发内容（界面元素/随机图片） →点击元素添加需要触发的元素
H5制作流程
h5分类及案例整理课件11功能与目标分类活动运营型为活动推广运营而打造的h5页面是最常见的类型形式多变包括游戏邀请函贺卡测试题等形式品牌宣传型品牌宣传型h5于品牌形象塑造向用户传达品牌的精神态度产品介绍型聚焦于产品功能介绍运用h5动技术优势尽情展示产品特性吸引用户买买买总结报告型各大企业的年终总结现也热衷于用h5技术实现优秀的互动体验令原本乏味的总结报告有趣生动了起来整理课件12活动运营型如今的h5活动运营页需要有更强的互动更高质量更具话题性的设计来促成用户分享传播
b. 一般情况下用640X1136进行设计；其他 安卓机器前端切图时可以适当拉伸，变化 不会太大就不用每个进行适配（来自腾讯 大讲堂）
整理ppt
7
▍H5版式-其他
a. 字体默认中文字体 Heiti SC ，中文名称叫 黑体-简，一般用华文黑体来代替，两者差 异微小；默认英文字体 Helvetica Neue LT ；字号选择不要小于18号，其他字号双 数，同种类别下用同一样字号
总结报告型
各大企业的年终总 结现也热衷于用 H5 技术实现，优 秀的互动体验令原 本乏味的总结报告 有趣生动了起来
整理ppt
11
▍活动运营型
如今的 H5 活动运营页需要有更强的互动、更 高质量、更具话题性的设计来促成用户分享传 播。从进入微信 H5 页面到最后落地到品牌 App 内部，如何设计一套合适的引流路线也 颇为重要。
例：《圣诞老人拯救计划》
整理ppt
20
肆：H5网页编辑工具
整理ppt
21
▍秀米秀制作
秀米在公众平台的图文排版上 可是名声远扬。和秀米的图文 神器一样，秀制作目前也是免 费的，提供多种模板，傻瓜式 操作，可以外链，可与秀米图 文排版双剑合璧
b. 一般情况下用640X1136进行设计；其他 安卓机器前端切图时可以适当拉伸，变化 不会太大就不用每个进行适配（来自腾讯 大讲堂）
整理ppt
7
▍H5版式-其他
a. 字体默认中文字体 Heiti SC ，中文名称叫 黑体-简，一般用华文黑体来代替，两者差 异微小；默认英文字体 Helvetica Neue LT ；字号选择不要小于18号，其他字号双 数，同种类别下用同一样字号
总结报告型
各大企业的年终总 结现也热衷于用 H5 技术实现，优 秀的互动体验令原 本乏味的总结报告 有趣生动了起来
整理ppt
11
▍活动运营型
如今的 H5 活动运营页需要有更强的互动、更 高质量、更具话题性的设计来促成用户分享传 播。从进入微信 H5 页面到最后落地到品牌 App 内部，如何设计一套合适的引流路线也 颇为重要。
例：《圣诞老人拯救计划》
整理ppt
20
肆：H5网页编辑工具
整理ppt
21
▍秀米秀制作
秀米在公众平台的图文排版上 可是名声远扬。和秀米的图文 神器一样，秀制作目前也是免 费的，提供多种模板，傻瓜式 操作，可以外链，可与秀米图 文排版双剑合璧
h5作品制作方法和过程
h5作品制作方法和过程
首先，在开始h5作品制作之前，作者需要明确自己的项目目标。
要想制作出优秀的
h5作品，首先要对作品的核心理念和交互功能有一个清晰明确的把握，要明确作品的定位、用途和技术要求。
其次，分析和设计h5作品的功能模块，作者需要根据作品的目标用户，结合项目的
目的，画出一个概要草图，根据概要草图来分析并设计出h5作品的各个交互环节，这些
交互环节对应的功能模块应该有哪些，以及每个模块内部的子功能设计，并且要经过大量
的用户体验测试，以确保h5作品的功能丰富，用户体验佳。
再次，建立作品的设计稿和流程脚本，作者要根据上述设计分析出来的功能模块等，
建立设计稿和流程脚本，用以详细描述出h5作品各个功能环节和每一步的操作过程，并
且把详细设计文档以及hi-fi设计稿绘制出来，供开发者按照这些文件来制作h5作品。
最后，精雕细琢h5作品，开发者根据设计师提供的设计文档和设计原型，严格按照
前面的流程来制作h5作品，从布局到样式，从交互特效到动画优化，要一步步细致的来做，最终要完成一个精美的h5作品。
H5页面设计初级案例教程：常用操作
元素或动画的复制与粘贴
我们想再次使用同一个元素时，可以在该素材右击，选择复制元素，然后在画布上右击，选择粘贴元素即可；
同样的，我们想再次使用之前已设置好的动画时，可以在在该素材右击，选择复制动画，然后在另一个上右击，选择粘贴动画即可。
移动画布的位置
我们在制作的过程难免会遇到画布的位置不是很理想，增大了制作的难度，可通过两种方法解决：
方法一：鼠标滑动到画布上时，画布的右上角会出现一个可拖动的按钮，点
击拖动即可；
方法二：鼠标放置在画布上，按住键盘上的空格键，点击画布进行拖拽即可。
调整层叠次序
按住图标可以调整组件上下层级关系
点击图标可以切换到指定元素的属性编辑面板
组件暂时隐藏
点击图标可以显示或隐藏组件
组件动画复制／粘贴
右击组件可以复制粘贴动画
页面复制粘贴
在左侧页面列表上右击可以复制粘贴页面
素材／动画／页面复用
我们可以将素材、动画、页面导入到库，方便下次可以直接使用。
意派Epub360-专业H5设计工具 意派Coolsite360-专业响应式网站/微信小程序设计工具。
手机h5页面制作教程
手机h5页面制作教程国内H5页面制作工具评测，iH5排第一当前，H5页面制作工具的各种排行榜与评测文章花样百出、各执一词，却都没有明确依据。
国内的大多评测与利益集团亲密相关，说白了是抬高自有品牌、贬低竞品的工具，因此本文尽量通过可量化的指标，保证评测结果的可信度。
首先须明确，国内的H5页面制作工具，一般指用于HTML5页面可视化开发的在线编辑器，基本目的为生成可用于传播的HTML5网页。
因此，无论不同工具在功能上有多少差异，基本面对作品的一键发布与即时投用，制作流程如下：这与国外存在很大差别。
美国也有H5页面制作工具，但多为离线软件形式、成品是打包的文件夹，功能应用上专用性也较强。
比如Adobe Edge和Tumult Hype偏向网页动画、Google Web Designer偏向广告设计、Construct 2偏向嬉戏制作，制作流程如下：评测以工具功能与性能为主，包括多媒体功能、高级应用、微信应用和用户友好度四个指标（各5分，总计65个参数），总分20分。
有意思的是，诸如初页、MAKA这些在H5界“盛名”的H5页面制作工具，并没有排上名次，评测得出排行榜单如下：第1名 18星半多媒体支持★★★★☆微信应用★★★★☆高级应用★★★★☆用户友好度★★★★★iH5综合性能最强，各项指标的得分均比较高，品牌展现、动画、嬉戏、建站均适用，主要面对企业用户。
因为免费，也不少像我这样的小散户用iH5玩玩票。
多媒体文件支持方面，iH5是唯一同时支持图片（JPG、GIF、ZIP、PSD等）、音视频、网页等的上传，并允许用户在生成页面中重设文件属性的编辑器，拓展性高。
总的来说，iH5目前有超过10项高级功能的可视化是业内独有的，包括：（1）绘画（2）横幅（Banner）（3）画布（4）物理引擎（5）运动模拟与监测（6）智能语音识别（7）轴动画（8）响应设备（9）跨屏互动（10）数据库（11）变量绑定（12）数据运算等的可视化，也支持红包、支付、录音、拍照上传、猎取用户个人信息等微信功能。
h5入门教程
h5入门教程H5（HTML5）是一种用于构建和展示内容的语言，它的出现为网页开发带来了许多新的功能和特性。
本文将介绍H5的基本概念、主要特点和入门教程。
H5是HTML的第五个版本，它在之前的HTML版本基础上进行了扩展和改进。
H5与之前版本最大的不同之处是引入了许多新的元素和API，这些新功能使得开发者可以更加方便地制作复杂的Web应用程序。
H5还提供了更多的多媒体支持，包括音频、视频和画布等元素，使得网页的交互性和视觉效果得到了极大的提升。
想要学习H5，首先需要对HTML和CSS有基本的了解和掌握。
如果你是初学者，可以从学习HTML和CSS开始。
一旦你对HTML和CSS有了一定的了解，就可以开始学习H5了。
在学习H5的过程中，可以首先关注以下几个重点：1. 了解H5的新元素和标签：H5引入了许多新的元素和标签，包括`<video>`、`<audio>`、`<canvas>`等，可以用来展示多媒体内容和绘制图形。
学习这些新元素和标签的使用方法可以为你的网页增加更多的功能和互动性。
2. 熟悉H5的API：H5提供了许多新的API，用于操作多媒体内容、进行本地存储、进行绘图等。
学习这些API的使用方法可以帮助你更好地控制和操纵网页的元素和内容。
3. 掌握H5的样式和布局：H5引入了一些新的样式和布局属性，如圆角、阴影、弹性布局等。
学习这些属性的使用方法可以使你的网页在视觉上更加吸引人。
4. 学习响应式设计：H5提供了一些新的特性，如媒体查询、弹性图像和弹性视频等，可以帮助你创建响应式的网页。
学习响应式设计可以使你的网页能够在不同的设备上自适应。
5. 实践和项目：学习H5最好的方式是通过实践和项目来巩固所学知识。
可以尝试制作一些小的网页和应用程序，逐步提升你的技能和经验。
总结起来，学习H5需要对HTML和CSS有基本的了解，然后可以通过学习新的元素和API、掌握样式和布局、学习响应式设计以及进行实践和项目来逐步提升自己的技能。
H5页面微场景排版技巧
方法
了解了基本的版式，我们再去了解排版中需要注意的几个问题。首先是对于版式的选择， 你如果拿到一份客户的要求而没办法想出接下来可以用哪些方式去排版，显然是作为设 计师而言不太光彩和合格的事情。我在上边的例子中也写到了，不同的情况下可以应用 不同的版式，而所谓的不同情况大多数时候有这么几种，字少图少，字少图多，字多图 少，字多图多，字图均衡。其次就是如何应用，版式是一种飘渺的艺术，理论形式固定 但表现形式多样。当你手法纯熟了，怎么摆放都会很好看，而在刚开始练习的阶段，我 们还是最好注意好排版中需要严格遵守的一样东西——留白 留白很多大师都讲解过，分析过，大部分来说比较宏观，都是跟意境挂钩，我再去说重 复的东西没意义了，我要说的是几个细碎的留白问题，首先我要否认很多人认为留白就 是要做简约风的印象，其实留白无处不在，简约风只是留白更宏观的定义而已｀｀｀
版式
• 首先我们需要了解版式，我们平时制作或看到的版式大部分都是—— 中心型.中轴型.分割型.倾斜型.骨骼型和满版型为主
中心型排版，利用视觉中心，突出想要表达的事物——当制作的图片没有 太多文字，并且展示主体很明确的情况下建议多使用中心型排版。中心排版具有 突出主体，聚焦视线等作用，体现大气背景可以用纯色，体现高端背景可以用 渐变色 Nhomakorabea斜型排版：
通过主体或整体画面的倾斜编排，使画面拥有极强的律动感，刺激视觉
当制作的图片中要体现律动性，冲击性，不稳定性，跳跃性等效果，可以使用倾 斜型排版。倾斜排版可以让呆版的画面爆发活力和生机，当你发现自己图片过于 死板或僵硬时，尝试让画面中某个元素带点倾斜，会有出奇的效果
骨骼型排版
通过有序的图文排列，使画面严禁统一，具有秩序感—— 当制作的图片中，文字较多时，通常都会运用到骨骼型排版。骨骼型排版方式是 较为常见的排版方式，清晰的调理和严谨性让画面平稳，是一种不会出现的错误， 但是比较单一的排版方式，有些时候为了打破骨骼型的单一和平稳，我们也可以 应用下图第三张的形式，在规整的排列中加一些律动强烈的素材
h5页面制作教程
h5页面制作教程H5页面制作是一种使用HTML5技术开发的网页页面，它具有交互性强、动画效果丰富、页面体验良好等优点。
下面将给大家介绍H5页面制作的简单教程，希望能帮助到初学者。
首先，我们需要了解一些H5页面制作的基础知识。
H5页面主要由HTML、CSS和JavaScript三个部分构成。
HTML用于定义页面的结构，CSS用于设置页面的样式，JavaScript用于实现页面的交互效果。
接下来，我们可以开始制作H5页面了。
首先，打开一个文本编辑器，新建一个以.html为后缀的文件。
然后，我们就可以开始编写HTML代码了。
在HTML代码中，我们需要使用一些基本的标签来定义页面的结构。
比如，我们可以使用<body>标签来定义页面的主体内容，<header>标签来定义页面的头部内容，<section>标签来定义页面的不同区块等等。
接着，我们可以使用CSS来设置页面的样式。
可以通过内联样式或者外部样式表来设置页面的样式。
比如，我们可以使用<style>标签来设置内联样式，或者使用<link>标签引入外部样式表。
在设置样式的时候，我们可以使用CSS属性来设置各种样式，比如颜色、字体、边框、背景等。
可以通过选择器来选中页面中的某个元素，然后对其应用相应的样式。
最后，我们可以使用JavaScript来实现页面的交互效果。
可以通过内联脚本或者外部脚本来编写JavaScript代码。
比如，我们可以使用<script>标签来定义内联脚本，或者使用<script src="xxx.js"></script>标签引入外部脚本。
在编写JavaScript代码的时候，我们可以通过DOM操作来操作页面的元素。
比如，我们可以通过document.getElementById()方法选中某个元素，然后可以修改其内容、样式或者添加事件等。
h5作品制作方法和过程
h5作品制作方法和过程
H5自从上线之后便备受网民的青睐，它具有创新性、灵活性以及交互性，让用户体验得到大大提升，深受制作者们的喜爱。
但是，H5作品制作也有一定的技巧，要想制作出出色的H5，就必须要熟悉它的制作方法和过程，以便才能将自己的想法实现出来。
首先，需要明确目标，比如想将哪种信息传达给用户、H5中放置什么元素，有什么特色等。
一旦目标具体，就可以制定出H5创意，将有效的创意和元素结合起来，才能形成一个炫酷的H5作品。
其次，要在H5中设计好页面布局。
多数情况下，H5作品的页面布局分为主体层及元素层，结合品牌识别来完美构建H5页面，从而提升用户体验。
另外，在设计布局的过程中要注意栅格的设计，以及特殊元素的适应度，调整H5的细节，尽可能地让H5和手机的界面保持一致。
紧接着，应该做好H5的编码工作，根据自己所设计好的框架，再结合H5页面组件，进行代码实现。
不同H5组件需要不同的代码，一般来说，H5组件有图片组件、文字组件、动画组件、音乐播放组件和插件组件等，要将它们正确的衔接，才能把H5作品完成。
最后，再进行H5作品的测试工作。
H5作品的测试主要包括兼容性测试和性能测试。
在测试的过程中要特别注意检查H5作品的浏览器兼容性，以及检查H5的下载速度和内存使用是否过高，确保它在手机端的操作流畅，从而给用户更好的体验。
以上就是H5作品制作的方法和过程，只有将各个环节的方法和
过程把握的恰到好处，才能制作出高质量的H5作品。
另外，还需要不断学习H5新技术，了解市场需求，这样才能够将自己制作出来的H5作品更加精彩出色。
h5教程入门
h5教程入门H5（HTML5）是一种用于构建和呈现网页内容的标准的第五个版本。
它有效地扩展了HTML语言的功能，使开发者能够更容易地创建复杂的网页和应用程序。
H5教程是帮助初学者快速入门学习H5编程的指南。
本文将为您介绍H5教程的基本内容，并展示学习H5的重要性。
H5教程通常从基本概念和语法开始。
首先，学习者将了解基本的HTML结构和标签，如`<html>`、`<head>`、`<body>`等。
然后，他们将学习如何使用标签来创建段落、标题、链接、图像等基本网页元素。
接下来，H5教程将介绍各种HTML标签的功能和用法。
学习者将了解如何使用`<div>`标签来组织网页内容，如何使用`<table>`标签创建表格，如何使用`<form>`标签创建输入表单等。
此外，他们还将学习如何使用CSS（层叠样式表）来美化网页，包括更改文本样式、设置背景颜色和图片、调整元素的位置和大小等。
进一步学习H5时，学习者将了解一些高级概念和技术。
例如，他们将学习如何使用CSS3动画和过渡效果来使网页内容更生动、吸引人。
他们还将学习如何使用媒体查询来实现响应式网页设计，使网页在不同设备上显示完美。
在H5教程中，还会介绍一些重要的H5 API和功能。
学习者将了解如何使用Geolocation API来获取用户的地理位置信息，如何使用Canvas API创建绘图和动画，如何使用Web StorageAPI存储和读取数据等。
这些功能使开发者能够创建更复杂、更交互的网页和应用程序。
学习H5编程的好处是显而易见的。
首先，H5是Web开发的重要技术之一，掌握H5将为您提供更多的就业机会和发展空间。
其次，使用H5开发网页和应用程序更加灵活和功能强大，可以提供更好的用户体验。
另外，H5还支持跨平台开发，可以在不同的设备和浏览器上运行。
总结来说，H5教程是非常有价值的学习资源，它涵盖了H5的基本概念、语法、常用标签、CSS样式和一些重要的API和功能。
微信H5页面怎么做？看这篇教程5分钟就能学会
微信H5页面怎么做？看这篇教程5分钟就能学会摘要：H5作为一种微信营销的工具，用户体验非常好，你看过最NB的H5页面是什么样的？你想学做H5吗？微信H5页面可以说是现下微信营销中最为人津津乐道的一种营销方式，这也H5页面的形式多样、交互应用强大、灵活性高、成本低等优势有着重要的关系，但很多人都说，H5虽然优点多多，可总感觉技术难题难以攻克，其实微信H5页面也有制作的技巧和捷径，让我们一起来看看如何5分钟学会制作H5页面。
什么是微信H5页面？在学习制作之前，你首先要明白微信H5页面是什么。
简单来说，H5就是第五代的HTML，而H5页面就是用HTML语言制作许多的数字产品，最常见的就是简单图文，当然，伴随着微信的发展，也衍伸出了许多有特色的产品，如小游戏、测试、贺卡……而这些一般都可以包含文字、图片、音乐、链接等多元元素。
因此，H5页面其实就如同一个大杂烩，可以利用H5制作许多有趣、形式多样的产品，成为微信营销的重要手段。
微信H5页面的优势其实HTML自研发至今已有近30年的历史，但过去始终不温不火，除去专业人士，几乎没什么人乐于关心什么是HTML，但之所以如今H5页面如此火热，不容置否的自然在于其在传播上的优势。
首先，微信H5页面的跨平台优势非常突出，完全可以做到一次开发就能运用于不同的平台，对于企业来说完全是一大福音，毕竟人力、财力的支出大大降低。
其次，有别于其他的微信营销手段，微信H5页面的形式更多样化，就像我在前面提到的，无论是小游戏、小测试还是贺卡等形式都是目前粉丝们所热衷的，这也是微信营销之基础所在。
如何制作微信H5页面？说了那么多，那么微信H5页面究竟该怎么做呢？（1）选择合适的软件有人说选择软件有什么重要的，能用不就得了吗？也有人说何必选择软件，自己动手就得了！我想有这种想法的应该都是新手上路，要知道，微信H5页面的优势自然是不用说了，但前期的开发也是存在技术难关的，加之微信页面对二次开发更是可谓要求苛刻，所以选择一款合适的软件能够轻松跃过技术难关。
iH5中级教程：微场景H5必备,滑动时间轴轨迹
iH5中级教程：微场景H5必备，滑动时间轴+轨迹你是否还在羡慕别人做的H5各种华丽各种切换各种来?使用一个免费的在线H5编辑工具不需要写代码你也可以来秀一手让人眼馋的华丽切换，下面教大家来制作一个非常简单的工具，让你的素材动起来。
工具/原料：图片素材第一步：1、选中舞台2、点击工具栏里的“图片”图标3、在舞台上画出一个框4、在舞台下添加图片，并调整好图片的位置。
第二步：1、选中舞台2、点击工具栏里的“滑动时间轴”图标3、在舞台上画出一个框作为你滑动的区域4、在这区域外滑动则无效，选中图片Ct rl+X，选中滑动时间轴Ctrl+V，把图片移动到滑动时间轴下。
第三步：为滑动时间轴下的图片，添加轨迹和控制点1、选中图片2、点击轨迹图标，添加轨迹第四步：1、在0秒的时候点击Add按钮，添加一个关键帧2、在时间轴窗口第一个框中填写1，点回车，跳转到1秒，放大图片，添加第二个关键帧。
3、跳转到2秒；点击“图片旋转（顺时针）”设置旋转角度720°添加第三个关键帧第五步：1、设置滑动时间轴总时长一般与最后一个控制点的时间相同2、方向是你往哪边滑动是让滑动时间轴正向播放3、自动跳转控制点设置成否4、比例是设定手指滑动的距离对滑动时间轴轴播放进度的控制，默认值为1，即手指按设定方向划过滑动时间轴整个范围时，滑动时间轴会从起点播放到终点。
重点控件：滑动时间轴、轨迹知识点：1、点击工具栏上的滑动时间轴工具，在舞台上画出一个框作为滑动区域，添加滑动时间轴。
选中滑动时间轴，点击图片工具，添加素材。
选中素材，点击轨迹工具，添加轨迹，点击时间轴窗口上的AD D添加关键帧。
2、如果要修改关键帧里记录的素材的属性，必须选中关键帧为橙色，再移动素材的位置或修改大小透明度等。
微信H5页面制作简易教程共35页文档PPT文档37页
41、学问是异常珍贵的东西，从任何源泉吸 收都不可耻。——阿卜·日·法拉兹
42、只有在人群中间，才能认识自 己。——德国
43、重复别人所说的话，只需要教育； 而要一大优点是：在不利与艰 难的遭遇里百折不饶。——贝多芬
微信H5页面制作简易教程共35页文档
21、没有人陪你走一辈子，所以你要 适应孤 独，没 有人会 帮你一 辈子， 所以你 要奋斗 一生。 22、当眼泪流尽的时候，留下的应该 是坚强 。 23、要改变命运，首先改变自己。
24、勇气很有理由被当作人类德性之 首，因 为这种 德性保 证了所 有其余 的德性 。--温 斯顿． 丘吉尔 。 25、梯子的梯阶从来不是用来搁脚的 ，它只 是让人 们的脚 放上一 段时间 ，以便 让别一 只脚能 够再往 上登。
45、自己的饭量自己知道。——苏联
写给大家看的H5页面制作入门指南。
写给大家看的H5页面建造入门指南.之杨若古兰创作 H5是比来两年非常火的一个东西，什么是H5呢？通俗的说就是那些经常刷爆微信朋友圈的手机网页了.给大家举个例子，长按识别二维码就可以检查.信任大家在这之前都或多或少有看到过如许的页面.不管是企业宣扬，建造简历、约请函，还是建造纪念册、表达，H5有着其非常广泛的利用.那如许的页面是怎样做出来的呢？其实普通人也能够轻松上手，今天三顿就来和大家分享一些H5建造的入门技巧，教大家如何做出酷炫的酷炫的H5页面.-------------------------------------------国际惯例放一个机智的目录：工欲善其事必先利其器，不管是专业的设计师还是小白，建造H5页面都会不成防止的用到一些在线建造工具.然而目前的H5在线建造工具层见叠出，不说成百上千也有几十种之多，三顿在这里为大家推荐几款基础和实用的.-------------------------------------------MAKA（maka.im）要说小白用哪一款H5建造工具比较好，我觉得首推的就是MAKA了.为何这么说呢？首先MAKA的操纵页面非常简单，乍一看和PPT还有几分相像.添加文字图片都非常方便，轻松上手.其次MAKA中有大量做好的免费模板，不须要大家设计，就可以通过模板来进行建造.而且免费模板的质量也都非常的高，放张截图你们感受一下.不但有模板，内置的素材也是一应俱全.高清图片、矢量图标，甚至连PPT中经常使用的数据图表都可以直接套用.除此以外还有很多好玩的弄法，比方投票、倒计时、呼叫拨号等等的交互后果都可以一键实现，非常傻瓜，大家可以本人去测验考试一下.最初，它还撑持PSD格式的文件一键导入，大家可以用PS来建造页面后直接导入到MAKA，生成H5页面.-------------------------------------------iH5（）MAKA可以说是入门级的H5建造工具，秉承着少而精的准绳，我觉得MAKA也是最适合大家使用的.那么除此以外呢也有很多专业设计师会用到的H5建造工具，撑持建造各种动效和交互后果，而我要给大家推荐的是这款叫ih5的在线工具.看页面就可以发现有一种PS的既视感，所以非常专业，而我推荐给大家的缘由是里面筹办了很多好的H5教程，从老手到进阶一应俱全.同时它也筹办了很多素材和案例供大家进修，所以如果真的想好好学一下H5的话建议大家可以测验考试这个平台.H5工具我只推荐这两款，他们之间好比就是会声会影和AE的关系，前者简单易学后者高端专业却内置了很多教程，方便大家进修.然而其实使用这些工具也存在一些成绩，比方由于都是在网页上建造，会出现卡顿.另外工具中内置的字体也不是很多，有时候没有法子达到我们的后果.那么作为一个“坚信PPT是全能的”的三顿，我们完好可以利用PPT轻松的建造出H5页面.之前三顿有写过一篇文章，教大家用PPT中点窜页面尺寸的方法建造微信封面图，二维码页等等.其实一样的方法也能够用来做H5.-------------------------------------------接上去就为大家送上完好的PPT建造H5教程.首先我们须要在设计选项卡幻灯片大小中点窜页面尺寸，页面尺寸调整为全屏显示（16:10），然后页面方向设置纵向.如许当前一个H5页面的模样就出此刻我们面前了，我们要做的就是在这个页面上添加所需的元素.在这里做一个举例，在页面上添加简单的元素.其实如许一个页面就完成了，我们以后要做的是把页面搬运到H5在线生成工具中，这里以MAKA为例.方法也很简单，在左上角的文件选项卡当选择另存为，属性勾选JPG格式，点击保管.然后将保管好的图片上传到MAKA中，一个页面就轻松的完成了.当然每个平台所需的PPT页面尺寸分歧，大家可以生成以后在网站上进行进一步的调整.这个方法适合做一些简单的静态页面，如果大家想为页面中的元素比方说刚刚图片中的文字加一些动画后果，那么处理就稍微麻烦一些.我们须要在PPT中，将元素逐一保管为图片，然后导入MAKA，须要留意的是保管时要选择保管为PNG格式，如许元素布景才是透明的.文字处理也是一样，处理完后按PPT中的版式原封不动搬运到MAKA，然后逐一添加动画后果就可以了.学会PPT，走遍天下都不怕.真的是如许，用最基础的PPT技巧完好可以建造一个酷炫的H5页面，让你横行全部公司.当然虽然和PPT建造类似，但有几个留意事项还是要在这里提醒一下大家.首先是每个页面上的元素不宜过多，这个和PPT道理一样，要做到让人一划就过却可以轻松地记住页面上的信息.第二，页面底部要适当留空，由于每个页面都有一个滑动的后果，虽然很经常使用但也会有很多人不晓得.所以大家要留意留出这个空间，让观众可以看得清楚.除此以外也有很多可以一键实现PPT到H5页面转换的工具，我给大家推荐其中的一个，PPJ.JO，上传PPT后可以之间生成H5非常方便.经过测试，PPT中大部分动画后果都可以保存上去.但这个网页还属于测试阶段，对于有的页面转化后果其实不是特别好.细心看完今天的教程，我信任大家都可以轻松的做出一份还不错的H5页面，当然这些只是最基础的技巧，做出专业水准的H5还须要大家去测验考试和探索.但是用这些基础的技巧去敷衍我们经常须要做的约请函、简历等等那绝对是绰绰不足了.类似的H5建造平台还有很多，比方Epub360、易企秀等等，我在这里只推荐两款是但愿大家先测验考试，也欢迎大家鄙人方留言谈一谈你觉得好用的H5建造工具.感谢撑持，如果小伙伴们觉得我写的还不错，但愿三顿继续写出更优良的内容的话，务必点一下赞美或者广告，你们的撑持是我的最大的动力！。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
特效组件是给某一个页面加上一个特殊的效果。
点击“特效”即可为当前页面选择合适的特效
很重要
特别重要
“保存”只是对操作进行保存，如果不点击
“发布”此场景未发布的编辑内容，在场景 分享出去时，别人看不到最新编辑的内容。 点击“退出”则推出编辑页面。
点击发布后，可获得场景二维码、场景连接和 更多的一键分享方式。
H5页面微场景制作 入门教程
入门了，一切都变得很简单！
制作者：刘艳君
制作小提示
• 制作H5场景推荐使用谷歌浏览器 • 也可在手机上下载制作工具客户端，在手机上进行制 作
H5场景制作与运用流程
1 2 3 4
资料
场景
发布
信息
准备
制作
宣传
收集
制作前，准备好4个资料
创意：
展示什么，用什么方式
无需注册，直接点击图标， 使用微信或者QQ进行登录。
创建场景
点击右上角 创建场景
【套模板】选择一个模板，把模板中需要修改的地方修改即可快捷制作。
【自主创建】点击“+”进入自主创建，一页一页创建场景。
场景名称
填写名称 后期可改 点击选择 为了自己 管理方便
填写完毕 点击创建
制作页面
页面模板
在易企秀制作页面的左侧栏， 易企秀官方为大家提供了分 门别类的“页面模板”，在 制作场景的过程中，可以参 考或者直接套用页面模板进 行场景创建。 自己制作的页面，也可以保 存为“我的”模板，以供下
次使用。
企业账号将自己的场景设置 为“企业页面模板”，子账
号可以直接使用。
右侧的“页面管理”
【设置动画】
动画设置主要应用于：文字、图片、图形、一键拨号、输入框等组件
设置方法：点击组件→选择“动画”→进入动画设置页面
制作小提示
• 点击预览图标，即可对此页面的
动画设置进行整体预览。
设置是对场景的基 本信息进行设置， 主要包括：场景封 面、场景名称、场 景描述、翻页方式。 点击“场景共享” 和“友情展示”下 拉键，可参加易企 秀官方活动和尾页 设置。
5大管理操作
1. 复制：点中条框，点击“复制” 2. 我的模板 ：点中条框，点击“我的
复制”，出现在左侧“页面模板”中， 可删除
3. 删除：点中条框，点击“删除” 4. 移动：点中条框，可上下拖动
5. 添加：点击“+”，添加一页
10个基本组件+设置+发布
组件是构成场景的基本要素
1.文本 2.背景 3.音乐 4.视频
图片：
提前备好，视觉效果好
文字：
准备充分，具有感染力
免费注册易企秀账号
进入官网后点击右上角“注册”
1.邮箱注册： 输入邮箱和密码，点击 “注册”即可。
2.第三方登录： 无需注册，直接点击图标， 使用微信或者QQ进行登录。
登录易企秀账号
点击官网右上角“登录”
1.邮箱登录： 输入邮箱和密码，点击 “登录”即可。
5.图片 6.形状 7.图集 8.互动
9.表单 10.特效
1.点击“文本”后 →即可创建 2.单击文本框 →出现编辑菜单 3.双击文本框 →进入基础编辑
点击“背景”后，选择“背景库”中的背景图 也可点击“上传”上传图片到“我的背景”库
背景编辑
→背景创建后，点击编辑栏上的背景齿轮，即可对背景 进行编辑。 →背景编辑主要包括：剪切、更换、效果（放大、缩 小）、删除。
“形状”是便于用户制作扁 平化页面的素材， 形状素材和文字一样可以做 “颜色、大小”等设置。
图集：是几张图片的集合 主要设置：图片比例、切换方式
“互动”是方便制作者与观看者互动的组件
互动组件目前主要是“一键拨号”，正在不断增加
表单（也叫信息收集表、报名表、信息反馈表等）是 场景创建者用来收集查看场景的用户反馈信息的重要 工具。可点击“表单”创建也可直接在互动模板里直 接快捷创建。
点击“音乐”即可创建【背景音乐】
1.【音乐库】为官方提供的音乐素材 2.【外部链接】插入网络音乐链接 3.【我的音乐】自主上传音乐
点击“视频”后，给场景添加网络视频
点击“什么是视频通用代码”，出现详细操作
点击“图片”后，选择“图片库”中的图片素材 或点击“上传”上传图片到“我的图片”库
点击“形状”后，选择“形状组件” 库中选择形状组件
制作小窍门
资料准备全，图片要清楚
文字要简洁，重点更突出 制作很简单，就看熟练度
场景有创意，谁也挡不住
愿您出佳作，祝君展宏图
分享经验 共同成长
感谢您的聆听
下载更大的场景二维码 （在“我的推广”里找到二维码，如下图）
“我的场景”管理
• 点击“我的场景”可看到自己创 建的所有场景列表。 • 点击单个场景右下角的齿轮，即 可对此场景进行“设置、编辑、 复制、转送和删除”操作。 • 点击“开放”/“关闭”，对场 景进行开放和关闭。
在微信里分享场景
微信扫一扫场 景二维码→打 开场景→点击 右上角菜单→ 选择分享方式