timeline js sop 經驗分享

63
Timelinejs使用SOP

Upload: -

Post on 17-Jul-2015

230 views

Category:

Software


10 download

TRANSCRIPT

Page 1: Timeline js Sop 經驗分享

Timelinejs使用SOP

Page 2: Timeline js Sop 經驗分享

點下Make a Timeline now

Page 3: Timeline js Sop 經驗分享

點google speadsheet template(小提醒:請先登入gmail帳號,表格會直接儲存在google雲端 )

Page 4: Timeline js Sop 經驗分享

點選使用此範本,即可編輯表格

Page 5: Timeline js Sop 經驗分享

表頭介紹由左至右1開始時間2結束時間3標題4敘述5媒體網址6媒體來源7媒體標題8媒體簡短文字9類型10標籤

Page 6: Timeline js Sop 經驗分享

時間只顯示年代1.選取A&B兩行

Page 7: Timeline js Sop 經驗分享

時間只顯示年代2.選擇格式→數值→純文字

1.2.

3.

Page 8: Timeline js Sop 經驗分享

對照表格內容&輸出情況1開始時間2結束時間3標題4敘述5媒體網址6媒體來源7媒體標題8媒體簡短文字9類型10標籤

Page 9: Timeline js Sop 經驗分享

1開始時間2結束時間3標題4敘述5媒體網址6媒體來源7媒體標題8媒體簡短文字9類型10標籤

1

34

5

67

10

Page 10: Timeline js Sop 經驗分享

Google雲端文件上傳

1.

2.

Page 11: Timeline js Sop 經驗分享

Google雲端文件上傳

3.

4.

Page 12: Timeline js Sop 經驗分享

Google雲端文件上傳

5.修改文件名稱

6.貼上你的文字或圖片

Page 13: Timeline js Sop 經驗分享

Google雲端文件上傳

7.點選檔案

8.點選發佈到網路

Page 14: Timeline js Sop 經驗分享

Google雲端文件上傳

9.點選內崁

10.複製全部網址

Page 15: Timeline js Sop 經驗分享

Google雲端文件上傳

11.貼上timeline表格中的media

Page 16: Timeline js Sop 經驗分享

Timelinejs圖片放置SOP

Page 17: Timeline js Sop 經驗分享

1.

2.

進入google帳號,點選應用程式

3.

Page 18: Timeline js Sop 經驗分享

4.

5.

照片放置,開新網誌發新文章

Page 19: Timeline js Sop 經驗分享

6.

照片放置,發新文章

Page 20: Timeline js Sop 經驗分享

7.上傳照片後,圖片會顯現在文章內

圖片上傳BLOG產生JPG網址

Page 21: Timeline js Sop 經驗分享

8.圖片顯現後選擇圖片按右鍵,在新分頁中開啟連結,即會產生照片的網址列Ex:http://xxxxx.jpg or http://xxxxx.png

Page 22: Timeline js Sop 經驗分享

直接複製網址貼上timeline表格media欄即可

Page 23: Timeline js Sop 經驗分享

<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 經驗分享

將網址貼上media

貼上timeline表格中的media

Page 25: Timeline js Sop 經驗分享

表格完成後點選1.檔案→2.發佈到網路

1.

2.

Page 26: Timeline js Sop 經驗分享

3.點選開始發布→4.複製網址

3.

4.複製網址

Page 27: Timeline js Sop 經驗分享

5.回到Timelinejs網頁→6.往下選樣式

5.貼上

6.點選

Page 28: Timeline js Sop 經驗分享

選擇樣式1地圖2文字3永遠選擇最新年份4選擇開始頁

地圖樣式

文字樣式

從最新年份開始

選擇開始頁數

Page 29: Timeline js Sop 經驗分享

點選Preview即能在下面查看Timeline

Page 30: Timeline js Sop 經驗分享

第一種地圖樣式+第一種文字

Page 31: Timeline js Sop 經驗分享

第二種地圖樣式+第二種文字

Page 32: Timeline js Sop 經驗分享

第三種地圖樣式+第三種文字

Page 33: Timeline js Sop 經驗分享

第四種地圖樣式+第四種文字

Page 34: Timeline js Sop 經驗分享

第五種地圖樣式+第五種文字

Page 35: Timeline js Sop 經驗分享

第六種地圖樣式+第六種文字

Page 36: Timeline js Sop 經驗分享

第七種地圖樣式+第七種文字

Page 37: Timeline js Sop 經驗分享

第八種地圖樣式+第八種文字

Page 38: Timeline js Sop 經驗分享

第九種地圖樣式+第九種文字

Page 39: Timeline js Sop 經驗分享

第十種地圖樣式+第十種文字

Page 40: Timeline js Sop 經驗分享

第十種地圖樣式+第十一種文字

Page 41: Timeline js Sop 經驗分享

第十種地圖樣式+第十二種文字

Page 42: Timeline js Sop 經驗分享

第十種地圖樣式+第十三種文字

Page 43: Timeline js Sop 經驗分享

第十種地圖樣式+第十四種文字

Page 44: Timeline js Sop 經驗分享

第十種地圖樣式+第十五種文字

Page 45: Timeline js Sop 經驗分享

第十種地圖樣式+第十六種文字

Page 46: Timeline js Sop 經驗分享

第十種地圖樣式+第十七種文字

Page 47: Timeline js Sop 經驗分享

第一種文字

Page 48: Timeline js Sop 經驗分享

第二種

Page 49: Timeline js Sop 經驗分享

第三種

Page 50: Timeline js Sop 經驗分享

第四種

Page 51: Timeline js Sop 經驗分享

第五種

Page 52: Timeline js Sop 經驗分享

第六種

Page 53: Timeline js Sop 經驗分享

第七種

Page 54: Timeline js Sop 經驗分享

第八種

Page 55: Timeline js Sop 經驗分享

第九種

Page 56: Timeline js Sop 經驗分享

第十種

Page 57: Timeline js Sop 經驗分享

第十一種

Page 58: Timeline js Sop 經驗分享

第十二種

Page 59: Timeline js Sop 經驗分享

第十三種

Page 60: Timeline js Sop 經驗分享

第十四種

Page 61: Timeline js Sop 經驗分享

第十五種

Page 62: Timeline js Sop 經驗分享

第十六種

Page 63: Timeline js Sop 經驗分享

第十七種