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

1、 “学习任务一制作HTML5展示动画教案一体化课程H5移动页面设计与制作学习任务任务一：制作HTML5展示动画教学时数72上课日期2019.2.26周次2-11教学班级17级计算机班.学习任务分析利用5个学习活动，循序渐进，逐步增加知识点的学习，以达到熟练掌握利脚UGEDA软件制作HTML5展示动画的能力。二、学习目标完成本学习任务后，学生应当能：1、熟练掌握Mugeda界面与舞台功能。2、会处理编辑素材与媒体。3、会制作H5动画。4、会合理使用MUGEA软件里的行为功能。三、关键能力观察能力、资料查阅能力、自我学习能力、分析问题与解决问题能力、表达能力、与人沟通能力、团结协作能力四、教学重点

2、1、熟练掌握Mugeda界面与舞台功能。2、会处理编辑素材与媒体。3、会制作H5动画。4、会合理使用MUGEA软件里的行为功能。五、教学难点会合理使用MUGEA软件里的行为功能。六、学生分析1、该班学生50%多的同学属于“主动跟随型”，20%属于需要监督型，其余的是偏爱动手型。计算机能力有一定基础。2、该班学生对网络营销课程有较强的好奇心和求知欲；喜欢漂亮的图片，视觉性的性格，喜欢追求酷炫新鲜有趣的事物；个性化的需求迫切。3、以往学业成绩分布差异分化明显，较差以下和优秀学生比例相当。七、教学方法工学一体化教学模式，行动导向教学法、讲授法、讨论法、引导法、检查法八、教学环境及资源准备在多媒体网络

3、教室进行，主要有以下要求：.教学设备：基于Windows10操作系统的计算机，安装有MUGEDA软件、各常用中文输入法。.教学场地：学习工作站。.学习资料：H5移动页面设计与制作、操作素材；.学生分组：每组4-6人，指定组长，负责统筹实施工作任务。九、学习任务的教学组织流程活动1制作滚动动画的H5页面活动2制作三维转动H5页面活动3制作可以定制文字的H5节日贺卡活动4制作摇一摇随机出现结果的H5页面活动5制作邀请函H5页面十、教学过程教学活动1：制作滚动动画的口5页面（6学时）教学目标：.能正确叙述学习任务。.能操作MUGRDA软件新建、保存、打开和关闭。.能正确完成属性面板设置。.会设置H5

4、快速生成模板。.会设置菜单栏、快捷工具栏。教学环节教学内容教师活动学生活动设计意图课堂组织检查学生出勤和精神状态。向孔老夫子行鞠躬礼。师生互相问候。调动学生激情，调节课堂气氛。师生互相问候师生互相问候尊师重教。提醒学生进入上课状态。情境引入引入：清明节前夕，工作室接到一个粽子的产品推广工作单，作为工作室负责人的你希望制作一个简单的H5进行推广该产品。工作情景描述带领学生快速进入学习状态。倾听任务通过工作情景描述使学生快速进入学习状态。明确任务要求熟悉工作页中的“工作情境描述”，初步了解本任务的内容1.布置工作任务；.分组讨论.叙述工作任务领悟问题的能力；与老师、同学的沟通交流能力学习准备.学会

5、利用百度搜索引擎获取信息，完成广告内容的拟定和图片素材.能操作MUGRDA软件新建、保存、打开和关闭。.能正确完成属性面板设置。.会设置H5快速生成模板。.会设置菜单栏、快捷工具栏。.指导学生查找相关书籍，及利用互联网获取信息，回答学生提出的问题.指导学生完成工作页的填写.以小组形式填写完成工作页中的相关内容.动手实践，打开MUGEDA软件进行操作以学生为主体，训练学生主动探究知识能力：1.能够通过自己摸索和同学讨论学习知识2.初步掌握MUGEDA创建H5的方法.能正确完成属性面板设置。.会设置H5快速生成模板。.会设置菜单栏、快捷工具栏。计划决策写出创建H5的步骤：指导学生完成步骤的拟定小组

6、讨论并拟定制作步骤检查学习准备环节学生的掌握情况计划实施根据计划决策，按要求创建文件指导学生完成任务创建文档检查学生知识掌握情况检查控制根据计划实施要求，小组内互相检查，修改。巡回指导互相检查，讨论，修改巩固知识的掌握总结评价.请小组成员进行作品展示.评价总结1.组织各小组进行作品展示2.进行总结、分享、改进.各小组选出最优作品进行作品展示.各组互评.完成评价表通过此环节，训练学生表达能力和正确评价自己和他人能力。通过展示、交流，分享自己的喜悦，提高学生对所学知识的理解，激发学生继续学习的动力。教学活动2：制作三维转动口5页面（8课时）教学目标：.能正确叙述学习任务。.会进行媒体图片、文本、网

7、页、幻灯片、视频、声音、绘制素材、云字体素材的处理。教学环节教学内容教师活动学生活动设计意图课堂组织检查学生出勤和精神状态。向孔老夫子行鞠躬礼。师生互相问候。调动学生激情，调节课堂气氛。师生互相问候师生互相问候尊师重教，提醒学生进入上课状态。情境引入引入：工作室接到XX有限公司的网络推广工作任务，作为工作室负责人的你希望制作一个时尚又有互动性的的H5进行推广该公司。工作情景描述带领学生快速进入学习状态。倾听任务通过工作情景描述使学生快速进入学习状态。明确任务要求熟悉工作页中的“工作情境描述”，初步了解本任务的内容布置工作任务；.分组讨论.叙述工作任务领悟问题的能力；与老师、同学的沟通交流能力学

8、习准备1.学会进行媒体图片、文本、网页、幻灯片、视频、声音、绘制素材、云字体素材的处理。.指导学生查找相关书籍，及利用互联网获取信息，回答学生提出的问题.指导学生完成工作页的填写.以小组形式填写完成工作页中的相关内容.动手实践，打开MUGEDA软件进行操作以学生为主体，训练学生主动探究知识能力：1.能够通过自己摸索和同学讨论学习知识2.能掌握进行媒体图片、文本、网页、幻灯片、视频、声音、绘制素材、云字体素材的处理方法计划决策写出制作三维转动H5页面的步骤：指导学生完成步骤的拟定小组讨论并拟定制作步骤检查学习准备环节学生的掌握情况计划实施根据计划决策，按要求创建文件指导学生完成任务创建文档检查学

9、生知识掌握情况检查控制根据计划实施要求，小组内互相检查，修改。巡回指导互相检查，讨论，修改巩固知识的掌握总结评价.请小组成员进行作品展示.评价总结.组织各小组进行作品展示.进行总结、分享、改进.各小组选出最优作品进行作品展示.各组互评.完成评价表通过此环节，训练学生表达能力和正确评价自己和他人能力。通过展示、交流，分享自己的喜悦，提高学生对所学知识的理解，激发学生继续学习的动力。教学活动3：制作可以定制文字的口5节日贺卡（8课时）教学目标：.能正确叙述学习任务。.运用时间轴以及图层创建动画；.运用选择工具调整动画；.会制作关键帧动画、变形动画、预置动画。.会使用遮罩。教学环节教学内容教师活动学

10、生活动设计意图课堂组织检查学生出勤和精神状态。向孔老夫子行鞠躬礼。师生互相问候。调动学生激情，调节课堂气氛。师生互相问候师生互相问候尊师重教。提醒学生进入上课状态。情境引入引入：中秋节即将来临，XX公司要求设计可以定制文字的H5,要求节日贺卡开头有动画效果，结尾有公司植入广告。工作情景描述带领学生快速进入学习状态。倾听任务通过工作情景描述使学生快速进入学习状态。明确任务要求熟悉工作页中的“工作情境描述”，初步了解本任务的内容布置工作任务；1.分组讨论2.叙述工作任务领悟问题的能力；与老师、同学的沟通交流能力学习准备.学会时间轴以及图层创建动画；.学会运用选择工具调整动画；.学会会制作关键帧动画

11、、变形动画、预置动画。.学会会使用遮罩。.指导学生查找相关书籍，及利用互联网获取信息，回答学生提出的问题.指导学生完成工作页的填写.以小组形式填写完成工作页中的相关内容.动手实践，打开MUGEDA软件进行操作以学生为主体，训练学生主动探究知识能力：1.学会时间轴以及图层创建动画；2.学会运用选择工具调整动画；计划决策写出制作可以定制文字的H5节日贺卡的步骤：指导学生完成步骤的拟定小组讨论并拟定制作步骤检查学习准备环节学生的掌握情况计划实施根据计划决策，按要求创建文件指导学生完成任务创建文档检查学生知识掌握情况检查控制根据计划实施要求，小组内互相检查，修改。巡回指导互相检查，讨论，修改巩固知识的

12、掌握总结评价.请小组成员进行作品展示.评价总结.组织各小组进行作品展示.进行总结、分享、改进.各小组选出最优作品进行作品展示.各组互评.完成评价表通过此环节，训练学生表达能力和正确评价自己和他人能力。通过展示、交流，分享自己的喜悦，提高学生对所学知识的理解，激发学生继续学习的动力。教学活动4：制作摇一摇随机出现结果的H5页面（8课时）教学目标：.能正确叙述学习任务。.会运用行为添加以及触发事件；.运用行为工具改变元素属性；.运用行为工具设置定时器。教学环节教学内容教师活动学生活动设计意图课堂组织检查学生出勤和精神状态。向孔老夫子行鞠躬礼。师生互相问候。调动学生激情，调节课堂气氛。师生互相问候师

13、生互相问候尊师重教。提醒学生进入上课状态。情境引入引入：XX公司周年庆活动，希望制作一个抽奖性质的H5,要求活动新颖互动性强。工作情景描述带领学生快速进入学习状态。倾听任务通过工作情景描述使学生快速进入学习状态。明确任务要求熟悉工作页中的“工作情境描述”，初步了解本任务的内容布置工作任务；1.分组讨论2.叙述工作任务领悟问题的能力；与老师、同学的沟通交流能力学习准备.学会正确叙述学习任务。.学会运用行为添加以及触发事件；.学会运用行为工具改变元素属性；.学会运用行为工具设置定时器。指导学生查找相关书籍，及利用互联网获取信息，回答学生提出的问题指导学生完成工作页的填写.以小组形式填写完成工作页中

14、的相关内容.动手实践，打开MUGEDA软件进行操作以学生为主体，训练学生主动探究知识能力：计划决策写出制作摇一摇随机出现结果的H5页面的步骤：指导学生完成步骤的拟定小组讨论并拟定制作步骤检查学习准备环节学生的掌握情况计划实施根据计划决策，按要求创建文件指导学生完成任务创建文档检查学生知识掌握情况检查控制根据计划实施要求，小组内互相检查，修改。巡回指导互相检查，讨论，修改巩固知识的掌握总结评价.请小组成员进行作品展示.评价总结.组织各小组进行作品展示.进行总结、分享、改进.各小组选出最优作品进行作品展示.各组互评.完成评价表通过此环节，训练学生表达能力和正确评价自己和他人能力。通过展示、交流，分

15、享自己的喜悦，提高学生对所学知识的理解，激发学生继续学习的动力。教学活动5：制作邀请函口5页面（8课时）教学目标：.能正确叙述学习任务；.运用行为工具-陀螺仪；.运用行为工具-定时器；.运用行为工具-随机数；.设置行为工具点赞功能。教学环节教学内容教师活动学生活动设计意图课堂组织检查学生出勤和精神状态。向孔老夫子行鞠躬礼，师生互相问候。调动学生激情，调节课堂气氛。师生互相问候师生互相问候尊师重教，提醒学生进入上课状态。情境引入引入：XX公司年会，需要工作室制作一个高端大气的邀请函。工作情景描述带领学生快速进入学习状态。倾听任务通过工作情景描述使学生快速进入学习状态。明确任务要求熟悉工作页中的“

16、工作情境描述”，初步了解本任务的内容布置工作任务；1.分组讨论2.叙述工作任务领悟问题的能力；与老师、同学的沟通交流能力学习准备.能正确叙述学习任务；.运用行为工具-陀螺仪；.运用行为工具-定时器；.运用行为工具-随机数；.设置行为工具点赞功能。指导学生查找相关书籍，及利用互联网获取信息，回答学生提出的问题指导学生完成工作页的填写.以小组形式填写完成工作页中的相关内容.动手实践，打开MUGEDA软件进行操作以学生为主体，训练学生主动探究知识能力：计划决策写出制作邀请函H5页面的步骤：指导学生完成步骤的拟定小组讨论并拟定制作步骤检查学习准备环节学生的掌握情况计划实施根据计划决策，按要求创建文件指

17、导学生完成任务创建文档检查学生知识掌握情况检查控制根据计划实施要求，小组内互相检查，修改。巡回指导互相检查，讨论，修改巩固知识的掌握总结评价.请小组成员进行作品展示.评价总结.组织各小组进行作品展示.进行总结、分享、改进.各小组选出最优作品进行作品展示.各组互评.完成评价表通过此环节，训练学生表达能力和正确评价自己和他人能力。通过展示、交流，分享自己的喜悦，提高学生对所学知识的理解，激发学生继续学习的动力。十一、教学评价设计评价标准：每个活动结束进行综合评价，包括关键能力：30分1）具有较强的实践能力、创新能力和创新意识2）能参与小组讨论、相互交流3）积极主动，勤学好问4）能清晰、准确地表达5

18、）能举一反三、自主学习6）具有团结合作精神7）具有良好的审美意识专业能力：70分各活动中完成教学目标的情况十二、教学反思.采用混合式教学，取得较好的效果。充分利用手机互动教学平台、微课等让教学过程和内容信息化，实现高效课堂；线上与线下学习相结合，课前教师提供视频等学习材料供学生自学，并通过手机app在线答疑，将疑难点整理后，在课堂任务实施之前给予有效辅导，帮助学生吸收内化。学生在学习任务的指引下有了更大的自由度，可以根据自身情况更好地安排学习，更有利于不同层次学生的学习，充分体现了以教师为主导、以学生为主体的教学理念。.引入工作室制度保持可持续的激励机制，让学生习惯并爱上团队合作，养成在团队中

19、的责任感；.真实的企业任务，让学生上课如上岗、学习过程即工作过程，创设工作室情境，采用绩效考核激发学生学习积极性，让岗位活动教学化，教学效果发生很大变化；.学生在完成任务时逐步具有创意思维，行业思维，不仅仅是一名技术工，而是创新创业型人才。.存在不足的地方是小组汇报及小组互评环节存在时间难以控制问题，解决办法是安排计时同学提示分享时间。学习任务一制作HTML5小游戏教案一体化课程H5移动页面设计与制作学习任务任务二：制作HTML5小游戏教学时数72上课日期2019.4.26周次12-18教学班级17级计算机班一、学习任务分析利用5个学习活动，循序渐进，逐步增加知识点的学习，以达到熟练掌握利用M

20、UGEDA软件制作HTML5展示动画的能力。二、学习目标完成本学习任务后，学生应当能：.熟练掌握Mugeda软件设置微信功能.运用表单功能进行后台设置.会使用API的应用在动画中添加代码.会使用动画功能和行为功能组合设计游戏三、关键能力观察能力、资料查阅能力、自我学习能力、分析问题与解决问题能力、表达能力、与人沟通能力、团结协作能力四、教学重点.熟练掌握Mugeda软件设置微信功能.运用表单功能进行后台设置.会使用API的应用在动画中添加代码.会使用动画功能和行为功能组合设计游戏五、教学难点.运用表单功能进行后台设置.会使用动画功能和行为功能组合设计游戏六、学生分析.该班学生50%多的同学属于

21、“主动跟随型”，20%属于需要监督型，其余的是偏爱动手型。计算机能力有一定基础。.该班学生对网络营销课程有较强的好奇心和求知欲；喜欢漂亮的图片，视觉性的性格，喜欢追求酷炫新鲜有趣的事物；个性化的需求迫切。.以往学业成绩分布差异分化明显，较差以下和优秀学生比例相当。七、教学方法工学一体化教学模式，行动导向教学法、讲授法、讨论法、引导法、检查法八、教学环境及资源准备在多媒体网络教室进行，主要有以下要求：教学设备：基于Windows10操作系统的计算机，安装有MUGEDA软件、各常用中文输入法。教学场地：学习工作站。学习资料：H5移动页面设计与制作、操作素材；学生分组：每组4-6人，指定组长，负责统

22、筹实施工作任务。九、学习任务的教学组织流程活动1制作招聘广告H5页面活动2制作手速测试类H5小游戏活动3制作手机广告动画H5页面十、教学过程教学活动1：制作招聘广告H5页面（8学时）教学目标:1.能正确叙述学习任务。2.会设置微信头像、昵称定制功能3.会设置定制图片4.会设置录制用户声音功能5.会定义分享信息教学环节教学内容教师活动学生活动设计意图课堂组织检查学生出勤和精神状态。向孔老夫子行鞠躬礼。师生互相问候。调动学生激情，调节课堂气氛。师生互相问候师生互相问候尊师重教。提醒学生进入上课状态。情境引入引入：XXX电子商务有限公司因为业务发展良好，需要新招聘员工数名，希望工作室能制作一个有报名

23、后台的H5。工作情景描述带领学生快速进入学习状态。倾听任务通过工作情景描述使学生快速进入学习状态。明确任务要求熟悉工作页中的“工作情境描述”，初步了解本任务的内容2.布置工作任务；.分组讨论.叙述工作任务领悟问题的能力；与老师、同学的沟通交流能力学习准备.学会正确叙述学习任务。.学会设置微信头像、昵称定制功能.学会设置定制图片.学会设置录制用户声音功能.学会定义分享信息.指导学生查找相关书籍，及利用互联网获取信息，回答学生提出的问题.指导学生完成工作页的填写.以小组形式填写完成工作页中的相关内容.动手实践，打开MUGEDA软件进行操作以学生为主体，训练学生主动探究知识能力计划决策写出制作招聘广

24、告H5页面的步骤：指导学生完成步骤的拟定小组讨论并拟定制作步骤检查学习准备环节学生的掌握情况计划实施根据计划决策，按要求创建文件指导学生完成任务创建文档检查学生知识掌握情况检查控制根据计划实施要求，小组内互相检查，修改。巡回指导互相检查，讨论，修改巩固知识的掌握总结评价.请小组成员进行作品展示.评价总结1.组织各小组进行作品展示2.进行总结、分享、改进.各小组选出最优作品进行作品展示.各组互评.完成评价表通过此环节，训练学生表达能力和正确评价自己和他人能力。通过展示、交流，分享自己的喜悦，提高学生对所学知识的理解，激发学生继续学习的动力。教学活动2：制作手速测试类H5小游戏（12课时）教学目标

25、：.能正确叙述学习任务.会运用表单功能设置输入文字（输入框）.会设置单选框、多选框.会设置表单提交定制文字.会设置动画关联、属性关联、自动关联教学环节教学内容教师活动学生活动设计意图课堂组织检查学生出勤和精神状态。向孔老夫子行鞠躬礼。师生互相问候。调动学生激情，调节课堂气氛。师生互相问候师生互相问候尊师重教，提醒学生进入上课状态。情境引入引入：XXX摄影公司，希望做一个有网络推广游戏，在游戏中植入本公司的业务。工作情景描述带领学生快速进入学习状态。倾听任务通过工作情景描述使学生快速进入学习状态。明确任务要求熟悉工作页中的“工作情境描述”，初步了解本任务的内容布置工作任务；.分组讨论.叙述工作任

26、务领悟问题的能力；与老师、同学的沟通交流能力学习准备.能正确叙述学习任务.会运用表单功能设置输入文字（输入框）.会设置单选框、多选框.会设置表单提交定制文字会设置动画关联、属性关联、自动关联指导学生查找相关书籍，及利用互联网获取信息，回答学生提出的问题指导学生完成工作页的填写.以小组形式填写完成工作页中的相关内容.动手实践，打开MUGEDA软件进行操作以学生为主体，训练学生主动探究知识能力：能够通过自己摸索和同学讨论学习知识。计划决策写出制作手速测试类H5小游戏的步骤：指导学生完成步骤的拟定小组讨论并拟定制作步骤检查学习准备环节学生的掌握情况计划实施根据计划决策，按要求创建文件指导学生完成任务

27、创建文档检查学生知识掌握情况检查控制根据计划实施要求，小组内互相检查，修改。巡回指导互相检查，讨论，修改巩固知识的掌握总结评价.请小组成员进行作品展示.评价总结.组织各小组进行作品展示.进行总结、分享、改进.各小组选出最优作品进行作品展示.各组互评.完成评价表通过此环节，训练学生表达能力和正确评价自己和他人能力。通过展示、交流，分享自己的喜悦，提高学生对所学知识的理解，激发学生继续学习的动力。教学活动3：制作手机广告动画口5页面（12课时）教学目标：.能正确叙述学习任务。.运用API应用在动画中添加代码.会调整API的整体结构.会设置Mugeda对象、scene对象、aObject对象.运用工

28、具API获取Mugeda后台数据教学环节教学内容教师活动学生活动设计意图课堂组织检查学生出勤和精神状态。向孔老夫子行鞠躬礼。师生互相问候。调动学生激情，调节课堂气氛。师生互相问候师生互相问候尊师重教，提醒学生进入上课状态。情境引入引入：工作室在2019年做出了很多优秀的H5项目，并且有些作品获得了很好的口碑效应。甲方XX手机公司提出希望制作H手机广告。工作情景描述带领学生快速进入学习状态。倾听任务通过工作情景描述使学生快速进入学习状态。明确任务要求熟悉工作页中的“工作情境描述”，初步了解本任务的内容布置工作任务；.分组讨论.叙述工作任务领悟问题的能力；与老师、同学的沟通交流能力学习准备.能正确叙述学习任务。.运用API应用在动画中添加代码.会调整API的整体结构.会设置Mugeda对象、scene对象、aObject对象.运用工具API获取Mugeda后台数据指导学生查找相关书籍，及利用互联网获取信息，回答学生提出的问题指导学生完成工作页的填写.以小组形式填写完成工作页中的相关内容.动手实践，打开MUGE