《H5页面设计与制作全彩慕课版》配套教学教案.docx
《《H5页面设计与制作全彩慕课版》配套教学教案.docx》由会员分享,可在线阅读,更多相关《《H5页面设计与制作全彩慕课版》配套教学教案.docx(28页珍藏版)》请在冰豆网上搜索。
《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.1H5的定义
1.2H5的发展
1.3H5的特点
1.4H5的应用
1.5H5的类型
小结
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.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的项目策划。
教学难点
掌握媒体娱乐行业消消乐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)最后通过课堂练习和课后习题消化所学软件知识。
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制作发布
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)最后通过课堂练习和课后习题消化所学软件知识。
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,修改并替换首页中的素材、调整奖项设置以及高级设置。
课后习题——文化传媒行业知识分享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制作
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)最后通过课堂练习和课后习题消化所学软件知识。
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的页面>剪切>使用滚动条功能、事件功能制作最终效果。
课后习题——服装饰品行业产品营销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)最后通过课堂练习和课后习题消化所学软件知识。
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页面动画。
课后习题——食品餐饮行业产品营销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制作发布
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)最后通过课堂练习和课后习题消化所学软件知识。
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的动效、事件、横幅功能制作最终效果。
课后习题——电子数码行业品牌推广H5制作
使用谷歌浏览器登录iH5官网,使用iH5制作电子数码行业品牌推广H5,使用Photoshop软件制作页面的视觉设计,使用iH5的动效、事件、横幅功能制作最终效果。