終於快來到最後也是最重要的動態橫幅照片了!
如果少了這個區塊,一定讓人覺得這個網站似乎少了點色彩。
其實在 2017年 12月時有分享過這篇文章,
我就是利用這個來完成的。
等一下要介紹的首頁動態橫幅照片就是利用 Awesome table 所製作出來的
讓我們繼續看下去吧!
如果有興趣可以連結到 Awesome table 網站來了解
不過我們要的是 slideshow ,所以直接請點選下方路徑
點選網頁最下方 Copy this template
這邊只是簡單的介紹,可以做出更替橫幅照片的做法
如果想認識更多的相關教學,可自行查看該網站教學文件
點選 Copy this template 連結後,會出現下方網頁
請點選 USE TEMPLATE

系統就會幫我們建立一個屬於自己的 Google sheet 試算表檔案

請把想要在首頁出的相關內容填入試算表中,
照片不只可以出現三張,只要有相片連結都可以隨時陸續加到試算表中
下方看到的照片就是已經上傳到 Google 相簿,
我只是按滑鼠右鍵複製圖片位址貼進試算表中
請務必記得這個試算表一定要設定為 公開 或是 任何知道連結使用者 可以檢視

最後再回到 Awesome table 確認是相片的 高度 像素,這裡範例 高度是 198px
相片的大小是自行依照網站需求設定
如有更改內容記得點選「UPDATE VIEW」
到這邊為止首頁的「動態橫幅」就設定完成了。

接下來就必需到協作平台來設定了!
請點選 - 右上角「筆」來編輯 網頁
點選「插入」- 「更多小工具」

記得先點選「公用」- 再輸入「Awesome Table」來搜尋 相關工具


點選「選取」後就可以選擇你要呈現在首頁的檔案

最後點選「儲存」協作平台就可以看到成果囉!
如果在 Google試算表中沒有輸入標題和說明文字,那個黑色陰影就不會出現!
如果在 Google試算表中沒有輸入標題和說明文字,那個黑色陰影就不會出現!
schooldemo 樣本網站:https://sites.google.com/a/ms.csps.chc.edu.tw/schooldemo/
沒有留言:
張貼留言
歡迎大家一起留言討論!