推薦 25個HTML5製作工具合集,終於可以自己做HTML5頁面了!

HTML5 頁面作為營銷界新寵兒，「多快好省」的傑出代表，其靈活性高、開發成本低且製作周期短的種種特性使其在移動營銷領域大放異彩。

以下為大家推薦25個HTML5製作工具，前15個免費HTML5製作工具是編程小白也能使用的微網頁、微畫報或場景應用的製作工具。後10個向設計師推薦十款優秀 HTML5 在線工具，這些工具能夠幫助設計師們設計出更有創意的作品。

排名不分先後，功能大同小異，可按照自身需求挑選。

1初頁

網址：http://www.cloud7.com.cn/chuye

初頁作為手機端製作動態海報的app，面向C端，門檻極低，上手簡單容易，可在App store免費下載，直接在手機上編輯創作。眾多模板版式，任君挑選，也提供定製服務。

案例 ：

非定製 極客咖啡活動預告

定製 《古劍奇譚》幕後大數據流出——教你看懂90後神劇

2Maka

網址：http://www.maka.im/home/index.html

Maka目前只有Web端，IOS和Android版本還未上線，模板豐富，有多種動態效果以及交互效果可供選擇，除收費版外提供免費版，不過免費版不提供外鏈模板。

案例：

玫瑰之約

3Liveapp 場景應用/雲來

網址：http://www.liveapp.cn/

雲來Liveapp是面向企業方的移動場景APP雲服務平臺，許多知名企業都在使用，購買場景應用，近日雲來開放了免費體驗，「認證企業」可以申請獲取，體驗時長31天。

案例：

可口可樂 分享快樂128年

4秀製作

網址：http://xiumi.us/

「秀製作」為秀米出品，免費提供多種模板，傻瓜式操作，可以外鏈，可與秀米圖文排版雙劍合璧。

案例：

匆匆那年的我們 句句戳中你的內心

5點點客海報

網址：http://www.dodoca.com/index

點點客作為微信第三方開發服務商，推出了免費的點點客海報，無需註冊，掃碼登錄，即可編輯動態海報，多種效果、翻頁動畫、背景音樂、可統計瀏覽量，也提供定製。

案例：

羅賓·威廉士

6兔展

網址：http://www.rabbitpre.com/

兔展目前只支持Safari和chrome瀏覽器，承諾免費永久開放所有功能。

案例：

AngelaBaby

7易企秀

網址：http://eqxiu.com/#/home

免費，有多種動態模板，能實現文本和圖片帶有滑動、隱現、放大縮小等動態效果。同時有ios 移動客戶端，在手機上也可創建場景應用，以及數據統計。

案例：

寫給更努力的你——你好，2015

8品趣

網址：http://pro.pin-qu.com/site/index

時趣出品，為中小企業定製的社會化媒體營銷軟體。

9Epub360意派

網址：http://www.epub360.com/

為專業設計師打造的互動設計利器，交互效果強大，動畫效果出色，雖然簡單傻瓜式的模板不多，但自由度相對較高。

案例：

領英 職場十二字

10Vxplo

網址：http://www.vxplo.cn/

專注在線互動設計，功能強大，同epub360一樣適合專業設計師，可以零代碼製作輕應用。

案例：

維多利亞的秘密

再介紹5款國外的在線免費網站建設平臺，同樣無需編程知識。

11Wix

網址：http://www.wix.com/

Wix基於HTML5技術，向用戶提供多種網頁模板，操作簡單粗暴，零基礎無需代碼，智能拖拽即可實現網頁建設。據Wix統計每天有超過45000的新用戶加入Wix，每個類目下有上百的HTML5模板可供使用，響應式設計，在手機端也有很好的展示。另外也支持大量第三方插件。

12Google Web Designer

網址：http://www.google.com/webdesigner/

Google Web Designer是谷歌是專門為創意設計者打造的的可視化HTML5網頁和廣告設計開發工具，全功能均免費。它提供了所見即所得的設計環境，包含設計視圖和代碼視圖，還能製作Banner廣告動畫。（當然請自備梯子）

13Weebly

網址：http://www.weebly.com/

Weebly類似Wix，也是一款HTML5拖放式智能創建器，支持中文，擁有多種優秀網頁模板和交互效果，並且有IOS和Android客戶端可以管理自己的網頁、隨時隨地跟蹤。

14Ceilfire

網址：ceilfire.com

Ceilfire是一個創建HTML5遊戲並分享的平臺。用戶可以直接在瀏覽器中創建遊戲、參與遊戲、分享遊戲，無需編程知識和相關技術細節。想做簡單的HTML5遊戲可以用這種方式試試手。

15Jimdo

網址：www.jimdo.com

Jimdo是老牌的德國漢堡專業在線網頁自助建站平臺，在全球12個國家擁有超過1000萬用戶。用戶可在不懂任何網頁製作方面知識的情況下輕鬆製作出漂亮的網頁。同時除固定模板外，Jimdo允許用戶使用自定義代碼和widget外部插件接入。免費的IOS和Android移動客戶端支持編輯頁面。

下面開始向設計師推薦十款優秀 HTML5 在線工具，這些工具能夠幫助設計師們設計出更有創意的作品。

16Online Sprite Box Tool

這款在線的 CSS Sprite 樣式生成工具，結合jQuery、CSS3和HTML5開發，能夠幫助你快速的生成CSS Sprite 樣式。

17Online Pattern Generator Tool

這是一款在線紋理生成工具，當設計師需要製作網頁背景的時候，它能夠幫上大忙。這款工具提供了很多的配置選項，使用非常簡單，太棒了！

18Online 3D Sketch Tool

這是一款很特別的繪圖工具，使用功能強大的 HTML5 Canvas 來實現3D繪圖功能。向讓畫布進行立體選擇，你需要按住空格鍵並水平拖動滑鼠，非常酷！

19Online Font Testing Tool

對於設計師來說，選擇一款合適的字體是一個艱難的過程。這款非常棒的字體測試工具可以幫助設計師即時瀏覽新字體在頁面中的現實效果，不要修改任何的HTML或者CSS代碼，只需要把字體文件拖放的頂部的工具欄中，新字體就會出現在下拉列表中。

20Online Velocity Sketch Tool

這是一款基於HTML5的在線素描工具，能在在線繪製一些奇特的東西，圖片顯示的就是我隨手畫的，我相信設計師們能夠畫出更加有創意的東西。

21Online XRay Tool

通過這款工具，你可以查看到任何頁面上的元素細節， 類似於Firebug的元素查看工具，不過這個是在線的，不需要安裝插件，只需要把它們網站上的一個書籤項放到書籤欄，使用的時候點擊該書籤，然後再點擊需要查看的元素就可以了。

22Online Automatoon Tool

Automatoon 是一款完全基於HTML5開發的在線工作製作工具，完全沒有使用Flash，製作的動畫能運行於 iPhones、iPad、Android設備以及各種常見瀏覽器。

23Online HTML5 Audio Maker Tool

隨著HTML5發展，會有越來越多的HTML5網站開始使用強大的HTML5 audio標籤功能。這個在線 audio 生成工具能夠幫助你了解HTML5 audio提供的各種新特性，還有一款類似的在線HTML5 video 製作工具。

24Online SVG to HTML5 Canvas Tool

所有的矢量藝術包(Illustrator、Inkscape 等等) 都能夠導出為 SVG (可縮放矢量圖形)，而這款工具幫助幫助你把SVG文件轉換成HTML5 canvas。

25Chrome Ajax Animator Tool

這是一個跨平臺的動畫工具，在線和離線都能使用。你只需要安裝有Chrome瀏覽器，然後通過快速指導教程引導入門，是一款對HTML5 動畫初學者非常有用的工具。

25款優秀的HTML5製作工具已推薦完畢，不管是營銷員還是設計師還是對HTML5製作感興趣的人員，大家一起學起來，今夜我們都是HTML5製作人~

（尚道菌傾情整理奉獻，部分資料來源圈內人，翻譯來源：w3cdream夢想站，轉載請註明出處）

好內容要分享，動手指把它分享給你的朋友吧~

❤ 你的點讚是尚道菌用心運營這個帳號最大的動力！