30分鐘 Google Sites 協作平台製作一個旅遊行程公告網站教學


之前介紹過新版「 Google Sites 協作平台」的基本功能教學:「全新 Google 協作平台推出 ,做漂亮網站跟編輯文件一樣簡單」。雖然這是一個製作網站、網頁的服務,但採用:不需寫一行程式碼,直接組合需要的影音圖文內容,直接套用版面設計,就能「速成」一個網站的方式。

雖然不能製作出很厲害的商業網站,但用來解決辦公室的電子報、社團內的公告網頁、學習教案整理網站等等需求,卻可以提供很大的便利性,也讓任何人都可以快速製作出自己需要的資料整合網站。

一般使用者其實也可以好好利用「 Google Sites 協作平台」解決生活中的問題。

例如用「 Google Sites 協作平台」快速製作一個旅遊行程的公告網站。




假設你正在負責企業內員工旅遊、學校社團期末旅行、家族旅遊的行程規劃,你已經製作好很多資料,需要布達給這次旅行的夥伴們知道,例如:

  • 這次旅遊的時間表。
  • 需要下載的重要行前文件。
  • 想分享給大家的行李確認清單。
  • 行前關鍵個人資料、飲食資料的調查。
  • 這是旅行的完整路線地圖。
  • 重要景點、餐廳的圖文影音介紹。
  • 重要旅館、班機資訊、地圖。

這麼多的資料,與其零散的用郵件、即時通丟給對方,不如把這些資料整合成一個「旅行專案公告網站」,給大家一個網址,讓大家打開網頁就能看到所有資料。

今天,就想利用這個我最近剛剛用到的例子,分享一下如何用「 Google Sites 協作平台」快速製作出一個自助旅行行程公告網站:

如果上述資料本身已經準備好,那麼製作網站可能不用超過 30 分鐘!

有興趣研究的朋友,可以先參考成品,利用「 Google Sites 協作平台」快速製作的這個:「京都之旅專案網站」,我花的製作時間真的不超過 30 分鐘(還包含製作那些假的範例資料)。







一,製作網站標題主圖


讓我來分享一下自己的流程,以及會用到哪些功能。

打開「 Google Sites 協作平台」,開始製作你的旅行公告網站。

第一步先製作網頁標題, Google Sites 會預設好標題欄位,我只要在標題中輸入文字,並在左下方選擇[變更圖片],換上我想要的照片主圖即可。

換上照片主圖後,「 Google Sites 協作平台」會「自動」調整照片的清晰度、明暗度,確保在圖片上的文字可以清晰的顯示出來。

唯一要注意的,就是左上方有一個「 Google Sites 協作平台文件名稱」的欄位要填寫,這個欄位其實更加重要,因為他將會是未來整個網站所顯示的「網站名稱」。





二,插入行程行事曆


接著,如果要插入一個多日旅行的行程時間表,可以利用 Google 日曆來製作,我先在 Google 日曆上安排好接下來旅行的時間表,可參考:「一個 Google 日曆規劃好出國自助旅行教學:時區行程資料搞定」。

接著在「 Google Sites 協作平台」中,只要點擊右方[插入]清單下的[日曆],直接插入這個製作好的旅行時間表日曆即可。

這份日曆可以用月顯示、周顯示,或是待辦清單的模式顯示。

不過有一個問題,就是使用者打開網頁時,這個嵌入的 Google 日曆會顯示今天的日期,也就是如果旅遊行程在上個月或下個月,那這時候行程不會顯示在行事曆上,要切換月份才能看到。





三,提供重要文件的下載


在整合旅行專案網站時,我繼續想到的是,有一些最重要的資料,需要先提供給準備一起旅行的夥伴。例如希望大家下載的行前資料、行李檢查清單。

這時候,我可以在「 Google Sites 協作平台」編輯畫面的任何地方,點擊兩下滑鼠,會彈出一個插入內容的小視窗,可以插入說明文字,或是 Google 雲端硬碟的檔案。

這就可以幫助我說明接下來要旅伴下載的資料內容。




我可以利用前述功能,把已經製作好的行前文件(可能是 Google 文件或 Word )、行李確認清單(可能是 Google 試算表或 Excel ),插入到「 Google Sites 協作平台」。

如果想要調整網頁內容的位置,例如做成下方這樣並列的效果,只要按住內容方塊,拖曳移動即可。

接著利用右方插入清單的[按鈕]功能,設計兩個下載按鈕,指引大家分享去下載需要的資料。




在製作下載按鈕時,可以輸入按鈕的文字、超連結。

這時候 Google 文件可以利用:「讓他人直接複製你的 Google 文件副本: Google Drive分享密技」小技巧,你可以提供連結,讓他人直接建立同一份資料的副本檔案。





四,旅行前的問卷調查


有可能在旅行之前,不只要提供各種資料給旅伴,還有一些問題需要做最終確認、調查,例如每個人的國外聯繫方式、即時通代號、飲食習慣等等。

這時候可以利用「 Google 表單做好問卷」,然後把這份問卷直接插入「 Google Sites 協作平台」中,打開網站的人,就能在網站中直接回答問題。





五,建立網站分頁


到了這邊,可能網站第一頁的內容已經有點多了,這時候我還需要跟大家導覽一下這次的行程,那麼可以利用「頁面」功能來建立網站分頁。

在「 Google Sites 協作平台」中可以建立多個網站分頁,新增的[頁面],會出現在網站右上方(或手機版的左方選單),讓瀏覽者可以切換頁面瀏覽資料。





六,插入完整的地圖路線行程


在分頁的行程介紹中,我想要提供重要的旅行地圖給旅伴參考。

這時候,如果我利用「 Google 我的地圖畫出這次每一天行程的路線圖」,那麼我可以把這份地圖直接插入「 Google Sites 協作平台」當中。

效果如「電腦玩物京都之旅測試網站」所顯示的樣子。




或者,也可以直接利用插入 Google 地圖的功能,直接搜尋某個景點,然後把這一塊的地圖插入「 Google Sites 協作平台」。





七,介紹旅遊特別景點、餐廳


有了路線地圖,我還想跟旅伴介紹一下重要的景點、餐廳資訊。

這時候可以利用「 Google Sites 協作平台」右方的[圖片輪播介面],插入多張照片,製作某個景點的「幻燈片」特效。




或是利用右方的[內嵌],這時候可以輸入介紹該景點餐廳的網頁網址,直接插入網路介紹的預覽圖文。




還可以利用右方插入的[ YouTube ]功能,直接搜尋某個景點餐廳的介紹影片,同樣可以插入到網站介紹終。





八,提供旅館、機票相關資料


最後,如果要提供旅館、機票相關資料,例如上述的功能,就可以製作出包含文字、地圖、圖片、網站等等組合資料的網頁說明了。





九,設定佈景主題與檢驗效果


在「 Google Sites 協作平台」快速插入自己需要的各種內容,拖曳調整想要的排版位置,很多的一個網站的資料就架構完成。

雖然「 Google Sites 協作平台」沒有很美觀的網頁設計功能,但也提供了可以直接套用的[主題]。

選擇不同的主題,可以快速調整配色,讓網站更符合你某個專案的風格。




此外,每一個插入的內容區塊,還可以在左方的[調色盤]按鈕中,替換不同的主題配色,或是插入背景照片。




最後,你可以點擊「 Google Sites 協作平台」右上方的[螢幕預覽]按鈕,看看這個旅行專案網站在電腦、平板、手機上的顯示效果。

基本上,任何內容都可以在任何大小的螢幕上自動調整,顯示出最佳效果。





十,發佈網站


這樣一來,一個旅行專案介紹網站就完成了,記得要按下右上方的[發佈],這時候可以設定網站的[特殊網址],以後分享這個網址給其他人,他們就能瀏覽網頁中的內容。

當然,要注意的是你前面插入的各種 Google 內容本身的權限也要開放。




如果你不想一個網址直接開放網站內容給所有人看?

那麼可以進入[管理]設定中,把所有人皆可檢視,改成[只有指定的特定使用者]才能看,這樣就要擁有你直接授權的其他 Google 使用者才能瀏覽這個網站。





小結:


最後一個提醒大家注意的地方,就是當[發佈]網站後,如果繼續在「 Google Sites 協作平台」中進行修改,要記得再次按下[發佈],這樣後續瀏覽的人才會看到更新喔!

以上,就是以快速製作一個旅行專案網站為例,分享「 Google Sites 協作平台」可以發揮的應用,提供大家參考。

也歡迎參考我的測試範例網站:「京都之旅專案網站」。



(歡迎社群分享。但全文轉載請來信詢問,禁止修改上述內文,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang 異塵行者,及附上原文連結:30分鐘 Google Sites 協作平台製作一個旅遊行程公告網站教學

留言

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Google Maps 我的地圖完全教學!規劃自助旅行攻略

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學

Google 表單自動關閉回覆教學:時間人數到達就過期

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

如何用 AI 工具提升工作效率?三個關鍵步驟讓生成結果更精準有效

Excalidraw 免費 AI 生成流程圖,一鍵畫出知識圖表、專案流程、寫作大綱

ChatGPT Canvas 全新 AI 寫作、程式碼編輯工具,不再只能對話!