写给大家看的H5页面制作入门指南。

H5是最近两年非常火的一个东西，什么是H5呢？通俗的说就是那些经常刷爆微信朋友圈的手机网页了。

给大家举个例子，长按识别二维码就可以查看。相信大家在这之前都或多或少有看到过这样的页面。

无论是企业宣传，制作简历、邀请函，还是制作纪念册、表白，H5有着其非常广泛的应用。

那这样的页面是怎么做出来的呢？其实普通人也可以轻松上手，今天三顿就来和大家分享一些H5制作的入门技巧，教大家如何做出酷炫的酷炫的H5页面。

-------------------------------------------

国际惯例放一个机智的目录：

工欲善其事必先利其器，不管是专业的设计师还是小白，制作H5页面都会不可避免的用到一些在线制作工具。

然而目前的H5在线制作工具层出不穷，不说成百上千也有几十种之多，三顿在这里为大家推荐几款基础和实用的。

-------------------------------------------

MAKA（maka.im）

要说小白用哪一款H5制作工具比较好，我觉得首推的就是MAKA了。

为什么这么说呢？首先MAKA的操作页面非常简单，乍一看和PPT还有几分相像。添加文字图片都非常方便，轻松上手。

其次MAKA中有大量做好的免费模板，不需要大家设计，就可以通过模板来进行制作。而且免费模板的质量也都非常的高，放张截图你们感受一下。

不仅有模板，内置的素材也是一应俱全。高清图片、矢量图标，甚至连PPT中常用的数据图表都可以直接套用。

除此之外还有很多好玩的玩法，比如投票、倒计时、呼叫拨号等等的交互效果都可以一键实现，非常傻瓜，大家可以自己去尝试一下。

最后，它还支持PSD格式的文件一键导入，大家可以用PS来制作页面后直接导入到MAKA，生成H5页面。

-------------------------------------------

iH5（ih5.cn）

MAKA可以说是入门级的H5制作工具，秉承着少而精的原则，我觉得MAKA也是最适合大家使用的。

那么除此之外呢也有很多专业设计师会用到的H5制作工具，支持制作各种动效和交互效果，而我要给大家推荐的是这款叫ih5的在线工具。

看页面就可以发现有一种PS的既视感，所以非常专业，而我推荐给大家的原因是里面准备了很多好的H5教程，从新手到进阶一应俱全。

同时它也准备了很多素材和案例供大家学习，所以如果真的想好好学一下H5的话建议大家可以尝试这个平台。

H5工具我只推荐这两款，他们之间好比就是会声会影和AE的关系，前者简单易学后者高端专业却内置了很多教程，方便大家学习。

然而其实使用这些工具也存在一些问题，比如因为都是在网页上制作，会出现卡顿。另外工具中内置的字体也不是很多，有时候没有办法达到我们的效果。

那么作为一个“坚信PPT是万能的”的三顿，我们完全可以利用PPT轻松的制作出H5页面。

之前三顿有写过一篇文章，教大家用PPT中修改页面尺寸的方法制作微信封面图，二维码页等等。其实一样的方法也可以用来做H5。

-------------------------------------------

接下来就为大家送上完整的PPT制作H5教程。

首先我们需要在设计选项卡幻灯片大小中修改页面尺寸，页面尺寸调整为全屏显示（16:10），然后页面方向设置纵向。

这样以后一个H5页面的样子就出现在我们眼前了，我们要做的就是在这个页面上添加所需的元素。

在这里做一个举例，在页面上添加简单的元素。

其实这样一个页面就完成了，我们之后要做的是把页面搬运到H5在线生成工具中，这里以MAKA为例。

方法也很简单，在左上角的文件选项卡中选择另存为，属性勾选JPG格式，点击保存。

然后将保存好的图片上传到MAKA中，一个页面就轻松的完成了。当然每个平台所需的PPT页面尺寸不同，大家可以生成之后在网站上进行进一步的调整。

这个方法适合做一些简单的静态页面，如果大家想为页面中的元素比如说刚刚图片中的文字加一些动画效果，那么处理就稍微麻烦一些。

我们需要在PPT中，将元素逐个保存为图片，然后导入MAKA，需要注意的是保存时要选择保存为PNG格式，这样元素背景才是透明的。

文字处理也是一样，处理完后按PPT中的版式原封不动搬运到MAKA，然后逐个添加动画效果就可以了。

学会PPT，走遍天下都不怕。真的是这样，用最基础的PPT技巧完全可以制作一个酷炫的H5页面，让你横行整个公司。

当然虽然和PPT制作类似，但有几个注意事项还是要在这里提醒一下大家。

首先是每个页面上的元素不宜过多，这个和PPT道理一样，要做到让人一划就过却可以轻松地记住页面上的信息。

第二，页面底部要适当留空，因为每个页面都有一个滑动的效果，虽然很常用但也会有很多人不知道。所以大家要注意留出这个空间，让观众可以看得清楚。

除此之外也有很多可以一键实现PPT到H5页面转换的工具，我给大家推荐其中的一个，PPJ.JO，上传PPT后可以之间生成H5非常方便。

经过测试，PPT中大部分动画效果都可以保留下来。但这个网页还属于测试阶段，对于有的页面转化效果并不是特别好。

仔细看完今天的教程，我相信大家都可以轻松的做出一份还不错的H5页面，当然这些只是最基础的技巧，做出专业水准的H5还需要大家去尝试和探索。

但是用这些基础的技巧去应付我们经常需要做的邀请函、简历等等那绝对是绰绰有余了。

类似的H5制作平台还有很多，比如Epub360、易企秀等等，我在这里只推荐两款是希望大家先尝试，也欢迎大家在下方留言谈一谈你觉得好用的H5制作工具。

感谢支持，如果小伙伴们觉得我写的还不错，希望三顿继续写出更优质的内容的话，务必点一下赞赏或者广告，你们的支持是我的最大的动力！