多媒體網頁制作,HTML5網頁制作

　　HTML5多媒體作品以兼容各種平臺著稱，目前已被廣泛使用。如果我們需要制作自己的HTML5多媒體作品，一個便捷的選擇就是使用現(xiàn)成的在線制作工具“百度H5”。

　　首先，訪問百度H5 (https://h5.baidu.com/)，你可以看到一個非常簡單的頁面，只有兩個選項：我的H5和我的模板。其中“我的模板”通過應用模板來制作HTML5作品，而“我的H5”則可以通過完全自定義各種參數(shù)來自由創(chuàng)作，完成的作品也會在這里展示(圖1)。

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

　　在首頁選擇“我的模板”，就會進入一個模板展示頁面。這些是設計師們分享的模板。根據(jù)你要設計的作品的類別，你可以根據(jù)類別選擇一個相似的作品作為制作的模板，然后在此基礎上進行修改，這樣你就可以快速形成自己的多媒體作品(圖2)。

　　比如做一個關于招生的媒體作品，選擇如圖所示的秋季班招生模板，然后點擊右下角的“使用模板”按鈕(圖3)。

　　接下來要先給作品命名，比如“我們幼兒園招生了”。輸入完成后，單擊“OK”按鈕(圖4)。

　　然后進入實質性的模板修改和編輯階段。對于不合適的內容，可以在添加之前刪除頁面元素。單擊“文本”菜單插入所需的文本內容。同樣，你可以使用右邊的“媒體”按鈕插入圖片、音頻、視頻、嵌入視頻、全景等。如果是PSD圖片，直接用PSD菜單加載。如果您需要在布局中插入一些圖標或形狀，單擊“Graphics”菜單并選擇Add(圖5)。

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

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

　　修改編輯完頁面上的各種元素后，點擊工具欄左上角的磁盤按鈕，在線保存工作。注意，編輯過程中生成的內容軟件會自動保存，但為了防止丟失，需要養(yǎng)成手動保存的習慣。

　　最后可以發(fā)表作品了。點擊工具欄上的“發(fā)布”按鈕進行發(fā)布(圖8)。

　　因為作品存儲在網絡服務器中，所以作品的共享是以網址的形式體現(xiàn)的。發(fā)布時要填寫作品分享的標題，并設置個人域名。我們只需要在“個性化域名”中填寫自己作品的個性化域名地址，其他人發(fā)布后就可以使用這個域名訪問HTML5作品(圖9)。

　　提示：您需要使用您的百度帳戶登錄才能使用上述服務。為了維護網絡安全，目前，信息的發(fā)布需要經過用戶實名登記系統(tǒng)的認證。

　　2. DIY 完全自己設計制作

　　模板應用適合初學者或設計能力較弱的用戶。其實不用套用模板也可以從頭開始設計自己的作品。

　　制作時，在首頁選擇“我的H5”，然后點擊空白頁上印有圓圈加號圖標的按鈕。向導將詢問要創(chuàng)建哪種布局。從頁面布局或整頁布局中選擇一種布局方法。如果是分頁布局，只需在頁面間來回滑動跳轉即可；如果是整頁布局，整個頁面被分成不同的區(qū)域，每個部分也可以創(chuàng)建鏈接來實現(xiàn)不同的功能(圖10)。

　　其他后續(xù)步驟和第1部分添加設置的操作方法差不多，只是都要自己設計，不能套用現(xiàn)成的組件。在創(chuàng)作過程中，只要善于利用系統(tǒng)提供的文字工具對文字內容進行編排，利用媒體和圖形工具添加圖片、圖形、音視頻，利用圖表、表格等工具對數(shù)據(jù)相關內容進行補充和完善，借助“插件”擴展，充分發(fā)揮自由想象的創(chuàng)作空間，就一定能創(chuàng)作出更加個性化的作品。

　　制作H5過程

　　讓我們做一個一頁的H5來看看。

　　第一步是添加基本組件。

　　點擊中間區(qū)域，我們來加一段文字試試，選中詞。

　　然后我們添加一張圖片，點擊媒體，選擇圖片，上傳圖片，選擇圖片加入當前頁面。

　　一頁紙怎么會缺音樂？或者點擊媒體，選擇音頻，點擊上傳音頻，選擇上傳的音頻加入當前頁面。

　　還可以添加視頻等其他組件。

　　第二步：設置頁面。我們先設置背景，點擊背景。

　　我們可以點擊顏色框選擇顏色作為背景，或者點擊背景圖片選擇電腦里的圖片作為背景。

　　第三步：設置對象。設置背景后，需要選擇對象來設置樣式。

　　文本：我們選擇新添加的文本，可以在右邊的“編輯”中調整顏色、行高、對齊方式、文本投影等屬性。

　　我們可以用右上角的預覽實時預覽效果。

　　圖像：類似地，選擇圖像并通過右邊的屬性面板編輯它。您可以修改背景、旋轉等。通過外觀和編輯屬性。

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

　　第四步：添加動畫。添加動畫的方式和樣式修改一樣。您還需要選擇目標，然后在右側的動畫屬性中修改它。比如我們可以選擇讓文字彈起，然后讓圖片彈起，最后讓音樂脈動進來。

　　我們先選中圖片，點擊“添加動畫”按鈕，添加一個動畫。然后用同樣的方法設置圖片和音樂。時間和順序可以直接從下面拉，方便控制。

　　第5步：添加事件。通過以上步驟，一個H5頁面基本建立起來了。

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

　　還有下載類，直接跳轉下載APP。

　　控件類，可以為不同的按鈕綁定不同的控件類事件。當您輕按“播放歌曲1”按鈕時，“歌曲1”會播放，“歌曲2”會暫停。

　　創(chuàng)建后，點擊預覽，看看H5的效果。

　　最后，單擊發(fā)布。