- Dreamweaver 使用手冊
- 簡介
- Dreamweaver 和 Creative Cloud
- Dreamweaver 工作區和檢視
- 設定網站
- 管理檔案
- 版面和設計
- CSS
- 頁面內容和資產
- 設定頁面屬性
- 設定 CSS 標題屬性和 CSS 連結屬性
- 處理文字
- 尋找和取代文字、標籤和屬性
- DOM 面板
- 在即時檢視中編輯
- 在 Dreamweaver 中進行文件編碼
- 在文件視窗中選取並檢視元素
- 在屬性檢視窗中設定文字屬性
- 檢查網頁拼字
- 在 Dreamweaver 中使用水平線
- 在 Dreamweaver 中新增和修改字體組合
- 使用資源
- 在 Dreamweaver 中插入和更新日期
- 在 Dreamweaver 中建立和管理最愛資源
- 在 Dreamweaver 中插入及編輯影像
- 新增媒體物件
- 在 Dreamweaver 中加入視訊
- 插入 HTML5 視訊
- 插入 SWF 檔
- 新增音效效果
- 在 Dreamweaver 中插入 HTML5 音效
- 使用圖庫項目
- 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
- 連結和導覽
- jQuery Widget 和效果
- 撰寫網站程式碼
- 關於在 Dreamweaver 中撰寫程式碼
- Dreamweaver 的程式碼撰寫環境
- 設定程式碼撰寫偏好設定
- 自訂程式碼色彩標示
- 撰寫和編輯程式碼
- 程式碼提示和程式碼完成
- 收合和展開程式碼
- 利用片段重複使用程式碼
- Lint 程式碼
- 最佳化程式碼
- 在設計檢視中編輯程式碼
- 使用頁面的檔頭內容
- 在 Dreamweaver 中插入伺服器端包含
- 在 Dreamweaver 中使用標籤資料庫
- 匯入自訂標籤到 Dreamweaver
- 使用 JavaScript 行為 (一般說明)
- 套用內建的 JavaScript 行為
- 關於 XML 與 XSLT
- 在 Dreamweaver 中執行伺服器端 XSL 轉換
- 在 Dreamweaver 中執行用戶端 XSL 轉換
- 在 Dreamweaver 中新增 XSLT 字元實體
- 格式化程式碼
- 跨產品工作流程
- 範本
- 行動裝置和多螢幕
- 動態網站、網頁和網站表單
- 以視覺化方式建立應用程式
- 測試、預覽和發佈網站
- 疑難排解
了解 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 會自動更新所有相關的連結)。