html5入门：怎样制作和分享漂亮的免费h5作品 / 木子杰软件教程

说到HTML5，大家可能一头雾水，不知所云。不要紧，你有没有玩过“围住神经猫”这个游戏呢？没错，这就是用现在非常热的H5制作的。今天和大家来聊聊，H5到底是什么鬼并怎么拿下它？

什么是H5?

01

概念： H5是指第5代HTML，也指用H5语言制作的一切数字产品。具体应用从H5小游戏、H5大翻页，到H5站点、H5营销，不一而足。 H5不再只是一种标记语言，而是一个全新的框架和平台。包括提供免插件的音视频、图像动画、本体存储以及更多酷炫而且重要的功能。
02

优势：在我看来，使用H5具有2大优势：第一是跨平台。 H5最显著的优势在于跨平台，可以兼容PC端与移动端、Windows与Linux、安卓与IOS。第二是轻量化。比本地APP拥有更短的启动时间，更快的联网速度，而且无需下载占用存储空间，特别适合手机等移动媒体。
03

分类：依据功能和目标，可以将H5分成：活动运营型、品牌宣传型、产品介绍型、总结报告型；根据展现形式又可以分为：简单图文、礼物/贺卡/邀请函、问答/评分/测试、游戏等类型。
04

工具：随着技术的发展，市面上出现了越来越多的制作工具。多数都有PC版和手机端两种扩展形式。使用较多的有MAKA和单页等，当然肯定还有其他优秀的工具，这里不一一举例了。

01

今天就利用MAKA介绍下H5的制作流程。以下是MAKA的特点。
02

【操作步骤】 ① 打开MAKA官网，注册登录。点击【我的作品】-【创建作品】，可以选择【新建空白】也可以选择【既有模板】。 ② 布局介绍。左侧为【页面及图层】、中间为【主页面】、偏右侧【素材栏】、右侧为【设置栏】、上侧为【音乐栏】。
03

【页面及图层】显示不同页面及同意页面上的不同素材。下方点击＋号，新增空白页面或选择模板进行添加；切换至【图层】方便查看不同素材。
04

b.【主页面】显示素材。 c.【素材栏】提供了文字、图片、形状元素、按钮链接、特效、高级功能等。
05

d.【设置栏】对文字、图片不同元素出现对应的不同设置。【动作】选择预定动作类型，并设置【进场速度】和【进场延时】；可配合【图层】选中不同素材进行具体设置。 e.【音乐栏】看到【+上传音乐】，可以上传自己喜欢的音乐。
06

③ 添加素材至指定位置，设置具体参数，并设置动作，调整【速度和延时】。点击【主界面】右侧上方▶【预览】效果。 ④ 满意后，保存！具体动画设置内容，请继续关注后续更新内容。 ⑤ 返回【我的作品】列表，鼠标放置在刚操作的文件上，点击【预览】进行封面设置。