下载文档原格式
《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页面动画。
ih5课程设计一、教学目标本课程的学习目标包括知识目标、技能目标和情感态度价值观目标。
知识目标要求学生掌握HTML5的基本概念、标签和属性，了解HTML5的新特性及其在现代网页设计中的应用。
技能目标要求学生能够运用HTML5编写简单的网页，掌握HTML5多媒体和交互特性的使用，提高页面表现力和用户体验。
情感态度价值观目标培养学生对新技术的敏感度和学习热情，培养创新意识和团队协作精神。
二、教学内容根据课程目标，选择和教学内容，确保内容的科学性和系统性。
制定详细的教学大纲，明确教学内容的安排和进度。
本课程的教学内容主要包括HTML5的基本概念、标签和属性，HTML5的新特性及其在现代网页设计中的应用，HTML5多媒体和交互特性的使用，HTML5 canvas绘图等。
三、教学方法选择合适的教学方法，如讲授法、讨论法、案例分析法、实验法等。
通过教学方法应多样化，以激发学生的学习兴趣和主动性。
在教学过程中，将结合理论讲授和实践操作，让学生在动手实践中掌握HTML5的知识和技能。
同时，课堂讨论和案例分析，引导学生思考和解决实际问题，提高学生的创新能力和团队协作能力。
四、教学资源选择和准备适当的教学资源，包括教材、参考书、多媒体资料、实验设备等。
教学资源应该能够支持教学内容和教学方法的实施，丰富学生的学习体验。
在教学过程中，将运用多媒体课件进行讲解，提供丰富的HTML5实例和案例供学生参考和分析。
同时，安排实验室实践环节，让学生亲自动手编写HTML5代码，提高实际操作能力。
五、教学评估设计合理的评估方式，包括平时表现、作业、考试等，评估方式应客观、公正，能够全面反映学生的学习成果。
平时表现评估将根据学生在课堂上的参与度、提问回答、团队协作等情况进行。
作业评估将根据学生提交的HTML5代码、实验报告、案例分析等来进行。
考试评估将设置选择题、填空题、简答题和综合应用题，全面测试学生对HTML5知识的掌握和应用能力。
《H5页面设计与制作（全彩慕课版）》教学大纲课程介绍：本书全面系统地介绍了H5技术的相关知识点和基本制作方法，包括H5初识、H5的设计与制作、互动游戏H5制作、活动抽奖H5制作、测试问答H5制作、滑动翻页H5制作、长页滑动H5制作、画中画H5制作、3D/全景H5制作以及视频动画H5制作等内容。
全书内容介绍均以课堂案例为主线，每个案例都有详细的操作步骤及实际应用环境展示，学生通过实际操作可以快速熟悉H5技术并领会设计思路。
每章的软件功能解析部分使学生能够深入学习H5相关的软件功能和制作特色。
主要章节的最后还安排了课堂练习和课后习题，可以拓展学生对H5设计实际应用能力。
本书可作为高职高专院校数字媒体艺术类专业课程的教材，也可供初学者自学参考。
培训目标：了解初识H5掌握H5的设计与制作掌握互动游戏H5制作的方法掌握活动抽奖H5制作的方法掌握测试问答H5制作的方法掌握滑动翻页H5制作的方法掌握长页滑动H5制作的方法掌握画中画H5制作的方法掌握3D/全景H5制作的方法掌握视频动画H5制作的方法学习时间：64学时。
培训内容：一、H5初识1、了解H5的定义。
2、了解H5的发展。
3、了解H5的特点。
4、了解H5的应用。
5、了解H5的类型。
二、H5的设计与制作1、熟练掌握H5设计与制作的项目流程。
2、了解H5设计与制作的常用软件。
3、掌握设计与制作H5的基本规范。
4、掌握H5的注意事项。
5、熟练掌握H5的创意实现方法。
三、互动游戏H5制作1、熟练掌握媒体娱乐行业消消乐H5制作方法。
四、活动抽奖H5制作1、熟练掌握电子商务行业九宫格H5制作方法。
五、测试问答H5制作1、熟练掌握IT互联网行业节日答题H5制作方法。
六、滑动翻页H5制作1、熟练掌握文化传媒行业企业招聘H5制作方法。
七、长页滑动H5制作1、熟练掌握食品餐饮行业产品介绍H5制作方法。
八、画中画H5制作1、熟练掌握IT互联网行业活动邀请H5制作方法。
九、3D/全景H5制作1、熟练掌握金融理财行业节日祝福H5制作方法。
H5页面设计与制作教学大纲《H5页面设计与制作（全彩慕课版）》教学大纲课程介绍：本书全面系统地介绍了H5技术的相关知识点和基本制作方法，包括H5初识、H5的设计与制作、互动游戏H5制作、活动抽奖H5制作、测试问答H5制作、滑动翻页H5制作、长页滑动H5制作、画中画H5制作、3D/全景H5制作以及视频动画H5制作等内容。
全书内容介绍均以课堂案例为主线，每个案例都有详细的操作步骤及实际应用环境展示，学生通过实际操作可以快速熟悉H5技术并领会设计思路。
每章的软件功能解析部分使学生能够深入学习H5相关的软件功能和制作特色。
主要章节的最后还安排了课堂练习和课后习题，可以拓展学生对H5设计实际应用能力。
本书可作为高职高专院校数字媒体艺术类专业课程的教材，也可供初学者自学参考。
培训目标：了解初识H5掌握H5的设计与制作掌握互动游戏H5制作的方法掌握活动抽奖H5制作的方法掌握测试问答H5制作的方法掌握滑动翻页H5制作的方法掌握长页滑动H5制作的方法掌握画中画H5制作的方法掌握3D/全景H5制作的方法掌握视频动画H5制作的方法学习时间：64学时。
培训内容：一、H5初识1、了解H5的定义。
2、了解H5的发展。
3、了解H5的特点。
4、了解H5的应用。
5、了解H5的类型。
二、H5的设计与制作1、熟练掌握H5设计与制作的项目流程。
2、了解H5设计与制作的常用软件。
3、掌握设计与制作H5的基本规范。
4、掌握H5的注意事项。
5、熟练掌握H5的创意实现方法。
三、互动游戏H5制作1、熟练掌握媒体娱乐行业消消乐H5制作方法。
四、活动抽奖H5制作1、熟练掌握电子商务行业九宫格H5制作方法。
五、测试问答H5制作1、熟练掌握IT互联网行业节日答题H5制作方法。
六、滑动翻页H5制作1、熟练掌握文化传媒行业企业招聘H5制作方法。
七、长页滑动H5制作1、熟练掌握食品餐饮行业产品介绍H5制作方法。
八、画中画H5制作1、熟练掌握IT互联网行业活动邀请H5制作方法。
《H5页面设计（Mugeda 版）》教学教案第1章1.2.3 条理性原则1.2.4 切身性原则1.2.5 创新性原则1.3 H5 页面的设计规范1.3.1 页面尺寸1.3.2 页面适配1.3.3 文件大小1.4 H5 页面的设计流程1.4.1 明确设计目的1.4.2 策划内容1.4.3 搜集素材1.4.4 进行页面设计1.4.5 进行交互设计1.4.6 生成和发布H5综合训练——分析《方寸之间看徽州》拼图H5 游戏小结1.了解H5的基础知识。
2.掌握如何学好H5设计。
3.掌握H5的设计原则与制作流程课后练习（1）如何理解H5 与H5 页面，二者有什么区别和联系？（2）列举H5页面的设计原则，并举例分析某个H5页面设计对这些原则的遵循情况。
（3）简要说明H5 页面的不同设计风格。
（4）鉴赏下图所示的草莓音乐节H5页面，分析其设计风格并对该风格的特点进行介绍。
（5）鉴赏下图所示的音乐公益H5页面，分析其风格，并简述其遵循的设计原则。
第2章2.3.2 模板管理2.3.3 素材管理2.4 Mugeda 中的H5 编辑器界面2.4.1 菜单栏2.4.2 工具栏2.4.3 “时间线”面板2.4.4 工具箱2.4.5 “页面编辑”面板2.4.6 页面编辑区2.4.7 “属性”面板综合训练——使用模板制作出游季H5 页面小结1.掌握Mugeda的基础知识，以及在Mugeda平台中新建和管理页面、素材。
2.掌握Mugeda中的H5编辑界面的操作方法。
课后练习（1）简述新建H5 页面的方法。
（2）简述模板的使用方法。
（3）简述Mugeda 的H5 编辑器界面的组成部分。
（4）在Mugeda 中新建一个名为“新春贺喜”的H5 页面，保存该页面，然后在Mugeda 中新建一个名为“新年”的文件夹，将“新春贺喜”H5 页面移动到“新年”文件夹中。
（5）应用Mugeda中自带的“测试题”模板，编辑模板中的文字，然后发布编辑后的模板。
《H5快速制作网页》教学设计一、学习内容分析《H5快速制作网页》是苏教版《初中信息技术》8年级第3章《主题网站设计与制作》第2节《制作网页》中第1课时的内容。
H5是指第5代HTML标记语言，其搭建的站点可方便地应用于PC、Android、iOS等多种平台，它为互联网内容的呈现提供了一种全新的框架和平台，包括免插件的音视频、图像、动画、本地存储以及更多酷炫的功能。
通俗地说，H5是一种创建网页的方式，用H5创建的网页以文字、图片、动画、声音等相结合的富媒体出现，页面图文并茂、生动活泼、传达方便、易于推广。
二、学习者分析本节课的学习对象是八年级的学生，处于这一年龄段的学生，思维活跃，具备一定的理解能力和较强的自学能力。
通过前面的学习，学生已熟练使用WPS、Photoshop等软件，也掌握了规划设计主题网站的方法。
本节课以iH5软件工具为平台，学习用H5快速制作网页。
然而学生从未接触过iH5，对于陌生软件的学习，有些畏难情绪，觉得无从下手。
但是在日常生活中，他们经常能接触到各种各样的手机H5网页，如企业宣传、个人简历、邀请函、纪念册等，这些H5网页给大家带来了全新的体验，技术本身带来的新奇感让学生心生向往。
三、学习目标知识与技能：能列举H5网页的特点；掌握在iH5软件中添加和编辑文字、图片、动画等元素的方法以及设置对象属性的方法，理解舞台、页面、对象之间的层级关系。
过程与方法：通过制作校园文化艺术节邀请函，经历制作H5网页的基本过程。
情感态度及价值观：感悟网页制作并非难事，软件使用有共通之处。
四、教学过程（一）创设情境，初认H5以艺载德、以艺促智，一年一度的校园文化艺术节又开始了，同学们踊跃报名，比拼才艺。
八年级将举行以“多彩校园，闪亮你我”为主题的汇报演出，充分展示八年级同学的青春活力和精神面貌。
思考：本次演出将要邀请家长参加，你会选择什么样的方式来做出邀请呢？（口头传达、短信、纸质邀请函等）活动1：体验“校园文化艺术节邀请函H5”，初认H5。
幼儿园H5制作教案一、教学目标：1.了解H5制作的基本概念和思路2.学会使用H5提供的模板、工具3.学会基础HTML语言、CSS样式的运用4.完成一个简单的智能互动H5小游戏二、教学内容：1.H5制作基本概念介绍2.H5制作的工具和模板3.HTML语言的基础知识4.CSS样式的基础知识5.智能互动H5小游戏的制作三、教学过程：1. H5制作基本概念介绍（10分钟）教师介绍H5制作的概念和意义，鼓励学生创新和发挥自己的想象力。
2.使用H5提供的模板、工具（20分钟）带领学生了解H5提供的各种功能、模板和工具，如何使用它们，在使用中熟悉和掌握。
3.HTML语言基础知识（30分钟）讲解HTML语言的基础知识，包括标记、元素、属性等等，同时通过实例演示如何使用。
4.CSS样式基础知识（30分钟）讲解CSS样式的基础知识，包括颜色、背景、字体、大小等等，同时通过实例演示如何使用。
5.智能互动H5小游戏的制作（30分钟）学生们开发自己的小游戏，例如填字游戏、连线游戏等等，着重强调设计和交互的重要性，让他们在制作中体验到快乐和成就感。
6.总结（10分钟）让学生总结和反思这次课程，以及这个小游戏的制作过程和收获。
同时鼓励他们将所学习的知识运用于其他领域的创新中。
四、教学评价：1.教师实时点评学生的表现，及时纠正错误的思维方式和技术问题。
2.让学生分享自己的小游戏，展示成果。
3.布置小作业，让学生在家里完成H5小游戏的开发，以此来检测他们的掌握程度和运用能力。
五、教学资源：H5制作视频2.H5在线制作平台3.HTML和CSS基础教程4.H5互动小游戏范例六、教学参考：1.HTML & CSS设计与构建网站，(美)乌德格鲁夫异构图书馆2.W3C标准HTML与CSS经典教程，有米出版社3.H5互动小游戏制作，对外经济贸易大学出版社以上为”幼儿园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）通过课堂练习和课
后习题提高学生的实际应用能力。
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讲
了解IT互联网行业产品介绍H5的项目策划。
掌握IT互联网行业产品介绍H5的交互设计。
作业
课堂练习——设计服务公司招聘H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作文化传媒行业企业招聘H5，使用Photoshop软件制作首页、公司简介、程序猿、设计狮和新媒体等页面的视觉设计，使用凡科微传单趣味功能中画中画功能制作H5页面动画。
课后习题——食品餐饮行业产品营销H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作食品餐饮行业产品营销H5，使用Photoshop软件制作首页、优惠活动、优惠卷、和优惠产品等页面的视觉设计，使用凡科微传单趣味功能中画中画功能制作H5页面动画。
第9讲
了解金融理财行业节日祝福H5的项目策划。
掌握金融理财行业节日祝福H5的交互设计。
小结1、了解金融理财行业节日祝福H5的项目策划。
2、掌握金融理财行业节日祝福H5的交互设计。
作业
课堂练习——电子商务行业活动促销H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动为传单制作电子商务行业活动促销H5，使用Photoshop软件制作首屏、先领劵、大礼包、送亲友、送长辈、关注我们等页面的视觉设计，使用凡科微传单的趣味中的球体仪功能制作最终效果。
课后习题——家居装修行业产品推广H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动为传单制作家居装修行业产品推广H5，使用Photoshop软件制作全景页面和弹窗页面的视觉设计，使用凡科微传单的趣味中的全景功能功能制作最终效果。
第10讲
了解文化传媒行业活动推广H5的项目策划。
掌握文化传媒行业活动推广H5的交互设计。
课后习题——电子数码行业品牌推广H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作电子数码行业品牌推广H5，使用Photoshop软件制作页面的视觉设计，使用iH5的动效、事件、横幅功能制作最终效果。
