H5頁面如何製作??

H5頁面是隨著移動網際網路發展以及html定稿,特別是微信影響範圍擴大而發展起來的,H5頁面以其低成本、炫酷、方便的特點,受到了不少品牌推廣者的歡迎。在這裡就給大家介紹如何藉助兔展平臺,不懂程式碼也可以製作出H5頁面。

H5頁面如何製作?

工具/原料

圖片、音樂、方案等在製作H5頁面需要用到的素材。

進入平臺

選擇模板

首先進入網站後註冊賬號並登入後,即可進入製作介面。在介面上可以看很多可供使用的模板,根據自己的需要,點選相應的模板。

H5頁面如何製作?

進入製作平臺

選擇完模板後,會自動進入製作平臺。在製作平臺上,主要分三大區域:左側的作品結構顯示區域,中間的是作品製作區域,右側的是元件屬性修改區域。

H5頁面如何製作?

功能介紹

文字

1、功能定義:用於展示文字內容,通過修改文字的顯示屬性,可以生成各式各樣的顯示效果。

2、操作方法:點選右側的文字選項,編輯面板的右上角會出現文字輸入框,雙擊輸入框可以修改文字內容;修改右側的屬性選項,可以改變文字的顯示樣式。

3、屬性說明:

1)字型:改變文字的字型,提供的是兔展資料庫的字型,非電腦本地字型。

2)字號:修改文字的顯示大小。

3)行距:修改兩行文字間的間距。

4)調色盤:修改文字顏色。

5)寬度:修改文字輸入框的寬度,單位畫素。

6)高度:修改文字輸入框的高度,單位畫素。

7)透明度:修改文字的透明度,100%為不透明,0%為全透明。

8)旋轉:調整文字與水平線的夾角,正數為順時針旋轉,負數為逆時針旋轉。

H5頁面如何製作?

圖片

1、功能解釋:用於顯示圖片,通過修改圖片的顯示屬性,可以改變圖片的大小、透明度、角度等。

2、操作方法:

1)啟用功能:點選右側的圖片選項,編輯面板的右上角會出現兔展的logo圖片。

2)上傳新圖片:點選屬性欄中的上傳按鈕,上傳本地電腦中的圖片進入替換。

3)圖片庫中的圖片:如果之前已經上傳過圖片,可以從圖片庫中選擇需要顯示的圖片。

4)截圖:按住滑鼠左鍵拖動選擇圖片區域,然後點選截圖按鈕或者雙擊選中的圖片區域,便可以裁剪出選中的圖片區域。

3、屬性說明:

1)寬度:修改圖片的寬度。

2)高度:修改圖片的高度。

3)原比例:此選項打上勾好,圖片的寬度和高度將按照圖片原來的比例顯示,修改其中的一個數值,另外一個數值會除之改變。

4)透明度:修改圖片的透明度,100%為不透明,0%為全透明。

5)旋轉:調整圖片與水平線的夾角,正數為順時針旋轉,負數為逆時針旋轉。

H5頁面如何製作?

按鈕

1、功能解釋:用於新增連結按鈕,可以新增一切頁面的連結,如:微博連結、微信公眾號關注連結、官網連結、淘寶連結等等。

2、操作方法:點選右側的按鈕選項,編輯面板的右上角會出現文字輸入框;修改右側的屬性選項,可以改變按鈕的引數和樣式。

3、屬性說明:

1)文字:修改按鈕上顯示的文字。

2)連結:需要按鈕連結到的頁面,注意連結開頭要包含“ ”。

3)填充色:按鈕上的背景顏色。

4)邊框色:按鈕的邊框顏色。

5)形狀-邊框:修改邊框的寬度,“0”代表按鍵無邊框。

6)邊框-圓角:修改邊框邊角的圓潤程度,數值越大,按鈕邊角越圓潤。

7)寬度:修改按鈕的寬度。

8)高度:修改按鈕的高度。

9)透明度:修改按鈕的透明度,100%為不透明,0%為全透明。

10)旋轉:調整按鈕與水平線的夾角,正數為順時針旋轉,負數為逆時針旋轉。

H5頁面如何製作?

表單

1、功能解釋:是允許使用者在表單中輸入並提交文字資訊的功能元件,使用者提交的資訊可以在帳戶欄目下的表單資料中顯示。表單中,可以自定義每個選項的名稱和專案的數量。

2、操作方法:點選右側的表單選項,彈出新建表單視窗,對錶單內容進入新增。

3、屬性說明:

1)表單標題:新增表單的標題。

2)行標題:新增表單的行標題。

3)按鈕內容:新增按鈕的顯示文字。

H5頁面如何製作?

底圖

1、功能解釋:設定頁面的背景顏色或者圖片。

2、操作方法:點選右側的背景選項,對具體屬性進行修改。

3、屬性說明:

1)背景色:修改背景顏色,背景顏色將以純色顯示。

2)上傳新圖片:點選屬性欄中的上傳按鈕,上傳本地電腦中的圖片作為背景。

3)圖片庫中的圖片:如果之前已經上傳過圖片,可以從圖片庫中選擇需要顯示的圖片作為背景。

4)截圖:按住滑鼠左鍵拖動選擇圖片區域,然後點選截圖按鈕或者雙擊選中的圖片區域,便可以裁剪出選中的圖片區域作為背景。

H5頁面如何製作?

音樂

1、功能解釋:設定修改當前作品的背景音樂。

2、操作方法:

點選右側的配置選項,點選選擇檔案按鈕,從彈出的視窗中選擇出本地電腦的音訊檔案,點選確定,然後點選上傳按鈕。

H5頁面如何製作?

擴充套件

1、功能解釋:設定當前頁面切換效果和擴充套件選單。

2、操作方法:

點選右側的配置選項,選擇須要的效果進行修改。

H5頁面如何製作?

動畫

1、功能解釋:用於設定元件的動畫效果,使展示顯得更酷炫。

2、操作方法:選中需要設定動畫效果的元件,點選右側的動畫選項,選擇需要的動畫效果。

3、可設定動畫的元件:文字、圖片、按鈕。

H5頁面如何製作?

儲存生成

在製作頁面的右下角,有儲存、預覽和釋出三個按鈕,使用者在製作完成後,需要先點選儲存,然後進入預覽頁面,把作品的標題、描述和封面圖完善後,即可以釋出。

H5頁面如何製作?

H5頁面如何製作?

注意事項

作品釋出後可以隨時修改,作品連結不會改變。

在兔展製作作品,需要使用谷歌瀏覽器。

相關問題答案