首页 > 代码库 > 应用之星:最好用的H5制作平台-附H5制作教程

应用之星:最好用的H5制作平台-附H5制作教程

H5是HTML5的简称。HTML5是HTML最新的修订版本,是一种超文本标记语言。H5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。

H5页面就是利用html5制作出来的页面,在微信朋友圈非常火爆,那么今天通过应用之星平台跟大家分享一下H5制作过程。

首先:进入应用之星网站,注册账号并激活。

技术分享

其次:点击“应用制作”,进入的页面将看见“高级模式”。在高级模式下,你可以直接使用系统模板,也可以自己新建应用,根据自己的需要选择。

技术分享

  • 极简模式:里面有一键淘宝,一键电子书,一键图文等等,以最少的步骤,最短的时间让您创作出简单热门的手机应用app;

  • 高级模式:提供了多样化的模板。您可以选择一款,按照样式逐步编辑即可获得精美H5页面,同时也支持您扩展编辑;另外也可以自己新建H5页面,采用纯自由的控件式操作,完全由您自由设计每个页面内容及其之间的关系,各式H5页面随心创建。

下面介绍的是自己新建一个H5页面。

第一步:点击“我要创建”,弹出的窗口输入你将要设计的H5页面的“名称”和选择类型,如图:

技术分享

第二步:点击“创建”后,进入H5页面的制作区域,这里你将看到各类控件、我的模板、系统模板等,如图:

技术分享

  • 我的模板:是指你自己将认为比较好的页面设置成自己的模板,请看教程:那么如何将自己制作的页面加入到系统模板里?

  • 系统模板:是指应用之星提供的模板。

第三步:点击控件来制作H5页面,根据你H5页面的内容需要,进行控件选择使用,比如我要用文本控件,直接点击“文本”,然后制作区域将出现“请输入文字”,再点击“请输入文字”,将弹出文本的属性框,进行编辑和设置动画,如图:

技术分享

在这里的制作区域,有几点需要注意的:

1、拉动每个控件,都会出现辅助线,用来调整对齐。在设置文本控件的时候,注意设置行间距,不要让文字堆积在一起。

技术分享

2、设置动画的时候,注意先设置时间,再选择动画方式,如图:

技术分享

3、所有控件右键可以调出快捷键使用,如图:

技术分享

4、调整圆角或透明度的时候,可以结合键盘的上下左右键一起使用。

5、调整字体颜色或者边框颜色的时候,先拖动右边的滑动按钮,再拖动左边的小圈按钮,如图:

技术分享

 

6、新建页面,在右边导航下部,如图:

技术分享

7、所有制作的页面都可以拖动,删除,但前提是在编辑状态下,即先点击编辑才可进行删除或拖动。动作完成后,再次点击编辑,即可关闭编辑功能;(当做第二页面时,可以直接复制第一个页面,如果是类似的页面,复制的目的是节省时间,减少重复操作。)

技术分享

8、在制作H5页面的同时,如果你还想生成Android应用或iOS应用,去“设置”——>“高级”里进行,如图:

技术分享

生成Android应用或iOS应用,具体可以看教程:

不懂技术,如何生成Android应用?

不懂技术,如何生成iOS应用?

更多使用技巧,请看教程:(必读)在应用制作时,你应该先知道的制作技巧

第四步:当你一切制作好后,点击“发布”,即可生成二维码,微信扫描WEB二维码,将你的H5页面分享到朋友圈吧,如图:

技术分享

最后,如果你想修改H5页面,那么去个人中心——>应用管理里进行修改;如果你自信自己做的H5页面也想被更多人欣赏,那么去个人中心——>应用管理里进行优秀案例申请,我们将在1-3个工作日审核,审核通过后,将在网站的优秀案例里展示给更多网友欣赏学习!

 

应用之星:最好用的H5制作平台-附H5制作教程