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

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

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

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

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

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

舉例三種類型的連結路徑：

• 網際網路絕對路徑 (例：https://www.cadch.com.tw/themes/CADCH_00013A/images/logo.png)。
• 相對路徑 (例：../../themes/CADCH_00013A/images/logo.png)。
• 網站根目錄起算的相對、絕對路徑 (例：/themes/CADCH_00013A/images/logo.png)。

網際網路絕對路徑

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

相對路徑

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

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

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

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

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

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