H5页面设计与制作教学教案
《H5移动页面设计与制作》教案
尊师重教。提醒学生进入上课状态。
情境引入
引入：
清明节前夕，工作室接到一个粽子的产品推广工作单，作为工作室负责人的你希望制作一个简单的H5进行推广该产品。
工作情景描述带领学生快速进入学习状态。
倾听任务
通过工作情景描述使学生快速进入学习状态。
明确任务要求
熟悉工作页中的“工作情境描述”，初步了解本任务的内容
4.运用行为工具设置定时器。
教学环节
教学内容
教师活动
学生活动
设计意图
课堂组织
检查学生出勤和精神状态。
向孔老夫子行鞠躬礼。师生互相问候。
调动学生激情，调节课堂气氛。
师生互相问候
师生互相问候
尊师重教。提醒学生进入上课状态。
情境引入
引入：
XX公司周年庆活动，希望制作一个抽奖性质的H5,要求活动新颖互动性强。
课后反思
真实的企业任务，让学生上课如上岗、学习过程即工作过程，创设工作室情境，采用绩效考核激发学生学习积极性，让岗位活动教学化，教学效果发生很大变化；
“学习任务一 制作HTML5展示动画教案
一体化课程
H5移动页面设计与制作
学习任务
任务一：制作HTML5展示动画
教学时数
72
上课日期
2019.2.26
周次
指导学生完成任务
创建文档
检查学生知识掌握情况
检查控制
根据计划实施要求，小组内互相检查，修改。
巡回指导
互相检查，讨论，修改
巩固知识的掌握
总结评价
1.请小组成员进行作品展示
2.评价总结
1.组织各小组进行作品展示
2.进行总结、分享、改进
1.各小组选出最优作品进行作品展示
《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
腾讯：2016腾讯WE大会·无 境，用于会议邀请
奥美：稀有动物悬赏 令，用于企业招聘
1.5 H5的类型
营销宣传类 知识新闻类 游戏互动类 网站应用类
1.5 H5的类型
1. 营销宣传类 营销宣传类H5是最常见的，它通常都是为产品、品牌以及活动做宣 传推广而设计的。
招商银行APP：来！坐！
腾讯：Next Idea x 故宫
宝马：全新BMW M2 即将上市
1.5 H5的类型
2. 知识新闻类 知识新闻类H5同样比较普遍，它通常都是根据社会重大事件进行宣 传新闻、普及知识的。
澎湃新闻：垃圾分类可视化 查询手册
网易新闻：自白
腾讯新闻×WWF×微公益： 腾讯新闻
1.5 H5的类型
3. 游戏互动类 游戏互动类H5一般比较简单，在微信中点开就可以直接玩，不用安 装卸载，通常多为娱乐或引流而制作。
花瓣
UI中国
H5初识
随着移动互联网的兴起，H5逐渐成为了互 联网传播领域的一个重要传播形式，因此学习和 掌握H5成为了广大互联网从业人员的重要技能 之一。本章对H5的定义、发展、特点、应用以 及类型进行系统讲解。通过对本章的学习，读者 可以对H5有一个宏观的认识，有助于高效便利 地进行后续的H5设计制作。
学习目标
网易新闻×哒哒×999皮炎平： 守护你的幸运足球
网易新闻×哒哒：睡姿大比拼 小米：我在宫里遇到一件 奇怪的事
1.5 H5的类型
4. 网站应用类 网站应用类H5在产品设计领域中常被称为“H5网站”，可以直接 在浏览器中观看和操作，不像App那样需要安装，它通常带有大量信息 及App中的部分功能。
站酷
腾讯：穿越未来来看你
贝壳租房×奇葩说： 100年后你将住在哪个奇葩星球
《H5页面设计与制作》课件3
学习目标
了解媒体娱乐行业消消乐H5的项目策划 掌握媒体娱乐行业消消乐H5的交互设计
3.1 课堂案例——媒体娱乐行业消消乐H5制作
项目策划 交互设计 视觉设计 制作发布
3.1.1 项目策划
King Game Studios是一家游戏工作室，此次想借助H5在网络 上获取一定的关注度。在策划上，结合了工作室的游戏性质，运用 H5制作工具中的模版设计一款消除类益智H5小游戏。旨在通过游戏， 刺激用户了解甚至关注到King Game Studios。
互动游戏H5制作
互动游戏H5由于具备简单有趣及交互性强 的特点，因此给用户带来了一定的感官刺激，并 且间接地将企业的品牌进行了宣传。本章从实战 角度对互动游戏H5的项目策划、交互设计、视 觉设计以及制作开发进行系统讲解与演练。通过 对本章的学习，读者可以对互动游戏H5有一个 基本的认识，并快速掌握设计制作常用互动游戏 H5的方法。
效果图
3.2 课堂练习——食品餐饮行业翻牌子H5制作
注册登录易企秀官网，查找符合要求的互动H5模板，调整相关 的文字内容。
效果图
3.3 课后习题——健康医疗行业打地鼠H5制作
注册登录易企秀官网，查找符合要求的互动H5模板，调整相关前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
媒体娱乐行业消消乐H5原型图
3.1.3 视觉设计
本次H5由于采用的是制作工具中的模版，因此可以直接到制作， 不需要进行专门的视觉设计。
3.1.4 制作发布
使用谷歌浏览器注册登录易企秀官网，使用互动H5免费模板制 作媒体娱乐行业消消乐，并修改活动名称、分享描述以及关注的二维 码。
《H5移动页面设计与制作》教案
写出创建H5的步骤：
指导学生完成步骤的拟定
小组讨论并拟定制作步骤
检查学习准备环节学生的掌握情况
计划实施
根据计划决策，按要求创建文件
指导学生完成任务
创建文档
检查学生知识掌握情况
检查控制
根据计划实施要求，小组内互相检查，修改。
巡回指导
课后反思
真实的企业任务，让学生上课如上岗、学习过程即工作过程，创设工作室情境，采用绩效考核激发学生学习积极性，让岗位活动教学化，教学效果发生很大变化；
“学习任务一 制作HTML5展示动画教案
一体化课程
H5移动页面设计与制作
学习任务
任务一：制作HTML5展示动画
教学时数
72
上课日期
2019.2.26
周次
师生互相问候
师生互相问候
尊师重教。提醒学生进入上课状态。
课程导入
展示课件，引导学生了解H5移动页面应用
引导学生了解办公软件应用
认真倾听，理解
让学生了解办公软件应用。
课程介绍
介绍本课程的总体安排，上课方式，明确教学目标
介绍本课程的总体安排，上课方式，明确教学目标
聆听老师的介绍
让学生了解课程的总体安排，上课方式，明确教学目标。
1.布置工作任务；
1.分组讨论
2.叙述工作任务
领悟问题的能力；与老师、同学的沟通交流片素材
2.能操作MUGRDA软件新建、保存、打开和关闭。
3.能正确完成属性面板设置。
4.会设置H5快速生成模板。
5.会设置菜单栏、快捷工具栏。
1.指导学生查找相关书籍，及利用互联网获取信息，回答学生提出的问题
2-11
教学班级
17级计算机班
ih5课程设计
ih5课程设计一、教学目标本课程的学习目标包括知识目标、技能目标和情感态度价值观目标。
知识目标要求学生掌握HTML5的基本概念、标签和属性，了解HTML5的新特性及其在现代网页设计中的应用。
技能目标要求学生能够运用HTML5编写简单的网页，掌握HTML5多媒体和交互特性的使用，提高页面表现力和用户体验。
情感态度价值观目标培养学生对新技术的敏感度和学习热情，培养创新意识和团队协作精神。
二、教学内容根据课程目标，选择和教学内容，确保内容的科学性和系统性。
制定详细的教学大纲，明确教学内容的安排和进度。
本课程的教学内容主要包括HTML5的基本概念、标签和属性，HTML5的新特性及其在现代网页设计中的应用，HTML5多媒体和交互特性的使用，HTML5 canvas绘图等。
三、教学方法选择合适的教学方法，如讲授法、讨论法、案例分析法、实验法等。
通过教学方法应多样化，以激发学生的学习兴趣和主动性。
在教学过程中，将结合理论讲授和实践操作，让学生在动手实践中掌握HTML5的知识和技能。
同时，课堂讨论和案例分析，引导学生思考和解决实际问题，提高学生的创新能力和团队协作能力。
四、教学资源选择和准备适当的教学资源，包括教材、参考书、多媒体资料、实验设备等。
教学资源应该能够支持教学内容和教学方法的实施，丰富学生的学习体验。
在教学过程中，将运用多媒体课件进行讲解，提供丰富的HTML5实例和案例供学生参考和分析。
同时，安排实验室实践环节，让学生亲自动手编写HTML5代码，提高实际操作能力。
五、教学评估设计合理的评估方式，包括平时表现、作业、考试等，评估方式应客观、公正，能够全面反映学生的学习成果。
平时表现评估将根据学生在课堂上的参与度、提问回答、团队协作等情况进行。
作业评估将根据学生提交的HTML5代码、实验报告、案例分析等来进行。
考试评估将设置选择题、填空题、简答题和综合应用题，全面测试学生对HTML5知识的掌握和应用能力。
《H5页面设计与制作》课件2
从0到1开始打造一款H5，这是策划、交互 设计、视觉设计以及制作开发相互配合的综合过 程。本章对H5设计与制作的项目流程、常用软 件、基本规范、注意事项以及创意方法进行系统 讲解。通过对本章的学习，读者可以对H5的整 体设计与制作有一个基本的认识，有助于高效便 利地进行后续的H5设计和制作。
2.5.3 H5的常用创意设计风格
H5的常用创意设计风格可以总结为极简冷淡、扁平图形、摄影 图像、拼贴叠加、怀旧复古、现代科技、仿真写实以及手绘插画8种。
2.5.4 H5的动效设计运用
H5的动效设计运用可以通过转场动效、内容动效、功能动效以 及辅助动效这4个方面进行介绍。
2.5.5 H5的音效设计方法
H5音效设计可以分为背景音效以及辅助音效。 1. 背景音效 H5常见的背景音效有3类，分别是功能音效、拟声音效以及环境 音效。 2. 辅助音效 H5常见的辅助音效有3类，分别是功能音效、拟声音效以及环境 音效。
2.5.6 H5的常用测试方法
在H5正式上线之前，都会进行几次测试以收获反馈及效果。常 用的测试方法微信有小范围测试以及微信公众号测试。
2.5 H5的创意实现
H5的常用策划方法 H5的常用交互方法 H5的创意设计风格 H5的动效设计运用 H5的音效设计方法 H5的常用测试方法 H5的常规数据分析
2.5 H5的创意实现
H5的创意实现可以从内容策划、交互交互、视觉设计、动效设 计、音效设计、测试方法以及数据分析这7个方面进行寻找。
百分比。对于需要进行跳转外部链接的H5，用户转化率是非常 重要的数据。
1. 微信小范围测试 微信小范围测试是指将H5通过单独发送好友，转发朋友圈以及 发送至微信群进行的测试。 2. 微信公众号测试 微信公众号测试是指如果我们有自己的公众号，可以将做的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制作方法。
九、3D/全景H5制作1、熟练掌握金融理财行业节日祝福H5制作方法。
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 版)教学教案.doc
《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页面设计与制作》课件5
学习目标
了解文化传媒行业知识分享H5的项目策划 掌握文化传媒行业知识分享H5的交互设计
5.1 课堂案例——IT互联网行业节日答题H5制作
项目策划 交互设计 视觉设计 制作发布
5.1.1 项目策划
知学在五一劳动节来临之际，希望推出一款节日祝福及宣传自身 品牌的H5。在策划上，沿用了5.2的经验，结合了H5制作工具的节日 文化答题模板，既起到了节日祝福同时又可以很好的宣传公司的品牌。
效果图
5.2 课堂练习——IT互联网行业脑力测试H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动免费模板制作IT互 联网行业脑力测试H5，修改并替换首页中的素材、调整奖项设置以 及高级设置。
效果图
5.3 课后习题——文化传媒行业知识分享H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动免费模板制作文化 传媒行业知识分享H5，修改并替换首页中的素材、调整奖项设置以 及高级设置。
测试问答H5制作
测试问答H5因为够能激起用户参与分享的 欲望，因此它一直都是众多H5中最受欢迎的一 类。本章从实战角度对测试问答H5的项目策划、 交互设计、视觉设计以及制作开发进行系统讲解 与演练。通过对本章的学习，读者可以对测试问 答H5有一个基本的认识，并快速掌握设计制作 常用测试问答H5的方法。
5.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
5.1.3 视觉设计
使用谷歌浏览器登录凡科官网，使用凡科互动免费模板制作IT互 联网行业节日答题H5，修改并替换首页中的素材、替换中奖页面素 材、调整奖项设置以及高级设置。
5.1.4 制作发布
《H5页面设计与制作》课件10
学习目标
了解文化传媒行业活动推广H5的项目策划 掌握文化传媒行业活动推广H5的交互设计
10.1 课堂案例——旅游出行行业活动推广H5制作
项目策划 交互设计 视觉设计 制作发布
10.1.1 项目策划
旅行社在春节推出了新加坡七日游旅行套餐，现在想策划一款 H5来推广该旅行套餐。在内容上，首先模拟锁屏界面，界面上提示 收到微信消息，点击消息解锁进入模拟的微信聊天界面，亲戚分享旅 行心情并让我浏览其朋友圈，接着场景转换到模拟的朋友圈界面，开 始浏览别人分享的各处景观。最后的页面，点击按钮可以跳转到新加 坡七日游的链接了解活动。针对视觉，模拟了锁屏、微信聊天和朋友 圈界面，加强了代入感。针对制作，微信聊天以及朋友圈观看会以视 频的形式展现，同时浏览朋友圈的视频中也嵌入了很多小视频，使整 个H5非常生动。
10.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
10.1.3 视觉设计
使用谷歌浏览器登录iH5官网，使用iH5制作旅游出行行业产品 介绍H5，使用Photoshop软件制作页面的视觉设计，使用iH5的动 效、事件、横幅制作最终效果。
10.1.4 制作发布
效果图10.2 课堂练习——化传媒行业活动推广H5制作使用谷歌浏览器登录iH5官网，使用iH5制作文化传媒行业活动 推广H5，使用Photoshop软件制作页面的视觉效果，使用iH5的动 效、事件、横幅功能制作最终效果。
效果图
10.3 课后习题——电子数码行业品牌推广H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作电子数码行业品牌 推广H5，使用Photoshop软件制作页面的视觉设计，使用iH5的动 效、事件、横幅功能制作最终效果。
《H5快速制作网页》教学设计
《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页面设计与制作》课件4
4.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
4.1.3 视觉设计
使用谷歌浏览器注册登录凡科官网，使用凡科互动免费模板制作 电子商务行业九宫格，修改并替换首页中的素材、替换中奖页面素材、 调整奖项设置以及高级设置。
4.1.4 制作发布
效果图
活动抽奖H5制作
活动抽奖H5通常可以在短时间内快速传播， 吸引较多的流量，因此常用于引流推广活动。本 章从实战角度对活动抽奖H5的项目策划、交互 设计、视觉设计以及制作开发进行系统讲解与演 练。通过对本章的学习，读者可以对活动抽奖 H5有一个基本的认识，并快速掌握设计制作常 用活动抽奖H5的方法。
4.2 课堂练习——金融理财行业摇一摇H5制作
使用谷歌浏览器注册登录凡科官网，使用凡科互动免费模板制作 金融理财行业摇一摇H5，修改并替换首页中的素材、替换中/未中奖 页面素材、调整奖项设置以及高级设置。
效果图
4.3 课后习题——文化传媒行业刮刮乐H5制作
使用谷歌浏览器注册登录凡科官网，使用凡科互动免费模板制作 文化传媒行业刮刮乐H5，修改并替换首页中的素材、中/未中奖页面 素材、调整奖项设置以及高级设置。
效果图
学习目标
了解电子商务行业九宫格H5的项目策划 掌握电子商务行业九宫格H5的交互设计
4.1 课堂案例——电子商务行业九宫格H5制作
项目策划 交互设计 视觉设计 制作发布
4.1.1 项目策划
Shopping是一款专业的综合类购物平台，此次想在618电商大 促来临之际，推出一个活动抽奖H5刺激用户进行商品购宫格抽奖模板，分别设置一、二、三等奖，并限制用户1天3次的抽 奖机会，进一步刺激用户进行抽奖。
幼儿园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制作教案“，仅供参考，可适当调整。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《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的动效、事件、横幅功能制作最终效果。