慕课官网

1

《H5页面设计与制作（全彩慕课版）》

配套教学教案

第1讲

第2讲

课时内容H5

的设计与制作授课时间90分钟课时2

教学目标

了解设计与制作H5的项目流程。

熟悉设计与制作H5的常用软件。

掌握设计与制作H5的基本规范。

掌握设计与制作H5的注意事项。

课时内容H5

初识授课时间90分钟课时2

教学目标

了解H5的定义与发展。

了解H5的特点与应用。

了解H5的类型。

教学重点了解H5的定义和特点。

教学难点了解H5的发展、应用和类型。

教学设计

1、教学思路：（1）通过基础知识的讲解，了解H5的定义、发展、特点和应用；（2）

通过举例说明了解H5的类型。

2、教学手段：（1）通过资料了解H5的定义、发展、特点和应用；（2）通过举例说明

了解H5的类型。

教学内容

讨论问题：1、H5的发展分为哪几个阶段？

2、H5有哪几种类型？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

1.1H5的定义

1.2H5的发展

1.3H5的特点

1.4H5的应用

1.5H5的类型

小结

1、了解H5的定义和发展。

2、了解H5的特点与应用。

3、了解H5的类型。

2

熟悉设计与制作H5的创意方法。

教学重点

熟练掌握H5设计与制作的项目流程。

了解H5设计与制作的注意事项。

教学难点熟练掌握H5设计与制作的基本规范。

教学设计

1、教学思路：（1）通过基础知识的讲解，了解H5设计与制作的项目流程和H5设计

与制作的常用软件；（2）通过举例说明，熟练掌握H5设计与制作的基本规范、注

意事项和创意实现的方法和技巧。

2、教学手段：（1）通过理论讲解掌握H5制作的基本方法；（2）通过深入学习了解制

作过程中需要注意的基本规范和注意事项。

教学内容

讨论问题：1、设计与制作H5的基本规范有哪些？

2、H5常用的测试方法有哪些？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

2.1H5设计与制作的项目流程

2.2H5设计与制作的常用软件

2.3设计与制作H5的基本规范

2.4H5的注意事项

2.5H5的创意实现

2.5.1H5的常用策划方法

2.5.2H5的常用交互方法

2.5.3H5的创意设计风格

2.5.4H5的动效设计运用

2.5.5H5的音效设计方法

2.5.6H5的常用测试方法

2.5.7H5的常规数据分析

小结

1.熟练掌握H5设计与制作的项目流程。

2.了解H5设计与制作的常用软件。

3.熟练掌握H5设计与制作的基本规范。

4.了解H5设计与制作的注意事项。

5.熟练掌握H5设计与制作的创意实现（H5的常用策划方法、常用交互方法、创意

设计风格、动效设计运用、音效设计方法、常用测试方法和常规数据分析）。

第3讲

课时内容互动游戏

H5

制作授课时间90分钟课时2

教学目标

了解媒体娱乐行业消消乐H5的项目策划。

掌握媒体娱乐行业消消乐H5的交互设计。

教学重点了解媒体娱乐行业消消乐H5的项目策划。

3

教学难点掌握媒体娱乐行业消消乐H5的交互设计。

教学设计

1、教学思路：（1）通过对课堂实训案例的讲解掌握制作媒体娱乐行业消消乐H5的方法和

技巧；（2）再通过课堂练习和课后习题消化所学软件知识。

2、教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过课堂练习和课后

习题提高学生的实际应用能力。

3、教学资料及要求：在网上找一些H5的模板进行修改和制作，来加深学员对知识点的理

解和提高实际应用能力。

教学内容

讨论问题：1、如何替换二维码？

2、如何发布H5？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

3.1课堂案例——媒体娱乐行业消消乐H5制作

3.1.1项目策划

3.1.2交互设计

3.1.3视觉设计

3.1.4制作发布

3.2课堂练习——食品餐饮行业翻牌子H5制作

3.3课后习题——健康医疗行业打地鼠H5制作

小结

1、了解媒体娱乐行业消消乐H5的项目策划。

2、掌握媒体娱乐行业消消乐H5的交互设计。

作业

课堂练习——食品餐饮行业翻牌子H5制作

注册登录易企秀官网，查找符合要求的互动H5模板，调整相关的文字内容。

课后习题——健康医疗行业打地鼠H5制作

注册登录易企秀官网，查找符合要求的互动H5模板，调整相关的文字内容。

4

第4讲

课时内容活动抽奖

H5

制作授课时间90分钟课时2

教学目标

了解电子商务行业九宫格H5的项目策划。

掌握电子商务行业九宫格H5的交互设计。

教学重点了解电子商务行业九宫格H5的项目策划。

教学难点掌握电子商务行业九宫格H5的交互设计。

教学设计

1、教学思路：（1）通过对课堂实训案例的讲解掌握制作电子商务行业九宫格H5的方法和

技巧；（2）再通过对课堂实训案例的讲解掌握发布电子商务行业九宫格H5的方法；（3）

最后通过课堂练习和课后习题消化所学软件知识。

2、教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过课堂练习和课后

习题提高学生的实际应用能力。

3、教学资料及要求：在网上找一些H5的模板进行修改和制作，来加深学员对知识点的理

解和提高实际应用能力。

教学内容

讨论问题：1、如何修改H5模板中的文字？

2、如何发布H5？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

4.1课堂案例——电子商务行业九宫格H5制作

4.1.1项目策划

4.1.2交互设计

4.1.3视觉设计

4.1.4制作发布

5

4.2课堂练习——金融理财行业摇一摇H5制作

4.3课后习题——文化传媒行业刮刮乐H5制作

小结

1、了解电子商务行业九宫格H5的项目策划。

2、掌握电子商务行业九宫格H5的交互设计。

作业

课堂练习——金融理财行业摇一摇H5制作

使用谷歌浏览器注册登录凡科官网，使用凡科互动免费模板制作金融理财行业摇一摇

H5，修改并替换首页中的素材、替换中/未中奖页面素材、调整奖项设置以及高级设置。

课后习题——文化传媒行业刮刮乐H5制作

使用谷歌浏览器注册登录凡科官网，使用凡科互动免费模板制作文化传媒行业刮刮乐

H5，修改并替换首页中的素材、中/未中奖页面素材、调整奖项设置以及高级设置。

6

第5讲

课时内容测试问答

H5

制作授课时间90分钟课时2

教学目标

了解文化传媒行业知识分享H5的项目策划。

掌握文化传媒行业知识分享H5的交互设计。

教学重点了解文化传媒行业知识分享H5的项目策划。

教学难点掌握文化传媒行业知识分享H5的交互设计。

教学设计

1、教学思路：（1）通过对课堂实训案例的讲解掌握制作文化传媒行业知识分享H5的方法

和技巧；（2）再通过对课堂实训案例的讲解掌握发布文化传媒行业知识分享H5的方

法；（3）最后通过课堂练习和课后习题消化所学软件知识。

2、教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过课堂练习和课后

习题提高学生的实际应用能力。

3、教学资料及要求：在网上找一些H5的模板进行修改和制作，来加深学员对知识点的理

解和提高实际应用能力。

教学内容

讨论问题：1、如何修改H5模板中的文字？

2、如何发布H5？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

5.1课堂案例——IT互联网行业节日答题H5制作

5.1.1项目策划

5.1.2交互设计

5.1.3视觉设计

5.1.4制作发布

5.2课堂练习——IT互联网行业脑力测试H5制作

5.3课后习题——文化传媒行业知识分享H5制作

小结

1、了解文化传媒行业知识分享H5的项目策划。

2、掌握文化传媒行业知识分享H5的交互设计。

作业

课堂练习——IT互联网行业脑力测试H5制作

使用谷歌浏览器登录凡科官网，使用凡科互动免费模板制作IT互联网行业脑力测试

H5，修改并替换首页中的素材、调整奖项设置以及高级设置。

7

课后习题——文化传媒行业知识分享H5制作

使用谷歌浏览器登录凡科官网，使用凡科互动免费模板制作文化传媒行业知识分享

H5，修改并替换首页中的素材、调整奖项设置以及高级设置。

第6讲

课时内容滑动翻页

H5

制作授课时间90分钟课时2

教学目标

了解文化传媒行业企业招聘H5的项目策划。

掌握文化传媒行业企业招聘H5的交互设计。

教学重点了解文化传媒行业企业招聘H5的项目策划。

教学难点掌握文化传媒行业企业招聘H5的交互设计。

教学设计

1、教学思路：（1）通过对课堂实训案例的讲解掌握制作文化传媒行业企业招聘H5的方法

和技巧；（2）再通过对课堂实训案例的讲解掌握发布文化传媒行业企业招聘H5的方

法；（3）最后通过课堂练习和课后习题消化所学软件知识。

2、教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过课堂练习和课后

习题提高学生的实际应用能力。

3、教学资料及要求：在网上找一些H5的模板进行修改和制作，来加深学员对知识点的理

解和提高实际应用能力。

教学内容

讨论问题：1、可以用什么软件制作H5页面？

2、如何发布H5？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

6.1课堂案例——文化传媒行业企业招聘H5制作

6.1.1项目策划

6.1.2交互设计

6.1.3视觉设计

6.1.4制作发布

6.2课堂练习——汽车工业行业活动邀请H5制作

8

6.3课后习题——教育咨询行业培训招生H5制作

小结

1、了解文化传媒行业企业招聘H5的项目策划。

2、掌握文化传媒行业企业招聘H5的交互设计。

作业

课堂练习——汽车工业行业活动邀请H5制作

使用谷歌浏览器登录iH5官网，使用Photoshop软件制作页面的视觉设计，使用iH5的

动效和翻页功能制作最终效果。

课后习题——教育咨询行业培训招生H5制作

使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作教育咨询行业培训招生

H5，使用Photoshop软件制作首各个页面的视觉设计，使用凡科微传单的翻页和趣味中的

快闪功能制作最终效果。

9

第7讲

课时内容长页滑动

H5

制作授课时间90分钟课时2

教学目标

了解食品餐饮行业产品介绍H5的项目策划。

掌握食品餐饮行业产品介绍H5的交互设计。

教学重点了解食品餐饮行业产品介绍H5的项目策划。

教学难点掌握食品餐饮行业产品介绍H5的交互设计。

教学设计

1、教学思路：（1）通过对课堂实训案例的讲解掌握制作食品餐饮行业产品介绍H5的方法

和技巧；（2）再通过对课堂实训案例的讲解掌握发布食品餐饮行业产品介绍H5的方

法；（3）最后通过课堂练习和课后习题消化所学软件知识。

2、教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过课堂练习和课后

习题提高学生的实际应用能力。

3、教学资料及要求：在网上找一些H5的模板进行修改和制作，来加深学员对知识点的理

解和提高实际应用能力。

教学内容

讨论问题：1、可以用什么软件制作H5页面？

2、如何发布H5？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

7.1课堂案例——食品餐饮行业产品介绍H5制作

7.1.1项目策划

7.1.2交互设计

7.1.3视觉设计

7.1.4制作发布

7.2课堂练习——文化传媒行业活动邀请H5制作

7.3课后习题——服装饰品行业产品营销H5制作

小结

1、了解食品餐饮行业产品介绍H5的项目策划。

2、掌握食品餐饮行业产品介绍H5的交互设计。

作业

课堂练习——文化传媒行业活动邀请H5制作

使用谷歌浏览器登录iH5官网，使用iH5制作文化传媒行业活动邀请H5，使用

Photoshop软件制作页面的视觉设计，使用iH5的页面>剪切>使用滚动条功能、事件功能

制作最终效果。

10

课后习题——服装饰品行业产品营销H5制作

使用谷歌浏览器登录iH5官网，使用iH5制作服装饰品行业产品营销H5，使用

Photoshop软件制作页面的视觉设计，使用iH5的页面>剪切>使用滚动条功能制作最终效

果。

11

第8讲

课时内容画中画

H5

制作授课时间90分钟课时2

教学目标

了解IT互联网行业产品介绍H5的项目策划。

掌握IT互联网行业产品介绍H5的交互设计。

教学重点了解IT互联网行业产品介绍H5的项目策划。

教学难点掌握IT互联网行业产品介绍H5的交互设计。

教学设计

1、教学思路：（1）通过对课堂实训案例的讲解掌握制作IT互联网行业产品介绍H5的方

法和技巧；（2）再通过对课堂实训案例的讲解掌握发布IT互联网行业产品介绍H5的

方法；（3）最后通过课堂练习和课后习题消化所学软件知识。

2、教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过课堂练习和课后

习题提高学生的实际应用能力。

3、教学资料及要求：在网上找一些H5的模板进行修改和制作，来加深学员对知识点的理

解和提高实际应用能力。

教学内容

讨论问题：1、可以用什么软件制作H5页面？

2、如何发布H5？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

8.1课堂案例——IT互联网行业活动邀请H5制作

8.1.1项目策划

8.1.2交互设计

8.1.3视觉设计

8.1.4制作发布

8.2课堂练习——设计服务公司招聘H5制作

8.3课后习题——食品餐饮行业产品营销H5制作

小结

1、了解IT互联网行业产品介绍H5的项目策划。

2、掌握IT互联网行业产品介绍H5的交互设计。

作业

课堂练习——设计服务公司招聘H5制作

使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作文化传媒行业企业招聘H5，

使用Photoshop软件制作首页、公司简介、程序猿、设计狮和新媒体等页面的视觉设计，使

用凡科微传单趣味功能中画中画功能制作H5页面动画。

12

课后习题——食品餐饮行业产品营销H5制作

使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作食品餐饮行业产品营销

H5，使用Photoshop软件制作首页、优惠活动、优惠卷、和优惠产品等页面的视觉设计，

使用凡科微传单趣味功能中画中画功能制作H5页面动画。

第9讲

课时内容3D/

全景

H5

制作授课时间90分钟课时2

教学目标

了解金融理财行业节日祝福H5的项目策划。

掌握金融理财行业节日祝福H5的交互设计。

教学重点了解金融理财行业节日祝福H5的项目策划。

教学难点掌握金融理财行业节日祝福H5的交互设计。

教学设计

1、教学思路：（1）通过对课堂实训案例的讲解掌握制作金融理财行业节日祝福H5的方法

和技巧；（2）再通过对课堂实训案例的讲解掌握发布金融理财行业节日祝福H5的方

法；（3）最后通过课堂练习和课后习题消化所学软件知识。

2、教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过课堂练习和课后

习题提高学生的实际应用能力。

3、教学资料及要求：在网上找一些H5的模板进行修改和制作，来加深学员对知识点的理

解和提高实际应用能力。

教学内容

讨论问题：1、可以用什么软件制作H5页面？

2、如何发布H5？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

9.1课堂案例——金融理财行业节日祝福H5制作

9.1.1项目策划

9.1.2交互设计

9.1.3视觉设计

9.1.4制作发布

13

9.2课堂练习——电子商务行业活动促销H5制作

9.3课后习题——家居装修行业产品推广H5制作

小结

1、了解金融理财行业节日祝福H5的项目策划。

2、掌握金融理财行业节日祝福H5的交互设计。

作业

课堂练习——电子商务行业活动促销H5制作

使用谷歌浏览器登录凡科官网，使用凡科互动为传单制作电子商务行业活动促销H5，

使用Photoshop软件制作首屏、先领劵、大礼包、送亲友、送长辈、关注我们等页面的视觉

设计，使用凡科微传单的趣味中的球体仪功能制作最终效果。

课后习题——家居装修行业产品推广H5制作

使用谷歌浏览器登录凡科官网，使用凡科互动为传单制作家居装修行业产品推广

H5，使用Photoshop软件制作全景页面和弹窗页面的视觉设计，使用凡科微传单的趣味中

的全景功能功能制作最终效果。

14

第10讲

课时内容视频动画

H5

制作授课时间90分钟课时2

教学目标

了解文化传媒行业活动推广H5的项目策划。

掌握文化传媒行业活动推广H5的交互设计。

教学重点了解文化传媒行业活动推广H5的项目策划。

教学难点掌握文化传媒行业活动推广H5的交互设计。

教学设计

1、教学思路：（1）通过对课堂实训案例的讲解掌握制作文化传媒行业活动推广H5的方法

和技巧；（2）再通过对课堂实训案例的讲解掌握发布文化传媒行业活动推广H5的方

法；（3）最后通过课堂练习和课后习题消化所学软件知识。

2、教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过课堂练习和课后

习题提高学生的实际应用能力。

3、教学资料及要求：在网上找一些H5的模板进行修改和制作，来加深学员对知识点的理

解和提高实际应用能力。

教学内容

讨论问题：1、可以用什么软件制作H5页面？

2、如何发布H5？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

10.1课堂案例——旅游出行行业活动推广H5制作

10.1.1项目策划

10.1.2交互设计

10.1.3视觉设计

10.1.4制作发布

10.2课堂练习——文化传媒行业活动推广H5制作

10.3课后习题——电子数码行业品牌推广H5制作

小结

1、了解文化传媒行业活动推广H5的项目策划。

2、掌握文化传媒行业活动推广H5的交互设计。

作业

课堂练习——文化传媒行业活动推广H5制作

使用谷歌浏览器登录iH5官网，使用iH5制作文化传媒行业活动推广H5，使用

Photoshop软件制作页面的视觉效果，使用iH5的动效、事件、横幅功能制作最终效果。

15

课后习题——电子数码行业品牌推广H5制作

使用谷歌浏览器登录iH5官网，使用iH5制作电子数码行业品牌推广H5，使用

Photoshop软件制作页面的视觉设计，使用iH5的动效、事件、横幅功能制作最终效果。