[教學]用Google Drive雲端硬碟建立HTML網頁

發表時間：

平時要丟個HTML網頁範例檔案，大家都會丟去哪邊呢？多數人作法都會去找Hinet免費網頁空間，但是這必須要有租Hinet網路才有得使用，對於使用第四台網路的使用者怎麼辦？其實我們有另外一個選擇，就是利用「Google Drive」雲端硬碟來打造專屬於自己的HTML網頁、網站，透過Google免費提供的5GB空間，就已經很足夠建置個人的網頁了。

Google Drive雲端硬碟的應用非常多，可以當成5GB免費檔案儲存空間，也可以用來放置文件、表單、免費圖片空間，應用的層面很廣，這回我們要透過Google Drive的檔案權限設定部分，讓文件可以公開存取，變成可以顯示在網路上的一個HTML靜態網頁，這個空間可以支援大部分的HTML語法，包含引入圖片、使用javascript或是jQuery等等，最適合拿來當展示網頁。

現在我們可以透過Google Drive雲端硬碟，可以讓我們上傳一些基本的網頁檔案，例如圖片、js、html等等的靜態網頁檔案，而且我們將網頁檔案分享權限設定為公開，這樣就可以讓網路上所有人直接存取你的檔案，瀏覽你的網頁了。或許透過Google Drive來建置網頁很不專業，不過我們可以將它當成第三方資源使用，例如丟一些網頁設計範例檔案在上面，透過雲端自動同步來做管理，本機電腦修改就會直接上傳到網路上了。

第1步  首先來到Google Drive雲端硬碟網站，點選左上角﹝建立﹞→﹝資料夾﹞，我們透過一個專用的資料夾來管理我們的HTML網頁檔案。

[教學]用Google Drive雲端硬碟建立HTML網頁

第2步  接著請將資料夾命一個名稱，並點﹝建立﹞繼續。

[教學]用Google Drive雲端硬碟建立HTML網頁

第3步  當我們建立好後，請在該資料夾上點選右鍵，選擇【共用】裡面的【共用】設定。

【註】

其實香腸是先建立了一個資料夾叫做「網頁檔案」，然後才再建立「MyWeb」，這樣我可以在「網頁檔案」這個資料夾下面建立很多的網頁資料夾，便於管理。

[教學]用Google Drive雲端硬碟建立HTML網頁

第3步  這時請將該資料夾做權限變更，預設是私人，請點﹝變更﹞。

[教學]用Google Drive雲端硬碟建立HTML網頁

第4步  接著權限部分請設定【公開在網路上】，存取權部分，請設定為【可以檢視】，然後點﹝儲存﹞。

[教學]用Google Drive雲端硬碟建立HTML網頁

第5步  資料夾的建立與權限設定完成之後，請來到您的資料夾內，然後將已經做好的網頁拖曳上傳。

[教學]用Google Drive雲端硬碟建立HTML網頁

第6步  這時Google Drive雲端硬碟會問您是否上傳到這個共用資料夾，請點﹝上傳並共用﹞。

[教學]用Google Drive雲端硬碟建立HTML網頁

第7步  這時會問你檔案是否要轉格式，在此請不要轉換任何檔案，以確保網頁可以正常運作，請點﹝開始上載﹞。

[教學]用Google Drive雲端硬碟建立HTML網頁

第8步  當網頁上傳完畢後，右邊會顯示「已上載」。

[教學]用Google Drive雲端硬碟建立HTML網頁

第9步  接著請點選在你的網頁資料夾中的網頁檔案(html檔案)，使用滑鼠右鍵點一下，點【選擇開啟工具】→【Google雲端硬碟檢視器】。

[教學]用Google Drive雲端硬碟建立HTML網頁

第10步  這時候我們會看到網頁是檢視原始碼的，可能中文有亂碼，但這部分不用擔心，請再點﹝預覽﹞即可，

[教學]用Google Drive雲端硬碟建立HTML網頁

第11步  最後就會將網頁跳到公開頁面了，這就是HTML網頁呈現頁面，雖然網址很醜，不過我們可以透過Google縮網址服務，把網址變精簡。

[教學]用Google Drive雲端硬碟建立HTML網頁

第12步 圖片外連測試，如下，所以也是可以外連的XD。

Google Drive 圖片外連

在Google News上追蹤我們最新文章