H5页面设计与制作教学教案

《H5页面设计与制作》

教学教案

第1讲

课时内容

H5初识

授课时间

90分钟

课时

2

了解H5的定义与发展。

教学目标

了解H5的特点与应用。

了解H5的类型。

教学重点

教学难点

了解H5的定义和特点。

了解H5的发展、应用和类型。

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

教学设计

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

教学内容

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

2、 H5有哪几种类型？

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

1.1 H5的定义

1.2 H5的发展

1.3 H5的特点

1.4 H5的应用

1.5 H5的类型

小结

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

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

3、 了解H5的类型。

第2讲

课时内容

H5的设计与制作

授课时间

90分钟

课时

2

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

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

教学目标

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

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

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

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

教学重点

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

教学难点

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

1、 教学思路：（1）通过基础知识的讲解，了解H5设计与制作的项目流程和H5设计与制作的常用软件；（2）通过举例说明，熟练掌握H5设计与制作的基本规范、注意事项和创意实现的方法和技巧。

教学设计

2、 教学手段：（1）通过理论讲解掌握H5制作的基本方法；（2）通过深入学习了解制作过程中需要注意的基本规范和注意事项。

教学内容

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

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

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

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

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

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

2.4 H5的注意事项

2.5 H5的创意实现

2.5.1 H5的常用策划方法

2.5.2 H5的常用交互方法

2.5.3 H5的创意设计风格

2.5.4 H5的动效设计运用

2.5.5 H5的音效设计方法

2.5.6 H5的常用测试方法

2.5.7 H5的常规数据分析

小结

1.

2.

3.

4.

5.

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

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

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

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

熟练掌握H5设计与制作的创意实现（H5的常用策划方法、常用交互方法、创意设计风格、动效设计运用、音效设计方法、常用测试方法和常规数据分析）。

第3讲

课时内容

互动游戏H5制作

授课时间

90分钟

课时

2

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

教学目标

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

教学重点

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

教学难点

þ 掌握媒体娱乐行业消消乐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讲

课时内容

活动抽奖H5制作

授课时间

90分钟

课时

2

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

教学目标

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

教学重点

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

教学难点

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

1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作电子商务行业九宫格H5的方法和技巧；（2）再通过对课堂实训案例的讲解掌握发布电子商务行业九宫格H5的方法；（3）最后通过课堂练习和课后习题消化所学软件知识。

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

2、 教学手段：后习题提高学生的实际应用能力。

3、 教学资料及要求：在网上找一些H5的模板进行修改和制作，来加深学员对知识点的理解和提高实际应用能力。

教学内容

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

2、如何发布H5？

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

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

4.1.1 项目策划

4.1.2 交互设计

4.1.3 视觉设计

4.1.4 制作发布

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

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

小结

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

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

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

使用谷歌浏览器注册登录凡科官网，使用凡科互动免费模板制作金融理财行业摇一摇H5，修改并替换首页中的素材、替换中/未中奖页面素材、调整奖项设置以及高级设置。

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

作业

使用谷歌浏览器注册登录凡科官网，使用凡科互动免费模板制作文化传媒行业刮刮乐H5，修改并替换首页中的素材、中/未中奖页面素材、调整奖项设置以及高级设置。

第5讲

课时内容

测试问答H5制作

授课时间

90分钟

课时

2

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

教学目标

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

教学重点

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

教学难点

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

1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作文化传媒行业知识分享H5的方法和技巧；（2）再通过对课堂实训案例的讲解掌握发布文化传媒行业知识分享H5的方法；（3）最后通过课堂练习和课后习题消化所学软件知识。

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

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，修改并替换首页中的素材、调整奖项设置以及高级设置。

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

作业

使用谷歌浏览器登录凡科官网，使用凡科互动免费模板制作文化传媒行业知识分享H5，修改并替换首页中的素材、调整奖项设置以及高级设置。

第6讲

课时内容

滑动翻页H5制作

授课时间

90分钟

课时

2

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

教学目标

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

教学重点

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

教学难点

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

1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作文化传媒行业企业招聘H5的方法和技巧；（2）再通过对课堂实训案例的讲解掌握发布文化传媒行业企业招聘H5的方法；（3）最后通过课堂练习和课后习题消化所学软件知识。

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

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制作

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

小结

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

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

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

使用谷歌浏览器登录iH5官网，使用Photoshop软件制作页面的视觉设计，使用iH5的动效和翻页功能制作最终效果。

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

使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作教育咨询行业培训招生H5，使用Photoshop软件制作首各个页面的视觉设计，使用凡科微传单的翻页和趣味中的快闪功能制作最终效果。

作业

第7讲

课时内容

长页滑动H5制作

授课时间

教学目标

90分钟

课时

2

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

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

教学重点

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

教学难点

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

1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作食品餐饮行业产品介绍H5的方法和技巧；（2）再通过对课堂实训案例的讲解掌握发布食品餐饮行业产品介绍H5的方法；（3）最后通过课堂练习和课后习题消化所学软件知识。

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

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的页面>剪切>使用滚动条功能、事件功能制作最终效果。

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

作业

使用谷歌浏览器登录iH5官网，使用iH5制作服装饰品行业产品营销H5，使用Photoshop软件制作页面的视觉设计，使用iH5的页面>剪切>使用滚动条功能制作最终效果。

第8讲

课时内容

画中画H5制作

授课时间

90分钟

课时

2

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

教学目标

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

教学重点

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

教学难点

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

1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作IT互联网行业产品介绍H5的方法和技巧；（2）再通过对课堂实训案例的讲解掌握发布IT互联网行业产品介绍H5的方法；（3）最后通过课堂练习和课后习题消化所学软件知识。

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

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页面动画。

作业

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

使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作食品餐饮行业产品营销H5，使用Photoshop软件制作首页、优惠活动、优惠卷、和优惠产品等页面的视觉设计，使用凡科微传单趣味功能中画中画功能制作H5页面动画。

第9讲

课时内容

3D/全景H5制作

授课时间

90分钟

课时

2

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

教学目标

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

教学重点

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

教学难点

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

1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作金融理财行业节日祝福H5的方法和技巧；（2）再通过对课堂实训案例的讲解掌握发布金融理财行业节日祝福H5的方法；（3）最后通过课堂练习和课后习题消化所学软件知识。

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

2、 教学手段：后习题提高学生的实际应用能力。

3、 教学资料及要求：在网上找一些H5的模板进行修改和制作，来加深学员对知识点的理解和提高实际应用能力。

教学内容

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

2、如何发布H5？

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

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

9.1.1 项目策划

9.1.2 交互设计

9.1.3 视觉设计

9.1.4 制作发布

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

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

小结

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

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

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

使用谷歌浏览器登录凡科官网，使用凡科互动为传单制作电子商务行业活动促销H5，使用Photoshop软件制作首屏、先领劵、大礼包、送亲友、送长辈、关注我们等页面的视觉设计，使用凡科微传单的趣味中的球体仪功能制作最终效果。

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

使用谷歌浏览器登录凡科官网，使用凡科互动为传单制作家居装修行业产品推广H5，使用Photoshop软件制作全景页面和弹窗页面的视觉设计，使用凡科微传单的趣味中的全景功能功能制作最终效果。

作业

第10讲

课时内容

视频动画H5制作

授课时间

90分钟

课时

2

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

教学目标

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

教学重点

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

教学难点

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

1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作文化传媒行业活动推广H5的方法和技巧；（2）再通过对课堂实训案例的讲解掌握发布文化传媒行业活动推广H5的方法；（3）最后通过课堂练习和课后习题消化所学软件知识。

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

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的动效、事件、横幅功能制作最终效果。

作业

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

使用谷歌浏览器登录iH5官网，使用iH5制作电子数码行业品牌推广H5，使用Photoshop软件制作页面的视觉设计，使用iH5的动效、事件、横幅功能制作最终效果。