《H5移动页面设计与制作》教案

《H5页面设计与制作（全彩慕课版）》配套教学教案第1讲第2讲第3讲课堂练习——食品餐饮行业翻牌子H5制作注册登录易企秀官网，查找符合要求的互动H5模板，调整相关的文字内容。

课后习题——健康医疗行业打地鼠H5制作注册登录易企秀官网，查找符合要求的互动H5模板，调整相关的文字内容。

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

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

第5讲课堂练习——IT互联网行业脑力测试H5制作使用谷歌浏览器登录凡科官网，使用凡科互动免费模板制作IT互联网行业脑力测试H5，修改并替换首页中的素材、调整奖项设置以及高级设置。

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

第6讲课堂练习——汽车工业行业活动邀请H5制作使用谷歌浏览器登录iH5官网，使用Photoshop软件制作页面的视觉设计，使用iH5的动效和翻页功能制作最终效果。

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

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

第8讲课堂练习——设计服务公司招聘H5制作使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作文化传媒行业企业招聘H5，使用Photoshop软件制作首页、公司简介、程序猿、设计狮和新媒体等页面的视觉设计，使用凡科微传单趣味功能中画中画功能制作H5页面动画。

《H5页面设计与制作》教学教案第1讲了解H5的定义与发展。

了解H5的特点与应用。

了解H5的类型。

了解H5的定义和特点。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

掌握文化传媒行业企业招聘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）通过课堂练习和课后习题提高学生的实际应用能力。

“H5移动页面设计与制作”课程一体化标准典型工作任务描述作为移动互联网时代的创新营销方式，图文声像并茂的H5在展示上更为活泼，表达清晰直观，加上承载内容信息量大，且易于制作、方便分享的先天优势，H5成为了企业提升营销推广力的利器，越来越多企业想借助H5的传播力，达到品牌推广、产品推销等目的,是网络营销工作人员的主要工作内容之一。

《网络营销》是有以一体化课程理论为指导，通过职业岗位调研、实践专家访谈,构建基于工作任务的一体化课程体系,以《H5微传单网络营销》工作任务为例,编制参考性学习任务教学大纲,建设一体化课程教学资源，建立课程考核与评价体系,探究出一体化课程开发与实践应用的有效方法。

工作内容分析代表性工作任务课程目标总体目标：在老师的引导下，能根据顾客的要求合理选择H5样式和功能，并设计与制作H5页面，提升解决问题能力、决策能力和逻辑思维能力。

能力目标：建立学生的H5应用能力，提升其在实际生产生活中的解决问题能力、决策能力、风险评估能力和逻辑思维能力。

知识目标：1.初步了解超文本标记语言。

2.学会处理图片等素材。

3.学习H5设计与制作技巧。

4.独立进行H5移动页面设计与制作。

5.提升解决问题能力、决策能力和逻辑思维能力。

6.会用制作二维码。

素质目标：1.培养勤奋、守纪、吃苦耐劳的工作态度；2.有责任感，勤奋好学，良好的沟通能力和协调能力，有团队合作精神；3.培养学生良好的职业道德，树立爱岗敬业的精神；4.具有踏实肯干的工作作风和主动、耐心的服务意思；5.培养学生自主、开放的学习能力。

学习内容知识点：1、Mugeda界面与舞台界面概览、菜单栏、快捷工具栏、时间轴、工具条、页面栏、什么是舞台？、属性面板2. 素材与媒体图片/图片序列/GIF/PNG/SVG/JPG等、文本/富文本、网页、幻灯片、视频、声音、绘制素材、云字体、可视化图表、建组、裁剪组3：动画时间轴以及图层、选择工具、关键帧动画、路径动画、进度动画、变形动画、预置动画、元件动画、分页/加载页、遮罩、动画运动4：行为行为：行为添加以及触发事件、帧的行为、播放元件片段、改变元素属性、改变图片、设置定时器5、控件行为：陀螺仪、定时器、随机数、擦玻璃、绘画板功能、点赞6：微信功能微信功能：微信头像、微信昵称、定制图片、录制用户声音、定义分享信息7：表单表单:输入文字（输入框）、单选框、多选框、下拉菜单（列表框）、表单提交、默认表单／定制文字、动画关联、属性关联、自动关联8、API【API的应用】在动画中添加代码、Mugeda API的整体结构、Mugeda对象、scene对象、aObject对象、工具API 、获取Mugeda后台数据9、工作规范文件尺寸、分辨率、色彩模式等规范，文件命名与存储规范，文件管理与备份规范。

《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. 熟练掌握H5设计与制作的项目流程。