網頁風格可自定屬性

定出一個有自主風格、一睇就知係你嘅網頁。睇吓網頁風格有幾多嘢可以自由設定。

一個網頁想要獨特,就需要有一套屬於自己嘅風格,而依個風格就係透過更改一系列嘅項目屬性而成。喺網頁神整網頁,你可以自己決定點樣改變同改變邊樣屬性,令模板區塊,甚至係成個模板網頁都有一套特別嘅風格。以下係所有客戶可以要求改變或者需要設定嘅項目屬性:

注意:

  1. 屬性唔係改得越多就越好,尤其係模板網頁,所有屬性已經設計好晒,有時改多咗,可能會有反效果。
  2. 依部分係構成網頁風格嘅大範圍屬性,細範圍嘅區塊屬性睇依度
  3. 再細緻啲例如某隻字嘅顏色喺網頁做好後會有教學教你點改(同 MS Words 差不多)。
  4. 屬性優先次序:自定屬性 > 模板預設屬性 > 一般屬性。
  5. 客戶必須要為網頁設定最少一隻顏色。

網頁主風格

網頁顏色

可為網頁設定最多兩種顏色,一主一副。一般會用嚟做標題、超鏈結、按鈕或背景等顏色。

點擊瀏覽顏色代碼

網頁底色

主底色

可以選擇最常見嘅白色,比較型格嘅黑色,或者主/副色加深或變淺。

示範

預設

白色底色(預設)網頁示範

黑色底色 網頁示範

主色變淺底色 網頁示範

網頁寬度

除非有特別要求,一般提供標準、中型、大型三種比客戶選擇。

  • 標準(1000px):亦係預設寬度,係現時最多人用嘅寬度。適合文字比較多嘅網頁,使用者雙眼左右移動幅度較小。
  • 中型(1140px):適合圖文比例相近既網頁。
  • 大型(1370px):適合資料較少,圖片為主,想有空間感嘅網頁。

示範

預設

標準預設(1000px)網頁示範

中型(1140px)網頁示範

大型(1370px)網頁示範

區塊間距

每個區塊之間都要有一定嘅距離將佢地分隔開。一般嚟講可以分到四種距離:

  1. 窄:感覺緊密,適合資料較多嘅網頁。
  2. 適中(預設):八搭,適合絕大部分網頁。
  3. 寬:空間感高,適合資料較少網頁。
  4. 全屏,即高度與顯示器相同,但前提係內容唔可以過多。

示範

預設

文字

字體(只限非中文網站)

可為網頁設定一種字型,點擊瀏覽字型。

示範

預設

The font family used here is “Roboto”

這裡使用的字體是這是 “Noto Sans TC”

注意:

  1. 小部分字型可能無法使用。
  2. 若網頁為中文,中間夾雜的英文字將繼續使用中文原字體 “Noto Sans TC”。

一般文字段落

顏色

一般為黑色。

字型大小​

預設為 20 px。

字重(字體粗細)

除非有特別要求,一般有以下三種:

  1. 幼體:較為優雅細膩,一般適合設計類。
  2. 中型(預設):最多人使用,適合所有網頁。
  3. 粗體:較為粗獷型格,一般適合運動類。

示範

預設

這是一般文字段落,顏色為#2A2A2A,字型大小為 20 px,字重為 300 幼體。

這是一般文字段落,顏色為#2A2A2A,字型大小為 20 px,字重為 400 中型(預設)。

這是一般文字段落,顏色為#2A2A2A,字型大小為 20 px,字重為 500 粗體。

備註文字段落

顏色

一般為灰色,比一般文字段落顏色淺。

字型大小​

比一般文字段落略小,預設為 18 px。

字重(字體粗細)

預設與一般文字段落相同。

示範

預設

這是備註文字段落,顏色為#707070,字型大小為 18 px,字重為 400 中型

主標題(h1)

顏色

一般為黑色/白色(視乎背景)或網頁主色。

字型大小​

一般依照模板上設計出的大小,建議不要更改。

字重(字體粗細)

一般比一般文字段落重 200。

示範

預設

這是主標題,顏色為#2A2A2A,字型大小為 40 px,字重為 600。

副標題(h2)

顏色

一般為文字段落顏色或網頁主色。

字型大小​

預設 32 px。

字重(字體粗細)

一般比一般文字段落重 200。

示範

預設

這是副標題,顏色為#2A2A2A,字型大小為 32 px,字重為 600。

小標題(h3)

顏色

一般為文字段落顏色或網頁副色。

字型大小​

預設 26 px。

字重(字體粗細)

一般比一般文字段落重 200。

示範

預設

這是小標題,顏色為#2A2A2A,字型大小為 26 px,字重為 600。

超鏈結

顏色

如果沒有裝飾(底線),一般網頁主或副色。

顏色: hover (懸浮)

如果沒有裝飾(底線),一般為原本顏色加深或加淺。

裝飾

一般加底線,然後 hover 取消底線,但如果超鏈結已經有自己嘅顏色,可以唔加裝飾。

示範

預設

這是超鏈結,顏色為#6d970b

按鈕

顏色

一般黑或白,視乎按鈕顏色。

字型大小​

預設與一般文字相同。

字重(字體粗細)

預設與一般文字相同。

示範

預設

按鈕

圓角

按鈕分直角、小圓角同圓角三種。

  1. 直角:感覺俐落、常與幼體字同用。
  2. 小圓角:預設,八搭。
  3. 圓角:較常見。

顏色

一般網頁都有兩個按鈕,一主一副。客戶可以選擇用網頁主副色或者黑/白色(視乎背景)。

網頁主副色

主按鈕用主色;副按鈕用副色。

示範

預設

黑/白色(預設)

主按鈕用實色;副按鈕用空心。

示範

預設

寬度

分窄、中、寬三種。

厚度

分窄、中、寬三種。

其他屬性

種類凡多,直接選擇按鈕編號

:hover (懸浮)效果