张振远-H5（HTML5）场景设计与制作技术

时间：2023-06-22 02:15:02 | 来源：网站运营

时间：2023-06-22 02:15:02 来源：网站运营

张振远-H5（HTML5）场景设计与制作技术：让文案动起来

——H5（HTML5）场景设计与制作技术




课程背景：

进入21世纪以来，数字办公已然成为当下各企业不可或缺的主流工作方式之一。而H5场景，作为一种易于传播（仅通过二维码即可）、制作简单、效果拔群的数字化办公工具，已经被广泛应用包括但不限于产品营销、活动组织、工作汇报、企业宣传等的各个工作领域当中。

本课程以H5制作技术为轴，以H5场景制作实战为例，通过精心设计的15个课堂练习，边讲边练边示范，力图帮助学员快速掌握H5场景设计的基本要素——模板套用、组件运用、特效制作、平面设计等，最终为企业培养一批能够快速美观制作符合企业工作需求的H5场景的人才。

课程收益：

1. 运用模板快速制作H5场景

2. 熟练使用组件、表单、特效功能优化H5场景

3. 制作有特点的H5动画和触发效果

4. 掌握H5场景平面设计的基本原理

5. 随课程附赠H5场景素材包一份，包括常用背景、图片、图标、音乐、音效等素材

课程时间：1天，6小时/天

授课对象：企业文宣、培训、行政、人力、销售类员工

授课方式：讲师讲授，案例分享，课堂练习，工具应用（默认易企秀作为H5制作平台，如需使用其他平台，如易派/兔展/秀米等，请提前告知）

课程产出：每位学员课程结束均可产出HTML5场景一个（主题任选）



课程大纲

#课程导入#

一、概念先行——走进H5场景

1.H5场景是什么？

案例分析：某品牌宣传H5场景

2. H5场景的四大优势

1）广——应用范围

2）快——传播速度

3）易——制作简便

4）优——客户体验

案例分析：某金融产品营销H5场景

案例分析：某公司年会H5场景

3.常用H5场景编辑器解析

二、夯实基础——H5场景制作核心技术

1. 看懂H5编辑平台

1) 场景与场景模板

2) 网页编辑器与手机APP

3) 画布与快捷功能区

4) 页面管理工具区

5) 组件工具区

6) 模板管理区

7) 设置与发布

课堂练习：我的第一个H5场景

课堂练习：制作H5个性化二维码、海报与长图

2. 快速完成H5制作——模板应用

1）文案模板

2）场景模板

Ø 场景模板的筛选

Ø 场景模板的编辑

3）单页模板

Ø 封面模板应用

Ø 会议流程模板应用

Ø 嘉宾介绍模板应用

Ø 报名模板应用

课堂练习：运用模板，文案变H5

3. H5编辑平台常用功能详解

1）文本应用

Ø 文字应用与元素模板

Ø 超链接制作

课堂练习：制作H5场景导航栏

2）图片应用

Ø 图片素材下载与编辑

Ø 轮播集

Ø 拼图

Ø 背景设置

课堂练习：用H5制作电子相册与照片墙

三、魅力图文——H5场景进阶制作技术

1.基础组件应用详解

1）音乐与背景组件

2）视频组件

3）音效组件

4）计时组件

5）地图与实时位置组件

6）动态数字组件

7) 微信头像组件

8）投票组件

9）拨打电话组件

10) 立体魔方组件

课堂练习：在邀请函中制作导航工具

课堂练习：制作3D企业LOGO

课堂练习：制作带有投票功能的H5场景

课堂练习：制作音画图文并茂的H5场景

2.表单制作详解

1) 表单数据汇总与导出

2) 联系人表单

Ø 输入框与文本类型

Ø 提交按钮

3) 留言板表单

4) 单选与多选表单

5) 高级表单

课堂练习：制作联系人表单并导出数据

课堂练习：单选与多选表单制作

3.特效制作详解

1）砸玻璃特效

2）涂抹特效

3）渐变特效

课堂练习：H5特效制作与练习

4. 动画与触发制作详解

1）单元素多动画的设定顺序

2）幻影动画效果制作

3）电话动画效果制作

4）场景动画效果制作

5）音、画结合与踩点制作

6）触发效果制作详解

课堂练习：‘抓人’动画制作

课堂练习：‘飞龙’动画制作

课堂练习：‘变色’触发效果制作

四、颜值跃升——H5平面设计详解

1.素材收集

1）背景快速搜图技术

2）形状搜索技术

3）音乐搜索技术

4）视频搜索与录制技术

2. H5场景排版分析

1）常规页排版分析

2）横屏页排版分析

3）长页的排版分析

3. H5场景平面设计技术

1) 让你的图片更吸引眼球——调色与模糊

2) 文字的魅力——用PNG做文字

3) 高效特效制作——笔刷图的妙用

4) 更快的区分方式——用图片做分类

5) 立体感爆棚——倒影的设置与应用

五、实战演练——运用H5平台制作产品营销场景

1. 产品营销场景文案制作

1)“三元”H5产品营销场景导入要点介绍

Ø 案例导入法

案例分析：如何选择合适的案例？

课堂训练：选择合适的案例

Ø 背景知识导入法

课堂研讨：什么样的背景知识有说服力？

课堂练习：确定产品背景

Ø 疑问导入法

课堂研讨：什么样的问题能够吸引听众？

2）产品介绍制作要点

Ø 突出核心优势

Ø 展示核心数据

Ø 实用案例要点

翻转课堂：激发购买欲望

2. H5产品营销场景制作实战与辅导

#课程总结与回顾#

#致谢#




张振远老师TTT项目实战专家

香港科技大学 MSC理学硕士

四川大学 工学硕士

杭州领跑讲师俱乐部创始人

《PBTT金讲银师》版权项目联合创始人

中国邮政集团全国“十佳明星培训师”

中国邮政集团公司“十佳卓越课程”

CTA中国培训师大联盟 TTT认证讲师

DISC沟通技术 认证讲师、认证咨询顾问

CICE中国高级寿险管理师

曾任：杭州农商银行总行丨培训管理、高级内训师

曾任：海德建筑装饰工程有限公司丨培训部副总经理

曾任：中邮保险股份有限公司丨区域市场经理

曾任：中邮保险股份有限公司丨培训管理、高级内训师



张振远老师先后就职于中国邮政集团、杭州农商银行总行、海德建筑装饰有限公司等知名企业，历任培训负责人、高级培训讲师、营销区域经理等职务，具有多年的企业培训体系构建、培训管理、培训课程开发与讲授、市场营销策划的相关经验。老师擅长以市场角度把握培训需求与课程方向，运用TTT体验教学手法，以“做中学”为核心进行课程讲授，充分调动学员积极性，达到组织绩效提升的培训效果。目前已先后为多家国内知名银行、保险、企业等单位提供各类各类企业培训、拓展训练、产宣会累计500余场，受训人数超3万人，客户好评率长期维持在97%以上。

★ 曾为中行四川省分行/江西省分行，浦发银行总行/杭州分行，黑龙江铁路局，四川烟草/广东烟草/山东烟草，四川省国家电网/贵州省国家电网，杭州轨道公司、中石油总部/杭州分公司、中石化四川分公司，融创地产，江苏省联社/安徽省联社/浙江省联社、安徽省农业银行/杭州农业银行/四川省农业银行、贵州农发行、中密集团、中钼集团、邮政储蓄银行黑龙江分行/四川分行、杭州农商银行总行等200余家企业构开展了包括授课技巧、课程开发、微课程开发等各类TTT培训课程，授课累计达3000余课时。协助企业开发职业基础类、营销管理类、TTT类、企业文化类等课程累计500余门，培养各级内训师队伍2000余人，各类微课程200余门。

★ 曾负责杭州农商行总行、中国银行四川省分行、中石油杭州分公司、国家电网四川分公司、杭州轨道集团、四川省邮政公司、邮储银行四川省分行的精英管理队伍、后备干部、内训师核心团队的建设工作，全面负责各级内训师队伍的选拔、授课、认证、管理和培养工作，为上述企业培养了500余名的企业骨干力量。

★ 曾为杭州农商银行总行完善培训管理体系，优化E-learning线上课程管理制度，完成新开业分行、新员工、管培生等各类培训项目20余个。



2019~2021重点实战案例分享：

★杭州轨道集团公司丨金牌内训师队伍进阶培养项目（七期）

通过每期3天2夜的课程授课，帮助杭州轨道完场200余名内训师的进阶培养工作，并通过后续辅导输出企业内训课程180余门。并负责选拔辅导优秀学员参与2020全国轨道内训师技能大赛，获全国个人第一名，团队第一名两项大奖。

★湖北/广东/山东/四川中烟公司丨金牌内训师比赛辅导（六期）

通过每期3天的集训与辅导，帮助上述省份中烟公司培训了100余名优秀内训师，选拔了60余名优秀参赛选手、设计参赛内训课程，制作课程课件参与全省中烟金牌内训师辅导项目，最终选拔并培养的内训师获得全省比赛一等奖4人，2等奖15人，3等奖22人。

★中石油总公司/杭州分公司/青海油田/蜀南气矿丨内训师队伍建设项目（六期）

通过两期，每期4天的授课辅导，帮助中石油300余名内训师实现从经验研发、课程研发、课程呈现、微课制作四个方面全面优化提升，实现从1到10的进阶突破。

★杭州双流机场公司丨内训课程开发项目（四期）

通过每期2-3天的培训辅导，帮助双流机场集团、地勤公司、空港酒店等员工200余人萃取开发内训课程、微课程100余门，并为每门课程优化产出了课程大纲与教案，帮助企业实现了内训课程的研发、迭代、优化升级工作

★杭州市排水集团有限公司丨课程制作效能提升项目（两期）

通过两期4天课程开发与课程呈现项目的辅导，帮助企业优化核心产品内训课程80余门，并辅导企业开展课程呈现于表达的提升训练。

★中国银行四川省分行丨金牌内训师PK赛项目

担任赛前集训辅导授课讲师以及初赛、决赛的比赛主评委，为企业制订赛前辅导内容及评比标准，通过赛前对授课技巧和演讲台风的集训式辅导，为企业培养了37名省级优秀内训师，并通过比赛选拔了8名中国银行省级金牌讲师，受到了中国银行培训中心与参训学员的一致好评。

★中国银行江西省分行丨案例撰写与案例教学比赛项目

担任项目主讲老师及主评委，通过3天经验萃取、案例编撰与案例教学的讲解，帮助企业萃取核心技能经验50余种，完成省级案例编写40余个，并通过比赛，选拔了12个全省金融业优秀示范案例。

★安徽/四川/杭州/杭州农业银行丨零售/小微产品课程研发项目（五期）

通过企业需求调研， 为企业专属制定了课程主题与培训课程。内容涵盖由产品营销技能、课程开发技能、课程开发实操三个部分，围绕产品导入结构、产品介绍要点、课程结尾技术、零售产品营销课程组织与开展等四大版块对学员进行了讲授和强化训练。项目共输出企业可立即应用于零售环节的精品课程6门（每门课程约2小时）。

★安徽/江苏/浙江/四川省联社丨省级内训师微课比赛项目（六期）

根据联社需求，为企业确定了微课比赛主题、微课评比规则、微课制作模式等内容。通过每期4天3晚的集中培训，为参赛学员带来了微课程简介，微课程设计流程详解，微课程制作技术等落地内容，并手把手帮助学员完成微课程从无到有的设计工作，为企业现场产出业务相关微课86门，累计时间超过1000分钟。

★四川/贵州省国家电网丨雏鹰后备干部课程开发项目（三期）

通过企业需求调研，为企业开展了三期7天的后备干部课程研发培训计划与认证考核标准。通过《五阶课程开发详解》课程定制版的培训，项目共产出16门精品课程（每门课程时间约4小时），帮助企业实现了后备干部综合素质提升与岗位经验萃取的工作。

★杭州市联通分公司丨三级内训师认证项目

与企业沟通对接后，为企业制定了三级内训师认证方案与认证标准，通过集中培训，对台风演绎、课程研发、微课程设计等内容进行了详细讲解，最终项目帮助企业完成40余名三级内训师的培训与认证工作。

★四川/黑龙江/湖北省邮政储蓄银行丨内训师课程开发竞赛项目（四期）

从企业市场需求入手，以课堂活动为切入点，为学员带来了为期三天的课程开发内容详解。通过“做中学”的培训手法，课程随堂输出课程大纲50余篇，完成企业竞聘课程6门（每门约3小时），并进行了培训通关，完美达成了企业——“在培训中产生培训成果”的要求，获得了企业与学员的交口称赞，培训完成后，企业迅速对老师进行了返聘。

★江苏省/湖南省华夏保险公司 | PTT讲师培训（三期）

针对保险公司代理人特性，特别设计了符合保险讲师的培训方案，通过寓教于乐的培训方式，边学边练的教学方法，帮助华夏保险优化培训了150余名优秀的保险讲师，并完成了授课验收的相关工作

★安徽/四川省邮政公司丨TTT企业内训师建设项目（四期）

通过企业调研与需求分析，开发了企业专属阶段性培训课程与考核标准。通过初级、中级、高级三次六期培训，内容涵盖内训师基本技能、课程设计与开发、课程呈现工具详解等内容，帮助企业选拔的100余名学员实现从一无所知到具备课程讲授与课程开发能力的企业内训师，培训获得了公司一致好评。

★杭州农商银行总行丨PPT综合提升训练营（两期）

根据企业PPT制作需求与学员基础水平调研，开发了企业专属的PPT提升训练营，通过两期（共4天）的训练营集中提升，从操作篇与设计篇循序渐进的为学员带来了多层次、多维度的课程内容。让学员在PPT的制作过程中实现操作高效、设计美观，课程受到了学员的热烈欢迎。共输出企业课程、汇报用PPT模板60余个，完整课程课件30余门




讲师特色：

“工科出身、金融从业、职业讲师、高效求实“不仅是张老师个人背景的概括，也形成了其

”思维严谨、科学务实、生动活泼“突出的课程特色：

★ 工科出身——思维严谨：运用程序设计、过程管控、结构思维原理，确保课程结构完整、内容丰富、逻辑严密、进程精准。

★ 金融从业——科学务实：课程以组织绩效提升为第一目标，以企业市场需求为切入点，通过充分调研，为每家企业量身打造最适合、最实用的专属培训课程。

★ 职业讲师——生动活泼：运用体验教学法，以“做中学”为课程核心授课方式，通过课堂活动、角色扮演、翻转课堂、促动技术等教学工具，以幽默的语言呈现方式让学员融入培训。

★ 高效求实——交付为王，所有课程研发、PPT制作、微课类课程力求培训现场交付成果，让企业学院在培训的同时真正“学有所得、学有所获”。



主讲课程：

《从0到1，走向讲台——“五维”标准化培训师表达与呈现技巧》

《从1到十，持续优化——“五阶”标准化课程开发技术》

《从10到π，实现飞跃——“五环“体验式课堂呈现技术》

《经验萃取与案例开发》

《从一无所有到完美呈现——结构化的高效PPT制作与演示技术》

《笔剑锋从磨砺出——公文写作能力提升训练营》

《看的开心，学的投入，做的精彩——企业情景式微课程设计与制作技术》

《高质量、高流量——短视频设计与制作工作坊》




部分服务客户：















金融企业

中国银行四川省分行、中国银行江西省分行、杭州市农业发展银行、杭州市浦发银行、贵州省农业发展银行、民生银行杭州市分行、杭州立信金融学院、中国银行杭州市分行、工商银行吉林省分行、建设银行杭州市分行、四川省邮政储蓄银行、黑龙江省邮政储蓄银行、福建省邮政储蓄银行、湖北省邮政公司、江苏省联社、安徽省联社、浙江省联社、农业银行安徽省分行、农业银行杭州市分行、杭州市浦发银行、华夏保险杭州分公司、华夏保险湖南分公司、杭州市农业银行、杭州市农业银行、中国银行绵阳市分行、中国银行杭州市分行、安徽省邮政公司、四川省邮政公司、南充市邮政公司、广安市邮政储蓄银行、中邮保险四川分公司、中邮保险安徽分公司、杭州农商银行总行、资阳市邮政分公司、

生产制造

湖北中烟、广东中烟、山东中烟、四川中烟、四川省国家电网、贵州省国家电网、华能水电集团公司、中石油总部、中石油杭州分公司、青海油田、蜀南气矿、中石化四川分公司、盐鑫钢铁集团有限公司、新天科创新能源有限公司、中密集团、中钼集团、中能集团大渡河水电站、杭州农产品批发集团、冠豪纸业有限公司

交通领域

双流机场公司、中国中车集团公司、杭州铁路局、杭州轨道公司、杭州公交中二院、杭州中国交通研究院、杭州市排水公司、东风乘用车、一汽大众四川分公司、齐齐哈尔铁路局、日立集团公司、牡丹江铁路局

移动通信

中国联通杭州市分公司、中国联通杭州市分公司、江门市电信公司、杭州市电信公司、汕头市电信公司、雅安市电信公司、四川省国家电网、贵州省国家电网、杭州国微电子科技公司、德阳通信技术学院、杭州市电科院、杭州市电科院

零售产品

融创地产集团公司、百事可乐华南区域事业部、郎酒集团公司、周大福珠宝股份有限公司、欧普照明股份有限公司、顺控集团有限公司、红星美凯龙杭州分公司、杭州潜江保安公司、杭州爱仕达比科技公司、蓝根保健食品、杭州民格医药咨询、利比建筑咨询、公诚通信咨询、欧比佳营养食品、放得心茶油、杭州市罗蒂公主食品、湘丰茶业、杭州神州通物流 、普洛斯中国、杭州祺盾服饰、固特邦土木技术发展、漫诺服饰、力沃工程机械、杭州远思电子科技




部分授课评价：

张老师的每节课干货满满，让人完全没有开小差的时间。我记录您的每个课程的详细内容，从您的课程中可以寻找到帮我解决问题的思路和方案。除此之外我还记录了一些您讲课的方式方法，以便我今后开展培训时合理引用。为期三天的课程我收获满满、受益匪浅，很感谢您！

——甘肃紫光包老师

这门课程和以往培训最大的区别就是，课程结束了之后，学员能够随堂生成课程成果，看到每位学员在课程结束之后都能够展示自己心开发的课程，心理悬着的石头总算落地了，感谢张老师，短短三天就帮助他们实现了成长！

——某国有银行四川省培训中心负责人方老师

老师循序渐进、由浅入深的细致讲解了课程开发的详细步骤。尤其是一开始运用活动的方式开场，然后有逻辑的切换到课程开发的场景，让我们了解到了好的课程着实是设计出来的这一道理。每天授课特别辛苦的情况下，老师还义务利用休息时间帮我们完善课程大纲与课件，真的是非常感动。

——某国有银行银行江西省人力资源部谢经理

在关注课程内容的时候，还要关注课程进程与学员动态，这是我学习中印象最深的内容。同样，也学到了面对培训中的突发事件究竟应该怎样处理，感悟很深。

——某科技企业内训师王主任

其实我之前一直困惑于为什么很多时候我精心准备的课程却没有学员愿意听，今天听了张老师的课，总算是明白了，原来照本宣科并不符合成年人的培训要求，对企业员工做培训，要对症下药，运用参与技术，在互动中发生学习才有效果。

——某国有生产制造企业人力资源部负责人何经理

条理性强、逻辑性强、有趣

——某国有企业后备干部李小鹏博士

部分课程研发成果说明与展示：

（以下成果实例均可与老师助理处索要完整版）





课程开发学员成果展示—四川省国家电网

《白夜行者风云调度十八式》

课程开发学员成果展示——四川省邮政公司

《邮乐小店运营管理与操作技巧》





微课程开发成果展示—安徽省联社

《快速审核境外汇款申请书》

微课程开发成果展示—黑龙江邮政储蓄

《柜面开户资料审核流程》



课程开发学员成果展示—百事可乐杭州分公司

《OP重点客户对账流程》



微课程开发成果展示—杭州市轨道集团

《规范印章实用流程》

微课程开发成果展示—安徽省农业银行

《企业微营销操作流程详解》

微课程开发成果展示—安徽省农业银行

《企业微营销操作流程详解》























课程课件研发成果——杭州农产品贸易公司

《茶文化与VIP客户服务标准》

课程课件研发成果——华樱教育集团

《国际教育前景与展望》



部分授课照片：



杭州轨道集团公司

《金牌内训师全面提升训练营》



湖南华夏分公司

《PTT培训师授课技巧》



中石油杭州分公司

《内训师基础技能提升》



百事可乐华南区域事业部

《内训呈现技巧与PPT制作》



杭州双流机场

《内训师课程开发技术》



广东冠豪纸业集团

《微课程设计与研发技术》



华夏保险杭州分公司

《内训师技能提升培训》



杭州公开课

《基于实际工作人物的课程开发技术》



中国银行四川省分行

《金牌内训师比赛赛前辅导》



中国银行江西省分行

《案例教学与经验萃取》





黑龙江省邮政储蓄银行

《营销利器炼成记—零售产品课程开发》

四川省国家电网

《“五阶”标准课程研发技术》

东风乘用车集团公司

《PPT课程课件研发技术》



某人力集团公开课

《内训师呈现于课程研发技术》





贵州省联社

《结构化文案写作与课程研发》

杭州市排水集团

《“五阶”标准课程研发技术》





中石油杭州分公司

《高级内训师全面提升项目》

红星美凯龙杭州分公司

《结构化写作与PPT制作技术》





杭州市浦发银行

《台风与表达技巧提升》

杭州公诚咨询股份有限分公司

《结构化的课程呈现技术》





安徽省邮政公司

《微课程设计与制作技术》

安徽省联社

《微课程设计与制作技术》





綦江市龙兴保安公司

《结构化写作与课件研发》

江门市电信公司

《PPT制作与美化技术》





资阳市邮政分公司

《”五阶”课程开发技术》

南充市邮政分公司

《”五阶”课程开发技术》





福建平安人寿

《内训师呈现与表达详解》

杭州农商银行凉山分行

《‘五阶’课程开发技术》





海门市农商银行

《微课制作技能提升训练营》

华能水电公司

《课程设计与制作技术》





宜昌中烟集团

《金牌内训师讲师训练营》

杭州杭州公开课

《企业内训课程开发技术》





杭州农商银行总行

《PPT微课制作训练营》

湖北邮政分公司

《内训师素质提升训练营》