分類
電腦網路

(一)十分鐘學會用新版”Google site協作平台”製作免費的網頁

認識Google site協作平台

Google Sites為Google App的一部分

只要有Google帳號,就能夠建立一個免費網站,同時可以多人共同協作、因此又稱為Google協作平台。

在開始建立網站前,我們要先規劃好網站的主題及架構,在這裡我設定的主題是”攝影社團”,並且規劃好這個社團網站的組織架構。

建立Google Sites文件及網站名稱

首先要使用Google Chrome 瀏覽器,並且登入Google的帳戶,可google”協作平台”或者開啟雲端硬碟再點擊左上角的”新增+”,往下移到”更多” 找到裡面的”協作平台”。

因為協作平台所有的資料都是存放在雲端硬碟,所以要先確保Google drive 有足夠的空間。

開啟Google協作平台後,在”未命名的網站”輸入協作平台文件的名稱,同時在協作平台文件名稱的下方欄位也會顯示相同的名稱,這是對外公布的網站名稱。

建立及編輯首頁

我們要為首頁的標題命名,這裡我輸入”攝影俱樂部”的標題。

進一步可以編輯標題的樣式、選擇字形>字體大小;也可以設定標題的超連結。

在頁首橫幅的左下角有“變更圖片”及“標頭類型”兩個選項;

點擊”變更圖片”內的”上傳”可以上傳電腦資料夾內的圖片,或者點擊”選取圖片”從內建的圖庫內選擇圖片,另外還可以從”您的相簿”Google雲端硬碟內選擇圖片。

點擊標頭類型可以看到裡面有封面、大型橫福、橫幅、只有標題..等四個選項讓我們選擇。

建立主題風格

我們可以設定整個版面的主題風格,在主題選項內可點擊不同的主題樣式,更改主題色彩以及文字的樣式,現在我選擇”憧憬”的主題樣式,並更改主題色彩為灰綠色 字形樣式為”經典”。

新增頁面

點擊”頁面”選項,現在只建立了一個首頁的頁面。

依照網站的組織架構在首頁裡面我要建立關於我們、活動、作品分享,影片賞析等四個頁面。

而”作品分享”的頁面內我要建立風景、植物、動物等三個子頁面;點擊右下角的”新增頁面” 輸入頁面名稱”關於我們”,接著將其他6個頁面分別建立好。

若想更改頁面的順序,可直接用鼠標拖拉來調整位置。

因為風景、植物、動物是作品分享的子頁面,所以我將它們拖移到作品分享的頁面內,就會成為作品分享的下一層頁面。

在編輯頁面的右上方有三個常用的功能選項復原、重作及預覽

我點擊預覽看看我們首頁的成果

設定-導覽列、品牌圖片、公告橫幅等功能

鼠標點擊”首頁”右上角的”齒輪”圖示功能,可設定功能表內的導覽列是”頂端對齊”或者是顯示在”側邊攔”。

側邊攔的導覽列比較適合用在有大量的頁面選項時,

我們也可以設定導覽列的底圖色是透明、白色或黑色,

點擊”品牌圖片“可以上傳或選取要加入全域導覽列的”標誌”符號,

在這裡我從電腦的資料夾中選取一個相機的圖示符號上傳,

如果擁有自己購買的網址,我們可以貼在”自訂網域”的功能選項 。在這裡可輸入網站要公告的內容,也可以設定橫幅的顏色。

當我們將鼠標移到頁面的最底端 會顯示”新增頁尾的功能,通常都會在這裡輸入網頁版權的聲明。

Copyright 2020 — DISBC平拍聚樂部. All rights reserved. 

接下來我們就要在頁面內放入內容資料。

插入圖片及文字

點擊”插入”功能,上面這四個選項是最常用的插入功能。

在首頁我想放入四則圖文的作品 ,我可以點擊圖片 再插入雲端硬碟的圖片,接著插入文字方塊, 編輯文字。

我也可以由版面配置上選擇有四則圖文的版面配置來編輯圖文。

點擊”+”後再”選取圖片”,由google driver選擇圖片, 再點擊”Insert” 。

這裡要補充一下說明,我們編輯網頁的時候,最好將所要使用到的圖片都上傳到雲端空間。

接下來點擊圖片下方的文字方塊來輸入文字,在編輯文字的時候,上面這一排功能可以針對文字作進一步的編輯。

隱藏頁面的設定

我依序將四則的圖文都編輯好,但是這四則圖文的圖片尺寸都太小。我想點擊小圖片時能欣賞到更大的圖片,因此我必須再建立四個大圖片的頁面,提供小圖片的連結。

我依序再建立”圖文範例一”至範例四,等四個頁面,這時候最頂端的導覽列也會出現”圖文範例一”至圖文範例四”的頁面選單。

我想隱藏這四個頁面的選單讓導覽列更簡潔。

因此我點擊”圖文範例一”旁邊的三個黑點圖示,然後選擇”在導覽列中隱藏” 分別將四個範例的頁面導覽都隱藏起來 。

插入連結

回到首頁的頁面,點擊第一個圖文的圖片。在圖片上方的功能選項內選擇插入連結的圖示,貼入”圖文範例一”的頁面名稱。

我依序將”圖文範例二”至”範例四”的連結都設定好,再點擊”預覽”功能,當鼠標移置第一個小圖的時候,鼠標會變成手掌的圖示。 

再點擊鼠標就會連結到我們剛才建立好的”圖文範例一”的頁面。

但是這四個被連結的頁面還沒有頁面的內容,

現在我們點擊右下角的結束預覽,回到圖文範例一的編輯頁面。

點擊”標頭類型”然後再選擇”只有標題” , 

點擊”插入”再選擇> 圖片> 選取,

從”我的雲端硬碟”裡面選取”圖片”插入之後,按著鍵盤上的shift鍵並拖拉右下角的端點,等比例將圖片放大 ,接著點擊插入”文字方塊”,將事先編輯的文件按”CTRL+C快捷鍵”複製文字”。

之後按 “CTRL+V貼到文字方塊內,我們再將鼠標移至”文字方塊”的欄位旁邊,當出現”十字形箭頭”的移動符號時,即可拖拉”文字方塊”到圖片的右側。

接著將其他三頁的圖片範例都填入圖片及文字方塊,並且調整好圖片大小及文字方塊的位置。

預覽即發

回到首頁再點擊”預覽” 試一下建立完成的首頁功能。

前面我曾經介紹過Google新版協作平台支援RWD響應式網頁,網站內容會自動針對手機及平板做最佳化的調整,因此在預覽頁面右下角的預覽選項,我們可以分別測試手機、平板以及電腦預覽畫面的切換。

最後點擊發布(放大),在”發布到網路的網址”我輸入網站名稱”DISC”。

這時候底下顯示一排紅字”已經有其他網站使用這個網址”

因此我在後面增加一個字母”B”…….

底下顯示的網址即是我們網站上公告的網址,同時我們回到首頁的編輯頁,將協作平台文件的名稱以及網站名稱同時修正好。

如果這是一個公司或學校內部的行政溝通平台,我們可以勾選”要求公開搜尋引擎不顯示我的網站”。

現在點擊”發布”即可在網路發布建立好的網頁了。