了解如何設定網頁間的導覽作業。在 Dreamweaver 中連結檔案和文件,更新、變更及測試連結。

在建立連結之前,請確定您了解絕對路徑、文件相對路徑和網站根目錄相對路徑的作用。您可以在文件中建立數種連結類型:

  • 到另一個文件或檔案的連結,如圖形檔、影片、PDF 或音效檔。

  • 命名錨點連結,會跳到文件內的特定位置。

  • 電子郵件連結,會建立新的空白電子郵件,並填妥收件者的地址。

  • Null 和 Script 連結,可讓您將行為附加至物件,或建立執行 JavaScript 程式碼的連結。

您可以使用「屬性」檢視窗和「指向檔案」圖示,建立從影像、物件或文字到另一個文件或檔案的連結。

Dreamweaver 使用文件相對路徑,以建立連到網站上其他頁面的連結。您也可以指示 Dreamweaver 使用網站根目錄相對路徑來建立新連結。

註解:

在建立文件相對路徑之前,務必要先儲存新檔案,文件相對路徑在沒有明確起點的情況下是無效的。如果您在儲存檔案之前建立了文件相對路徑,Dreamweaver 會暫時使用以 file:// 為開頭的絕對路徑,直到儲存檔案為止;當您儲存檔案時,Dreamweaver 會將 file:// 路徑轉換成相對路徑。

您可以將行為附加到文件中的任何連結。當您將連結的元素插入文件時,請考慮使用下列行為:

設定狀態列文字

可決定訊息的文字,並將它顯示在瀏覽器視窗左下方的狀態列中。例如,您可以使用這個行為,在狀態列中描述連結的目的地,而不是顯示與它相關的 URL。

開啟瀏覽器視窗

在新視窗中開啟 URL。您可以指定新視窗的屬性 (Property),包括名稱、大小和屬性 (Attribute,用於指定是否可調整大小、是否有選單列等等)。

跳頁選單

編輯跳頁選單。您可以變更選單清單、指定不同的連結檔,或變更可在其中開啟連結文件的瀏覽器位置

您可以使用「屬性」檢視窗的資料夾圖示或「連結」方塊,建立從影像、物件或文字到另一個文件或檔案的連結。

  1. 請在「文件」視窗的「設計」檢視中選取文字或影像。
  2. 開啟「屬性」檢視窗 (「視窗 > 屬性」),然後執行下列其中一項作業:
    • 按一下「連結」方塊右邊的資料夾圖示 瀏覽並選取檔案。

      連結文件的路徑會在「URL」方塊中出現。請使用「選取檔案」對話方塊中的「相對於」彈出式選單,以指出路徑是相對於文件或相對於根目錄,然後按一下「確定」。您所選取的路徑類型只會套用到目前的連結。(您可以變更網站的「相對於」方塊預設設定)。

    • 在「連結」方塊中輸入文件的路徑和檔案名稱。

      若要連結至網站內的文件,請輸入文件相對或網站根目錄相對路徑。若要連結至網站外的文件,請輸入包含通訊協定 (如 http://) 的絕對路徑。您可以使用這個方法,輸入尚未建立之檔案的連結。

  3. 從「目標」下拉式清單中,選取要開啟文件的位置:

    • _blank 會在新的且未命名的瀏覽器視窗中載入連結的文件。
    • _parent 會在上一層頁框或包含連結的頁框之上一層視窗中載入連結的文件。如果包含連結的頁框不是巢狀的,則會在完整的瀏覽器視窗中載入連結的文件。
    • _self 會在與連結相同的頁框或視窗中載入連結的文件。這個目標是預設值,因此您通常不需要指定它。
    • _top 會在完整的瀏覽器視窗中載入連結的文件,然後移除所有頁框。
    • _new 會在新的視窗中載入連結的文件。
  1. 請在「文件」視窗的「設計」檢視中選取文字或影像。
  2. 以下列兩個方式之一建立連結:
    • 在「屬性」檢視窗中,拖曳「連結」方塊右邊的「指向檔案」圖示 (目標圖示),並指向目前文件中可看到的錨點、另一個開啟的文件中可看到的錨點、已指派唯一 ID 的元素,或「檔案」面板中的文件。

    • 按 Shift 從選取範圍拖曳,並指向目前文件中可看到的錨點、另一個開啟的文件中可看到的錨點、已指派唯一 ID 的元素,或「檔案」面板中的文件。

    註解:

    只有在「文件」視窗中的文件沒有最大化的情況下,才可以連結到另一個開啟的文件。如果要並排顯示文件,請選取「視窗 > 排列順序 > 重疊顯示」或「視窗 > 排列順序 > 並排顯示」。當您指向開啟的文件時,該文件會在您進行選取時移到畫面的前景。

「超連結」命令可讓您建立到影像、物件或是到另一個文件或檔案的文字連結。

  1. 將插入點放在文件中您希望連結出現的位置上。
  2. 執行下列其中一項作業,就會顯示「超連結」對話方塊:

    • 選取「插入 > 超連結」。

    • 在「插入」面板的「常用」類別中,按一下「超連結」按鈕。

  3. 在「文字」欄位中,輸入連結的文字。
    從「連結」下拉式選單中,選取要連結的檔案的名稱。您也可以按一下資料夾圖示 ,瀏覽至您想要連結的檔案。

  4. 在「目標」彈出式選單中,請選取要在其中開啟檔案的視窗,或鍵入其名稱。

    您在目前文件中命名的所有頁框名稱,都會在彈出式清單中出現。如果指定了不存在的頁框,連結頁面會在含有您所指定名稱的新視窗中開啟。您也可以從下列保留的目標名稱中選取:

    • _blank 會在新的、未命名的瀏覽器視窗中載入連結的檔案。
    • _parent 會在上一層頁框組或包含連結的頁框之視窗中載入連結的檔案。如果包含連結的頁框不是巢狀的,則會在完整的瀏覽器視窗中載入連結的檔案。
    • _self 會在與連結所在的同一個頁框或視窗中,載入連結的檔案。這個目標是預設值,因此您通常不需要指定它。
    • _top 會在完整的瀏覽器視窗中載入連結的檔案,然後移除所有頁框。
    • _new 會在新的視窗中載入連結的文件。
  5. 在「表格索引」方塊中,輸入索引標籤順序的數字。
  6. 在「標題」方塊中,輸入連結的標題。
  7. 在「存取鍵」方塊中,輸入對等的鍵盤按鍵 (一個字母),以選取瀏覽器中的連結。
  8. 按一下「確定」。

根據預設,Dreamweaver 會使用文件相對路徑,建立連到網站上其他頁面的連結。若要改用網站根目錄相對路徑,必須先選擇本機根目錄資料夾做為伺服器上的文件根目錄,在 Dreamweaver 中定義本機資料夾。Dreamweaver 會使用這個資料夾來判斷檔案的網站根目錄相對路徑。

  1. 選取「網站 > 管理網站」。
  2. 在「管理網站」對話方塊的清單中,按兩下您的網站。
  3. 在「網站設定」對話方塊中,展開「進階設定」並選取「本機資訊」類別。
  4. 選取「文件」或「網站根目錄」選項,以設定新連結的相對路徑。

    變更這項設定後再按一下「確定」,並不會轉換現有連結的路徑。這個設定只會套用到使用 Dreamweaver 建立的新連結。

  5. 按一下「儲存」。

    新的路徑設定只會套用到目前的網站。

只要先建立好命名錨點,您就可以使用「屬性」檢視窗,連結到文件的特定區段。已命名錨點讓您能在文件中設定標記,這些標記通常會放在文件的特定主題或頂端的地方。然後,您就可以建立這些命名錨點的連結,這些連結可以快速地將瀏覽者引導到指定的位置。

建立命名錨點的連結有兩個步驟。首先,要建立命名錨點;然後再建立到這個命名錨點的連結。

建立錨點

  1. 在「文件」視窗中,選取並標示您想要設定為錨點的項目。

  2. 開啟「屬性檢視窗」,並檢查選取的項目是否有 ID。如果 ID 欄位是空白的,請新增 ID。例如 Anchor。

    建立錨點
    建立錨點

    新增 ID 之後,請注意程式碼中的變更。id="<ID 名稱>" 會插入您選取之處的程式碼中。

    程式碼中的錨點 ID
    新增連結的錨點

  1. 在「文件」視窗的「設計」檢視中,選取要對其建立連結的文字或影像。
  2. 在「屬性」檢視窗的「連結」方塊中,鍵入數字符號 (#) 和錨點名稱。例如,要連結至目前文件中名為「top」的錨點,請鍵入「#top」。若要連結到相同資料夾內不同文件中名為「top」的錨點,請鍵入「filename.html#top」。

    註解:

    錨點名稱要區分大小寫。

  1. 開啟包含命名錨點的文件。

    註解:

    如果您沒有看到錨點,請從「設計」檢視中選取「檢視 > 設計檢視選項 > 視覺輔助 > 隱藏元素」,讓錨點顯示出來。

  2. 在「文件」視窗的「設計」檢視中,選取您要開始連結的文字或影像 (如果這是另一個開啟的文件,您必須切換到這個文件)。
  3. 請執行下列其中一項作業:
    • 在「屬性」檢視窗中按一下「連結」方塊右邊的「指向檔案」圖示 (目標圖示),並將它拖曳到您要連結的錨點:同一個文件內的錨點,或另一個已開啟文件中的錨點。

    • 在「文件」視窗中,從選取的文字或影像位置按住 Shift 然後拖曳到您要連結的錨點:同一個文件內的錨點,或另一個已開啟文件中的錨點。

在按一下後,會開啟電子郵件連結,並且顯示新的空白訊息視窗 (使用與用戶瀏覽器相關的郵件程式)。在電子郵件視窗中,「收件者」方塊會自動更新為電子郵件連結中所指定的位址。

  1. 在「文件」視窗的「設計」檢視中,將插入點放在您希望電子郵件連結出現的位置上,或是選取要以電子郵件連結形式出現的文字或影像。
  2. 執行下列其中一項作業,以插入連結:
    • 選取「插入 > 電子郵件連結」。

    • 在「插入」面板的「常用」類別中,按一下「電子郵件連結」按鈕。

  3. 在「文字」方塊中,輸入或編輯電子郵件的內文。
  4. 在「文字」方塊中,輸入電子郵件地址,然後按一下「確定」。
  1. 請在「文件」視窗的「設計」檢視中選取文字或影像。
  2. 在「屬性」檢視窗的「連結」方塊中,鍵入 mailto: ,後面接著鍵入電子郵件地址。

    請勿在冒號和電子郵件地址之間輸入任何空格。

自動填入電子郵件的主旨行

  1. 依上述方式,使用「屬性」檢視窗建立電子郵件連結。
  2. 在「屬性」檢視窗的「連結」方塊中,將 ?subject= 新增到電子郵件之後,在等號之後輸入主旨。請勿在問號和電子郵件地址結尾之間輸入任何空格。

    完整輸入應如下所示:

    mailto:someone@yoursite.com?subject=Mail from Our Site

「Null 連結」是一種未指定的連結。請使用 Null 連結,將行為附加到網頁上的物件或文字。例如,您可以將行為附加到 Null 連結,當指標移動過連結時,就會調換影像或顯示絕對定位元素 (AP 元素)。

「Script 連結」會執行 JavaScript 程式碼或呼叫 JavaScript 函式,在不離開目前網頁的情況下,還能提供項目的額外相關資訊,這種連結對瀏覽者而言,很有幫助。Script 連結也可以在瀏覽者按一下特定項目時,用來執行計算、表單驗證和其他處理工作。

  1. 在「文件」視窗的「設計」檢視中選取文字、影像或物件。
  2. 在「屬性」檢視窗的「連結」文字方塊中,鍵入「 在「連結」方塊中,輸入「javascript:;」(單字 javascript,後面跟隨冒號,再加上分號)。
  1. 在「文件」視窗的「設計」檢視中選取文字、影像或物件。
  2. 在「屬性」檢視窗的「連結」方塊中,輸入「javascript:」,後面跟著一些 JavaScript 程式碼或函式呼叫 (請勿在冒號與程式碼或呼叫之間鍵入空格)。

只要您在本機網站內移動或重新命名文件,Dreamweaver 都能更新文件的來源和目標連結。當您在本機磁碟上儲存整個網站 (或儲存網站的整個獨立檔案區段) 時,這個功能最好用。在您將本機檔案放置或存回到遠端伺服器之前,Dreamweaver 不會變更遠端資料夾中的檔案。

若要加快更新處理程序,Dreamweaver 可建立快取檔案,以儲存本機資料夾中所有連結的相關資訊。當您新增、變更或刪除本機網站上的連結時,會在無形之中更新快取檔。

  1. 選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh)。
  2. 在「偏好設定」對話方塊中,從左邊的分類清單中選取「一般」。
  3. 在「一般」偏好設定的「文件選項」區段中,從「當移動檔案時更新連結」彈出式選單選取選項。

    總是

    無論您何時移動或重新命名選取的文件,都會自動更新文件的所有來源或目標連結。

    決不

    移動或重新命名選取的文件時,請勿自動更新文件的所有來源或目標連結。

    提示

    會顯示對話方塊,列出所有受變更影響的檔案。按一下「更新」來更新這些檔案中的連結,或按一下「不要更新」,讓檔案維持原樣。

  4. 按一下「確定」。

建立網站的快取檔案

  1. 選取「網站 > 管理網站」。
  2. 選取網站,然後按一下「編輯」。
  3. 在「網站設定」對話方塊中,展開「進階設定」並選取「本機資訊」類別。
  4. 在「本機資訊」類別中,選取「使用快取」。

    啟動 Dreamweaver 之後,第一次在本機資料夾中變更或刪除檔案的連結時,Dreamweaver 會提示您載入快取。如果按一下「是」,Dreamweaver 會載入快取,並更新您剛才所變更檔案的所有連結。如果按一下「否」,會在快取中加註變更,但 Dreamweaver 不會載入快取,也不會更新連結。

    在較大的網站上載入快取可能要花費幾分鐘的時間,因為 Dreamweaver 必須將本機網站上檔案的時間戳記與快取中所記錄的時間戳記加以比較,以判斷快取是否為最新內容。如果沒有在 Dreamweaver 之外變更任何檔案,您可以放心在該檔案出現時按一下「停止」按鈕。

重新建立快取

  1. 在「檔案」面板中,選取「網站 > 進階 > 重新建立網站快取」。

除了讓 Dreamweaver 在您移動或重新命名檔案時自動更新連結之外,您還可以手動將所有連結 (包括電子郵件、FTP、Null 和 Script 連結) 變更為指向其他位置。

這個選項在您想要刪除其他檔案所連結到的檔案時最為有用,但是也可以將它用於其他目的。例如,假設您在整個網站中,將文字「本月份影片」連結至 /movies/july.html。到了 8 月 1 日,您便會更改這些連結,讓這段文字指向 /movies/august.html。

  1. 在「檔案」面板的「本地」檢視中選取檔案。

    註解:

    如果您要更改的是電子郵件、FTP、Null 或 Script 連結,就不需要選取檔案。

  2. 選取「網站 > 網站選項 > 更改整個網站的連結」。

  3. 在「更改整個網站的連結」對話方塊中完成下列選項:

    更改所有連結到

    按一下資料夾圖示 瀏覽並選取要解除連結的目標檔案。如果您要更改的是電子郵件、FTP、Null 或 Script 連結,請鍵入要更改之連結的完整文字。

    變成新連結

    按一下資料夾圖示 ,瀏覽並選取要連結到的新檔案。如果您要更改的是電子郵件、FTP、Null 或 Script 連結,請鍵入取代連結的完整文字。

  4. 按一下「確定」。

    Dreamweaver 會利用已用於文件中的路徑格式 (例如,如果舊路徑是相對於文件的,新路徑也會是相對於文件) 來更新連結到所選檔案的任何文件,讓這些文件指向新檔案。

    在您變更整個網站的某個連結之後,選取的檔案會變成孤立檔案 (也就是本機磁碟上沒有任何檔案指向它)。您可以放心加以刪除,而不會中斷本機 Dreamweaver 網站中的任何連結。

    註解:

    因為這些變更都是在本機上進行,您必須手動刪除遠端資料夾中對應的孤立檔案,而且要放置或存回已變更連結的檔案;否則,網站的瀏覽者將看不到變更。

連結在 Dreamweaver 之中沒有作用,也就是說,您無法按一下「文件」視窗中的連結,開啟所連結的文件。

  1. 請執行下列其中一項作業:
    • 以滑鼠右鍵按一下連結,然後選取「開啟連結網頁」。

    • 按 Control 鍵 (Windows) 或 Command 鍵 (Macintosh) 並按兩下連結。

    註解:

    連結的文件必須位於本機磁碟上。

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

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