多语言展示
当前在线:832今日阅读:168今日分享:49

html5入门:怎样制作和分享漂亮的免费h5作品

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

电脑

2

免费h5工具

什么是H5?
2

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

3

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

4

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

怎么制作H5?
1

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

2

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

3

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

4

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

5

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

6

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

如何分享与传播?
1

同样在作品预览页,获取你的H5二维码和短连接;通过扫描作品二维码或直接打开短链接的方法,在微信观看;

2

打开作品后,通过右上角【…】分享按钮,直接分享出去。

注意事项
1

上传的图片大小不能超过2M。

2

上传的音乐小于2MB的MP3格式。

推荐信息