了解 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/tw/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 會自動更新所有相關的連結)。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策