AN 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制作课件
。
响应式设计
根据不同设备的屏幕大小和分 辨率，优化页面布局和交互效 果，提高用户体验。
兼容性考虑
确保交互功能在不同浏览器和 设备上都能正常工作，提高兼 容性。
性能优化
优化代码和资源加载，提高页 面加载速度和交互响应速度，
提高用户体验。
05
H5性能优化策略
H5制作流程概述
确定主题和目标
明确H5页面的主题和目标 ，为制作提供方向。
素材准备
收集所需的图片、音频、 视频等素材。
测试与优化
在多种设备上测试H5页面 ，确保兼容性和流畅性，
并进行优化调整。
规划和设计
根据主题和目标，规划页 面结构、布局、交互等。
制作页面
使用合适的工具或在线平 台，按照设计制作H5页面
THANKS
感谢观看
遵循W3C标准，确保代码在不同浏览器和设备上的一致性。
响应式设计
根据不同设备的屏幕尺寸和分辨率，设计适应不同设备的页面布局和 样式。
使用跨平台的框架和库
如Bootstrap、jQuery等，这些框架和库已经经过广泛测试，具有良 好的跨平台兼容性。
自动化测试工具
使用自动化测试工具对H5页面进行测试，确保在不同浏览器和设备 上都能正常运行。
03
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页面设计与制作教学教案
《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移动页面设计与制作》教案
写出创建H5的步骤：
指导学生完成步骤的拟定
小组讨论并拟定制作步骤
检查学习准备环节学生的掌握情况
计划实施
根据计划决策，按要求创建文件
指导学生完成任务
创建文档
检查学生知识掌握情况
检查控制
根据计划实施要求，小组内互相检查，修改。
巡回指导
课后反思
真实的企业任务，让学生上课如上岗、学习过程即工作过程，创设工作室情境，采用绩效考核激发学生学习积极性，让岗位活动教学化，教学效果发生很大变化；
“学习任务一 制作HTML5展示动画教案
一体化课程
H5移动页面设计与制作
学习任务
任务一：制作HTML5展示动画
教学时数
72
上课日期
2019.2.26
周次
师生互相问候
师生互相问候
尊师重教。提醒学生进入上课状态。
课程导入
展示课件，引导学生了解H5移动页面应用
引导学生了解办公软件应用
认真倾听，理解
让学生了解办公软件应用。
课程介绍
介绍本课程的总体安排，上课方式，明确教学目标
介绍本课程的总体安排，上课方式，明确教学目标
聆听老师的介绍
让学生了解课程的总体安排，上课方式，明确教学目标。
1.布置工作任务；
1.分组讨论
2.叙述工作任务
领悟问题的能力；与老师、同学的沟通交流片素材
2.能操作MUGRDA软件新建、保存、打开和关闭。
3.能正确完成属性面板设置。
4.会设置H5快速生成模板。
5.会设置菜单栏、快捷工具栏。
1.指导学生查找相关书籍，及利用互联网获取信息，回答学生提出的问题
2-11
教学班级
17级计算机班
H5页面设计入门教程：图片素材准备
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-专业响应式网站/微信小程序设计工具。
H5页面设计初级案例教程：常用操作
元素或动画的复制与粘贴
我们想再次使用同一个元素时，可以在该素材右击，选择复制元素，然后在画布上右击，选择粘贴元素即可；
同样的，我们想再次使用之前已设置好的动画时，可以在在该素材右击，选择复制动画，然后在另一个上右击，选择粘贴动画即可。
移动画布的位置
我们在制作的过程难免会遇到画布的位置不是很理想，增大了制作的难度，可通过两种方法解决：
方法一：鼠标滑动到画布上时，画布的右上角会出现一个可拖动的按钮，点
击拖动即可；
方法二：鼠标放置在画布上，按住键盘上的空格键，点击画布进行拖拽即可。
调整层叠次序
按住图标可以调整组件上下层级关系
点击图标可以切换到指定元素的属性编辑面板
组件暂时隐藏
点击图标可以显示或隐藏组件
组件动画复制／粘贴
右击组件可以复制粘贴动画
页面复制粘贴
在左侧页面列表上右击可以复制粘贴页面
素材／动画／页面复用
我们可以将素材、动画、页面导入到库，方便下次可以直接使用。
意派Epub360-专业H5设计工具 意派Coolsite360-专业响应式网站/微信小程序设计工具。
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页面设计初级案例教程：创建发布作品流程
意派Epub360工具制作H5流程（上）目前市场上大部分专业的H5制作工具，基本都是使用在线编辑制作工具，根据H5的传播属性，在制作H5时，需要编辑器具备良好的兼容性。
这里简单罗列最基本的概念和介绍，希望在开始制作H5之前，先阅读了解。
浏览器要求请使用谷歌浏览器编辑器简介∙顶部工具栏：∙中部：添加基本组件／高级组件∙左侧：常规预览发布操作∙右侧：保存等快捷方式操作∙页面列表：∙所有页面概览∙添加删除页面∙调整页面顺序∙管理页面组∙画布：∙主要设计区域，包括两个基准框∙内框是安全区，尺寸640 x 960 px∙外框是出血区，尺寸740 x 1136 px∙设置面板手机适配画布区域包括内框／外框，就是专门为手机适配设计的。
∙ A 画布区域内容∙尺寸：640 x 960∙可以在所有手机中被看到；∙ B 出血区域内容∙尺寸：740 x 1136∙确保所有手机屏幕不会漏白。
基本组件／高级组件动效／动画Epub360支持动效、动画两种方式，具体了解请阅读《使用动效／动画》。
动效动画触发器要实现真正的、由用户主动参与的交互控制，离不开触发器。
下面的gif图，是基于Epub360触发器实现的交互效果。
详细了解请阅读《使用触发器》页面组织一个H5的页面组织，决定了H5的播放逻辑和内容框架，合理设置页面组织逻辑、切换方式很重要，详细了解请阅读《页面组织》访问统计Epub360提供访作品问统计功能，体验版账号可以查看作品访问量，付费用户可以查看各渠道及转发分享事件统计。
详细了解请阅读《访问统计》发布及更新∙怎么去logo/怎么改进度条的颜色∙怎样设置微信分享图标/描述信息∙如何分享微信作品？∙怎么发布到自己的公众号/部署到自己的网站上发布∙最新修改如何生效？详细了解发布相关内容，请阅读∙作品发布说明∙微信发布常见问题意派Epub360-专业H5设计工具意派Coolsite360-专业响应式网站/微信小程序设计工具。
写给大家看的H5页面制作入门指南。
写给大家看的H5页面制作入门指南。
H5是最近两年非常火的一个东西，什么是H5呢？通俗的说就是那些经常刷爆微信朋友圈的手机网页了。
给大家举个例子，长按识别二维码就可以查看。
相信大家在这之前都或多或少有看到过这样的页面。
无论是企业宣传，制作简历、邀请函，还是制作纪念册、表白，H5有着其非常广泛的应用。
那这样的页面是怎么做出来的呢？其实普通人也可以轻松上手，今天三顿就来和大家分享一些H5制作的入门技巧，教大家如何做出酷炫的酷炫的H5页面。
-------------------------------------------国际惯例放一个机智的目录：工欲善其事必先利其器，不管是专业的设计师还是小白，制作H5页面都会不可避免的用到一些在线制作工具。
然而目前的H5在线制作工具层出不穷，不说成百上千也有几十种之多，三顿在这里为大家推荐几款基础和实用的。
-------------------------------------------MAKA（maka.im）要说小白用哪一款H5制作工具比较好，我觉得首推的就是MAKA 了。
为什么这么说呢？首先MAKA的操作页面非常简单，乍一看和PPT还有几分相像。
添加文字图片都非常方便，轻松上手。
其次MAKA中有大量做好的免费模板，不需要大家设计，就可以通过模板来进行制作。
而且免费模板的质量也都非常的高，放张截图你们感受一下。
不仅有模板，内置的素材也是一应俱全。
高清图片、矢量图标，甚至连PPT中常用的数据图表都可以直接套用。
除此之外还有很多好玩的玩法，比如投票、倒计时、呼叫拨号等等的交互效果都可以一键实现，非常傻瓜，大家可以自己去尝试一下。
最后，它还支持PSD格式的文件一键导入，大家可以用PS来制作页面后直接导入到MAKA，生成H5页面。
-------------------------------------------iH5（）MAKA可以说是入门级的H5制作工具，秉承着少而精的原则，我觉得MAKA也是最适合大家使用的。
电子课件HTML5CSS3网页设计与制作项目一第一阶段任务7添加宣传图片
图 1-7-4 设置图片大小
知识与技能准备
4、图片的属性 （2） 图片的说明（title属性） title属性是对图片的文字说明，由用户自己定义。如果把鼠标移动到图片
上并停留，title属性的值就会以浮动的形式显示出来；在浏览器尚未完全读入 图像时，在图像位置处会显示该文字说明。
其语法形式如下：
当鼠标指针经过图片并稍作停留时，显示效果如下：
图 1-7-5 添加图片title属性
知识与技能准备
4、图片的属性
（3）图片的替换文本（alt属性） 在浏览器无法载入图像或图像失效时，替换文本属性会提示读者她们失去 的信息。此时，浏览器将显示这个替换文本而不是图像。这样有助于网页开发 者及时发现图片的问题，从而及时改正。为页面上的图像全部加上替换文本属 性是个良好习惯，因为这样有助于更好的显示信息以及后期的维护。同时，从 搜索引擎的角度上说，alt属性非常重要，alt属性的关键字内容将作为网页权重 的一部分被计算入内。 其语法形式如下：
图 1-7-6 添加图片的替换文本
知识与技能准备
5、图片使用的注意事项 网页中使用的图片不是越多越好，加载图片是需要时间的，过多的图片会
导致网页响应时间过长从而影响阅读。例如：某个HTML 文件包含二十个图像， 那么为了正确显示这个页面，需要加载二十个文件，这将影响网页打开速度。 所以我们需要：慎用图片。
<img src=” D:\images\ps.jpg” />
知识与技能准备
3.2相对路径
（1）目标图片文件和网页在同个路径下
• 链接的地址可直接写出图片的名称。如：网页index.html和图片ps.jpg放在同 一个文件夹下，则网页链接图片的语句为：
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
这是一篇对《清明上河 图》简要描述的H5。进 入首页，概括性的描述 了《清明上河图》，主 要包括三个方面：①馆 长的秘密，点击进入， 讲述了《清明上河图》 现藏地点，接着介绍了 作者张择端的生平，然 后介绍了一些画中的细 节；
故宫博物院：《清明上河图3.0》博物馆
②馆长的传奇，点击进入，主要讲述 了《清明上河图》的前世今生，描述 了《清明上河图》的坎坷经历，最后 更是点出《清明上河图》高科技艺术 互动展演今年将开启全球巡展，引发 无数人的期待③馆长的展，敬请期待。
以我为例，我设定了一个邮局的故事。
大家可以根据我们的故事背景，在纸上或者用 手绘板，画一个草稿出来，只需要有个大概故 事构架和大致画面构图，草稿，只要自己题，手绘一张h5的设计草 稿。
主题：面对疫情，人们为了减 少交叉感染，都被困在家里自 我隔离，有很多想在春节假期 见面的人，就见不到。所以我 们需要设计一个h5给这些人， 让他们在这个页面表达自己对 见不到面的人的对想念，表现 载体形式不限。
我们本次使用的主要是photoshop , 版本为cc2019，新版的软件是可以兼顾设计画面、动效、 剪辑视频、修改音乐，用途非常广。
二、H5页面设计的要素
1-细节与统一 2-紧跟热点，利用话题效应 3-讲个好故事，引发情感共鸣 4-合理运用技术，打造流畅的互动体验
故宫博物院：《清明上河图3.0》博物馆
H5页面设计前期创意
一、制作H5需要的软件
H5是一种高级网页技术，也就是我们说的HTML5，是目前涵盖领域最广的传播媒介， 几乎达到了无所不用的境界。 我们这次课程，我们一起学习设计一款h5界面 ↓
工欲善其事必先利其器，我们来说一下工具，也就是 软件
前H5设计领域还没有统一的标准工具，需要利用多种软件来搭配制作，比如photoshop、 illusttator、还有 3dmax、 maya，可辅助设计3D动画。
故宫博物院：《清明上河图3.0》博物馆
体验上，看到这一幅巨作，每个人都想看一看， 点开之后，会为各种细节而惊叹，画中景物繁 多，巨细无遗，却并不显得琐碎繁缛，表现出 画家对大场面把握的能力，以及于真放中见精 微的绘画境界，令人无法不钦佩其细致入微的 观察力和生动传神的表现力。
三、H5页面设计
在着手设计h5页面前，首先要对设计主题进行思考，放在公司，就是客户需求Brife。 我们的设计目的和背景呢，面对疫情，人们为了减少交叉感染，都被困在家里自我隔 离，有很多想在春节假期见面的人，就见不到了，所以我们设计一个h5给这些人，让 他们在这个页面写下对想念的人的祝福和问候，这个页面可以使明信片，可以是信， 也可以是礼盒，具体形式大家可以天马行空地去设计，最后生成图片保存或发送。
谢谢聆听！