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

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

 

 

1. 通過創(chuàng)意模板輕松制作

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

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

 

 

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

 

 

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

 

2. DIY 完全自己設(shè)計制作

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

 

 

制作時，在主頁中選擇“我的H5”，然后點擊空白頁上印有圓圈套加號圖標(biāo)的按鈕，向?qū)儐杽?chuàng)建什么樣的布局。從“分頁布局”或“整頁布局”中選擇一種布局方式。如果是分頁布局，則依靠頁面間的前后滑動實現(xiàn)簡單跳轉(zhuǎn)；如果是整頁布局，則將整個頁面分為不同區(qū)域，各部分還可創(chuàng)建鏈接，實現(xiàn)不同的功能（圖10）。

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

 

制作H5過程

我們來制作一個單頁的H5看一下

第一步添加基礎(chǔ)組件

點擊中間區(qū)域，我們添加個文本試一下，選擇中號字。

 

 

 

然后我們添加個圖片，點擊媒體，選擇圖片，上傳圖片，選中圖片即可加入當(dāng)前頁面。

 

 

 

一個頁面怎么能少了音樂呢，還是點擊媒體，選擇音頻，點擊上傳音頻，選中上傳的音頻即可加入到當(dāng)前頁面。

另外還可以添加視頻等其它組件。

 

 

 

第二步，設(shè)置頁面，我們先設(shè)置下背景，點擊背景。

我們可以點擊顏色框選擇顏色作為背景，當(dāng)然也可以點擊后面的圖片，從電腦中選擇圖片作為背景。

 

 

第三步，設(shè)置對象，背景設(shè)置完成，需要選擇對象進行設(shè)置樣式等。

文字：我們選中剛添加的文本，在右側(cè)的“編輯“中可以調(diào)整顏色、行高、對齊方式、文本投影等屬性。

我們可以右上角的預(yù)覽，對效果進行實時預(yù)覽。

 

 

圖片：同樣的也是選中圖片，通過右側(cè)屬性面板進行編輯。通過外觀及編輯屬性，可以修改背景，旋轉(zhuǎn)等

音頻：音頻也是通過屬性，可以選擇是不是自動播放背景音樂。還可以更改音頻的圖片背景等等。

 

 

第四步，添加動畫。添加動畫的方式跟樣式修改一樣，也是需要選中目標(biāo)，然后在右側(cè)的動畫屬性中修改。比如，我們可以選擇讓文字彈跳出現(xiàn)，然后再讓圖片彈跳進入，最后讓音樂脈動進來。

我們先選中圖片，點擊“添加動畫“按鈕，添加一個動畫。然后用同樣的方式把圖片跟音樂設(shè)置好。通過下方可以直接拉動時間和順序，便于控制。

 

 

 

第五步，添加事件。通過上面的步驟 基本就設(shè)置完成一個H5頁面。

這個事件分為三類，一個是鏈接類，比如點擊文字，跳轉(zhuǎn)到頁面。

還有就是下載類，直接跳轉(zhuǎn)去下載APP

控制類，可以為不同的按鈕綁定不同的控制類事件，當(dāng)輕點“播放歌曲1”按鈕時，“歌曲1”播放，“歌曲2”暫停。

 

 

 

創(chuàng)作完成之后，點擊預(yù)覽，可以觀看制作的H5的效果。

最后點擊發(fā)布就可以