《写给大家看的H5页面制作入门指南》由会员分享，可在线阅读，更多相关《写给大家看的H5页面制作入门指南（5页珍藏版）》请在金锄头文库上搜索。
1、写给大家看的 H5 页面制作入门指南H5 是最近两年非常火的一个东西， 什么是 H5 呢？通俗 的说就是那些经常刷爆微信朋友圈的手机网页了。 给大家举个例子，长按识别二维码就可以查看。相信大家在 这之前都或多或少有看到过这样的页面。无论是企业宣传， 制作简历、邀请函，还是制作纪念册、表白， H5 有着其非 常广泛的应用。那这样的页面是怎么做出来的呢？其实普通 人也可以轻松上手，今天三顿就来和大家分享一些 H5 制作 的入门技巧，教大家如何做出酷炫的酷炫的 H5 页面。国际惯例放一个机智的目录：工欲善其事必先利其器，不管 是专业的设计师还是小白，制作 H5 页面都会不可避免的用 到一些在线制作工
2、具。然而目前的 H5 在线制作工具层出不穷，不说成百上千也有 几十种之多，三顿在这里为大家推荐几款基础和实用的。MAKA （maka.im ）要说小白用哪一款 H5 制作工具比较好，我觉得首推的就是 MAKA 了。为什么这么说呢？首先 MAKA 的操作页面非常 简单，乍一看和 PPT 还有几分相像。 添加文字图片都非常方 便，轻松上手。其次 MAKA 中有大量做好的免费模板，不需要大家设计，就可以通过模板来进行制作。而且免费模板 的质量也都非常的高， 放张截图你们感受一下。 不仅有模板， 内置的素材也是一应俱全。 高清图片、 矢量图标， 甚至连 PPT 中常用的数据图表都可以直接套用。除此之外
3、还有很多好玩 的玩法，比如投票、倒计时、呼叫拨号等等的交互效果都可 以一键实现，非常傻瓜，大家可以自己去尝试一下。最后， 它还支持PSD格式的文件一键导入，大家可以用PS来制作页面后直接导入到 MAKA ，生成 H5 页面。iH5 （）MAKA 可以说是入门级的 H5 制作工具，秉承着少而精的原 则，我觉得 MAKA 也是最适合大家使用的。 那么除此之外呢也有很多专业设计师会用到的 H5 制作工 具，支持制作各种动效和交互效果，而我要给大家推荐的是 这款叫ih5的在线工具。看页面就可以发现有一种 PS的既视 感，所以非常专业，而我推荐给大家的原因是里面准备了很 多好的 H5 教程，从新手到进阶
4、一应俱全。同时它也准备了 很多素材和案例供大家学习，所以如果真的想好好学一下 H5 的话建议大家可以尝试这个平台。 H5 工具我只推荐这两 款，他们之间好比就是会声会影和 AE 的关系，前者简单易 学后者高端专业却内置了很多教程，方便大家学习。然而其 实使用这些工具也存在一些问题，比如因为都是在网页上制 作，会出现卡顿。另外工具中内置的字体也不是很多，有时 候没有办法达到我们的效果。那么作为一个“坚信 PPT 是万能的”的三顿，我们完全可以 利用 PPT 轻松的制作出 H5 页面。之前三顿有写过一篇文章， 教大家用 PPT 中修改页面尺寸的方法制作微信封面图， 二维 码页等等。其实一样的方法也
5、可以用来做H5 。接下来就为大家送上完整的PPT制作H5教程。首先我们需要在设计选项卡幻灯片大小中修改页面尺寸，页 面尺寸调整为全屏显示（ 16:10），然后页面方向设置纵向。 这样以后一个 H5 页面的样子就出现在我们眼前了，我们要 做的就是在这个页面上添加所需的元素。在这里做一个举 例，在页面上添加简单的元素。 其实这样一个页面就完成了， 我们之后要做的是把页面搬运到 H5 在线生成工具中，这里 以 MAKA 为例。方法也很简单，在左上角的文件选项卡中选择另存为，属性 勾选 JPG 格式，点击保存。然后将保存好的图片上传到 MAKA 中，一个页面就轻松的完成了。 当然每个平台所需的 PPT
6、 页面尺寸不同，大家可以生成之后在网站上进行进一步 的调整。这个方法适合做一些简单的静态页面，如果大家想 为页面中的元素比如说刚刚图片中的文字加一些动画效果， 那么处理就稍微麻烦一些。我们需要在 PPT 中，将元素逐个保存为图片，然后导入 MAKA ，需要注意的是保存时要选择保存为 PNG 格式，这 样元素背景才是透明的。 文字处理也是一样， 处理完后按 PPT 中的版式原封不动搬运到 MAKA ，然后逐个添加动画效果就 可以了。学会PPT，走遍天下都不怕。真的是这样，用最基 础的PPT技巧完全可以制作一个酷炫的H5页面，让你横行整个公司。当然虽然和 PPT 制作类似， 但有几个注意事项还是要
7、在这里 提醒一下大家。首先是每个页面上的元素不宜过多，这个和PPT道理一样，要做到让人一划就过却可以轻松地记住页面上的信息。第 二，页面底部要适当留空，因为每个页面都有一个滑动的效 果，虽然很常用但也会有很多人不知道。所以大家要注意留 出这个空间，让观众可以看得清楚。除此之外也有很多可以 一键实现PPT到H5页面转换的工具，我给大家推荐其中的 一个，PPJ.JO,上传PPT后可以之间生成 H5非常方便。经 过测试， PPT 中大部分动画效果都可以保留下来。但这个网 页还属于测试阶段，对于有的页面转化效果并不是特别好。 仔细看完今天的教程，我相信大家都可以轻松的做出一份还 不错的 H5 页面，当然这些只是最基础的技巧，做出专业水 准的 H5 还需要大家去尝试和探索。但是用这些基础的技巧去应付我们经常需要做的邀请函、简 历等等那绝对是绰绰有余了。 类似的 H5 制作平台还有很多， 比如 Epub360 、易企秀等等，我在这里只推荐两款是希望大 家先尝试，也欢迎大家在下方留言谈一谈你觉得好用的 H5 制作工具。感谢支持，如果小伙伴们觉得我写的还不错，希 望三顿继续写出更优质的内容的话，务必点一下赞赏或者广 告，你们的支持是我的最大的动力！
