《H5页面设计与制作(全彩慕课版)》配套教学教案
《H5移动页面设计与制作》教案
尊师重教。提醒学生进入上课状态。
情境引入
引入：
清明节前夕，工作室接到一个粽子的产品推广工作单，作为工作室负责人的你希望制作一个简单的H5进行推广该产品。
工作情景描述带领学生快速进入学习状态。
倾听任务
通过工作情景描述使学生快速进入学习状态。
明确任务要求
熟悉工作页中的“工作情境描述”，初步了解本任务的内容
4.运用行为工具设置定时器。
教学环节
教学内容
教师活动
学生活动
设计意图
课堂组织
检查学生出勤和精神状态。
向孔老夫子行鞠躬礼。师生互相问候。
调动学生激情，调节课堂气氛。
师生互相问候
师生互相问候
尊师重教。提醒学生进入上课状态。
情境引入
引入：
XX公司周年庆活动，希望制作一个抽奖性质的H5,要求活动新颖互动性强。
课后反思
真实的企业任务，让学生上课如上岗、学习过程即工作过程，创设工作室情境，采用绩效考核激发学生学习积极性，让岗位活动教学化，教学效果发生很大变化；
“学习任务一 制作HTML5展示动画教案
一体化课程
H5移动页面设计与制作
学习任务
任务一：制作HTML5展示动画
教学时数
72
上课日期
2019.2.26
周次
指导学生完成任务
创建文档
检查学生知识掌握情况
检查控制
根据计划实施要求，小组内互相检查，修改。
巡回指导
互相检查，讨论，修改
巩固知识的掌握
总结评价
1.请小组成员进行作品展示
2.评价总结
1.组织各小组进行作品展示
2.进行总结、分享、改进
1.各小组选出最优作品进行作品展示
《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页面设计与制作教学教案
《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页面设计与制作》课件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级计算机班
《H5移动页面设计与制作》一体化课标准
“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页面设计与制作教学大纲
《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页面设计与制作》第6章
6.2.3 使用H5+视频提升内容的展现效果
28
视频也是H5页面中常用的动 态展现方式。可直接在H5页面中 插入视频，并对视频进行设计， 以提升内容的展现效果。
6.2.4 使用H5+多屏互动提升营销的娱乐性
29
多屏互动指用户在多个屏幕上体验活动，在每个屏幕上的操作都会同时反应到其他屏幕上， 一般以双屏互动为主。
6.2.5 使用H5+GIF动画让画面更生动
30
动画是H5页面中不可或缺的一部分，出色的动画能让H5页面更加生动。GIF动画是一种 文件量小、可压缩、制作成本低的动效类型，多用于适用于各种操作系统。
6.2.6 设计案例 制作快闪广告H5页面
43
项目目的
运用本章所学知识，使用 Photoshop制作元旦GIF 动画。在制作的GIF动画 中，不但要将文字以动画 的形式展现，还要制作动 态的老鼠图像，丰富动画 效果。
项目：制作元旦GIF动画
44
制作思路
打开“元旦快乐动画.psd”素材文件（配套资源:\素材\第6章\元旦快乐动画.psd）。 选择【窗口】/【时间轴】命令，在工作界面底部打开“时间轴”面板，单击“时间轴”面
45
使用相同的方法将“乐”图层调整至“3:00f”处。
在时间轴上选择“旦”图层，单击鼠标右键，在弹出的快捷菜单中选择“旋转”选项，使 用相同的方法为其他图层设置动效。
选择最下侧的老鼠图层，调整老鼠图层的动效位置，使用相同的方法调整其他老鼠图层位
置，完成后，在“时间轴”面板底部单击
按钮，可播放设置的动画效果。
十三五高等院校 数学艺术精品课程规划教材
项目6 H5页面的创意设计
目录 Content
6.1 H5页面的交互创意设计 6.2 H5页面的动态创意设计
《H5页面设计与制作》第4章
4.2.1 认识H5页面介绍中的文字及字体
37
衬线字体
衬线字体容易识别，它强调每个字母笔画的 开始和结束，因此易读性比较高。在整文阅读的 情况下，适合使用衬线字体进行排版，易于换行 阅读的识别性，避免发生行间的阅读错误，如 Didot 、 Bodoni 、 Century 、 Computer Modern等。
打开背景素材
添加Logo
绘制路径
4.2.4 设计案例 制作招聘H5页面文字
45
设置字符参数
输入文字
4.2.4 设计案例 制作招聘H5页面文字
46
绘制矩形
输入文字
复制“秋”文字
4.2.4 设计案例 制作招聘H5页面文字
47
设置斜面和浮雕参数
设置内发光参数
4.2.4 设计案例 制作招聘H5页面文字
51
绘制文本框
输入正文文字
调整字体大小
调整字体大小
4.2.5 设计案例 制作招聘H5页面长图文字
52
绘制文本框
输入正文文字
设置文字样式
4.2.5 设计案例 制作招聘H5页面长图文字
53
完成后的效果
目录 Content
4.1 H5页面的图片设计 4.2 H5页面的文字设计 4.3 H5页面的音效设计
设计人员在获取音效素材后，就要进行音效的选择与添加。
符合H5页面主题和内容
1
适当加入过渡音效效果
4
2
尽量少用歌曲作为音效
3
音效的时间长度要适中
4.3.4 设计案例 使用Audition制作音效
58
Audition是一款多音轨编辑工具，支持128 条音轨、多种音频格式和特效，可以很方便地对 音频文件进行修改、合并等操作。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《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制作
使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作食品餐饮行业产品营销H5，使用Photoshop软件制作首页、优惠活动、优惠卷、和优惠产品等页面的视觉设计，
使用凡科微传单趣味功能中画中画功能制作H5页面动画。
第9讲
课堂练习——电子商务行业活动促销H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动为传单制作电子商务行业活动促销H5，使用Photoshop软件制作首屏、先领劵、大礼包、送亲友、送长辈、关注我们等页面的视觉设计，使用凡科微传单的趣味中的球体仪功能制作最终效果。
课后习题——家居装修行业产品推广H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动为传单制作家居装修行业产品推广
H5，使用Photoshop软件制作全景页面和弹窗页面的视觉设计，使用凡科微传单的趣味中的全景功能功能制作最终效果。
第10讲
课堂练习——文化传媒行业活动推广H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作文化传媒行业活动推广H5，使用Photoshop软件制作页面的视觉效果，使用iH5的动效、事件、横幅功能制作最终效果。
课后习题——电子数码行业品牌推广H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作电子数码行业品牌推广H5，使用Photoshop软件制作页面的视觉设计，使用iH5的动效、事件、横幅功能制作最终效果。