應用之星: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個工作日審覈,審覈通過後,將在網站的優秀案例裏展示給更多網友欣賞學習!



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章