《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页面设计与制作》课件7

长页滑动H5制作
长页滑动H5的本质是一镜到底展示信息内容，其免去了用户翻页跳转的操作，可以更好地提高用户浏览体验。本章从实战角度对长页滑动 H5的项目策划、交互设计、视觉设计以及制作开发进行系统讲解与演练。通过对本章的学习，读者可以对长页滑动H5有一个基本的认识，并快速掌握设计制作常用长页滑动H5的方法。
效果图
7.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运用Axure进行了绘制。
7.1.3 视觉设计
使用谷歌浏览器登录iH5官网，使用iH5制作食品餐饮行业产品介绍H5，使用Photoshop软件制作页面的视觉设计。使用iH5的页面>剪切>使用滚动条功能制作最终效果。
7.1.4 制作发布
效果图
7.2 课堂练习——文化传媒行业活动邀请H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作文化传媒行业活动邀请H5，使用Photoshop软件制作页面的视觉设计，使用iH5的页面>剪切>使用滚动条功能、事件功能制作最终效果。
效果图
7.3 课后习题——服装饰品行业产品营销H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作服装饰品行业产品营销H5，使用Photoshop软件制作页面的视觉设计，使用iH5的页面>剪切>使用滚动条功能制作最终效果。
学习目标
了解食品餐饮行业产品介绍H5的项目策划掌握食品餐饮行业产品介绍H5的交互设计
7.1 课堂案例——食品餐饮行业产品介绍H5制作
项目策划交互设计视觉设计制作发布
Байду номын сангаас.1.1 项目策划
Tree Cake是一家致力提供新鲜美味的线上蛋糕品牌，本次想借助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的动效和翻页功能制作最终效果。

第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移动页面设计与制作”课程一体化标准典型工作任务描述作为移动互联网时代的创新营销方式，图文声像并茂的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页面设计与制作》教学教案第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设计与制作的项目流程。

《H5页面制作》课件

参考资料和学习资源
阅读相关书籍和教程，参考优秀的H5页面案例，不断学习和实践提升自己的技能。
Q& A
1 常见问题解答
解答常见的关于H5页面制作的问题，帮助学生理解和掌握相关知识。
2 学生互动和讨论
鼓励学生提问和互相交流，加深对H5 页面制作的理解和应用。
页面调试和优化
检查页面的代码和功能，解决bug，并对页面进行性能优化，提升用户体验。
总结
H5页面制作的未来趋势
H5页面将继续发展，并提供更多的功能和交互效果，为用户呈现更丰富的内容和体验。
需要进一步提升的技能和能力
学习更深入的HTML、CSS和JavaScript知识，了解最新的Web开发技术和趋势。
H5页面制作
H5页面制作是一门富有挑战性的技术，旨在利用HTML、CSS和JavaScript创建出富有交互性和响应式设计的网页。简介H5页面的定义和作用
H5页面是指使用HTML5标准开发的网页，具有更高的兼容性和功能扩展性，可以为用户提供更丰富的体验。
H5页面制作的优势和挑战
优势：多平台兼容、丰富的交互效果、灵活的布局；挑战：技术复杂度、适配和性能优化。
前期准备
1 确定页面设计和功能需求
明确页面的设计风格和所需的功能，为后续开发提供指导。
2 熟悉相关软件和技术
了解使用的开发工具、HTML、CSS和JavaScript等相关技术，并掌握其基本用法。
制作流程
1
结构设计
了解常用的HTML标签和属性，设计页面的布局和响应式设计，确保网页能在不同设备上正常显示。
2
样式设计
熟悉CSS选择器和属性，通过设置样式让页面更美观，并添加动画效果提升用户体验。

《H5页面设计与制作》课件2

H5的设计与制作
从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 页面设计与制作

2.3 设计与制作H5的基本规范
2. H5的页面适配 H5的页面适配包括H5工具的自动适配、页面安全区的设置以及 H5其他设备的处理3个方面。
2.3 设计与制作H5的基本规范
（1）H5工具的自动适配 H5的在线制作工具本身就具备自动适配的功能，因此最主流的尺寸虽然是根据iPhone5的手机屏幕尺寸而来，也可以保证对于大多数手机的自动满屏适配。
围住神经猫
博雅：看你有多色
1.2 H5的发展
3. 绽放阶段 2015年～2016年是H5的全面绽放阶段。在这一阶段中的H5交互设计酷炫、表现形式新颖，以最大限度加强用户参与感，提高用户分享H5 的意愿。
豆瓣：我们的精神世界
淘宝×京东：造物节邀请函
讯极光计划：记忆重构
1.2 H5的发展
4. 成熟阶段 2017年后，H5慢慢褪去了一些复杂酷炫的交互效果，开始走向成熟。这一阶段的H5轻互动，重内容，传播量最大的主要有两种形式，一种是纯视频类H5，另一种是测试类H5。
掌握H5的定义了解H5的发展了解H5的特点熟悉H5的应用熟悉H5的类型
1.1 H5的定义
H5指的是移动端上基于HTML5技术的交互动态网页，是用于移动互联网的一种新型营销工具，通过移动平台（如微信）传播。
网易云音乐：你的荣格心理原型
PUPUPULA：2018汪年全家福我是创益人×腾讯广告×腾讯基金会：敦煌数字修复
1.2 H5Байду номын сангаас发展
开始阶段引爆阶段绽放阶段成熟阶段
1.2 H5的发展
1. 开始阶段 H5的开始可以追溯到2014 年，其最初的呈现状态和PPT类似，将经过简单设计的静态页面设置成滑动翻页效果，常用于婚礼邀请、企业招聘等。

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 页面设计(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页面设计与制作》课件6

策划交互设计视觉设计制作发布
6.1.1 项目策划
Art Design是一家成立了近20年的专业型广告设计公司，此次想通过H5进行企业人才招聘。在内容上，我们的内容分为了首页、关于我们、工作环境、福利待遇、招聘岗位、招聘流程以及岗位需求。在视觉上，运用图文结合以及高级灰体现公司的沉稳大气。在制作上，摒弃复杂的表现效果，采用简单翻页让用户的注意力集中在招聘内容上。
6.1.4 制作发布
效果图
6.2 课堂练习——汽车工业行业活动邀请H5制作
使用谷歌浏览器登录iH5官网，使用Photoshop软件制作页面的视觉设计，使用iH5的动效和翻页功能制作最终效果。
效果图
6.3 课后习题——教育咨询行业培训招生H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作教育咨询行业培训招生H5，使用Photoshop软件制作首各个页面的视觉设计，使用凡科微传单的翻页和趣味中的快闪功能制作最终效果。
滑动翻页H5制作
滑动翻页H5是最常见的一类H5，是最被广大用户接受的互动方式。本章从实战角度对滑动翻页H5的项目策划、交互设计、视觉设计以及制作开发进行系统讲解与演练。通过对本章的学习，读者可以对滑动翻页H5有一个基本的认识，并快速掌握设计制作常用滑动翻页H5的方法。
学习目标
了解文化传媒行业企业招聘H5的项目策划掌握文化传媒行业企业招聘H5的交互设计
效果图
6.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运用Axure进行了绘制。
6.1.3 视觉设计
使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作文化传媒行业企业招聘H5，使用Photoshop软件制作首页、关于我们、工作环境、福利待遇、招聘岗位、招聘流程和岗位申请等页面的视觉效果，使用凡科微传单动画功能制作H5页面动画。

《HTML5设计与运营》教学教案word版

第1章H5：强互动的微场景体验教学内容一、什么是H5二、H5营销的优势三、H5的应用场景四、H5的应用类型教学要求【知识目标】1．认识H5。

2．了解H5与App的区别。

3．了解H5营销的优势。

4．了解H5的应用场景。

5．了解H5的应用类型。

教学重点1．认识H5。

2．了解H5营销的优势。

3．了解H5的应用场景。

4．了解H5的应用类型。

教学难点1．了解H5的应用场景。

2．了解H5的应用类型。

教学方法讲授法、案例法课时数3课时教学内容第一节什么是H5一、认识H5（一）广义上的H5广义上的H5，就是指第五代“超文本标记语言”（Hyper Text Markup Language5，HTML5），也指用H5语言制作的一切数字产品。

我们上网所看到的网页，多数是由HTML代码写成的。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素，而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。

浏览器通过解码HTML，就可以把网页内容显示出来。

在H5之前，网页的讯问主要是在计算机上进行。

H5最重要的特性就是增强了对移动设备的支持。

（二）狭义上的H5狭义上的H5，就是指互动形式的多媒体广告页面，它是和移动互联网一起发展起来的。

H5最显著的优势在于它的跨平台性，用H5搭建的站点与应用可以兼容PC端与移动端、Windows系统、Linux系统、安卓系统与iOS系统。

此外，H5的本地存储特性也给用户带来了更多的便利性。

基于H5开发的轻应用比本地App拥有更短的启动时间和更快的联网速度，而且无须下载占用存储空间，特别适合手机等移动媒体。

H5让开发者无须依赖第三方浏览器插件即可创建高级图形、版式、动画及过渡效果，这也能让用户用较少的流量就可以欣赏到炫酷的视觉与听觉效果。

二、H5与App的区别（一）App和H5的优势和劣势（二）App中的H5（三）H5设计的局限性第二节H5营销的优势一、跨平台微信是H5传播的重要平台，其高流量者必会带动H5营销，而且H5是少有的可以在多个平台上完美运行，且能为用户展示丰富内容的广告形式，它的跨平台特性使其覆盖面比传统广告更广，能够为广告主带来更多的流量。

《H5页面制作》课件

确定主题和内容
根据目标受众和营销目标，确定 H5页面的主题和所需展示的内容。
设计阶段
选择合适的模板
根据主题和内容，选择适合的H5页面模板。
设计页面布局
对H5页面的各个部分进行详细设计，包括页头、内容、页脚等。
添加互动元素
考虑加入适当的互动元素，如动画、表单等，以提高用户体验。
开发阶段
1 2
使用CDN加速
将静态资源部署到CDN（内容分发网络）上，利用CDN的分布式节点，提高资源加载速度。
用户体验优化
响应式设计
01
根据不同设备的屏幕尺寸和分辨率，使用媒体查询和流式布局
技术，实现页面自适应，提高用户体验。
动画与交互效果
02
使用CSS3动画和JavaScript交互效果，增强页面的动感和交互
。
JavaScript交互
JavaScript是一种用于实现网页交互性的脚本语言。
通过JavaScript，可以实现动态内容、表单验证、动画效果和与用户交互等功能。
JavaScript还可以与服务器进行通信，实现数据的获取和提交等操作，增强网页的实用性和用户体验。
响应式设计
响应式设计是一种使网页能够适应不同设备和屏幕尺寸的方法。
宣传展示
H5页面可以用于制作企业宣传、产品展示等页面，具有丰富的展示效果和交互体验。
02
CATALOGUE
H5页面制作技术
HTML5基础
HTML5是用于构建网页的标准标记语言，它提供了丰富的元素和属性，用于创建网页结构和内容。
HTML5引入了新的语义元素，如`<article>`、`<section>`、`<nav>`等，使得网页内容更加结构化和可访问性更强。