AN 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讲了解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）通过课堂练习和课后习题提高学生的实际应用能力。

PS中的设计尺寸（设计图）Epub360中的满屏大图尺寸及分辨率如下图，关于设计尺寸的更多标准请看这里格式标准●JPG/JPEG：同样的文件，质量较png来说较低，文件容量较小●PNG：同样的文件，质量较jpg来说较高，文件容量较大●GIF：可以当作普通图片直接使用，iOS APP（只有老用户支持导出）不支持GIF格式图片，比较消耗资源，在微信应用中请谨慎使用●SVG：矢量文件格式，主要从ps、ai等设计软件中获取●图片素材尺寸尽量压缩，图片素材过大会导致加载缓慢，造成明显卡顿。

对于在微信里展示的内容，为了确保性能和展示效果，我们对图片素材有如下建议:●在保证场景效果的前提下，满屏大图，一般不要超过200kb，其他图片尺寸尽量小。

●考虑到retina（高清）屏幕，重要的图片可以按显示尺寸的两倍大小来准备●请在系统使用过程中，注意这些专用图片上传要求提示信息，按要求准备并提供图片。

格式转换图片格式切忌手动修改，请用相关软件进行对应格式的转换，相关软件：1.格式工厂（点击这里下载），目前只有win版2.Ps，使用另存为的方式，如下图：注意如果是不规则形的png格式图片的话需要先将背景图层隐藏，不然导出来虽然是这种格式，但是背景还是存在的，实际中并没有起到实质性作用。

图片压缩●png、jpg/jpeg图片在线压缩网址：●格式工厂●PS压缩，方法如下，1.在图层上右键菜单－导出为2.如果是PNG格式，在导出面板中勾选－较小文件3.如果是JPG文件，在导出面板设置品质即可免费图片资源部分可能需要梯子，如何搭梯子请看这里∙http://streetwill.co/∙https:///∙/∙/∙/∙/∙https:///∙/∙/∙/下一篇：2.如何添加图片意派Epub360-专业H5设计工具意派Coolsite360-专业响应式网站/微信小程序设计工具。

元素或动画的复制与粘贴
我们想再次使用同一个元素时，可以在该素材右击，选择复制元素，然后在画布上右击，选择粘贴元素即可；
同样的，我们想再次使用之前已设置好的动画时，可以在在该素材右击，选择复制动画，然后在另一个上右击，选择粘贴动画即可。

移动画布的位置
我们在制作的过程难免会遇到画布的位置不是很理想，增大了制作的难度，可通过两种方法解决：
方法一：鼠标滑动到画布上时，画布的右上角会出现一个可拖动的按钮，点
击拖动即可；
方法二：鼠标放置在画布上，按住键盘上的空格键，点击画布进行拖拽即可。

调整层叠次序
按住图标可以调整组件上下层级关系
点击图标可以切换到指定元素的属性编辑面板
组件暂时隐藏
点击图标可以显示或隐藏组件
组件动画复制／粘贴
右击组件可以复制粘贴动画
页面复制粘贴
在左侧页面列表上右击可以复制粘贴页面
素材／动画／页面复用
我们可以将素材、动画、页面导入到库，方便下次可以直接使用。

意派Epub360-专业H5设计工具 意派Coolsite360-专业响应式网站/微信小程序设计工具。

《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制作方法。