sheet2site 用 Google 試算表架出一個速成網站教學,免寫程式


老師如果想要做一個給學生看的「數位學習工具」的推薦網站、賣家想要架出一個「熱門商品」介紹主頁、作家想要列出「書籍」或「講座活動」清單網頁,如果是臨時需要,如果自己也沒有程式技術,有沒有什麼速成一個堪用網頁的方法呢?

當然方法有很多,你可以申請一個免費的部落格(例如 Blogger ),你可以用新版的「 Google Sites 協作平台」來組合各種圖文影音素材變成網站。還有很多各式各樣的線上快速產生網頁工具。

就像今天要介紹的這個工具:「 sheet2site 」,它讓我們用自己的「 Google 試算表」就能在幾分鐘之內架出一個速成網站,把試算表裡的圖文資料,變成漂亮的網站展示。




「 sheet2site 」可以做出什麼用途的網站呢?你可以打開我測試實作的「電腦玩物產品介紹頁」,看看實際做出來的效果。

就像我文章最開頭所列舉的問題,「 sheet2site 」正是適合用來快速產生產品、活動、事件、工具、各種圖文資料清單的介紹網頁。

接下來,就讓我實際示範一遍「 sheet2site 」的操作流程。





  • 1. 複製 Google 試算表範本

首先打開「 sheet2site 」網頁,捲動到下方就會有一步步操作流程,在第一步的地方,點擊[ This Sheet Template ],先複製一本 Google 試算表範本到你自己的 Google 雲端硬碟中。




  • 2. 填上網站想要展示的圖文內容

複製後的試算表範本像是下圖這樣,只要在各個欄位填寫相應內容,那麼到時候就會出現在產生的網頁上。

  • Title of the card:填寫每個展示產品的主標題,會疊合在預覽圖上(也可不填)。
  • Description of card:填寫說明小文字,會出現在主標題下方(也可不填)。
  • Link. User will go here if click on card:填上點擊產品預覽圖後要前往的網址(也可不填)。
  • Image of the card (link to image):填寫預覽圖想要的圖片網址(圖片也先上傳到某個空間獲得網址。也可不填,會用底色取代)。



填寫試算表的相應欄位,最後在網頁上出現的效果就如同下圖這樣。




  • 3. 建立網站產品的分類標籤

「 sheet2site 」的試算表中還有一些進階的設計,如果你要展示的清單很長,可以利用分類標籤的功能,讓瀏覽者可以快速過濾出他想要的產品。這時候,就要填寫試算表中的這些欄位:

  • Small text-1:預覽圖左上方的說明文字。
  • Small text-2:預覽圖右下角的說明文字。
  • Filtering by this:要用哪些分類標籤來過濾,用半形逗號分隔。



接著,要到試算表的「 filters 」工作表中,把要出現的分類標籤,像是下圖這樣一個一個填寫上去。



效果就會像下圖這樣,網站上方會有分類按鈕,點擊後,下方的展品就會進行過濾。




  • 4. 複製試算表網址,貼上 Sheet2Site 

填寫好試算表的資料後(其實之後也可以隨時回頭修改),直接複製 Google 試算表網址列上的網址。



然後貼上「 sheet2site 」網站中第三步的「 Paste it here 」欄位。

直接貼上就好,不要做任何其他的動作。




  • 5. 發佈試算表到網路

回到自己這份 Google 試算表,選擇[檔案]中的[發佈到網路],將這份試算表發佈成網頁。




  • 6. 回到 Sheet2site 按下產生網頁按鈕

再切換回「 sheet2site 」,這一次點擊第五步的[ Generate ],那麼就會立即產生一個速成網站囉!記得把這個網站的專屬網址記下來。




  • 7. 在試算表修改網站標題、主圖等資訊

接著就不需要「 sheet2site 」。我可以隨時回到 Google 試算表修改資料,那麼速成網站的資料也會更著同步更新。

我還可以在 Google 試算表的[ main-page ]工作表,進行網站標題主圖的修改:

  • Title for site. Big text in the front page:網站標題
  • Background image:網站的背景圖
  • Call to action button Text:點擊後可前往某處的功能按鈕描述
  • Call to action button Link:行動按鈕要前往的網址



就這麼簡單,經過 Google 試算表的修改,你的臨時速成網站就誕生囉!




「 sheet2site 」尤其特別適合資料型的網頁、展示型的網站,如果你又習慣用 Google 試算表整理資料,那麼這確實會是一個做出速成網頁的方法。

之前我也介紹過一些類似的速成網頁技巧,像是:「把 Google Docs 文件直接發佈成好看不跑版的公開網頁」、「超簡單網頁表格製作!免語法用 Google 試算表教學」。甚至我還介紹過更特殊的:「用 Google 試算表製作背英文單字的記憶閃卡,超簡單範本下載」。

或者也有更好看、功能更多,但也一樣簡單的方法,例如「全新 Google 協作平台推出 ,做漂亮網站跟編輯文件一樣簡單」、「Sutori 免費製作最好看說故事圖表,老師與行銷都零程式碼上手」。

你說不定還可以反過來,把商品網頁的資料直接抓取成 Excel 試算表:「Listly 自動抓取網頁轉成 Excel 表格!支援中文購物與資料網站」,這些工具都值得我們好好利用。

「 sheet2site 」網頁


 (歡迎社群分享。但全文轉載請來信詢問,禁止修改上述內文,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang 異塵行者,及附上原文連結:sheet2site 用 Google 試算表架出一個速成網站教學,免寫程式

留言

  1. 請問版主圖片的部分你是上傳到哪個網路空間取得網址的呢?

    回覆刪除
    回覆
    1. 我自己 Blogger 平台的部落格圖片

      刪除
    2. 謝謝版主提供實用的工具,受益良多。

      刪除
    3. 版主你好:
      圖片上傳網路空間後(imgur),取得之圖片網址,在key in google excel "Image of the card (link to image). Can be empty" 欄位後前台網站圖片仍無法顯示,請問有無其他建議之網路空間可供使用,或是有無解決辦法。

      刪除
  2. 請問是不是現在已改成付費制了?

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

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

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

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

3個 ChatGPT 輸入到輸出實驗,第二大腦筆記用 AI 生成文章報告

Arc 瀏覽器 windows 版測試心得,用四大介面改造升級專注工作流

如何為筆記命名,建立搜尋規則?我的標題、分類、標籤命名法

Google 表單的 10 個專業問卷調查設計秘密教學

Draw.io 中文線上製作流程圖首選!專業水準完全免費

如何用 ChatGPT 加速生成一份有圖有文的簡報,實戰案例教學

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