廣告贊助

在網頁或部落格文章中,常會需要用到其他各種資源。而當我們把檔案放在雲端時(例如:Google 雲端硬碟),如果能將檔案顯示在文章中來直接檢視。該如何處理?

以下就以和 Google 相關而常用的資源來介紹。

通常你會用「嵌入」的方式來處理,而各種資源也會提供「<iframe>...</iframe>」的程式碼供你使用。例如,你常會需要嵌入下列項目:

(1) Google 地圖、YouTube 影片、Google 日曆。

(2) Google 文件、Google 試算表、Google 簡報、Google 表單、Google 繪圖等。

(3) Google 雲端硬中的 PDF 檔、Google 雲端硬中的資料夾等。


1. Google 地圖

在 Google 地圖左側的選單中,點選「分享或嵌入地圖」。

在網頁中嵌入各種Google資源

你會看到分享連結(用以直接在瀏覽器中顯示地圖內容),切換至「嵌入地圖」,調整好地圖的大小後,複製其中的「<iframe>...</iframe>」程式碼,置於你的網頁或部落格中。

在網頁中嵌入各種Google資源


2. YouTube 影片

在 YouTube 影片的下方找到「分享」的圖示,再按「嵌入」。

在網頁中嵌入各種Google資源

複製其中的「<iframe>...</iframe>」程式碼,置於你的網頁或部落格中。

在網頁中嵌入各種Google資源


3. Google 文件

如果在 Google 雲端硬碟中新增了 Google 文件,你可以在選單中選取[檔案]功能表的「發佈到網路」:

在網頁中嵌入各種Google資源

(此時尚未啟用發佈)在[已發佈的內容與設定中]選取是否要「內容有變更時自動重新發佈」。按一下「發佈」。

image

此時才會產生一個連結,分享這個連結,他人即可看到文件內容。請按一下「內嵌」。

在網頁中嵌入各種Google資源

複製其中的「<iframe>...</iframe>」程式碼,貼至部落格文章或網頁中。即可在網頁中顯示該文件內容。(按一下「停止發佈」,即可取消分享。)

在網頁中嵌入各種Google資源


4. Goolge 試算表

仿 Google 文件的做法,你會看到「連結」和「嵌入」兩種分享方式。

在網頁中嵌入各種Google資源

若選取連結方式,Google 試算表可以整份文件分享,也可以只分享其中一個工作表。

在網頁中嵌入各種Google資源

若選取網頁方式,則可以有以下幾種分享方式。

在網頁中嵌入各種Google資源

若是切換至「嵌入」,Google 試算表可以整份文件分享或是只分享一個工作表。複製其中的「<iframe>...</iframe>」程式碼,貼至部落格文章或網頁中。

在網頁中嵌入各種Google資源

註:其中有些參數,可以自行調整。例:

(取自:https://support.google.com/docs/answer/37579?hl=zh-Hant

gid=1674242611 - 這是工作表 ID。

range=A1:B14 - 要顯示的範圍。

widget=false - 如果是 false,表示不在底部顯示工作表標籤。

headers=false - 不顯示列和欄的編號。

chrome=false - 不顯示標題和頁尾。


5. Google 簡報

若是分享的是 Google 簡報的連結,則可以設定自動播放的時間值。

在網頁中嵌入各種Google資源

若選取「內嵌」,則還可以選取投影片大小,複製其中的「<iframe>...</iframe>」程式碼,貼至部落格文章或網頁中。

在網頁中嵌入各種Google資源

其中可以選取的大小有:小、適中、大等,還可以自訂大小。

在網頁中嵌入各種Google資源

播放速度有以下幾種:

在網頁中嵌入各種Google資源


6. Google 表單

若是要在網頁中顯示 Google 表單,則在編輯表單時,先選取分享,再選取「嵌入HTML」,複製其中的「<iframe>...</iframe>」程式碼,貼至部落格文章或網頁中。你可以在此自訂長、寬的大小。

在網頁中嵌入各種Google資源


7. Google 繪圖

Google 繪圖提供的連結和內嵌的是一張圖片檔,你可以設定尺寸大小後,複製其中的「<img src=...」起始的程式碼,貼至部落格文章或網頁中。

在網頁中嵌入各種Google資源


8. Google 日曆

若要將 Google 日曆嵌入網頁中,則先開啟 Google 日曆,選取「設定」:

在網頁中嵌入各種Google資源

在[日曆]標籤下點選一個日曆:

在網頁中嵌入各種Google資源

在[嵌入此日曆]項下,選取<iframe>...</iframe>的程式碼,貼至部落格文章或網頁中。

在網頁中嵌入各種Google資源


9. PDF 檔案

如果要在網頁中嵌入一個 PDF 檔案,方便使用者直接檢視網頁內容。做法如下:

1. 先將檔案上傳至 Google 雲端硬碟,並且設定與他人共用(否則別人就看不到了)。

2. 點選這個 PDF 檔案,以檢視這個 PDF 檔案。

3. 點選「選項」中的「在新視窗中開啟」。

在網頁中嵌入各種Google資源

4. 再點選「選項」中的「嵌入項目」。

在網頁中嵌入各種Google資源

5. 取得嵌入項目中的<iframe>...</iframe>程式碼,貼至部落格文章或網頁中。

在網頁中嵌入各種Google資源


10. Google Drive 資料夾

如果想要將雲端硬碟的某個資料夾嵌入網頁或文章中,則先選取要嵌入的資料夾按右鍵,選取「共用」。

在網頁中嵌入各種Google資源

在共用設定中的共用連結取得代碼(參考下圖)

在網頁中嵌入各種Google資源

將代碼置入以下的<ifrme>...</iframe>中的目錄ID位置:

<iframe allowtransparency="false" height="300" src="https://drive.google.com/embeddedfolderview?authuser=0&hl=zh_TW&id=目錄ID#list" width="100%"></iframe>

其中#list為檔案以清單顯示,也可改用#grid。其他的allowtransparency、height、width等參數,也都可以自行變更。

複製「<iframe>...</iframe>」程式碼,貼至部落格文章或網頁中。

文章標籤
創作者介紹

學不完.教不停.用不盡

vincent 發表在 痞客邦 PIXNET 留言(0) 人氣()