免費架站王Weebly

以下將著手以「潮玩香港」為主題，在 Weebly 上建立一個完整的網站，讓所有讀者可以看到一

個網站由草創到誕生的全部過程，只要依循步驟

操作，你也能自建一個美麗的網站作品

網站快速 DIY：潮玩香港網站

Chapter03

3-12

3.3.3 加入社交媒體圖示

在首頁上很適合使用 社交媒體圖標 模組在網頁上加入多種主流的社交媒體圖

標，如 Facebook、Twitter ... 等，讓瀏覽者增加聯絡互動的機會。

1. 拖曳 社交媒體圖標 模組到右方的頁面上，放開後即會在頁面上新增多個

社交媒體的圖標。

2. 選按 社交媒體圖標 區域後會顯示模組的設定視窗，選按 添加 / 編輯圖標

鈕，會出現預設的圖標列表，請依序填入相關的服務連結。如果還要加入

其他的社群圖標，可以在下方設定。

3. 完成後即可在頁面上看到多個社交媒體的圖標。

3-13

網站快速D

IY

：潮玩香港網站

03

3.4 「關於香港」頁面製作

「關於香港」頁面的主要目的是要介紹香港的一些基本資料，這裡使用 Tall

Header 大標頭的版型，除了在頁面的上方會顯示大型標題圖片外，還能加上

相關的標題文字。

3.4.1 設定 Tall Header 版型及加入頁面佈局

1. 請切換到 構建 單元後選按右方上的 關於香港 連結，目前顯示的即是 Tall

Header 大標頭的版型，首先請選按圖片中的主標題文字後進行修改。

2. 接著要更換標題圖片，請將滑鼠移到圖片的右下方，選按 編輯圖片 鈕。

3. 在對話方塊中會提供許多背景圖片供使用者選擇，使用對話方塊右上方的

下拉式功能表中，可以設定不同的分類進行篩選。使用對話方塊左下方的

上傳圖片 鈕可以上傳自己的圖片當作背景。

3-14

4. 選擇圖片後，系統會立即將該圖片設定到頁面上供使用者預覽。

5. 選擇圖片後按 確定 鈕即可將圖片套用到版面上，此時可以利用畫面下方

的功能列，除了更改圖像，還能夠設定多種特效，完成後按畫面右上角的

保存 / 僅保存至此頁 即可完成設定。

6. 接著要為頁面加入內容，請按下 選擇一個佈局 鈕快速新增，用滑鼠選按

適合的佈局，即可馬上套用到頁面上。

3-15

網站快速D

IY

：潮玩香港網站

037. 回到頁面後會將選擇的佈局套用到目前頁面上，選按 取消 鈕可以回到對

話方塊重新選取，按 保留 即可完成套用。

3.4.2 使用搜尋功能加入免費圖片

在 Weebly 中加入圖片，除了可以上傳本機的圖片，還可以利用搜尋功能加入

適合的免費圖片，對於沒有適當圖片素材的人來說，實在是相當好用的功能。

1. 選按版面上要置換圖片的位置後，系統會開啟對話方塊，請選擇上方的 搜

索，接著在下方的欄位輸入相關的關鍵字後按 搜索 鈕。

2. 此時對話方塊中會顯示搜尋的結果，選擇 免費照片 的標籤所顯示的照片

都是可以免費使用在網頁上的素材。

3. 當滑鼠移動到圖片上會以較大的視窗顯示，可以直接選按 選擇 鈕完成圖

片的置換。如果想收集所有喜歡的圖片以供日後使用，可以按 添加到收藏

夾 鈕。

3-16

4. 將所需要的圖片都加到收藏夾後，請選擇上方的 最愛 後即可看到這些圖

片。將滑鼠移動到圖片上會以較大的視窗顯示，選按 選擇 鈕完成圖片的

置換。

5. 接著要更改版面上相關的標題及本文的內容，並且刪除不需要的按鈕。最

後請置換相關圖片，除了使用本機圖片上傳的方式，不妨利用搜尋功能使

用 Weebly 所提供的免費圖片，其中不乏優秀的佳作喔！

3-17

網站快速D

IY

：潮玩香港網站

03

3.5 「景點特搜」頁面製作

「景點特搜」頁面也是使用 Tall Header 大標頭版型，特別是在內容中利用

圖庫 模組組合各個景點的代表照片，當瀏覽者將滑鼠移到景點照片上會顯示

景點名稱，選按後會前往相關頁面。

3.5.1 設定 Tall Header版型及加入頁面佈局

1. 請切換到 構建 單元後選按右方上的 景點特搜 連結，目前顯示的即是 Tall

Header 大標頭的版型，首先請選按圖片中的主標題文字後進行修改。

2. 接著要更換標題圖片，請將滑鼠移到圖片的右下方，選按 編輯圖片 鈕。

使用對話方塊左下方的 上傳圖片 鈕可以上傳自己的圖片當作背景。選擇

圖片後，系統會立即將該圖片設定到頁面上供使用者預覽。

3. 選擇圖片後按 確定 鈕即可將圖片套用到版面上，此時可以利用畫面下方

的功能列，除了更改圖像，還能夠設定多種特效，完成後按畫面右上角的

保存 / 僅保存至此頁 即可完成設定。

3.5.2 設定圖庫模組

這個單元中要巧妙地利用圖庫模組當作單元頁面切換的選項，請依下述步驟進

行設定 :

1. 請按下 選擇一個佈局 鈕快速新增，在 組合 分類中選按第一個內含了 圖

庫 模組的佈局，即可馬上套用到頁面上。

3-18

2. 回到頁面後會將選擇佈局套用到目前頁面上，按 保留 即可完成套用。

3. 當選按 圖庫 模組時會顯示圖片上傳的對話方塊，按下按鈕後會顯示檔案

總管視窗，按 Ctrl 鍵不放選取所有要上傳的圖片，按 開啟 鈕上傳。

4. 完成後即可在頁面上看到所有上傳的圖片彙集的圖庫，預設每列圖庫列數

及功能並不符合目前需求，將進行調整。

3-19

網站快速D

IY

：潮玩香港網站

035. 選按 圖庫 區域後在設定視窗將 列 調整為 3。 標題 設定 顯示：「Lightbox

& Partial Thumbnails」，核選 Display Caption On Hover。按 高級 設

定 Images Spacing：「5」、邊框：「Thick」、圖像比例：「Rectangle」。

6. 請分別選按每張圖片右上角功能列的 加入說明 鈕，並輸入所屬景點名稱。

7. 完成設定後，當你將滑鼠移到圖庫中的景點照片上會顯示景點名稱，移開

後就會消失。

3-20

3.6 「景點特搜」景點子頁面製作

「景點特搜」頁面中是以圖庫的方式顯示所有景點，當選按景點照片後會前往

相關景點的子頁面。在這個步驟中將先製作一個景點子頁面，再以此頁面複製

成其他頁面後再進行修改，即完成整個單元。

3.6.1 新增子頁面

1. 請切換到 頁面 單元，按下 新增 鈕選擇 標準頁面 類型產生新的頁面，以

第一個景點名稱填入頁面名稱，設定 頁眉類型 為 Short Header。最後再

將這個新頁面項目往右拖曳到「景點特搜」項目之下成為子頁面。

2. 完成設定後按 保存並編輯 鈕進入 構建 單元進行頁面編輯，分別由 網頁

模組工具欄拖曳 圖像、標題、文本 模組到頁面上，如下圖佈置。

3. 請在標題與文本上輸入景點的標題與景點說明文字內容，接著選按 圖像

模組的位置會顯示圖片上傳的對話方塊，請由電腦本機上傳或以搜尋的方

式加入適當的圖片。

4. 選取加入的圖片，在 圖像 模組的設定視窗中設定 Lightbox 為 開啟，如

此一來當瀏覽者選按該圖片時會顯示大圖的燈箱特效。

3-21

網站快速D

IY

：潮玩香港網站

03

3.6.2 加入地圖模組

接著加入以該景點為中心的 Google Maps，以下要接著新增 地圖 模組：

1. 拖曳 地圖 模組到右方的頁面上，會顯示一條藍線為插入位置，放開後即

會在頁面上新增一個 Google Maps，其預設中心點在舊金山。

2. 選按 地圖 區域會顯示設定視窗，請在 地址 欄中輸入景點名稱做為關鍵

字，地圖在重整時即會以此為中心點顯示。

3. 到此即完成一個「景點特搜」的子頁面。

3-22

3.6.3 複製頁面

因為所有的景點子頁面的結構是相同的，所以在完成了第一頁之後，其他的頁

面只要複製後再進行修改即可完成。請依下述步驟進行頁面的複製：

1. 請切換到 頁面 單元，在左方選取剛完成的子頁面項目，按畫面右下角的

複製頁面 鈕，即可以目前的頁面複製出另一個新的頁面。請依照網站架構

圖的規劃修改新頁面的名稱，並拖曳到「景點特搜」項目下成為子頁面。

2. 請重複操作相同的動作新增其他景點的頁面，並調整成為「景點特搜」項

目的子頁面。

3. 接著請一一選擇剛才所複製的子頁面，按畫面右下角的 保存並編輯 鈕進

入該頁面的 構建 單元進行頁面的編輯。依照子頁面的規劃修改使用的圖

片、標題及說明文字內容。最後再修改 地圖 模組，利用景點名稱為關鍵

字修改地圖的中心點，即完成子頁面內容的編輯。

3-23

網站快速D

IY

：潮玩香港網站

03

3.6.4 設定圖庫的連結

完成所有的子頁面之後，最後要回到「景點特搜」頁面，為圖庫裡的每張照片

加上連結：

1. 選按 圖庫 區域時顯示設定視窗，請按第一張圖片右上角功能列的 加入連

結 鈕，在 連接到 對話方塊中設定連到 標準頁面，並在下拉式功能表中選

取圖片所屬的子頁面，最後按 保存 鈕。

2. 請利用相同的方式分別為圖庫中其他的圖片進行加入連結的設定，讓每一

張圖片可以在選按後前往所屬的景點子頁面。