網站首頁 生活 健康 母嬰 情感 職場 休閒
當前位置:生活百科谷 > 科技 > 科技生活

h5頁面怎麼製作

欄目: 科技生活 / 發佈於: / 人氣:6.22K

h5頁面怎麼製作

1、添加基礎組件,點擊中間區域,添加個文本試一下,選擇中號字。

2、添加個圖片,點擊媒體,選擇圖片,上傳圖片,選中圖片即可加入當前頁面。

3、點擊媒體,選擇音頻,點擊上傳音頻,選中上傳的音頻即可加入到當前頁面。另外還可以添加視頻等其它組件。

4、設置頁面,我們先設置下背景,點擊背景。點擊顏色框選擇顏色作爲背景,當然也可以點擊後面的圖片,從電腦中選擇圖片作爲背景。

5、設置對象,背景設置完成,需要選擇對象進行設置樣式等。文字:我們選中剛添加的文本,在右側的“編輯“中可以調整顏色、行高、對齊方式、文本投影等屬性。

6、圖片:同樣的也是選中圖片,通過右側屬性面板進行編輯。通過外觀及編輯屬性,可以修改背景,旋轉等。音頻:音頻也是通過屬性,可以選擇是不是自動播放背景音樂。還可以更改音頻的圖片背景等等。

7、添加動畫。添加動畫的方式跟樣式修改一樣,也是需要選中目標,然後在右側的動畫屬性中修改。可以選擇讓文字彈跳出現,然後再讓圖片彈跳進入,最後讓音樂脈動進來。先選中圖片,點擊“添加動畫“按鈕,添加一個動畫。然後用同樣的方式把圖片跟音樂設置好。通過下方可以直接拉動時間和順序,便於控制。

8、添加事件。通過上面的步驟基本就設置完成一個H5頁面。這個事件分爲三類,一個是鏈接類,比如點擊文字,跳轉到頁面。

9、下載類,直接跳轉去下載APP。控制類,可以爲不同的按鈕綁定不同的控制類事件,當輕點“播放歌曲1”按鈕時,“歌曲1”播放,“歌曲2”暫停。

10、創作完成之後,點擊預覽,可以觀看製作的H5的效果。最後點擊發布就可以。


Tags:h5 頁面