網站搬家到Google Site超簡單

第1步驟：在自己帳號的Google雲端硬碟建立 [新資料夾]，這個資料夾主要是用來存放建立網站需要的所有檔案。(範例)

注意：基於後續管理權限移轉的考量，要先決定採用什麼類型的Google帳號來建立網站及其資料，因為Google for Education帳號彼此能移轉、Google免費帳號彼此也能移轉、但Google for Education帳號與Google免費帳號間不能移轉。 所以，先問網站要移轉給後續管理人所使用的Google帳號類型，再以同類型帳號開始建立這一切。

第2步驟：在該資料夾上按滑鼠右鍵選擇 [共用] 或 [取得連結]， 將該單位的管理人加入共編。(待網站完成後再將其該管理者人變更為擁有者，再請他將我們的帳號取消共編權限，這樣就能將整個網站資料夾移轉給該單位管理。)

第3步驟：點進去剛剛建立好的資料夾(如截圖的 "1120508文學院網站" )，[+新增] [Google協作平台]，這個Google協作平台就是一個獨立的檔案，後續就是編輯這個檔案進行網站頁面設計。

第4步驟：在這個資料夾之下繼續建立 [新資料夾]，建議是依照網站的選單及次選單結構分別建立資料夾，準備用來把原網站上呈現的圖片及PDF等檔案都先複製到Google雲端硬碟的這些資料夾裡面，以便後續建置使用且容易管理。

第5步驟：將剛剛建立的所有子資料夾選取起來，按滑鼠右鍵選擇 [共用] 設定 [一般存取權] 變更為 [知道連結的任何人]，這樣做就能讓後續上傳存放到這些資料夾裡面的檔案都是可讀取的，因為這些都是要存放網站上呈現的圖片及PDF等檔案，本來就都要設定為可讀取。

第6步驟：然後到原網站上呈現的圖片及有PDF等檔案超連結之上，按滑鼠右鍵另存檔案到自己的電腦，然後再將暫存在自己電腦的這些檔案拖曳上傳到對應的資料夾中。

第7步驟：最後做個確認，各個資料夾是否都有將原網站上呈現的圖片及PDF等檔案完整保存起來了，將原網站資料都先搬家到Google雲端硬碟之後，就可以接著進行網站設計囉。

第1步驟：開啟前一階段第3步驟所建立的Google Site檔案，在右側欄點選 [頁面] 切換到這類的操作功能，按最下方的 [＋] 選擇 [新增選單專區] ，將原網站的主選單第一層選項都一一建立出來。

第2步驟：然後將滑鼠移到第一層選項而按下右側出現的 [⋮] 選擇 [新增子頁面] ，依原網站選單結構逐一產出第二層選項對應的空白頁面。

第3步驟：經過上述步驟，完成第一個主選項及其下的第二層選項之空白頁面，就可以看到網頁右上方會出現選單選項。依此方式一一將所有主選項及全部的第二層選項頁面都建立出來，則整個選單結構也就完成了。

第1步驟：通常網站的左上角會放置LOGO，將滑鼠移至首頁頂端就可以 [新增標誌]，在對話框按下 [選取] 按鈕指定要放的圖片(從雲端硬碟找出這個網站的LOGO圖檔)。

注意：但是此步驟放置LOGO的範圍大小有限，而且是跟主選單擠在最頂端一列的左側，有些網站會將LOGO連同名稱設計在一起需要呈現大一些，那就要改用第2步驟的做法。

第2步驟：若LOGO連同名稱設計在一起需要呈現大一些，那就要將其放置在獨立的一個區段。操作步驟是在右側欄點選 [插入] 切換到這類的操作功能，點選 [圖片] 並 [選取] 要放的圖片(從雲端硬碟找出這個網站的LOGO圖檔)，最後再拖曳圖片框移動縮放讓圖片在此區段以適當大小比例呈現。

第3步驟：網站首頁通常最上面會呈現輪動圖片的Banner，在右側欄點選 [插入] 切換到這類的操作功能，再選擇要插入的是 [圖片輪轉介面]，在跳出的對話框按下 [＋] [選取圖片] 將存放在Google雲端硬碟的那些Banner圖片全部挑選進來，圖片順序可以拖曳移動，最後按下 [插入]，就可以看到這個圖片輪轉區段放置進來了。

備註：有些網站在Banner呈現輪動圖片都再綁定各自的超連結，但是Google Site的 [圖片輪轉介面] 並無法在圖片再加上超連結喔(還好示範的文學院網站Banner本來就沒有要在圖片上綁定超連結)。

第4步驟：網頁版面的設計原則一定要「有頭有尾」，經過前面3個步驟已經把首頁最上方的LOGO、Banner設計出來，接下來就來處理最下方的Footer。請將頁面編輯區捲動到最下面點選 [⊕新增頁尾] 進行編輯。

注意：這個Google Site的所有頁面最下方都會直接套用這個Footer內容，後續若要修改內容，在任一頁面都可以捲動到最下面Footer進行編輯即可。Footer的底色一定要與其他區塊有特別明顯差異的顏色，目的是要讓瀏覽者一直往下滑網頁看到Footer就察覺已滑到底了。

第5步驟：首頁設計已經「有頭有尾」了，接下來就是著手安排中間各個區段的內容，操作步驟是在右側欄點選 [插入] 切換到這類的操作功能，選擇 [內容區塊] 的六個區塊版面樣式中最接近你想要的一個，按下滑鼠拖曳到頁面編輯區要放的位置上，如此操作將每個區段的版面大致安排好。

以文學院網站這個例子來看，Banner之下的最新消息就類似1號內容區塊，再接下來的特色課程就類似6號內容區塊，所以我們將這兩個內容區塊拖曳到頁面編輯區要放的位置上。逐一將每個區塊版面安排妥當，之後再將圖片及文字安插進去即可。(範例：文學院原網站 v.s. Google Site新網站)

上述說明  [內容區塊] 若不太懂操作步驟，參考這個教學影片5:30~7:10應該就能懂得如何操作了。

第1步驟：觀察原網站的活動花絮相片館是採用四個圖片並列一排的版面來呈現每個相簿的封面圖片，這就像Google Site的6號內容區塊，所以將這個內容區塊拖曳到頁面編輯區要放的位置上，逐一將每一排區塊版面安排妥當，之後再將圖片及文字安插進去即可。

第2步驟：點選要插入圖片的框框，按下 [＋] 選擇 [插入雲端硬碟檔案] ，從雲端硬碟找出這個相簿所在的資料夾，選擇一張圖片當作封面。

第3步驟：前一個步驟只是先把相簿封面放上網頁，接下來要在封面圖片上綁定超連結可開啟該相簿檔案所在的Google雲端硬碟資料夾。操作步驟是先到雲端硬碟將滑鼠移到該資料夾上按滑鼠右鍵 [取得連結]，將連結網址複製起來，再回到Google Site點選該相簿封面圖片執行 [插入連結]，將剛剛複製的連結貼上即可。

第1步驟：觀察原網站的活動花絮影音館是採用三個圖片並列一排的版面，這就像Google Site的4號內容區塊，所以將這個內容區塊拖曳到頁面編輯區要放的位置上，逐一將每一排區塊版面安排妥當，之後再將影片及文字安插進去即可。

第2步驟：點選要插入影片的框框，按下 [＋] 選擇 [插入雲端硬碟檔案] 或 [YouTube] ，然後找到要放的檔案或貼上YouTube影片連結即可。

第1步驟：我們寫了一支小小程式，可以讀取Google Sheet試算表資料呈現為表格形式，且操作功能與質感兼具。這個程式碼完全公開，任何人都可公開檢視完全沒有問題。

第2步驟：先試試看如何將這個程式套用到自己的Google Site頁面裡，請先到左邊HTML原始碼區域按快捷鍵Ctrl-A全選、Ctrl-C複製起來。

第3步驟：在Google Site要套用這個程式的頁面，在右側欄點選 [插入] 切換到這類的操作功能，點選 [內嵌] 並在 [嵌入程式碼] 中按快捷鍵Ctrl-V貼上，再到 [下一個] 畫面就能看到預覽結果，應該跟我們的程式碼右邊呈現的表格相同結果。最後，再拖曳該區塊框移動縮放，讓此區塊有足夠範圍完整呈現表格。

第4步驟：前述程式是讀取這個Google Sheet試算表，要參考使用就先 [建立副本] 到自己的Google雲端硬碟，並將檔案 [移至] 一開始建立的那個Google雲端硬碟資料夾裡面，而且要確定該試算表 [共用] 設定 [一般存取權] 為 [知道連結的任何人]，這樣才能讓程式讀取裡面的工作表資料。2

第5步驟：試算表欄位不限，自己可以增減欄位，內容也都可以自行調整，只要符合這三個原則：(1)要呈現的表格內容獨立一份工作表；(2)第一列一定要輸入標題，若標題為「*」代表此欄為下一欄文字要加上超連結的網址；(3)全選資料並將 [格式] [數值] 設定為 [純文字]，以確保能讓程式讀取到正常文字資料型態的內容。

第6步驟：要讓程式讀取自己的試算表資料加以呈現，請先把試算表網址列中間部分的 "序號" 複製起來(如右圖標示處的中間那段看起來像亂碼的字串https://docs.google.com/spreadsheets/d/序號/edit)。

第7步驟：在Google Site點選內嵌程式碼的區塊進行 [編輯]，在 [嵌入網頁內容] 找到這一行：

var url = 'https://docs.google.com/spreadsheets/d/1KDOGFsYii0ugEJdjSg5pi7VxqrWumadqhn1dt1Le8c0/gviz/tq?headers=0&sheet=行政人員';

將自己的試算表序號取代上面的藍字部分，將工作表名稱取代上面的綠字部分，再到 [下一個] 畫面就能看到預覽結果呈現的是自己的試算表資料了。

第8步驟：最後，再拖曳該區塊框移動縮放，讓此區塊有足夠範圍完整呈現表格。