軟網推薦：不裝軟件在線制作HTML5作品

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相冊生成和分享的應用。首次使用會提示登陸，支持微信，微博，QQ，FB一鍵登陸。登陸后你所有的創作都會同步到云端，不怕會丟失。

主頁面展示著熱門的模版和素材，左右滑動可以切換模版，主頁面默認顯示10個模版，涵蓋了旅行，親子，聚會，個人，婚禮，其他等各種類型模版。

如果你覺得才區區10個，也好意思在你的火眼晶晶面前賣弄，這種東西怎么可能入的了您的法眼。當然不知如此，在最后一個模版處左滑即刻打開更多推薦的模版。你以為這就是全部了么？NO！點擊主頁面左下角的按鈕，模版會乖乖自動分類出現在你的面前。包括了婚禮，情感，旅行，聚會，個人，親子，雜志，其他等八個分類。不論你需要什么模版它通通都有。有盡100個模版可供選擇。

選擇好心儀的模版，打開后系統會自動動態的展示你所選擇的模版，上滑查看下一頁。點擊下部正中央的編輯按鈕進入編輯模式，如果是網絡素材，系統會先進行下載。（PS.此步驟建議在WIFI下操作，當然土豪請無視。）

下載成功后進入圖片選擇模式，系統會提示你最多可以添加的圖片數量，默認打開是以最近圖片為排列的選框，當然也支持從相冊中選擇你需要的圖片，更加方便用戶選擇圖片。

點擊下一步軟件開啟初始化素材，如果選擇的圖片較多的話，此步驟可能需要一定的時間。初始化完成后系統會自動排列并依照模版生成動態相冊。

預覽右側按鈕為調整頁內順序選項，你可以根據自己的喜好任意調節播放順序。中間的播放按鈕為預覽按鈕，點擊后開始全屏預覽。右側按鈕為配樂按鈕，可以選擇無聲，也可以從自帶素材庫中選擇，自帶了14中音效可供選擇。加入符合作品的音樂和特效，創造更生動的回憶。

編輯完成后點擊右上角的軟盤標志即可保存。軟件會讓你選擇影集的分類。并且為他起一個優美的名字，值得一提的是，名字右側有一個小鎖按鈕，點按后可以將作品設為私密，其他人無法觀看。確定后會提示你保存到作品集還是草稿箱。保存草稿后后期還可以繼續修改，保存到作品集則不能另作修改。不錯很貼心的是，當你選擇保存到作品集的時候系統會提示你是否也同時保存到草稿箱以方便以后的修改。很是人性化。

上傳完成后你就可以把他分享給你的朋友們觀看了。支持微信，微博，空間，FB，鏈接分享。誰也無法阻擋你分享快樂的心情。

讓你的照片由靜止變成動態，用音樂、照片、文字認認真真將一段特別時光分享給你的朋友們。也送給自己一份生動的回憶。

周在給學生講授JavaScript課程中setInterval方法時，想到了我們在網上看到的各類GIF動圖比較有意思，就將其引入到教學中，教學內容設計如果通過HTML5與JavaScript實現網頁類似GIF效果的動態圖。于是在網上搜集了部分gif格式動圖，將每一個Gif動圖分解為一組jpg格式圖片，再采用setInterval與html5 Canvas進行動畫的實現。通過學習可以讓學生進一步了解canvas動畫實現的過程與原理。并將其發布到頭條，也希望對有興趣的初學者了解HTML5 Canvas等有所幫助。圖片分組圖片素材如下：

素材一

實現動畫的素材我們已經給出，主要通過gif動圖導出一組圖片，下面對html5動畫實現過程進行簡單說明。

基本思路

實現其動畫的基本思路是通過HTML5提供的canvas元素進行圖片的繪制與展示，借助setInterval方法實現間隔指定時間調用新的圖片實現重新繪圖。其中繪圖主要使用drawImage方法進行繪圖，最終通過圖片依次重繪實現動畫效果。具體實現過程如下：

HTML5 Canvas設置

在頁面body部分添加Canva標簽，設置其id屬性為canv，寬度為600，高度為400,編寫代碼描述如下圖：

添加畫布元素

canvas瀏覽效果

加載圖片資源

使用Canvas借助JavaScript提供的drawImage方法進行繪圖，需要提供要繪制的圖片資源即繪圖的坐標位置。該方法原型如下：

drawImage方法原型

因此我們需要加載圖片資源，本例由于需要調用多個img實現定時不同圖片的繪制，因此我們可以使用數組存儲所加載的圖片資源。本例圖片數量為14，因此我們數組長度為14。使用素組存儲圖片實現代碼如下：

加載圖片資源代碼

定義頁面加載事件onload

本例設計在頁面加載時自動播放動畫，因此需要在JavaScript腳本中添加頁面onload事件，在事件中編寫繪圖相關代碼，主要代碼包括獲取畫布canva與實例化繪圖對象context。部分代碼描述如下：

onload事件及繪圖初始化

使用setInterval實現動畫

使用setInterval方法實現動畫主要需要定義回調函數與回調函數觸發執行的周期，本例中我們使用匿名函數作為回調函數，觸發周期設置為100毫秒。setInterval函數定義如下：

setInterval函數

在定義完函數之后可在其匿名函數函數體部分寫入繪圖方法dramImage(),實現周期調用不同圖片資源進行繪圖，最終展示出動畫效果。為了保證循環調用14張圖片，我們需要設置一計數全局變量i，由于我們圖片采用數組存儲，下標為數組，且從0-13進行編號，因此當計數值小于13時自動+1，指向下一數組下標，當為13時，設置計數值為0，回到數組第一元素，最終實現數組訪問下標的循環。setInterval實現完整代碼如下：

setInterval完整代碼