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

sheet2site教學:用Google試算表架出一個速成網站,免寫程式
圖片來源:作者提供

我們想讓你知道的是

如果自己沒有程式技術,有沒有什麼速成一個堪用網頁的方法呢?

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

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

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

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

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

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

1
圖片來源:作者提供

1、複製Google試算表範本

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

2
圖片來源:作者提供

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
圖片來源:作者提供

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

4
圖片來源:作者提供

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

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

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

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

6
圖片來源:作者提供

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

7
圖片來源:作者提供

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

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

8
圖片來源:作者提供

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

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

9
圖片來源:作者提供

5、發佈試算表到網路

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

10
圖片來源:作者提供

6、回到Sheet2site按下產生網頁按鈕

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

11
圖片來源:作者提供

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:行動按鈕要前往的網址
12
圖片來源:作者提供

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

13
圖片來源:作者提供

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

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

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

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

本文經電腦玩物授權刊登,原文刊載於此

責任編輯:朱家儀
核稿編輯:翁世航


猜你喜歡

Tags: