微信H5页面制作简易教程培训课件PPT(共 34张)
合集下载
h5制作课件
交互功能应简洁明了，避免过 于复杂和繁琐，提高用户体验
。
响应式设计
根据不同设备的屏幕大小和分 辨率，优化页面布局和交互效 果，提高用户体验。
兼容性考虑
确保交互功能在不同浏览器和 设备上都能正常工作，提高兼 容性。
性能优化
优化代码和资源加载，提高页 面加载速度和交互响应速度，
提高用户体验。
05
H5性能优化策略
H5制作流程概述
确定主题和目标
明确H5页面的主题和目标 ，为制作提供方向。
素材准备
收集所需的图片、音频、 视频等素材。
测试与优化
在多种设备上测试H5页面 ，确保兼容性和流畅性，
并进行优化调整。
规划和设计
根据主题和目标，规划页 面结构、布局、交互等。
制作页面
使用合适的工具或在线平 台，按照设计制作H5页面
THANKS
感谢观看
遵循W3C标准，确保代码在不同浏览器和设备上的一致性。
响应式设计
根据不同设备的屏幕尺寸和分辨率，设计适应不同设备的页面布局和 样式。
使用跨平台的框架和库
如Bootstrap、jQuery等，这些框架和库已经经过广泛测试，具有良 好的跨平台兼容性。
自动化测试工具
使用自动化测试工具对H5页面进行测试，确保在不同浏览器和设备 上都能正常运行。
03
H5动画效果实现
动画类型与效果选择
进入动画
从无到有，如淡入
退出动画
从有到无，如淡
强调动画
突出某个元素，如放大、旋转
组合动画
多个动画组合使用，如淡入淡出、平移旋转
动画制作技巧分享
合理选择动画效果
根据内容需要选择合适的 动画效果，避免过度使用 或滥用
。
响应式设计
根据不同设备的屏幕大小和分 辨率，优化页面布局和交互效 果，提高用户体验。
兼容性考虑
确保交互功能在不同浏览器和 设备上都能正常工作，提高兼 容性。
性能优化
优化代码和资源加载，提高页 面加载速度和交互响应速度，
提高用户体验。
05
H5性能优化策略
H5制作流程概述
确定主题和目标
明确H5页面的主题和目标 ，为制作提供方向。
素材准备
收集所需的图片、音频、 视频等素材。
测试与优化
在多种设备上测试H5页面 ，确保兼容性和流畅性，
并进行优化调整。
规划和设计
根据主题和目标，规划页 面结构、布局、交互等。
制作页面
使用合适的工具或在线平 台，按照设计制作H5页面
THANKS
感谢观看
遵循W3C标准，确保代码在不同浏览器和设备上的一致性。
响应式设计
根据不同设备的屏幕尺寸和分辨率，设计适应不同设备的页面布局和 样式。
使用跨平台的框架和库
如Bootstrap、jQuery等，这些框架和库已经经过广泛测试，具有良 好的跨平台兼容性。
自动化测试工具
使用自动化测试工具对H5页面进行测试，确保在不同浏览器和设备 上都能正常运行。
03
H5动画效果实现
动画类型与效果选择
进入动画
从无到有，如淡入
退出动画
从有到无，如淡
强调动画
突出某个元素，如放大、旋转
组合动画
多个动画组合使用，如淡入淡出、平移旋转
动画制作技巧分享
合理选择动画效果
根据内容需要选择合适的 动画效果，避免过度使用 或滥用
《H5页面设计与制作》课件1
腾讯：2016腾讯WE大会·无 境，用于会议邀请
奥美：稀有动物悬赏 令，用于企业招聘
1.5 H5的类型
营销宣传类 知识新闻类 游戏互动类 网站应用类
1.5 H5的类型
1. 营销宣传类 营销宣传类H5是最常见的，它通常都是为产品、品牌以及活动做宣 传推广而设计的。
招商银行APP：来！坐！
腾讯：Next Idea x 故宫
宝马：全新BMW M2 即将上市
1.5 H5的类型
2. 知识新闻类 知识新闻类H5同样比较普遍，它通常都是根据社会重大事件进行宣 传新闻、普及知识的。
澎湃新闻：垃圾分类可视化 查询手册
网易新闻：自白
腾讯新闻×WWF×微公益： 腾讯新闻
1.5 H5的类型
3. 游戏互动类 游戏互动类H5一般比较简单，在微信中点开就可以直接玩，不用安 装卸载，通常多为娱乐或引流而制作。
花瓣
UI中国
H5初识
随着移动互联网的兴起，H5逐渐成为了互 联网传播领域的一个重要传播形式，因此学习和 掌握H5成为了广大互联网从业人员的重要技能 之一。本章对H5的定义、发展、特点、应用以 及类型进行系统讲解。通过对本章的学习，读者 可以对H5有一个宏观的认识，有助于高效便利 地进行后续的H5设计制作。
学习目标
网易新闻×哒哒×999皮炎平： 守护你的幸运足球
网易新闻×哒哒：睡姿大比拼 小米：我在宫里遇到一件 奇怪的事
1.5 H5的类型
4. 网站应用类 网站应用类H5在产品设计领域中常被称为“H5网站”，可以直接 在浏览器中观看和操作，不像App那样需要安装，它通常带有大量信息 及App中的部分功能。
站酷
腾讯：穿越未来来看你
贝壳租房×奇葩说： 100年后你将住在哪个奇葩星球
《H5页面设计与制作》课件7
长页滑动H5制作
长页滑动H5的本质是一镜到底展示信息内 容，其免去了用户翻页跳转的操作，可以更好地 提高用户浏览体验。本章从实战角度对长页滑动 H5的项目策划、交互设计、视觉设计以及制作 开发进行系统讲解与演练。通过对本章的学习， 读者可以对长页滑动H5有一个基本的认识，并 快速掌握设计制作常用长页滑动H5的方法。
效果图
7.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
7.1.3 视觉设计
使用谷歌浏览器登录iH5官网，使用iH5制作食品餐饮行业产品 介绍H5，使用Photoshop软件制作页面的视觉设计。使用iH5的页 面>剪切>使用滚动条功能制作最终效果。
7.1.4 制作发布
效果图
7.2 课堂练习——文化传媒行业活动邀请H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作文化传媒行业活动 邀请H5，使用Photoshop软件制作页面的视觉设计，使用iH5的页 面>剪切>使用滚动条功能、事件功能制作最终效果。
效果图
7.3 课后习题——服装饰品行业产品营销H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作服装饰品行业产品 营销H5，使用Photoshop软件制作页面的视觉设计，使用iH5的页 面>剪切>使用滚动条功能制作最终效果。
学习目标
了解食品餐饮行业产品介绍H5的项目策划 掌握食品餐饮行业产品介绍H5的交互设计
7.1 课堂案例——食品餐饮行业产品介绍H5制作
项目策划 交互设计 视觉设计 制作发布
Байду номын сангаас.1.1 项目策划
Tree Cake是一家致力提供新鲜美味的线上蛋糕品牌，本次想借 助H5推广店内热销蛋糕，达到用户关注品牌进行购买的目的。在策 划上，针对内容分为了品牌介绍以及产品介绍。针对视觉，以蛋糕图 片为主，采用金色和白色，凸显蛋糕的品质与新鲜。针对制作，主要 运用长页的表现形式提高用户浏览体验。
长页滑动H5的本质是一镜到底展示信息内 容，其免去了用户翻页跳转的操作，可以更好地 提高用户浏览体验。本章从实战角度对长页滑动 H5的项目策划、交互设计、视觉设计以及制作 开发进行系统讲解与演练。通过对本章的学习， 读者可以对长页滑动H5有一个基本的认识，并 快速掌握设计制作常用长页滑动H5的方法。
效果图
7.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
7.1.3 视觉设计
使用谷歌浏览器登录iH5官网，使用iH5制作食品餐饮行业产品 介绍H5，使用Photoshop软件制作页面的视觉设计。使用iH5的页 面>剪切>使用滚动条功能制作最终效果。
7.1.4 制作发布
效果图
7.2 课堂练习——文化传媒行业活动邀请H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作文化传媒行业活动 邀请H5，使用Photoshop软件制作页面的视觉设计，使用iH5的页 面>剪切>使用滚动条功能、事件功能制作最终效果。
效果图
7.3 课后习题——服装饰品行业产品营销H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作服装饰品行业产品 营销H5，使用Photoshop软件制作页面的视觉设计，使用iH5的页 面>剪切>使用滚动条功能制作最终效果。
学习目标
了解食品餐饮行业产品介绍H5的项目策划 掌握食品餐饮行业产品介绍H5的交互设计
7.1 课堂案例——食品餐饮行业产品介绍H5制作
项目策划 交互设计 视觉设计 制作发布
Байду номын сангаас.1.1 项目策划
Tree Cake是一家致力提供新鲜美味的线上蛋糕品牌，本次想借 助H5推广店内热销蛋糕，达到用户关注品牌进行购买的目的。在策 划上，针对内容分为了品牌介绍以及产品介绍。针对视觉，以蛋糕图 片为主，采用金色和白色，凸显蛋糕的品质与新鲜。针对制作，主要 运用长页的表现形式提高用户浏览体验。
《H5页面设计与制作》课件3
学习目标
了解媒体娱乐行业消消乐H5的项目策划 掌握媒体娱乐行业消消乐H5的交互设计
3.1 课堂案例——媒体娱乐行业消消乐H5制作
项目策划 交互设计 视觉设计 制作发布
3.1.1 项目策划
King Game Studios是一家游戏工作室，此次想借助H5在网络 上获取一定的关注度。在策划上，结合了工作室的游戏性质，运用 H5制作工具中的模版设计一款消除类益智H5小游戏。旨在通过游戏， 刺激用户了解甚至关注到King Game Studios。
互动游戏H5制作
互动游戏H5由于具备简单有趣及交互性强 的特点，因此给用户带来了一定的感官刺激，并 且间接地将企业的品牌进行了宣传。本章从实战 角度对互动游戏H5的项目策划、交互设计、视 觉设计以及制作开发进行系统讲解与演练。通过 对本章的学习，读者可以对互动游戏H5有一个 基本的认识，并快速掌握设计制作常用互动游戏 H5的方法。
效果图
3.2 课堂练习——食品餐饮行业翻牌子H5制作
注册登录易企秀官网，查找符合要求的互动H5模板，调整相关 的文字内容。
效果图
3.3 课后习题——健康医疗行业打地鼠H5制作
注册登录易企秀官网，查找符合要求的互动H5模板，调整相关前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
媒体娱乐行业消消乐H5原型图
3.1.3 视觉设计
本次H5由于采用的是制作工具中的模版，因此可以直接到制作， 不需要进行专门的视觉设计。
3.1.4 制作发布
使用谷歌浏览器注册登录易企秀官网，使用互动H5免费模板制 作媒体娱乐行业消消乐，并修改活动名称、分享描述以及关注的二维 码。
H5培训PPT幻灯片课件
39
I want you to join H5!
40
最后，分享一个能够动态展示H5的网站
/
41
1
什么是HTML5？
2
其本身的含义对我们的营销没有任何卵用
通俗的讲：是网络页面编辑脚本的规范和标
准
（万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改）
3
但其呈现效果却是目前最炙手可热的营销 手段之一
4
5
从引爆朋友圈的H5小游戏《围住神经猫》 到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》 各种H5游戏和专题页纷纷崭露头角。 “H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台， 正在走进更多人的视野。
从二维码入口到性感的loading页，再到最后分享提示的设计，包括文案措辞和背景音效， 无不与整体的戏虐风保持一致，给到用户一个完整统一的互动体验。
30
尤其关注“分享提示”这个细节设计
31
2
紧跟热点，利用话题效应
32
天天P图《全民COS武媚娘》
操作简单易上手，一键上传照片就能立刻完成媚娘妆，与万千媚娘们进行PK，娱乐了大众 又推广了产品
在浏览过程中我只使用了一种向上滑动的手势，而页面呈现出来的效果却犹如一个流畅的动 态GIF
38
结语
随着手机硬件的升级、HTML5技术的发展以及微信 平台的开放，HTML5的跨平台、低成本、快迭代等 优势被进一步凸显，这对身处于移动互联网大潮的 企业主、品牌、设计师和开发者来说，都将是一个 最好的时代。
6
从功能与设计目标来看， H5专题页主要有以下4大类型
1
活动运营型
2
品牌宣传型
I want you to join H5!
40
最后，分享一个能够动态展示H5的网站
/
41
1
什么是HTML5？
2
其本身的含义对我们的营销没有任何卵用
通俗的讲：是网络页面编辑脚本的规范和标
准
（万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改）
3
但其呈现效果却是目前最炙手可热的营销 手段之一
4
5
从引爆朋友圈的H5小游戏《围住神经猫》 到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》 各种H5游戏和专题页纷纷崭露头角。 “H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台， 正在走进更多人的视野。
从二维码入口到性感的loading页，再到最后分享提示的设计，包括文案措辞和背景音效， 无不与整体的戏虐风保持一致，给到用户一个完整统一的互动体验。
30
尤其关注“分享提示”这个细节设计
31
2
紧跟热点，利用话题效应
32
天天P图《全民COS武媚娘》
操作简单易上手，一键上传照片就能立刻完成媚娘妆，与万千媚娘们进行PK，娱乐了大众 又推广了产品
在浏览过程中我只使用了一种向上滑动的手势，而页面呈现出来的效果却犹如一个流畅的动 态GIF
38
结语
随着手机硬件的升级、HTML5技术的发展以及微信 平台的开放，HTML5的跨平台、低成本、快迭代等 优势被进一步凸显，这对身处于移动互联网大潮的 企业主、品牌、设计师和开发者来说，都将是一个 最好的时代。
6
从功能与设计目标来看， H5专题页主要有以下4大类型
1
活动运营型
2
品牌宣传型
h5培训课件
h5培训课件H5培训课件：探索未来互联网的无限可能随着移动互联网的迅猛发展，H5技术逐渐成为一种重要的网络应用开发工具。
H5（Hypertext Markup Language 5）是一种用于描述和定义网页结构的标记语言，它不仅可以实现网页的基本布局和格式，还可以通过嵌入JavaScript和CSS等技术实现丰富的交互效果和动态内容。
H5培训课件的目的是帮助学员掌握H5技术的基本原理和应用方法，从而能够独立开发出具有创新性和交互性的网页应用。
本文将从H5技术的发展背景、应用领域、学习方法等多个角度来探讨H5培训课件的重要性和必要性。
首先，我们来看一下H5技术的发展背景。
随着智能手机的普及和移动互联网的快速发展，传统的网页浏览已经无法满足人们对于富媒体和交互性的需求。
H5技术的出现填补了这一空白，使得网页应用能够更好地适应各种移动设备的屏幕尺寸和操作方式。
通过H5技术，开发者可以实现更加丰富多样的交互效果，提升用户体验，为用户带来更多的便利和乐趣。
其次，H5技术在应用领域上具有广泛的应用前景。
除了传统的网页开发，H5技术还可以应用于游戏开发、移动应用开发、广告营销等领域。
例如，通过H5技术可以开发出各种类型的网页游戏，无需下载和安装，用户可以直接在浏览器中进行游戏，大大提高了游戏的传播和用户参与度。
另外，H5技术还可以应用于移动应用的开发，通过嵌入H5页面可以实现更加灵活和丰富的界面效果和交互方式。
在广告营销领域，H5技术可以实现更加生动和吸引人的广告形式，提升广告的点击率和转化率。
那么，如何学习和掌握H5技术呢？H5培训课件的出现为学习者提供了一种便捷和系统的学习方式。
通过H5培训课件，学员可以系统地学习H5技术的基本概念、语法规则和开发方法。
课件通常会包括理论讲解、案例分析和实践演练等环节，学员可以通过学习和实践相结合的方式加深对H5技术的理解和掌握。
同时，H5培训课件还可以提供一些实用的开发工具和资源，帮助学员更好地进行项目开发和问题解决。
《H5页面设计与制作》课件2
H5的设计与制作
从0到1开始打造一款H5，这是策划、交互 设计、视觉设计以及制作开发相互配合的综合过 程。本章对H5设计与制作的项目流程、常用软 件、基本规范、注意事项以及创意方法进行系统 讲解。通过对本章的学习，读者可以对H5的整 体设计与制作有一个基本的认识，有助于高效便 利地进行后续的H5设计和制作。
2.5.3 H5的常用创意设计风格
H5的常用创意设计风格可以总结为极简冷淡、扁平图形、摄影 图像、拼贴叠加、怀旧复古、现代科技、仿真写实以及手绘插画8种。
2.5.4 H5的动效设计运用
H5的动效设计运用可以通过转场动效、内容动效、功能动效以 及辅助动效这4个方面进行介绍。
2.5.5 H5的音效设计方法
H5音效设计可以分为背景音效以及辅助音效。 1. 背景音效 H5常见的背景音效有3类，分别是功能音效、拟声音效以及环境 音效。 2. 辅助音效 H5常见的辅助音效有3类，分别是功能音效、拟声音效以及环境 音效。
2.5.6 H5的常用测试方法
在H5正式上线之前，都会进行几次测试以收获反馈及效果。常 用的测试方法微信有小范围测试以及微信公众号测试。
2.5 H5的创意实现
H5的常用策划方法 H5的常用交互方法 H5的创意设计风格 H5的动效设计运用 H5的音效设计方法 H5的常用测试方法 H5的常规数据分析
2.5 H5的创意实现
H5的创意实现可以从内容策划、交互交互、视觉设计、动效设 计、音效设计、测试方法以及数据分析这7个方面进行寻找。
百分比。对于需要进行跳转外部链接的H5，用户转化率是非常 重要的数据。
1. 微信小范围测试 微信小范围测试是指将H5通过单独发送好友，转发朋友圈以及 发送至微信群进行的测试。 2. 微信公众号测试 微信公众号测试是指如果我们有自己的公众号，可以将做的H5 以链接或二维码的形式编辑到微信图文中进行的测试。同时可以在图 文中将常见的引导问题以选择题的形式出现，提升用户反馈的参与度。
从0到1开始打造一款H5，这是策划、交互 设计、视觉设计以及制作开发相互配合的综合过 程。本章对H5设计与制作的项目流程、常用软 件、基本规范、注意事项以及创意方法进行系统 讲解。通过对本章的学习，读者可以对H5的整 体设计与制作有一个基本的认识，有助于高效便 利地进行后续的H5设计和制作。
2.5.3 H5的常用创意设计风格
H5的常用创意设计风格可以总结为极简冷淡、扁平图形、摄影 图像、拼贴叠加、怀旧复古、现代科技、仿真写实以及手绘插画8种。
2.5.4 H5的动效设计运用
H5的动效设计运用可以通过转场动效、内容动效、功能动效以 及辅助动效这4个方面进行介绍。
2.5.5 H5的音效设计方法
H5音效设计可以分为背景音效以及辅助音效。 1. 背景音效 H5常见的背景音效有3类，分别是功能音效、拟声音效以及环境 音效。 2. 辅助音效 H5常见的辅助音效有3类，分别是功能音效、拟声音效以及环境 音效。
2.5.6 H5的常用测试方法
在H5正式上线之前，都会进行几次测试以收获反馈及效果。常 用的测试方法微信有小范围测试以及微信公众号测试。
2.5 H5的创意实现
H5的常用策划方法 H5的常用交互方法 H5的创意设计风格 H5的动效设计运用 H5的音效设计方法 H5的常用测试方法 H5的常规数据分析
2.5 H5的创意实现
H5的创意实现可以从内容策划、交互交互、视觉设计、动效设 计、音效设计、测试方法以及数据分析这7个方面进行寻找。
百分比。对于需要进行跳转外部链接的H5，用户转化率是非常 重要的数据。
1. 微信小范围测试 微信小范围测试是指将H5通过单独发送好友，转发朋友圈以及 发送至微信群进行的测试。 2. 微信公众号测试 微信公众号测试是指如果我们有自己的公众号，可以将做的H5 以链接或二维码的形式编辑到微信图文中进行的测试。同时可以在图 文中将常见的引导问题以选择题的形式出现，提升用户反馈的参与度。
(完整版)H5培训PPT
4
合理运用技术，打造流畅的互动体验
淘宝《双12》活动专题H5页面
在浏览过程中我只使用了一种向上滑动的手势，而页面呈现出来的效果却犹如一个流畅的动 态GIF
结语
随着手机硬件的升级、HTML5技术的发展以及微信 平台的开放，HTML5的跨平台、低成本、快迭代等 优势被进一步凸显，这对身处于移动互联网大潮的 企业主、品牌、设计师和开发者来说，都将是一个 最好的时代。
从功能与设计目标来看， H5专题页主要有以下4大类型
1
活动营型
2
品牌宣传型
4
总结报告型
3
产品介绍型
1
活动运营型
大众点评为电影《狂怒》设计的推广页
以选择为主旋律，复古风格，层层推出大众点评网上购票，网上选座位的最终营销目的。
2
品牌宣传型
《首草先生的情书》
以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草——滋阴圣 品，爱妻首选”的宣传语。
3
产品介绍型
LEXUS NX 产品H5页面
体验和操控性极佳，页面设计科技感十足
4
总结报告型
京东的十大任性
扁平化风格，纸面质感复古卡片，最后有小刘的小彩蛋做压轴
形式为功能服务
在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。 列举几种常见的H5专题页表现形式：
1
简单图文
嘀嘀打车
为设计加分的4个要点
1
细节与统一
大众点评《一步之遥》H5推广
从二维码入口到性感的loading页，再到最后分享提示的设计，包括文案措辞和背景音效， 无不与整体的戏虐风保持一致，给到用户一个完整统一的互动体验。
尤其关注“分享提示”这个细节设计
《H5页面设计与制作》课件10
学习目标
了解文化传媒行业活动推广H5的项目策划 掌握文化传媒行业活动推广H5的交互设计
10.1 课堂案例——旅游出行行业活动推广H5制作
项目策划 交互设计 视觉设计 制作发布
10.1.1 项目策划
旅行社在春节推出了新加坡七日游旅行套餐，现在想策划一款 H5来推广该旅行套餐。在内容上，首先模拟锁屏界面，界面上提示 收到微信消息，点击消息解锁进入模拟的微信聊天界面，亲戚分享旅 行心情并让我浏览其朋友圈，接着场景转换到模拟的朋友圈界面，开 始浏览别人分享的各处景观。最后的页面，点击按钮可以跳转到新加 坡七日游的链接了解活动。针对视觉，模拟了锁屏、微信聊天和朋友 圈界面，加强了代入感。针对制作，微信聊天以及朋友圈观看会以视 频的形式展现，同时浏览朋友圈的视频中也嵌入了很多小视频，使整 个H5非常生动。
10.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
10.1.3 视觉设计
使用谷歌浏览器登录iH5官网，使用iH5制作旅游出行行业产品 介绍H5，使用Photoshop软件制作页面的视觉设计，使用iH5的动 效、事件、横幅制作最终效果。
10.1.4 制作发布
效果图10.2 课堂练习——化传媒行业活动推广H5制作使用谷歌浏览器登录iH5官网，使用iH5制作文化传媒行业活动 推广H5，使用Photoshop软件制作页面的视觉效果，使用iH5的动 效、事件、横幅功能制作最终效果。
效果图
10.3 课后习题——电子数码行业品牌推广H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作电子数码行业品牌 推广H5，使用Photoshop软件制作页面的视觉设计，使用iH5的动 效、事件、横幅功能制作最终效果。
《H5页面设计与制作》课件6
策划 交互设计 视觉设计 制作发布
6.1.1 项目策划
Art Design是一家成立了近20年的专业型广告设计公司，此次 想通过H5进行企业人才招聘。在内容上，我们的内容分为了首页、 关于我们、工作环境、福利待遇、招聘岗位、招聘流程以及岗位需求。 在视觉上，运用图文结合以及高级灰体现公司的沉稳大气。在制作上， 摒弃复杂的表现效果，采用简单翻页让用户的注意力集中在招聘内容 上。
6.1.4 制作发布
效果图
6.2 课堂练习——汽车工业行业活动邀请H5制作
使用谷歌浏览器登录iH5官网，使用Photoshop软件制作页面的 视觉设计，使用iH5的动效和翻页功能制作最终效果。
效果图
6.3 课后习题——教育咨询行业培训招生H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作教育咨 询行业培训招生H5，使用Photoshop软件制作首各个页面的视觉设 计，使用凡科微传单的翻页和趣味中的快闪功能制作最终效果。
滑动翻页H5制作
滑动翻页H5是最常见的一类H5，是最被广 大用户接受的互动方式。本章从实战角度对滑动 翻页H5的项目策划、交互设计、视觉设计以及 制作开发进行系统讲解与演练。通过对本章的学 习，读者可以对滑动翻页H5有一个基本的认识， 并快速掌握设计制作常用滑动翻页H5的方法。
学习目标
了解文化传媒行业企业招聘H5的项目策划 掌握文化传媒行业企业招聘H5的交互设计
效果图
6.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
6.1.3 视觉设计
使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作文化传 媒行业企业招聘H5，使用Photoshop软件制作首页、关于我们、工 作环境、福利待遇、招聘岗位、招聘流程和岗位申请等页面的视觉效 果，使用凡科微传单动画功能制作H5页面动画。
6.1.1 项目策划
Art Design是一家成立了近20年的专业型广告设计公司，此次 想通过H5进行企业人才招聘。在内容上，我们的内容分为了首页、 关于我们、工作环境、福利待遇、招聘岗位、招聘流程以及岗位需求。 在视觉上，运用图文结合以及高级灰体现公司的沉稳大气。在制作上， 摒弃复杂的表现效果，采用简单翻页让用户的注意力集中在招聘内容 上。
6.1.4 制作发布
效果图
6.2 课堂练习——汽车工业行业活动邀请H5制作
使用谷歌浏览器登录iH5官网，使用Photoshop软件制作页面的 视觉设计，使用iH5的动效和翻页功能制作最终效果。
效果图
6.3 课后习题——教育咨询行业培训招生H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作教育咨 询行业培训招生H5，使用Photoshop软件制作首各个页面的视觉设 计，使用凡科微传单的翻页和趣味中的快闪功能制作最终效果。
滑动翻页H5制作
滑动翻页H5是最常见的一类H5，是最被广 大用户接受的互动方式。本章从实战角度对滑动 翻页H5的项目策划、交互设计、视觉设计以及 制作开发进行系统讲解与演练。通过对本章的学 习，读者可以对滑动翻页H5有一个基本的认识， 并快速掌握设计制作常用滑动翻页H5的方法。
学习目标
了解文化传媒行业企业招聘H5的项目策划 掌握文化传媒行业企业招聘H5的交互设计
效果图
6.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
6.1.3 视觉设计
使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作文化传 媒行业企业招聘H5，使用Photoshop软件制作首页、关于我们、工 作环境、福利待遇、招聘岗位、招聘流程和岗位申请等页面的视觉效 果，使用凡科微传单动画功能制作H5页面动画。
微信H5张面制作简易教程培训课件ppt(34张)
点击“视频”后，给场景添加网络视频
点击“什么是视频通用代码”，出现详细操作
微信H5页面制作简易教程培训课件(pp t34页)
微信H5页面制作简易教程培训课件(pp t34页)
点击“图片”后，选择“图片库”中的图片素材 或点击“上传”上传图片到“我的图片”库
微信H5页面制作简易教程培训课件(pp t34页)
微信H5页面制作简易教程培训课件(pp t34页)
微信上一个特殊的效果。 点击“特效”即可为当前页面选择合适的特效
微信H5页面制作简易教程培训课件(pp t34页)
微信H5页面制作简易教程培训课件(pp t34页)
很重要 特别重要
2.第三方登录： 无需注册，直接点击图标，
使用微信或者QQ进行登录。
创建场景
点击右上角 创建场景
【套模板】选择一个模板，把模板中需要修改的地方修改即可快捷制作。 【自主创建】点击“+”进入自主创建，一页一页创建场景。
场景名称
填写名称 后期可改
填写完毕 点击创建
点击选择 为了自 己管理 方便
制作页面
图片：
提前备好，视觉效果好
文字：
准备充分，具有感染力
免费注册易企秀账号
进入官网后点击右上角“注册”
1.邮箱注册： 输入邮箱和密码，点击
“注册”即可。
2.第三方登录： 无需注册，直接点击图标，
使用微信或者QQ进行登录。
登录易企秀账号
点击官网右上角“登录”
1.邮箱登录： 输入邮箱和密码，点击
“登录”即可。
页面模板
在易企秀制作页面的左侧栏， 易企秀官方为大家提供了分 门别类的“页面模板”，在 制作场景的过程中，可以参 考或者直接套用页面模板进 行场景创建。 自己制作的页面，也可以保 存为“我的”模板，以供下 次使用。 企业账号将自己的场景设置 为“企业页面模板”，子账 号可以直接使用。
点击“什么是视频通用代码”，出现详细操作
微信H5页面制作简易教程培训课件(pp t34页)
微信H5页面制作简易教程培训课件(pp t34页)
点击“图片”后，选择“图片库”中的图片素材 或点击“上传”上传图片到“我的图片”库
微信H5页面制作简易教程培训课件(pp t34页)
微信H5页面制作简易教程培训课件(pp t34页)
微信上一个特殊的效果。 点击“特效”即可为当前页面选择合适的特效
微信H5页面制作简易教程培训课件(pp t34页)
微信H5页面制作简易教程培训课件(pp t34页)
很重要 特别重要
2.第三方登录： 无需注册，直接点击图标，
使用微信或者QQ进行登录。
创建场景
点击右上角 创建场景
【套模板】选择一个模板，把模板中需要修改的地方修改即可快捷制作。 【自主创建】点击“+”进入自主创建，一页一页创建场景。
场景名称
填写名称 后期可改
填写完毕 点击创建
点击选择 为了自 己管理 方便
制作页面
图片：
提前备好，视觉效果好
文字：
准备充分，具有感染力
免费注册易企秀账号
进入官网后点击右上角“注册”
1.邮箱注册： 输入邮箱和密码，点击
“注册”即可。
2.第三方登录： 无需注册，直接点击图标，
使用微信或者QQ进行登录。
登录易企秀账号
点击官网右上角“登录”
1.邮箱登录： 输入邮箱和密码，点击
“登录”即可。
页面模板
在易企秀制作页面的左侧栏， 易企秀官方为大家提供了分 门别类的“页面模板”，在 制作场景的过程中，可以参 考或者直接套用页面模板进 行场景创建。 自己制作的页面，也可以保 存为“我的”模板，以供下 次使用。 企业账号将自己的场景设置 为“企业页面模板”，子账 号可以直接使用。
微信制作培训课件PPT(共 40张)
2016 微信制作
“扬帆团校”
团委新媒体中心 葛瑞卿 2016年10月13日
目录
Part 1 Part 2 Part 3 Part 4
图文排版 H5动画制作 微信平台操作
操作展示
图文排版
Part 1
一、打开秀米图文排版2.0“秀米”点击二、用QQ或者微博账号登录，添加新的2.0图文 点击
通过预览按钮， 获得链接
微信推送
上传并插入视频、音频、音乐 注：上传音频文件不超过30M,时长不超过30分钟
视频大于20M，需要通过腾讯视频上传，经审核通过
微信推送
内容全部添加完毕之后，开始进行预览。页 有保存、预览、保存并群发，三个按键。选 点击。
点击
输入微信号、QQ号、或者手机号， 点击确定，预览发出
•
4、如果你不相信努力和时光，那么时光第一个就会辜负你。不要去否定你的过去，也不要用你的过去牵扯你的未来。不是因为有希望才去努力，而是努力了，才能看到希望。
•
5、人生每天都要笑，生活的下一秒发生什么，我们谁也不知道。所以，放下心里的纠结，放下脑中的烦恼，放下生活的不愉快，活在当下。人生喜怒哀乐，百般形态，不如在心里全部淡然处之，轻轻一笑，让心更自在，生命更恒久。积极者相信只有推动自己才能推动世界，只要推动自己就能推动世界。
•
13、认识到我们的所见所闻都是假象，认识到此生都是虚幻，我们才能真正认识到佛法的真相。钱多了会压死你，你承受得了吗?带，带不走，放，放不下。时时刻刻发梦想总是跑在我的前面。努力追寻它们，为了那一瞬间的同步，这就是动人的生命奇迹。
•
15、懒惰不会让你一下子跌倒，但会在不知不觉中减少你的收获;勤奋也不会让你一夜成功，但会在不知不觉中积累你的成果。人生需要挑战，更需要坚持和勤奋!
“扬帆团校”
团委新媒体中心 葛瑞卿 2016年10月13日
目录
Part 1 Part 2 Part 3 Part 4
图文排版 H5动画制作 微信平台操作
操作展示
图文排版
Part 1
一、打开秀米图文排版2.0“秀米”点击二、用QQ或者微博账号登录，添加新的2.0图文 点击
通过预览按钮， 获得链接
微信推送
上传并插入视频、音频、音乐 注：上传音频文件不超过30M,时长不超过30分钟
视频大于20M，需要通过腾讯视频上传，经审核通过
微信推送
内容全部添加完毕之后，开始进行预览。页 有保存、预览、保存并群发，三个按键。选 点击。
点击
输入微信号、QQ号、或者手机号， 点击确定，预览发出
•
4、如果你不相信努力和时光，那么时光第一个就会辜负你。不要去否定你的过去，也不要用你的过去牵扯你的未来。不是因为有希望才去努力，而是努力了，才能看到希望。
•
5、人生每天都要笑，生活的下一秒发生什么，我们谁也不知道。所以，放下心里的纠结，放下脑中的烦恼，放下生活的不愉快，活在当下。人生喜怒哀乐，百般形态，不如在心里全部淡然处之，轻轻一笑，让心更自在，生命更恒久。积极者相信只有推动自己才能推动世界，只要推动自己就能推动世界。
•
13、认识到我们的所见所闻都是假象，认识到此生都是虚幻，我们才能真正认识到佛法的真相。钱多了会压死你，你承受得了吗?带，带不走，放，放不下。时时刻刻发梦想总是跑在我的前面。努力追寻它们，为了那一瞬间的同步，这就是动人的生命奇迹。
•
15、懒惰不会让你一下子跌倒，但会在不知不觉中减少你的收获;勤奋也不会让你一夜成功，但会在不知不觉中积累你的成果。人生需要挑战，更需要坚持和勤奋!
微信H5页面制作简易教程 共35页PPT资料共37页PPT
微信H5页面制作简易教程 共35页 PPT资料
46、法律有权打破平静。——马·格林 47、在一千磅法律里，没有一盎司仁 爱。— —英国
48、法律一多，公正就少。——托·富 勒 49、犯罪总是以惩罚相补偿；只有处 罚才能 使犯罪 得到偿 还。— —达雷 尔
50、弱者比强者更能得到法律的保护 。—— 威·厄尔
61、奢侈是舒适的，否则就不是奢侈 。——CocoCha nel 62、少而好学，如日出之阳；壮而好学 ，如日 中之光 ；志而 好学， 如炳烛 之光。 ——刘 向 63、三军可夺帅也，匹夫不可夺志也。 ——孔 丘 64、人生就是学校。在那里，与其说好 的教师 是幸福 ，不如 说好的 教师是 不幸。 ——海 贝尔 65、接受挑战，就可以享受胜利的喜悦 。——
46、法律有权打破平静。——马·格林 47、在一千磅法律里，没有一盎司仁 爱。— —英国
48、法律一多，公正就少。——托·富 勒 49、犯罪总是以惩罚相补偿；只有处 罚才能 使犯罪 得到偿 还。— —达雷 尔
50、弱者比强者更能得到法律的保护 。—— 威·厄尔
61、奢侈是舒适的，否则就不是奢侈 。——CocoCha nel 62、少而好学，如日出之阳；壮而好学 ，如日 中之光 ；志而 好学， 如炳烛 之光。 ——刘 向 63、三军可夺帅也，匹夫不可夺志也。 ——孔 丘 64、人生就是学校。在那里，与其说好 的教师 是幸福 ，不如 说好的 教师是 不幸。 ——海 贝尔 65、接受挑战，就可以享受胜利的喜悦 。——
H5培训PPT幻灯片课件
39
I want you to join H5!
40
最后，分享一个能够动态展示H5的网站
/
41
17
1
简单图文
18
嘀嘀打车
用几张照片故事串起了整套页面。视觉简洁有力，采用整屏黑白照片，点缀以滴滴的品牌橙 色。
19
从此看尽中国人的名与利
每个页面都是一张人民币风景局部放大图，创作者加入巧妙的创意元素与微动态进行细腻刻 画，带观众走进了人民币的微观世界。
20
2
礼物/贺卡/邀请函
21
AKQA营销公司的梦幻水晶球
6
从功能与设计目标来看， H5专题页主要有以下4大类型
1
活动运营型
2
品牌宣传型
4
总结报告型
3
产品介绍型
7
1
活动运营型
8
大众点评为电影《狂怒》设计的推广页
以选择为主旋律，复古风格，层层推出大众点评网上购票，网上选座位的最终营销目的。
9
2
品牌宣传型
10
《首草先生的情书》
以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草——滋阴圣 品，爱妻首选”的宣传语。
在浏览过程中我只使用了一种向上滑动的手势，而页面呈现出来的效果却犹如一级、HTML5技术的发展以及微信 平台的开放，HTML5的跨平台、低成本、快迭代等 优势被进一步凸显，这对身处于移动互联网大潮的 企业主、品牌、设计师和开发者来说，都将是一个 最好的时代。
从二维码入口到性感的loading页，再到最后分享提示的设计，包括文案措辞和背景音效， 无不与整体的戏虐风保持一致，给到用户一个完整统一的互动体验。
30
尤其关注“分享提示”这个细节设计
I want you to join H5!
40
最后，分享一个能够动态展示H5的网站
/
41
17
1
简单图文
18
嘀嘀打车
用几张照片故事串起了整套页面。视觉简洁有力，采用整屏黑白照片，点缀以滴滴的品牌橙 色。
19
从此看尽中国人的名与利
每个页面都是一张人民币风景局部放大图，创作者加入巧妙的创意元素与微动态进行细腻刻 画，带观众走进了人民币的微观世界。
20
2
礼物/贺卡/邀请函
21
AKQA营销公司的梦幻水晶球
6
从功能与设计目标来看， H5专题页主要有以下4大类型
1
活动运营型
2
品牌宣传型
4
总结报告型
3
产品介绍型
7
1
活动运营型
8
大众点评为电影《狂怒》设计的推广页
以选择为主旋律，复古风格，层层推出大众点评网上购票，网上选座位的最终营销目的。
9
2
品牌宣传型
10
《首草先生的情书》
以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草——滋阴圣 品，爱妻首选”的宣传语。
在浏览过程中我只使用了一种向上滑动的手势，而页面呈现出来的效果却犹如一级、HTML5技术的发展以及微信 平台的开放，HTML5的跨平台、低成本、快迭代等 优势被进一步凸显，这对身处于移动互联网大潮的 企业主、品牌、设计师和开发者来说，都将是一个 最好的时代。
从二维码入口到性感的loading页，再到最后分享提示的设计，包括文案措辞和背景音效， 无不与整体的戏虐风保持一致，给到用户一个完整统一的互动体验。
30
尤其关注“分享提示”这个细节设计
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
“形状”是便于用户制作扁 平化页面的素材， 形状素材和文字一样可以做 “颜色、大小”等设置。
图集：是几张图片的集合 主要设置：图片比例、切换方式
“互动”是方便制作者与观看者互动的组件 互动组件目前主要是“一键拨号”，正在不断增加
表单（也叫信息收集表、报名表、信息反馈表等）是 场景创建者用来收集查看场景的用户反馈信息的重要 工具。可点击“表单”创建也可直接在互动模板里直 接快捷创建。
【设置动画】
动画设置主要应用于：文字、图片、图形、一键拨号、输入框等组件 设置方法：点击组件→选择“动画”→进入动画设置页面
制作小提示
• 点击预览图标，即可对此页面的 动画设置进行整体预览。
设置是对场景的基 本信息进行设置， 主要包括：场景封 面、场景名称、场 景描述、翻页方式。
点击“场景共享” 和“友情展示”下 拉键，可参加易企 秀官方活动和尾页 设置。
页面模板
在易企秀制作页面的左侧栏， 易企秀官方为大家提供了分 门别类的“页面模板”，在 制作场景的过程中，可以参 考或者直接套用页面模板进 行场景创建。 自己制作的页面，也可以保 存为“我的”模板，以供下 次使用。 企业账号将自己的场景设置 为“企业页面模板”，子账 号可以直接使用。
右侧的“页面管理”
下载更大的场景二维码 （在“我的推广”里找到二维码，如下图）
“我的场景”管理
• 点击“我的场景”可看到自己创 建的所有场景列表。
• 点击单个场景右下角的齿轮，即 可对此场景进行“设置、编辑、 复制、转送和删除”操作。
• 点击“开放”/“关闭”，对场 景进行开放和关闭。
在微信里分享场景
微信扫一扫场 景二维码→打 开场景→点击 右上角菜单→ 选择分享方式
•
18、在人生的舞台上，当有人愿意在台下陪你度过无数个没有未来的夜时，你就更想展现精彩绝伦的自己。但愿每个被努力支撑的灵魂能吸引更多的人同行。
•
19、积极的人在每一次忧患中都看到一个机会，而消极的人则在每个机会中看到了某种忧患。莫找借口失败，只找理由成功。
点击“音乐”即可创建【背景音乐】
1.【音乐库】为官方提供的音乐素材 2.【外部链接】插入网络音乐链接 3.【我的音乐】自主上传音乐
点击“视频”后，给场景添加网络视频 点击“什么是视频通用代码”，出现详细操作
点击“图片”后，选择“图片库”中的图片素材 或点击“上传”上传图片到“我的图片”库
点击“形状”后，选择“形状组件” 库中选择形状组件
5大管理操作
1.复制：点中条框，点击“复制” 2.我的模板 ：点中条框，点击“我的
复制”，出现在左侧“页面模板”中， 可删除
• 删除：点中条框，点击“删除” 1.移动：点中条框，可上下拖动 2.添加：点击“+”，添加一页
10个基本组件+设置+发布
组件是构成场景的基本要素
1.文本 2.背景 3.音乐 4.视频 5.图片 6.形状 7.图集 8.互动 9.表单 10.特效
特效组件是给某一个页面加上一个特殊的效果。 点击“特效”即可为当前页面选择合适的特效
很重要 特别重要
“保存”只是对操作进行保存，如果不点击 “发布”此场景未发布的编辑内容，在场景 分享出去时，别人看不到最新编辑的内容。 点击“退出”则推出编辑页面。
点击发布后，可获得场景二维码、场景连接和 更多的一键分享方式。
制作小窍门
资料准备全，图片要清楚 文字要简洁，重点更突出 制作很简单，就看熟练度 场景有创意，谁也挡不住
分享经验 共同成长
•
11、人生的某些障碍，你是逃不掉的。与其费尽周折绕过去，不如勇敢地攀登，或许这会铸就你人生的高点。
•
12、有些压力总是得自己扛过去，说出来就成了充满负能量的抱怨。寻求安慰也无济于事，还徒增了别人的烦恼。
•
16、人生在世：可以缺钱，但不能缺德;可以失言，但不能失信;可以倒下，但不能跪下;可以求名，但不能盗名;可以低落，但不能堕落;可以放松，但不能放纵;可以虚荣，但不能虚伪;可以平凡，但不能平庸;可以浪漫，但不能浪荡;可以生气，但不能生事。
•
17、人生没有笔直路，当你感到迷茫、失落时，找几部这种充满正能量的电影，坐下来静静欣赏，去发现生命中真正重要的东西。
图片：
提前备好，视觉效果好
文字：
准备充分，具有感染力
免费注册易企秀账号
进入官网后点击右上角“注册”
1.邮箱注册： 输入邮箱和密码，点击
“注册”即可。
2.第三方登录： 无需注册，直接点击图标，
使用微信或者QQ进行登录。
登录易企秀账号
点击官网右上角“登录”
1.邮箱登录： 输入邮箱和密码，点击
“登录”即可。
H5页面微场景制作 入门教程
入门了，一切都变得很简单！
制作小提示
• 制作H5场景推荐使用谷歌浏览器 • 也可在手机上下载制作工具客户端，在手机上进行制作
H5场景制作与运用流程
1
资料 准备
2场景 Biblioteka 作3发布 宣传4
信息 收集
制作前，准备好4个资料
创意：
展示什么，用什么方式
音乐：
烘托氛围，MP3格式
•
13、认识到我们的所见所闻都是假象，认识到此生都是虚幻，我们才能真正认识到佛法的真相。钱多了会压死你，你承受得了吗?带，带不走，放，放不下。时时刻刻发悲心，饶益众生为他人。
•
14、梦想总是跑在我的前面。努力追寻它们，为了那一瞬间的同步，这就是动人的生命奇迹。
•
15、懒惰不会让你一下子跌倒，但会在不知不觉中减少你的收获;勤奋也不会让你一夜成功，但会在不知不觉中积累你的成果。人生需要挑战，更需要坚持和勤奋!
1.点击“文本”后 →即可创建 2.单击文本框 →出现编辑菜单 3.双击文本框 →进入基础编辑
点击“背景”后，选择“背景库”中的背景图 也可点击“上传”上传图片到“我的背景”库
背景编辑
→背景创建后，点击编辑栏上的背景齿轮，即可对背景 进行编辑。 →背景编辑主要包括：剪切、更换、效果（放大、缩 小）、删除。
2.第三方登录： 无需注册，直接点击图标，
使用微信或者QQ进行登录。
创建场景
点击右上角 创建场景
【套模板】选择一个模板，把模板中需要修改的地方修改即可快捷制作。 【自主创建】点击“+”进入自主创建，一页一页创建场景。
场景名称
填写名称 后期可改
填写完毕 点击创建
点击选择 为了自 己管理 方便
制作页面
图集：是几张图片的集合 主要设置：图片比例、切换方式
“互动”是方便制作者与观看者互动的组件 互动组件目前主要是“一键拨号”，正在不断增加
表单（也叫信息收集表、报名表、信息反馈表等）是 场景创建者用来收集查看场景的用户反馈信息的重要 工具。可点击“表单”创建也可直接在互动模板里直 接快捷创建。
【设置动画】
动画设置主要应用于：文字、图片、图形、一键拨号、输入框等组件 设置方法：点击组件→选择“动画”→进入动画设置页面
制作小提示
• 点击预览图标，即可对此页面的 动画设置进行整体预览。
设置是对场景的基 本信息进行设置， 主要包括：场景封 面、场景名称、场 景描述、翻页方式。
点击“场景共享” 和“友情展示”下 拉键，可参加易企 秀官方活动和尾页 设置。
页面模板
在易企秀制作页面的左侧栏， 易企秀官方为大家提供了分 门别类的“页面模板”，在 制作场景的过程中，可以参 考或者直接套用页面模板进 行场景创建。 自己制作的页面，也可以保 存为“我的”模板，以供下 次使用。 企业账号将自己的场景设置 为“企业页面模板”，子账 号可以直接使用。
右侧的“页面管理”
下载更大的场景二维码 （在“我的推广”里找到二维码，如下图）
“我的场景”管理
• 点击“我的场景”可看到自己创 建的所有场景列表。
• 点击单个场景右下角的齿轮，即 可对此场景进行“设置、编辑、 复制、转送和删除”操作。
• 点击“开放”/“关闭”，对场 景进行开放和关闭。
在微信里分享场景
微信扫一扫场 景二维码→打 开场景→点击 右上角菜单→ 选择分享方式
•
18、在人生的舞台上，当有人愿意在台下陪你度过无数个没有未来的夜时，你就更想展现精彩绝伦的自己。但愿每个被努力支撑的灵魂能吸引更多的人同行。
•
19、积极的人在每一次忧患中都看到一个机会，而消极的人则在每个机会中看到了某种忧患。莫找借口失败，只找理由成功。
点击“音乐”即可创建【背景音乐】
1.【音乐库】为官方提供的音乐素材 2.【外部链接】插入网络音乐链接 3.【我的音乐】自主上传音乐
点击“视频”后，给场景添加网络视频 点击“什么是视频通用代码”，出现详细操作
点击“图片”后，选择“图片库”中的图片素材 或点击“上传”上传图片到“我的图片”库
点击“形状”后，选择“形状组件” 库中选择形状组件
5大管理操作
1.复制：点中条框，点击“复制” 2.我的模板 ：点中条框，点击“我的
复制”，出现在左侧“页面模板”中， 可删除
• 删除：点中条框，点击“删除” 1.移动：点中条框，可上下拖动 2.添加：点击“+”，添加一页
10个基本组件+设置+发布
组件是构成场景的基本要素
1.文本 2.背景 3.音乐 4.视频 5.图片 6.形状 7.图集 8.互动 9.表单 10.特效
特效组件是给某一个页面加上一个特殊的效果。 点击“特效”即可为当前页面选择合适的特效
很重要 特别重要
“保存”只是对操作进行保存，如果不点击 “发布”此场景未发布的编辑内容，在场景 分享出去时，别人看不到最新编辑的内容。 点击“退出”则推出编辑页面。
点击发布后，可获得场景二维码、场景连接和 更多的一键分享方式。
制作小窍门
资料准备全，图片要清楚 文字要简洁，重点更突出 制作很简单，就看熟练度 场景有创意，谁也挡不住
分享经验 共同成长
•
11、人生的某些障碍，你是逃不掉的。与其费尽周折绕过去，不如勇敢地攀登，或许这会铸就你人生的高点。
•
12、有些压力总是得自己扛过去，说出来就成了充满负能量的抱怨。寻求安慰也无济于事，还徒增了别人的烦恼。
•
16、人生在世：可以缺钱，但不能缺德;可以失言，但不能失信;可以倒下，但不能跪下;可以求名，但不能盗名;可以低落，但不能堕落;可以放松，但不能放纵;可以虚荣，但不能虚伪;可以平凡，但不能平庸;可以浪漫，但不能浪荡;可以生气，但不能生事。
•
17、人生没有笔直路，当你感到迷茫、失落时，找几部这种充满正能量的电影，坐下来静静欣赏，去发现生命中真正重要的东西。
图片：
提前备好，视觉效果好
文字：
准备充分，具有感染力
免费注册易企秀账号
进入官网后点击右上角“注册”
1.邮箱注册： 输入邮箱和密码，点击
“注册”即可。
2.第三方登录： 无需注册，直接点击图标，
使用微信或者QQ进行登录。
登录易企秀账号
点击官网右上角“登录”
1.邮箱登录： 输入邮箱和密码，点击
“登录”即可。
H5页面微场景制作 入门教程
入门了，一切都变得很简单！
制作小提示
• 制作H5场景推荐使用谷歌浏览器 • 也可在手机上下载制作工具客户端，在手机上进行制作
H5场景制作与运用流程
1
资料 准备
2场景 Biblioteka 作3发布 宣传4
信息 收集
制作前，准备好4个资料
创意：
展示什么，用什么方式
音乐：
烘托氛围，MP3格式
•
13、认识到我们的所见所闻都是假象，认识到此生都是虚幻，我们才能真正认识到佛法的真相。钱多了会压死你，你承受得了吗?带，带不走，放，放不下。时时刻刻发悲心，饶益众生为他人。
•
14、梦想总是跑在我的前面。努力追寻它们，为了那一瞬间的同步，这就是动人的生命奇迹。
•
15、懒惰不会让你一下子跌倒，但会在不知不觉中减少你的收获;勤奋也不会让你一夜成功，但会在不知不觉中积累你的成果。人生需要挑战，更需要坚持和勤奋!
1.点击“文本”后 →即可创建 2.单击文本框 →出现编辑菜单 3.双击文本框 →进入基础编辑
点击“背景”后，选择“背景库”中的背景图 也可点击“上传”上传图片到“我的背景”库
背景编辑
→背景创建后，点击编辑栏上的背景齿轮，即可对背景 进行编辑。 →背景编辑主要包括：剪切、更换、效果（放大、缩 小）、删除。
2.第三方登录： 无需注册，直接点击图标，
使用微信或者QQ进行登录。
创建场景
点击右上角 创建场景
【套模板】选择一个模板，把模板中需要修改的地方修改即可快捷制作。 【自主创建】点击“+”进入自主创建，一页一页创建场景。
场景名称
填写名称 后期可改
填写完毕 点击创建
点击选择 为了自 己管理 方便
制作页面