瞭解 Dreamweaver 範本中的路徑

Dreamweaver 範本
當 HTML 頁面儲存為範本時，Dreamweaver 會在本機根資料夾的根層級建立範本資料夾，並產生一個 .dwt 檔案，成為所有會套用之頁面的來源。每次將 HTML 頁面套用至範本時，(「檔案 > 從範本新增」或「修改 > 範本 > 將範本套用至頁面」) 系統會在 .dwt 檔案中建立網站根目錄相對連結。網站相對連結始終之所以能夠正確連結，是因為 .dwt 檔案一律位於網站資料夾結構之根層級的「範本」資料夾中。如果從範本資料夾移動 .dwt 檔案，或是如果移動或重新命名範本資料夾，連結就會損毀。因此，請務必將 .dwt 檔案保持在 Dreamweaver 建立的範本資料夾中。為了避免混淆，「不要」將其他網站元素 (影像來源檔案或 HTML 文件) 儲存在「範本」資料夾中，便是很好的做法。

頁面如何連結至範本檔案?
檔案套用至現有頁面或從範本建立新頁面時，請在來源中插入下列程式碼:

<!-- #BeginTemplate "/Templates/templateName.dwt" -->

若要檢視 Dreamweaver 產生的 HTML 原始碼，請選擇「視窗 > HTML」。

上方的路徑會取代新頁面上出現的一般 HTML 原始碼。與其以新檔案產生的慣用標籤開始，它會指定一個層級在名為「範本」的資料夾之本機根資料夾內，而 .dwt 檔案存在並含有不在該頁面可編輯區域中的所有資訊。此路徑會將瀏覽器傳送至查看檔案的正確位置，因此會提供頁面屬性、版面和圖形 (所有內容僅存在於 .dwt 檔案中)。這就是為什麼頁面可編輯區域外的變更必須直接在 .dwt 檔案中進行。.dwt 檔案開啟和修改時，套用至範本的所有頁面還是會如常連結至相同位置的檔案。套用至範本的所有頁面都會自動使用新的資訊更新。

文件相對與網站根目錄相對
將 HTML 頁面連結至範本的路徑是網站根目錄相對路徑。它稱為網站根目錄相對路徑，是因為它從目錄結構的最上層開始 (本機根資料夾)，然後隨著下一個資料夾向下移動 (範本)，最後連結至 .dwt 檔案。Dreamweaver 會自動在範本資料夾中產生對範本的網站根目錄相對路徑，因為無論還有哪些檔案資料夾存在於此網站結構之中，系統都知道範本的確切位置。

文件相對會建立從一個檔案至另一個檔案的特定路徑。它不是從檔案資料夾結構的最上層 (網站根目錄) 開始，而是從一個檔案開始產生路徑，經過任何必要的檔案資料夾 (目錄) 之後，停止在其他檔案的位置。在建立從一個檔案到另一個檔案之間的文件相對連結之前，兩個檔案都必須儲存在本機根資料夾之中。

將檔案上傳至遠端伺服器之前，如果您想要在本機瀏覽器中預視頁面，這些頁面就必須為文件相對。Internet Explorer 與 Netscape 瀏覽器均無法瞭解系統對本機根資料夾的定義 (Dreamweaver 亦是如此)，因此僅能依照目前檢視中之文件相對的路徑。因為大部分使用者習慣在上傳之前先在本機瀏覽器中檢視他們的頁面，因此每次連結檔案或插入影像， Dreamweaver 就預設為文件相對。如果在嘗試插入影像或其他 HTML 頁面的連結之前尚未儲存檔案，Dreamweaver 就沒有目前頁面位置的參照，因此會產生類似於以下的路徑:

file:///HardDrive/Desktop Folder/localRootFolder/subfolder/subfolder/images/content.htm

或

file:///C:/Desktop/localRootFolder/subfolder/subfolder/images/content.htm

這些路徑僅為您的工作站專屬，而且您上傳檔案至遠端伺服器時將無法使用。

下圖以圖形說明文件相對與網站根目錄相對之間的差異。在下方範例中，bio.htm 頁面已使用其他路徑選擇插入名為 logo.jpg 的圖形。

範本中的文件相對路徑

將影像與連結直接插入 .dwt 檔案可能會造成混淆。請記住，在 .dwt 檔案中操作時，您建立為文件相對的所有連結都會完全相對於 .dwt 檔案。所產生的路徑是從 HTML 頁面或影像來源前往 .dwt 檔案的專屬路徑。Dreamweaver 會記錄參照頁面套用至即時範本的位置，並且自動將目前頁面的參考 HTML 檔案調整至正確的路徑。如果您同時查看 .dwt 與套用至範本之頁面的 HTML 原始碼，路徑將會截然不同，而且本該如此。如果 Dreamweaver 未對每個頁面的特定位置自動調整路徑，則所有檔案 (.dwt 檔案除外) 上的文件相對路徑都會損毀。

以下是 Dreamweaver 可能調整文件相對路徑方式的範例:

Dreamweaver 不會調整從範本到套用至範本之頁面的網站根目錄相對路徑或絕對路徑 (http://)，因為不需要修改這些內容。

套用至範本之頁面中的文件相對路徑

在附加至範本的頁面可編輯區域中插入影像和連結，其運作方式與在未附加至範本之頁面中插入影像或連結完全相同。在建立其他頁面或影像的連結之前，如果按照選取「檔案 > 從範本新增」，然後選取「檔案 > 儲存」(在本機根資料夾中選擇位置) 的程序，Dreamweaver 就會在「選取 HTML 頁面」或「選取影像來源」對話方塊中預設為文件相對。只要「相對」快顯功能表未手動變更為選取「網站根目錄」，便可在本機瀏覽器中預視作業時提供影像和連結。

範本中的網站根目錄相對路徑

使用範本檔案建立前往其他頁面或參照圖形的影像來源等連結時，「選取 HTML 檔案」與「選取影像來源」對話方塊中的快顯功能表可讓您選擇文件相對或網站根目錄相對。如上圖所示，選取「網站根目錄」會建立一個路徑，從本機根資料夾直接前往要選取的檔案 (與目前在 Dreamweaver 中開啟的 .dwt 檔案不同)。當網站目錄結構中的內容可能在本機根資料夾中移動時，使用網站根目錄相對連結就相當實用，因為即使檔案是從原始位置移動，也不會損毀連結。

Dreamweaver 不會調整從範本到套用至範本之頁面的網站根目錄相對路徑或絕對路徑 (http://)，因為不需要修改這些內容。文件位置 (無論附加至範本的是 .dwt 檔案或 HTML 檔案) 與網站根目錄相對路徑無關。

套用至範本之頁面的網站根目錄相對路徑
如果網站很複雜、含有共同合作的開發人員團隊，或是有定期修改的網站目錄結構，則使用網站根目錄相對連結就相當實用。若要建立網站相對連結，只要從位於「選取影像來源」和「選取 HTML 檔案」對話方塊上「相對」文字旁的快顯功能表選取「網站根目錄」即可。

因為建立的路徑會從本機根資料夾開始 (經過任何數量的子資料夾，而且最終結束於所連結的頁面或影像)，開發人員可以靈活地在網站目錄結構中將頁面或資產移動至一或多個子資料夾，而且不會損毀連結。例如，在上方圖表中，如果 logo.jpg 檔案從影像資料夾移至功能資料夾，且連結屬於網站根目錄相對連結，瀏覽器在尋找圖形時也不會發生任何問題。如果路徑為文件相對連結，則建立文件相對路徑時，logo.jpg 與 bio.htm 檔案都必須保留在其原本就存在的資料夾結構中。如果在路徑建立後移動任一檔案，就會導致路徑損毀。

如上所述，僅有文件相對連結可以在本機瀏覽器中預視。如果您選擇使用網站根目錄相對連結，則僅有兩種方式可以在瀏覽器中檢視您的頁面。

第一個方式是將檔案上傳 (放) 至遠端伺服器，然後在瀏覽器的網址列欄位中輸入絕對路徑，以前往該頁面。使用此方式，檢視中的頁面就會和網路上其他人看見的頁面相同。若要修改頁面，請開啟檔案的本機複本、進行變更、儲存 HTML 頁面、連線至 FTP 伺服器，然後將新檔案「放」至遠端伺服器。在相同資料夾中擁有相同名稱的檔案會覆寫遠端伺服器上的舊版檔案。

第二個方式是在瀏覽器中使用個人網路伺服器來預視網站相對連結。(僅限 Windows) 此選項可以透過使用「檔案 > 在瀏覽器中預視 > 編輯瀏覽器清單」前往 Dreamweaver，然候選取「使用本機伺服器預視」來設定。設定此選項會允許 Dreamweaver 使用個人網路伺服器預視文件。

注意: 如果是 Macintosh，則個人網路伺服器是設定在系統層級。請查看系統文件以取得進一步協助。