timeline js sop 經驗分享
TRANSCRIPT
![Page 1: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/1.jpg)
Timelinejs使用SOP
![Page 2: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/2.jpg)
點下Make a Timeline now
![Page 3: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/3.jpg)
點google speadsheet template(小提醒:請先登入gmail帳號,表格會直接儲存在google雲端 )
![Page 4: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/4.jpg)
點選使用此範本,即可編輯表格
![Page 5: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/5.jpg)
表頭介紹由左至右1開始時間2結束時間3標題4敘述5媒體網址6媒體來源7媒體標題8媒體簡短文字9類型10標籤
![Page 6: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/6.jpg)
時間只顯示年代1.選取A&B兩行
![Page 7: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/7.jpg)
時間只顯示年代2.選擇格式→數值→純文字
1.2.
3.
![Page 8: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/8.jpg)
對照表格內容&輸出情況1開始時間2結束時間3標題4敘述5媒體網址6媒體來源7媒體標題8媒體簡短文字9類型10標籤
![Page 9: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/9.jpg)
1開始時間2結束時間3標題4敘述5媒體網址6媒體來源7媒體標題8媒體簡短文字9類型10標籤
1
34
5
67
10
![Page 10: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/10.jpg)
Google雲端文件上傳
1.
2.
![Page 11: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/11.jpg)
Google雲端文件上傳
3.
4.
![Page 12: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/12.jpg)
Google雲端文件上傳
5.修改文件名稱
6.貼上你的文字或圖片
![Page 13: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/13.jpg)
Google雲端文件上傳
7.點選檔案
8.點選發佈到網路
![Page 14: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/14.jpg)
Google雲端文件上傳
9.點選內崁
10.複製全部網址
![Page 15: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/15.jpg)
Google雲端文件上傳
11.貼上timeline表格中的media
![Page 16: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/16.jpg)
Timelinejs圖片放置SOP
![Page 17: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/17.jpg)
1.
2.
進入google帳號,點選應用程式
3.
![Page 18: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/18.jpg)
4.
5.
照片放置,開新網誌發新文章
![Page 19: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/19.jpg)
6.
照片放置,發新文章
![Page 20: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/20.jpg)
7.上傳照片後,圖片會顯現在文章內
圖片上傳BLOG產生JPG網址
![Page 21: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/21.jpg)
8.圖片顯現後選擇圖片按右鍵,在新分頁中開啟連結,即會產生照片的網址列Ex:http://xxxxx.jpg or http://xxxxx.png
![Page 22: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/22.jpg)
直接複製網址貼上timeline表格media欄即可
![Page 23: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/23.jpg)
<a href="http://yang-
mu.blogspot.tw/2014/08/blog-post.html"
target="_blank"><span
style="color:#ff8000;">《花季》</span></a>。
timeline內文連結語法《花季》連結到紅色網址列,color可選顏色
![Page 24: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/24.jpg)
將網址貼上media
貼上timeline表格中的media
![Page 25: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/25.jpg)
表格完成後點選1.檔案→2.發佈到網路
1.
2.
![Page 26: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/26.jpg)
3.點選開始發布→4.複製網址
3.
4.複製網址
![Page 27: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/27.jpg)
5.回到Timelinejs網頁→6.往下選樣式
5.貼上
6.點選
![Page 28: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/28.jpg)
選擇樣式1地圖2文字3永遠選擇最新年份4選擇開始頁
地圖樣式
文字樣式
從最新年份開始
選擇開始頁數
![Page 29: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/29.jpg)
點選Preview即能在下面查看Timeline
![Page 30: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/30.jpg)
第一種地圖樣式+第一種文字
![Page 31: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/31.jpg)
第二種地圖樣式+第二種文字
![Page 32: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/32.jpg)
第三種地圖樣式+第三種文字
![Page 33: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/33.jpg)
第四種地圖樣式+第四種文字
![Page 34: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/34.jpg)
第五種地圖樣式+第五種文字
![Page 35: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/35.jpg)
第六種地圖樣式+第六種文字
![Page 36: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/36.jpg)
第七種地圖樣式+第七種文字
![Page 37: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/37.jpg)
第八種地圖樣式+第八種文字
![Page 38: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/38.jpg)
第九種地圖樣式+第九種文字
![Page 39: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/39.jpg)
第十種地圖樣式+第十種文字
![Page 40: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/40.jpg)
第十種地圖樣式+第十一種文字
![Page 41: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/41.jpg)
第十種地圖樣式+第十二種文字
![Page 42: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/42.jpg)
第十種地圖樣式+第十三種文字
![Page 43: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/43.jpg)
第十種地圖樣式+第十四種文字
![Page 44: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/44.jpg)
第十種地圖樣式+第十五種文字
![Page 45: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/45.jpg)
第十種地圖樣式+第十六種文字
![Page 46: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/46.jpg)
第十種地圖樣式+第十七種文字
![Page 47: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/47.jpg)
第一種文字
![Page 48: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/48.jpg)
第二種
![Page 49: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/49.jpg)
第三種
![Page 50: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/50.jpg)
第四種
![Page 51: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/51.jpg)
第五種
![Page 52: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/52.jpg)
第六種
![Page 53: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/53.jpg)
第七種
![Page 54: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/54.jpg)
第八種
![Page 55: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/55.jpg)
第九種
![Page 56: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/56.jpg)
第十種
![Page 57: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/57.jpg)
第十一種
![Page 58: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/58.jpg)
第十二種
![Page 59: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/59.jpg)
第十三種
![Page 60: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/60.jpg)
第十四種
![Page 61: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/61.jpg)
第十五種
![Page 62: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/62.jpg)
第十六種
![Page 63: Timeline js Sop 經驗分享](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a80b0a1a28abbf118b457c/html5/thumbnails/63.jpg)
第十七種