H5页面设计(Mugeda版)(微课版)

本书系统地介绍使用Mugeda设计H5页面的方法，首先介绍H5页面和Mugeda的基础知识；然后详细讲解绘制与调整图形，添加媒体文件与文字，制作动画，行为、触发条件与控件，以及关联与表单等内容，帮助读者逐渐掌握使用Mugeda制作H5页面的方法；最后通过综合实训—设计企业招聘H5页面，带领读者对所学知识进行综合运用。 本书采用章节式体例结构，将理论与实际操作联系起来，讲解深入浅出，并且设计了丰富的知识栏目，提供了实战案例和综合训练。此外，本书还配有丰富的多媒体教学资源，读者可扫描二维码观看。 本书可作为高等院校艺术设计、新媒体、数字媒体等专业相关课程的教材，也可供H5设计从业人员学习和参考。

张卫东，男，山东传媒职业学院副院长，教授，国家课程思政示范课教学团队和山东省黄大年式教学团队主要成员。研究方向为职业教育，专业领域为通信工程。先后承担《数字通信》《数字电路》《数字卫星传输技术》等课程教学任务。主持省级以上课题2项，出版专著《质量型高职扩招研究》1部，主编国家职业资格培训教材《有线广播电视机线员--基础知识》、十三五规划教材《大学生就业指导》，参编《数字通信技术》等教材，发表《质量型扩招背景下高职人才培养模式探究》等多篇论文。获职业教育教学成果奖国家级二等奖2项，省级特等奖1项、一等奖1项、二等奖1项。获国家广播电影电视总局科技创新奖三等奖、山东省广播电视局合理化建议和技术改进一等奖等奖项。

第 1 章　认识H5 页面 1 1.1　H5 概述　3 1.1.1　H5 是什么　3 1.1.2　H5 页面的基本特点　4 1.1.3　H5 页面的应用　4 1.1.4　H5 页面的风格　6 1.2　H5 页面的设计原则　9 1.2.1　一致性原则　9 1.2.2　简洁性原则　10 1.2.3　条理性原则　10 1.2.4　切身性原则　12 1.2.5　创新性原则　12 1.3　H5 页面的设计规范　13 1.3.1　页面尺寸　13 1.3.2　页面适配　14 1.3.3　文件大小　14 1.4　H5 页面的设计流程　15 1.4.1　明确设计目的　15 1.4.2　策划内容　16 1.4.3　搜集素材　18 1.4.4　进行页面设计　18 1.4.5　进行交互设计　20 1.4.6　生成和发布H5　20 综合训练　21 分析《方寸之间看徽州》拼图H5　游戏　21 知识拓展　22 本章小结　23 课后习题　24 第　2 章 Mugeda 的基本操作　26 2.1　初识Mugedea　28 2.1.1　认识Mugeda 平台　28 2.1.2　Mugeda 的优势和功能　28 2.2　新建、管理和发布H5　29 2.2.1　新建H5 页面　29 2.2.2　管理H5 作品　31 2.2.3　发布H5 作品　33 2.3　模板管理与素材管理　34 2.3.1　将H5 作品转换为模板　34 2.3.2　模板管理　34 2.3.3　素材管理　35 2.4　Mugeda 中的H5 编辑器界面　36 2.4.1　菜单栏　37 2.4.2　工具栏　39 2.4.3　“时间线”面板　40 2.4.4　工具箱　41 2.4.5　“页面编辑”面板　42 2.4.6　页面编辑区　42 2.4.7　“属性”面板　44 综合训练　44 使用模板制作出游季H5　页面　44 知识拓展　46 本章小结　46 课后习题　47 第3　章 绘制与调整图形　48 3.1　绘制图形　50 3.1.1　直线　50 3.1.2　矩形　51 3.1.3　椭圆　52 3.1.4　圆角矩形　52 3.1.5　多边形　53 3.1.6　曲线　53 3.1.7　实战案例：制作旅行网图标　54 3.2　调整图形　59 3.2.1　调整图形平滑度　60 3.2.2　变换图形形态　61 3.2.3　实战案例：绘制小猫形状　62 3.3　图形的排列与组合　66 3.3.1　排列　66 3.3.2　对齐　66 3.3.3　变形　67 3.3.4　组合　67 3.3.5　合并　68 3.3.6　实战案例：绘制音乐图标　69 综合训练　72 绘制“节约用水”H5　公益广告图形　72 知识拓展　74 本章小结　75 课后习题　75 第4　章 添加媒体文件与文字　77 4.1　添加媒体文件　79 4.1.1　添加图片　79 4.1.2　添加音频/ 音效　80 4.1.3　添加视频　81 4.1.4　添加幻灯片　81 4.1.5　添加网页　82 4.1.6　实战案例：制作旅行宣传 H5　页面　83 4.1.7　添加图表　87 4.1.8　添加虚拟现实　89 4.1.9　添加直播　91 4.1.10　实战案例：制作年中总结 H5　页面　91 4.2　输入与编辑文字　95 4.2.1　输入文字　95 4.2.2　编辑文字　96 4.2.3　实战案例：制作七夕节H5 页面　98 综合训练　99 制作房地产宣传H5　页面　99 知识拓展　101 本章小结　102 课后习题　102 第5　章 制作动画　104 5.1　帧动画　106 5.1.1　帧的基本类型　106 5.1.2　帧的基本操作　107 5.1.3　关键帧动画　108 5.1.4　序列帧动画　108 5.1.5　实战案例：制作汽车公司H5 进入页和首页　109 5.2　特型动画　112 5.2.1　元件动画　112 5.2.2　路径动画　113 5.2.3　进度动画　114 5.2.4　变形动画　115 5.2.5　遮罩动画　116 5.2.6　实战案例：制作H5加载动画　116 5.3　预置动画　122 5.3.1　添加预置动画　122 5.3.2　设置预置动画　122 5.3.3　自定义预置动画　123 5.3.4　实战案例：制作元旦H5 页 面首页　123 综合训练　125 制作口红产品推广H5　页面　125 知识拓展　127 本章小结　128 课后习题　128 第6　章 行为、触发条件与控件　130 6.1　行为与触发条件　132 6.1.1　认识行为　132 6.1.2　编辑行为　132 6.1.3　设置触发条件　133 6.1.4　实战案例：为游戏H5 首页按钮添加行为　133 6.2　控件　134 6.2.1　陀螺仪控件　134 6.2.2　点赞控件　135 6.2.3　擦玻璃控件　136 6.2.4　投票控件　137 6.2.5　抽奖控件　138 6.2.6　其他控件　140 6.2.7　实战案例：制作企业员工评选H5 页面　141 综合训练　145 制作端午节活动H5　页面　145 知识拓展　146 本章小结　147 课后习题　147 第7　章 关联与表单　149 7.1　关联　151 7.1.1　舞台动画关联　151 7.1.2　实战案例：为H5 页面添加 舞台动画关联　151 7.1.3　元件动画关联　153 7.1.4　基础属性关联　153 7.2　表单　155 7.2.1　自定义表单　155 7.2.2　实战案例：制作“城市人口 爱好”调查表H5　页面　158 7.2.3　定制表单内容　162 综合训练　163 制作“受欢迎景区”调查表H5　页面　163 知识拓展　166 本章小结　167 课后习题　167 第8章　综合实训——设计企业招聘H5 页面　169 8.1　实训背景　171 8.2　前期准备　171 8.2.1　设计构思　171 8.2.2　绘制原型图　172 8.2.3　搜集素材　172 8.3　任务实施　173 8.3.1　制作企业招聘H5 页面　173 8.3.2　为企业招聘H5 页面添加动效　175 8.3.3　保存并发布企业招聘H5页面　178 本章小结　179 课后习题　180