TML5多媒體作品以其對各種平臺的兼容而見長，目前已獲得了廣泛的應用。如果我們需要制作自己的HTML5多媒體作品，一個方便之選就是利用現成的在線制作工具“百度H5”。

首先訪問“百度H5”網頁（https://h5.baidu.com/），可以看到非常簡單的頁面，僅有“我的H5”和“我的模板”兩個選項。其中“我的模板”是通過套用模板的方式來制作HTML5作品，而“我的H5”則可以完全靠自定義各種參數來自由創作，制作好的作品也會顯示在這里（圖1）。

1. 通過創意模板輕松制作

在首頁中選擇“我的模板”，隨后會進入一個模板展示頁面，這些都是設計者們分享的模板。根據你所要設計的作品的類別，可以按類選擇一個類似的作品作為制作的模板，然后在此基礎上進行修改，即可快速形成自己的多媒體作品（圖2）。

比如要制作一個招生方面的媒體作品，選擇如圖所示的秋季班招生模板，然后點擊右下角的“使用模板”按鈕（圖3）。

接下來先要為作品命名，例如“我們的幼兒園招生了”。輸入完畢點擊“確定”按鈕（圖4）。

隨后進入實質性的模板修改編輯階段。對于不合適的內容，可先刪除頁面元素再添加。點擊“文本”菜單插入所需文本內容。同理，可使用右邊的“媒體”按鈕插入圖片、音頻、視頻、嵌入視頻、全景圖等內容。如果是PSD圖片，則直接用PSD菜單載入。若版面中需要插入一些圖標或形狀，則點擊“圖形”菜單選擇添加（圖5）。

此外，對于作品中所要用到的展示數據，可以通過插入圖表、表單等方式，非常輕松地完成數據展示制作（圖6）。如果要實現更多的效果，可通過“插件”菜單，選擇添加頁面加載套件和加載進度、添加計數器、添加幀動畫、添加相冊或地圖等。

對于需要修改的屬性，可通過窗口右側的分類屬性窗口選擇設置。通過窗口下方的編輯區域，可控制動畫、加載頁、全局全景和背景、當前頁等參數設置。例如，要定制個性化的加載頁面效果，點擊“加載頁”選項卡，然后通過下方的滑塊，對加載頁中的圖片和進度進行自定義編輯（圖7）。

對頁面上的各種元素進行修改和編輯完成之后，點擊工具欄左上角的磁盤按鈕將作品保存在網上。注意，編輯過程中產生的內容軟件會自動保存，但為了防止丟失，還是要養成勤于手動保存的習慣。

最后，就可以發布作品了。點擊工具欄上的“發布”按鈕執行發布操作（圖8）。

由于作品是保存在網絡服務器中的，因此作品的共享是以網址的形式體現的。發布時要填寫作品分享的標題，設置個人域名。我們只需在“個性化域名”中填寫自己命名的作品個性域名地址，發布后其他人就可以用這個域名來訪問HTML5作品了（圖9）。

小提示：使用上述服務需要使用自己的百度賬號登錄。為維護網絡安全，目前發布信息需先經過用戶實名制認證方可進行。

2. DIY 完全自己設計制作

套用模板適合于初學者或設計能力不強的用戶。其實，不用套用模板，完全可以從頭全部由自己來設計作品。

制作時，在主頁中選擇“我的H5”，然后點擊空白頁上印有圓圈套加號圖標的按鈕，向導會詢問創建什么樣的布局。從“分頁布局”或“整頁布局”中選擇一種布局方式。如果是分頁布局，則依靠頁面間的前后滑動實現簡單跳轉；如果是整頁布局，則將整個頁面分為不同區域，各部分還可創建鏈接，實現不同的功能（圖10）。

隨后其他步驟與第1部分的添加和設置操作方法相當，只是全要親自設計，不能套用現成的組件而已。在創作過程中，只要善于使用系統提供的文本工具編排文字內容，用媒體和圖形工具添加圖片、圖形、音視頻，數據相關的內容使用圖表、表單等工具，借助于“插件”擴展來補充完善，發揮自由想象的創作空間，一定能創作出更具個性化的作品。

什么要使用HTML5？

1. 游戲開發。

   作為移動互聯網最火產業之一的——手游，越來越被大多數公司所青睞。而HTML5提供了一個非常偉大的，移動友好的方式去開發有趣互動的游戲。如果你之前使用Flash游戲，那么很快你就會喜歡上HTML5的游戲開發。

2. 更好的互動體驗。

   HTML5的畫圖標簽允許你做更多的互動和動畫以及動態的web應用程序，就像我們使用Flash達到的效果，有助于增加更好的用戶體驗。

3. 更聰明的存儲。

   HTML中最酷的特性就是本地存儲，它擁有更好的安全性能以及不需要第三方插件就能輕松實現。

4. 易用性 。

   更加簡單方便的創建網站。易懂的標簽有助于我們更好的了解文檔，創建更好的用戶體驗。

5. 視頻和音頻的支持。

   經常在網站上看視頻的人一定不會陌生flash以及其它的第三方應用吧，而HTML5的到來正式宣告flash時代在此方面的結束。HTML5擁有更加強大的視頻和音頻的支持。

6. Doctype。

   沒錯，就是doctype，沒有更多內容了。是不是非常簡答？不需要拷貝粘貼一堆無法理解的代碼，也沒有多余的head標簽。最大的好消息在于，除了簡單，它能在每一個瀏覽器中正常工作即使是名聲狼藉的IE6。

7. 更加清晰的代碼。

   HTML5擁有更加簡答、優雅、容易閱讀的代碼。

   遺留及其跨瀏覽器的支持。

   現在社會主流的瀏覽器 （Chrome，Firefox，Safari，IE9和Opera）都支持HTML5，即便是非常老非常令人厭惡瀏覽器像IE6都可以使用。

   未來HTML4將會更加的火。

   HTML5不會往每個方向發展，但是更多的元素已經被很多公司采用，并且開始著手開發。HTML5其實更像HTML，它不是一個新的技術需要你重新學習！如果你開發XHTML strict的話你現在就已經在開發HTML5了。開始用HTML5代碼編寫web應用吧，說不定下一個移動應用或者游戲應用就是用HTML5開發的！

學習HTML5這幾個網站你值得擁有

如今，HTML5的發展前景非常好，企業對HTML5建站需求很大，HTML5游戲領域研發熱火朝天。HTML5技術能為我們帶來炫酷的視覺體驗，除了電腦瀏覽器上讓人瞠目的效果，HTML5在移動端的表現同樣令人驚喜，并且HTML還在不斷的完善和發展。說到這大家是不是心動了，心動就行動吧？下面我給大家推薦幾個學習HTML5非常好的網站。

1.W3School http://www.w3school.com.cn/

對于基礎薄弱的人來說，這是一個不錯的網站。每一節都有學生時代老師般的“板書”，豐富的實例展示，還有工具書、小測驗等提升工具，猶如私人教練一般！

更豐富的實例，更詳細的解讀

2.H5之家。http://www.h5cn.com/

除了豐富且與時俱進的教程，這個網站還有很多關于HTML5業界的獨特見解，閑暇時候看看，拓展知識又能在人前裝X。這樣的網站你值得擁有。

這么好的網站你早該知道的

3.360html5基地 http://html5.360.cn/

對于想學習HTML5游戲開發的人來說，這是一個不錯的選擇。350旗下的HTML5作品展示網站，大部分是HTML5游戲展示，可愛豐富有趣。

種類繁多的游戲

4.HTML5 Games http://html5games.com/

相對350來說更加豐富的HTML5游戲資源，品味更加原生的開發也是一種不錯的選擇，說不定玩著玩著技能激發設計靈感呢！

更加原味、更豐富的游戲體驗

5.Dive into HTML5 http://diveintohtml5.info/

一個專門為HTML5而生的網站，這個網站幾乎都是關于HTML5的文檔，講一些很基礎的知識，簡潔清新。如果想學習HTML5的同時提高英語閱讀能力，這個網站是非常好的。

英語不好的人也可以嘗試著學習啊

6.HTML5xCSS3 http://www.html5xcss3.com/

擁有超豐富的HTML5案例和模板，隨便點開一個案例都好看到讓人震驚。里面的全部都是HTML5響應式網站喲！

勇敢的挑戰自己

7.HTML5技術網 http://www.51html5.com/

一個充滿干貨的網站！你想要的不想要的，這里全都有！

沒事的時候常來看看定會收獲不小

8.HTMLDemos http://html5demos.com/

測試HTML5標簽在各瀏覽器的兼容性，還能查看各種HTML5的標準Demo演示。

這是一個測試網站

9.The HTML5 test http://chrome.360.cn/test/html5/index.html

能為瀏覽器對HTML5的兼容性打分，可以知道你當前的瀏覽器對HTML5的支持情況如何，各種標簽和組件的支持情況。

這也是一個測試網站

當然，光看網站有的小伙伴會覺得沒有方向感，不知道該從那些地方下手。不妨結合教科書來個系統的學習。入門級必備兩本教材《Head first HTML&CSS》和《JavaScript DOM編程藝術》，看書再結合網站學習，不斷的練習、不斷的學習相信不久你就會成為HTML5大神啦！

不積跬步，無以至千里。千里之行，始于足下。從現在開始，每天給自己20分鐘了解HTML5技術，你會發現其實編程也挺有趣的。http://www.iisp.com/design/?s=yuqiuping。

當然上面的有些內容是借鑒有其他人的，好的東西拿出來大家一起學習、共同進步。其實做人做事都是一樣，只有不斷的學習、不斷的借鑒好的、擯棄壞的，這樣我們自己才能進步的更快。

TML5可不是什么虛幻的概念，與其高談闊論的討論HTML5未來的趨勢和價值，不如一起研究一下現在的HTML5可以做出哪些成果，可以讓我們做出出色的產品。

Form Follows Function就是一個展示HTML5實現的網站，目前網站展示了14個作品，其中包括了交互操作以及視覺效果。這些效果本身并不是一個完整的產品，但是加入到產品中就能讓產品生色不少。

1、散景（Bokeh）

一種圖像的焦外效果，通過HTML5實現的這種效果可以加載在背景、字體浮現。

2、3D效果

3D西紅柿罐頭湯，可通過鼠標進行旋轉操作，同時底部有一個倒影效果，一個很優秀的交互效果示范。

3、宇宙全景圖

設定整個宇宙的場景，可以用360度觀察整個宇宙星云，這種實現方式呈現出的效果更接近Google的街景地圖。

4、像素化效果

這種效果用于圖片很有趣，而實際可利用到的領域，還有待探索。

5、螺旋效果

字體的旋轉效果，簡單的近乎一張GIF圖片，不過通過對文章的替換，可以輕易的轉換成各種各樣的文案展示。

6、結晶化濾鏡

通過鼠標可選擇結晶化的范圍，用于網頁可對界面直接做出更多的交互視覺效果。

7、色相混合

隨著鼠標移動而改變各個位置的色相，一種很簡單就能匯聚用戶視線的交互效果，不過在簡單的背景才更能體現這種效果的價值。

8、翻轉時鐘

一種時鐘的展示效果，結構非常簡單，而看上去也很清晰明了，適合嵌入到很多不同的頁面中作為實時時間的展示。

9、水紋倒影

一種視覺效果，在這個Demo中可以調節倒影波動的速度。這種效果適合制作Logo以及主頁的展示。

10、自由落體

“下雨的人”展示了一種自由落體的效果，可以用鼠標條件調節飄落的角度，提供了一種帶有物理效果的交互操作。這種功能特別用于游戲。

11、水面波紋

同樣是一種物理效果，可通過鼠標刺激水面波紋，在網頁上就能輕松實現。

12、樹的成長

一種應激操作的交互方式，點擊一次長出一棵樹，可用于網頁展示的附加效果。這種效果在視覺上有多種用法，網頁、游戲都可以。

13、字母雨刷

在屏幕上掃除字母的雨刷效果，初次看見感覺像是網頁刷新的過度畫面。

14、漸顯效果

通過一些雜亂無章的線逐漸顯現出一幅畫，中間的顯現過程很適合作為網頁加載的等待界面。

原文鏈接：http://www.gbtags.com/gb/share/2595.htm