.st0{fill:#FFFFFF;}

如何免費創建自己的網站 – Google協作平台 (Google site) 教學 

 2021-10-25

By  Mason

如果你有架設一個簡單的網站需求,而不想花錢請網站設計公司架站的話。那麼,你可以遵循本篇文章的教學步驟來完成網站架設,本篇文章將教你如何使用 Google site 網站製作屬於你自己的網站。不要懷疑,使用 Google site 網站創建網站,真的是完全免費的喔!

現在開始來架設網站吧!

首先你必須要有 一個 Google 帳號,若你還沒有 Google 帳號,可以至 Google 網站申請一個。申請好 Google 帳號之後,就可以開始架設網站了。

步驟一: 登錄你的 Google 帳號

  • 點擊進入 sites.google.com 網站 (Google協作平台)。
  • 輸入你的電子郵件地址或電話號碼,接著點擊 "繼續" 按鈕。
google site 登錄
  • 輸入你的密碼,接著點擊 "繼續" 按鈕。
google site 登錄

步驟二: 選擇你網站的類型或模板

你可以在此處選擇要創建的網站類型,依照自己的需求,你也可以選擇平台提供的模板。
這裡,我選擇一個空白網站,可以從零開始創建屬於自己的網站。 

google site

步驟三: 更改你的網站主題

點擊進入後,可以看到平台預設的主題。

  • 點擊右上方的 "主題" 標籤,接著選擇你想要的主題,這裡選擇 "外交官" 主題為範例。
google site 選擇主題

步驟四: 添加網站內容

我們現在可以進入第 4 步,即向你的網站添加內容。

1. 編輯網站首頁

  • 1. 假設你要更改此標題。 你'只需點擊、選擇此文字框,然後輸入你自己的標題即可。 如下所見,標題已更改。
  • 2. 如果你想放大或縮小這個標題的大小,你可以拖拉文字框兩邊。
  • 3. 如果你想更改此背景圖片,只需單擊“變更圖像”,然後選擇你想要的圖像並上傳即可。
google site-添加內容
  • 1. 接著,你可以在此處為你的網站添加網站名稱。 
google site-添加標題
  • 2. 如果你想為你的網站添加 LOGO。 單擊 "編輯標誌" 來上傳你的網站 LOGO 即可。
google site-添加標誌

接下來! 繼續為你的網站添加一個新內容。

  • 1. 要添加新內容,只需單擊 “插入” 。
  • 2. 你就可以看到有不同的內容佈局,你可以選擇你想要的內容布局,這裡我們選擇: 一欄為圖片另一欄為文字說明的內容布局。點擊之後就可以將其添加到我們的網站中。
  • 3. 點擊 "+" 上傳圖片。
  • 4. 點擊添加網站文字內容。
google site-添加新內容

完成編輯之後,我們可以繼續選擇另一內容布局來編輯網站,當編輯完成後,我們可以看到頁面呈現如下:

google site-添加新內容

一旦你完成了所有網站內容編輯之後。 接下來,我們需要添加網站頁尾到你的網站中。 要添加頁尾,只需將你的滑鼠滑至網頁底部,此時會出現 "新增頁尾" 標籤,單擊 "新增頁尾" 標籤,來編輯網站頁尾。

新增頁尾
  • 點擊左邊調色盤圖標,選擇你想要呈現頁尾的樣式,這裡我們選擇 "樣式3" 做示範。
新增頁尾樣式
  • 接著,點擊文字框並輸入版權內容及網站相關的聯繫信息。
新增頁尾

編輯完成後,我們可以看到頁尾部分呈現如下:

新增頁尾樣式

恭喜! 我們已經完成網站首頁了!

網站首頁

2. 添加 "聯絡我們" 頁面

接著,我們可以為網站添加一個新頁面 "聯絡我們"。

  • 1. 點擊 “頁面” 標籤。
  • 2. 點擊 "+" 圖標。
  • 3. 輸入"聯絡我們" 頁面名稱。
  • 4. 點擊 "完成"。
添加聯絡我們頁面

此時可以發現 "聯絡我們" 頁面已經建立完成。

添加聯絡我們頁面

接下來,我們需要先在 "Google 表單" 裡製作一個聯絡表單。

  • 點擊 "Google 表單",進入該網頁,接著點擊 "前往 Google 表單" 按鈕。
Google表單
  • 點擊右下角 "+" 按鈕新增一個表單。
Google表單
  • 1. 輸入表單名稱及相關訊息。
  • 2. 輸入 "姓名"。
  • 3. 選擇 "簡答" 選項。
  • 4. 勾選為必填 (若你不需要聯絡人的資料則可以選擇非必填選項)。
  • 5. 點擊右邊 "+" 按鈕新增另一個表格。
Google表單
  • 利用上述方法,添加 "電話" 和 "電子郵件" 表格。
Google表單
  • 接著再添加 "訊息" 和 "你希望我們用哪種方式和你聯絡?" 表格。
  • 在 "訊息" 表格中,我們可以選擇 "段落" 選項以利留言者可以輸入更多文字。
  • 在 "你希望我們用哪種方式和你聯絡?" 表格中,我們可以選擇 "核取方塊" 選項以利留言者勾選。
Google表單

恭喜! 我們已經完成了  "聯絡我們" 表單了!

接著,回到  "聯絡我們" 編輯頁面。

  • 1. 點擊 "插入" 標籤。
  • 2. 點擊下方的 "表單" 標籤。
插入表單
  • 此時在頁面右邊,可以看到我們之前製作的 "聯絡我們" 表單,接著點擊下方 "插入" 按鈕。
插入表單
  • 表單插入之後,將表單拖曳放大至適合大小。
插入表單

恭喜! 我們已經成功的插入 "聯絡我們" 表單了! 

插入表單

接著,我們可以測試一下表格的運作是否正常。當訪客完成留言並提交之後,我們可以到 Google 表單中看到訪客的留言訊息。

聯絡我們-回覆
  • 點擊 "回覆" 標籤後,接著點擊 "個別" 標籤,就可以在這裡看到每個訪客的留言。
聯絡我們-查看回覆

如果我們想即時得知訪客在我們網站上的留言,只需要開啟通知功能即可! 只要有訪客完成留言,Google 表單就會即時發送電子郵件給你喔!

  • 點擊右上角的三點符號(如下)。
聯絡我們-郵件通知
  • 接著選擇 "有新回應時透過電子郵件通知我" 功能,就完成設定了。如果有訪客在網站上留言,你將會即時收到電子郵件通知!
聯絡我們-郵件通知

我們已經完成 "網站首頁" 及 "聯絡我們" 頁面的架設了,如果你還有其他資料想要新增頁面的話,可以依照上述方法添加頁面。

接下來最後一個步驟就是要將網站發布至網路上了!

步驟五: 發布網站至網路上

  • 1. 點擊右上角 "發布" 按鈕。
  • 2. 輸入你的網站名稱 (若是網站名稱可用,則文字框之後會又打勾符號),你的網站網址將會是: https://sites.google.com/view/你的網站名稱
  • 3. 點擊 "發布" 按鈕。
網頁發佈

我們已經完成網站的架設也已經發布至網路上了! 現在,你可以開啟瀏覽器並輸入你的網址看看效果如何!

總結

雖然利用 Google site 網站可以架設一個屬於自己的免費網站,它不需要虛擬主機的費用,也不用支付網域費用;但是這樣架設出來的網站是屬於比較簡單型的網站,因為 Google site 本身並沒有提供太多網站設計功能。

另外,利用 Google site 架設的網站,網站網址是附加在 Google site 網址之下 (https://sites.google.com/view/你的網站名稱),在觀感上感覺比較不專業。如果你不想花錢或只是想記錄一些生活點滴、或者是小型公司、商家架設簡單型公司形象網站,那麼,利用 Google site 架設網站即可。

但是,如果你想讓你的網站在日後有擴充的可能性,或者想架設更專業、功能性強、並且擁有自己專屬網域名稱、電子郵件名稱的網站,那麼還是需要架設 WordPress 網站,這意味著你必需每年支付虛擬主機租用及網域的費用。

幸運的是目前市面上有非常多虛擬主機供應商可以選擇,初學者可以選擇費用較合理 (虛擬主機租用及網域的費用: 每月平均大約在150元台幣左右) 的虛擬主機供應商即可,如: Bluehost 或 Hostgator。若你想要了解的話也可以參照下面兩篇文章的教學:

如何使用 bluehost 快速架設網站? 簡單、易學 – 新手免費教學 (WordPress)

如何使用 HostGator 快速架設網站? 簡單、易學 – 新手免費教學 (WordPress)

希望本篇文章對你在 Google site 平台架設網站時有幫助! 若你有任何問題也可以在底下留言,我將盡快回覆!

相關文章:


後端開發 筆記 – 3


React 筆記 – 前端框架


CSS – 筆記

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>