網站基礎設置教學

Wordpress網頁設計教學 - 開始設計你的網站#2 - 封面

WordPress網頁設計教學 – 開始設計你的網站
所需時間:11 mins
你將會學到:為網站建立首頁與部落格(Blog)頁面、更新網站的標誌(Logo)、圖標(Favicon)、橫額(Banner)及主要色彩(Theme Color)

————————————————————

開始使用WordPress去設計你的網站

太好了,我們已經安裝了網站的內容管理系統(簡稱CMS),亦已經為它安裝了佈景主題,及所需要的外掛。接下來就要開始建立網站的內容了!在這課堂,我們會開始設計網站首頁,上傳所需的媒體內容,還會為網站的基礎架設(例如網站的LOGO,主要顏色等)

為網站新增頁面

在使用Wordpress建立網站,我們首先要建立兩個頁面,第一個是網站的首頁,第二個是網站的部落格(Blog)頁面。

  1. 在網站的左上角,點擊網站的名稱回到Wordpress後台
  2. (新增首頁) 在左邊的欄位,點 頁面 > 新增頁面 > 在請輸入標題的位置,輸入 首頁 > 右邊的模板,選擇 網站首頁 > 發表
  3. (新增部落格頁面) 完成發表首頁後,在上方點 新增頁面 > 在請輸入標題的位置,輸入 部落格 > 發表
  4. 為確保已經新增這兩個頁面,在左邊欄點 頁面,查看首頁及部落格已經新增

上傳圖片到網站

我把網站所需用的圖片都上傳到Google Drive,你可以自行決定,是使用我提供的圖片,還是自行上傳所需圖片。

  1. 到 Google Drive 下載圖片
  2. 在網站的後台,左邊的欄位中點 媒體 > 新增檔案 > 點 選擇檔案
  3. 將剛才下載的圖片上傳到網站
  4. 檢查圖片是否已經上傳

更新網站的標誌和圖標

  1. 外觀 > 自訂 > 在下邊的位置點 首頁設定
  2. 選擇 靜態頁面 > 在首頁的欄位選擇 首頁 > 在文章列表頁面選擇 部落格 > 點 發表
    這樣就可以指定網站的首頁和部落格的頁面,接下來…
  3. 點 網站標題/標語/標誌 > 點上邊的 選擇圖片 > 在媒體庫選擇 網站的標誌 > 點 選擇圖片
  4. 點下邊的 選擇圖片 > 在媒體庫選擇 網站的圖標 > 裁切圖片到合適位置 > 點 裁切圖片
  5. 完成後點 發表

你可能會有疑問,到底標誌和圖片是什麼呢?

網站標誌(Logo),在這個教學中,它是展示在網站的左上角,當用戶點擊標誌的時候,就會回到首頁,如下圖:

Wordpress網頁設計教學示範網站 - Logo展示位置

網站圖標(Favicon),是在你瀏覽器上的小圖示,在下圖中,橙色箭咀的是加入了網站圖標,如果沒有加入網站圖標,預設的圖標就會是綠色箭咀的那個:

Wordpress網頁設計教學示範網站 - Favicon展示位置

更新首面的背景圖片(Banner)

  1. 點 頁首區域 > 頁首投影片輪播 > 將投影片輪播速度改為 0
  2. 在第一張投影片的下方點 移除 > 再點 選擇圖片 > 選擇合適的圖片後,點 選擇圖片
  3. 輸入投影片的標題及子標題
  4. 拉到下面,更改行動召喚按鈕文字
  5. 完成後點發表

最後,是修改網站的主要色彩

  1. 色彩 > 一般 > 將主要色彩改為 #41a9d5
  2. 色彩 > 頁首 > 選單頁目(游標經過/停駐)改為 #e5e5e5
  3. 點發表

這樣,我們就完成了「WordPress網頁設計教學 – 開始設計你的網站」囉!

回顧一下在這一課我們做了什麼

  • 建立了網站的首頁及部落格
  • 把所需用的圖片上傳到網站
  • 更新了網站的標誌(Logo)及圖標(Favicon)
  • 更新了首頁的Banner
  • 修改網站的主要色彩

做得很不錯啊!現在網站開始呈現我們的風格了,下一課,是時候開始編寫網站的內容了。如果你對這課內容不明白,可以Inbox我啊

下一課:
#3 在首頁加入「有關於我」