專題文章網頁設計中絕對路徑、文件相對路徑和網站根目錄相對路徑

53650
次閱讀
初學者在設計網頁時常常將圖片的路徑或是超連結路徑設定錯誤。有可能在本機端看網頁作品是正常的,一但上傳至網站伺服器後,就發現404訊息、無法顯示網頁或是找不到網頁的錯誤訊息。

網頁設計中絕對路徑、文件相對路徑和網站根目錄相對路徑

雖然我們公司都是使用純文字編輯器設計網頁,但是有許多設計師會使用MVC專案或Dreamweaver來進行網頁設計,Dreamweaver算是一套常被提到的軟體,而Dreamweaver原廠的官方網站就有特別針對相對路徑進行教學。

Adobe 支援:如何在 Dreamweaver 中連結頁面和內容以及設定網站導覽

了解資料夾之間的階層與個別資料夾中的檔案之間相對位置,對建立網頁連結而言是必要的。

每個網頁在網際網路中呈現都會有一個或多個位址,我們稱為【網址(URL)】但是,在設計網頁時,於本機端連結時,不需要將連結的文件或目標指定完整的URL,而只是指定目前文件存放位置,或網站根目錄資料夾的相對路徑。

舉例三種類型的連結路徑:
  • 網際網路絕對路徑 (例:https://www.cadch.com/themes/CADCH_00013A/images/logo.png)。
  • 相對路徑 (例:../../themes/CADCH_00013A/images/logo.png)。
  • 網站根目錄起算的相對、絕對路徑 (例:/themes/CADCH_00013A/images/logo.png)。

網際網路絕對路徑

當我們將某一個或多個網址指向到一台網路主機時,要讀取範例的logo.png檔時,使用網際網路絕對路徑會用https://www.cadch.com/themes/CADCH_00013A/images/logo.png路徑。

相對路徑

當使用者在https://www.cadch.com/modules/news/這一層看網頁時,這一層的網頁要連結我們放在https://www.cadch.com/themes/CADCH_00013A/images/之下的logo.png檔時,相對路徑可以寫成../../themes/CADCH_00013A/images/logo.png

我們列出建立相對路徑所使用的幾個特殊符號,以及所代表的意義:

  • 『.』 - 代表目前所在的目錄。
  • 『..』 - 代表上一層目錄。
  • 『/』 - 用於連結路徑中各目錄名稱。若置於路徑前,將代表整個網站的根目錄。

網站根目錄起算的相對、絕對路徑

當使用者在https://www.cadch.com/之下,不管那一層看網頁時,網站根目錄起算的絕對路徑要寫成/themes/CADCH_00013A/images/logo.png

雖然在此時我稱呼該路徑為【網站根目錄起算的絕對路徑】,但是如果我們換網址,或是改變網站根目錄時,logo.png連結還是正常,該路徑對於其他網址或根目錄又可以稱為【相對路徑】,MVC專案設計時通常會使用這種方式指定網頁路徑。