關於連結和導覽

上次更新時間 2021年4月27日

了解 Dreamweaver 中的連結和導覽,以及絕對路徑、文件相對路徑和網站根目錄相對路徑。

在您設定 Dreamweaver 網站來儲存網站文件並建立 HTML 頁面後,您會想要建立從文件到其他文件的連結。

Dreamweaver 提供數種方式來建立連結至文件、影像、多媒體檔案或可下載軟體。您可以建立連結至文件內任何地方的文字或影像,包括標題、清單、表格、絕對定位元素 (AP 元素) 或框架中的文字或影像。

有數種不同的方式可以建立和管理連結。 有些網頁設計師偏好在工作時建立連結至不存在的頁面或檔案,而其他人則偏好先建立所有檔案和頁面,然後再新增連結。管理連結的另一種方式是建立預留頁面,您可以在完成所有地點頁面之前新增和測試連結。

絕對路徑、文件相對路徑和網站根目錄相對路徑

了解您連結來源文件和您連結目標文件或資產之間的檔案路徑,對於建立連結至關重要。

每個網頁都有一個獨特的位址,稱為統一資源定位器 (URL)。但是,當您建立本機連結(從同一網站上的一個文件連結到另一個文件)時,通常不會指定所連結文件的完整 URL;相反地,您會指定從目前文件或從網站的根資料夾的相對路徑。

共有三種類型的連結路徑:

  • 絕對路徑 (如 http://www.adobe.com/tw/support/dreamweaver/contents.html)。

  • 文件相對路徑 (如 dreamweaver/contents.html)。

  • 網站根目錄相對路徑 (如 /support/dreamweaver/contents.html)。

    使用 Dreamweaver,您可以輕鬆地選取要對連結建立的文件路徑類型。

備註

最好使用您喜歡且方便使用的連結類型,可以是網站根目錄或文件的相對路徑。 與自行輸入路徑相反的方式是瀏覽連結,後者能確保輸入的路徑永遠都正確。

絕對路徑

絕對路徑提供連結文件的完整 URL,包括要使用的協定(通常為網頁使用的 http://),例如 http://www.adobe.com/support/dreamweaver/contents.html.如果是影像資源,完整的 URL 大概會像這樣:http://www.adobe.com/tw/support/dreamweaver/images/image1.jpg。

您必須使用絕對路徑來連結至另一個伺服器上的文件或資產。您也可以對本機連結 (連結至同一地點中的文件) 使用絕對路徑,但不建議這種做法,如果您將地點移至另一個網域,所有本機絕對路徑連結都會中斷。如果您需要在網站內移動檔案,對本機連結使用相對路徑也能提供更大的靈活性。

備註

插入影像 (不是連結) 時,您可以使用遠端伺服器上影像的絕對路徑 (亦即本機硬碟上不存在的影像)。

文件相對路徑

文件相對路徑通常最適合大多數網站中的本機連結。當目前文件和連結的文件或資產位於同一檔案夾中且可能保持在一起時,這些路徑特別有用。您也可以使用文件相對路徑,透過指定從目前文件到連結文件的檔案夾階層路徑,來連結至另一個檔案夾中的文件或資產。

文件相對路徑的基本概念是省略目前文件和連結文件或資產相同的絕對路徑部分,僅提供不同的路徑部分。

例如,假設您的網站結構如下:

  • 要從 contents.html 連結至 hours.html (兩者位於同一檔案夾中),請使用相對路徑 hours.html。

  • 要從 contents.html 連結至 tips.html (位於 resources 子檔案夾中),請使用相對路徑 resources/tips.html。每個斜線 (/) 會讓您在檔案夾階層中向下移動一個層級。

  • 要從 contents.html 連結至 index.html (位於上層資料夾中,比 contents.html 高一個層級),請使用相對路徑 ../index.html。兩個點和一個斜線 (../) 會讓您在檔案夾階層中向上移動一個層級。

  • 要從 contents.html 連結至 catalog.html(位於上層資料夾的不同子資料夾中),請使用相對路徑 ../products/catalog.html。在這裡,../ 會讓您向上移至主版檔案夾,而 products/ 會讓您向下移至 products 子檔案夾。

    當您將檔案作為 群組移動時,例如,當您移動整個檔案夾時,該檔案夾內的所有 檔案會保持彼此相同的相對路徑,您不需要更新這些檔案之間的文件相對連結。 但是,當您移動包含文件相對 連結的個體檔案,或移動被文件相對連結指向的個體檔案時, 您必須更新這些連結。(如果您使用「檔案」面板移動或重新命名檔案,Dreamweaver 會 自動更新所有相關連結。)

網站根目錄相對路徑

地點根目錄相對路徑描述 從地點根檔案夾到文件的路徑。如果您正在處理使用多個伺服器的大型網站,或是一個託管多個網站的伺服器,您可能會想要使用這些路徑。但是,如果您不熟悉這種類型的路徑,建議改用文件相對路徑。

網站根目錄相對路徑以前置正斜線開始,代表網站的根資料夾。例如,/support/tips.html 是指向地點根檔案夾的 support 子檔案夾中檔案 (tips.html) 的地點根目錄相對路徑。

如果您經常在網站中將 HTML 檔案從一個資料夾移動到另一個資料夾,網站根目錄相對路徑通常是指定連結的最佳方式。當您移動包含網站根目錄相對連結的文件時,您不需要變更連結,因為連結是相對於網站根目錄,而不是相對於文件本身;例如,如果您的 HTML 檔案使用網站根目錄相對連結來連結相依檔案 (如影像),那麼如果您移動 HTML 檔案,其相依檔案連結仍然有效。

但是,當您移動或重新命名被網站根目錄相對連結指向的文件時,您必須更新這些連結,即使文件之間的相對路徑沒有變更。例如,如果您移動資料夾,您必須更新所有指向該資料夾中檔案的網站根目錄相對連結。(如果您使用「檔案」面板移動或重新命名檔案,Dreamweaver 會自動更新所有相關的連結)。