創(chuàng)建超鏈接和導航.pptVIP

第6章 創(chuàng)建超鏈接和導航,每一個網站實際上都是由眾多網頁組成的，網頁之間通常通過超鏈接方式相互建立關聯。在Dreamweaver 8中，超鏈接的范圍很廣，通過它不僅可以鏈接到其他網頁，還可以鏈接到其他圖像文件、多媒體文件及下載程序。本章將主要介紹在Dreamweaver 8中創(chuàng)建和管理各種超鏈接以及使用導航條的方法。,通過本章的理論學習和上機實訓，讀者應了解和掌握以下內容: URL的含義 絕對路徑與相對路徑的概念 Dreamweaver 8中鏈接的類型 網頁間和網頁內超鏈接的創(chuàng)建 在站點地圖中管理鏈接 導航條的創(chuàng)建,本章章節(jié)內容安排如下: 6.1 認識URL及鏈接路徑 6.2 創(chuàng)建鏈接 6.3 創(chuàng)建導航條 6.4 在“站點”地圖中創(chuàng)建和修改鏈接 6.5 思考與練習,6.1 認識URL及鏈接路徑,超鏈接與URL及網頁文件的存放路徑是緊密相關的。URL可以簡單地稱為網址，顧名思義，就是Internet文件在網上的地址，定義超鏈接其實就是指定一個URL地址來訪問它指向的Internet 資源。同時，認識從作為鏈接起點的文檔到作為鏈接目標的文檔之間的文件路徑，對于創(chuàng)建鏈接是至關重要的。一般說來，鏈接的路徑可以分為兩類，即絕對路徑與相對路徑。 URL 絕對路徑 相對路徑,URL,URL(Uniform Resoure Locator，統一資源定位器)指的是Internet文件在網上的地址，它使用數字和字母按一定順序排列以確定一個地址，由訪問方法、服務器名、端口號，以及文檔位置組成。格式為access-method :/ server-name:port / document-location。,絕對路徑,絕對路徑指包括服務器協議在內的完全路徑，比如/ dw/ index.htm(此處使用的協議是最常用的HTTP協議)。使用絕對路徑與鏈接的源端點無關，只要目標站點地址不變，無論文檔在站點中如何移動，都可以正常實現跳轉而不會發(fā)生錯誤。如果是要鏈接當前站點之外的網頁或網站，就必須使用絕對路徑。,相對路徑,相對路徑包括根相對路徑(Site Root)和文檔相對路徑(Document)兩種。使用Dreamweaver 8在本地磁盤上編輯網頁時，需要選定一個文件夾來定義一個本地站點，模擬服務器上的根文件夾，系統就根據這個文件夾來確定所有鏈接的本地文件位置，而根相對路徑中的根就是指這個文件夾。 文檔相對路徑就是指包含當前文檔的文件夾，也就是以當前網頁所在文件夾為基礎來計算的路徑。,6.2 創(chuàng) 建 鏈 接,Dreamweaver 8可以為對象、文本或圖像創(chuàng)建超鏈接，以鏈接到其他文檔或文件，或鏈接到單個文檔的指定位置。當在本地站點內移動或重命名文檔或其他鏈接文件時，Dreamweaver 可自動更新指向文檔的鏈接。 創(chuàng)建鏈接的類型和方法 創(chuàng)建頁間超鏈接 創(chuàng)建頁內超鏈接 創(chuàng)建E-mail鏈接 創(chuàng)建空鏈接和腳本鏈接 創(chuàng)建圖形熱點鏈接,創(chuàng)建鏈接的類型和方法,在Dreamweaver 8中，可以創(chuàng)建下列幾種類型的鏈接。 頁間超鏈接：用于跳轉到其他文檔或文件，如圖形、電影、PDF或聲音文件。 頁內超鏈接：也被稱為錨記鏈接，用于跳轉到本站點指定文檔的位置。 E-mail鏈接：用于啟動電子郵件程序，允許用戶編輯電子郵件，并發(fā)送到指定地址。 空鏈接及腳本鏈接：用于為用戶附加行為至對象或創(chuàng)建一個執(zhí)行JavaScript代碼的 鏈接。 在Dreamweaver 8中，可以創(chuàng)建超鏈接的方法主要有以下幾種。 使用屬性檢查器中的“鏈接”文本框。 使用“修改”|“創(chuàng)建鏈接”命令來制作到某個文件的鏈接。 使用站點地圖來查看、創(chuàng)建、修改及刪除鏈接。 使用快捷菜單，然后從中選擇“創(chuàng)建鏈接”選項。,創(chuàng)建頁間超鏈接,在Dreamweaver 8中可以為對象、文本或圖像創(chuàng)建超鏈接，鏈接到其他文檔或文件。要在網頁中創(chuàng)建超鏈接，先選中要創(chuàng)建鏈接的對象(文本、圖像或其他對象)，然后有3種方法可供選用。 在對象屬性檢查器的“鏈接”下拉列表框中輸入要鏈接對象的URL或路徑。 拖動“鏈接”下拉列表框后面的“指向文件”圖標到“文件”面板中要鏈接的對象上(默認使用“文檔相對路徑”)。 單擊“鏈接”下拉列表框后面的“瀏覽文件”按鈕，在打開的“選擇文件”對話框中選擇要鏈接的對象(在這個對話框的“相對于”下拉列表框的兩個選擇項對應兩種“相對路徑”)，然后單擊“確定”按鈕。,創(chuàng)建頁內超鏈接,在Dreamweaver 8中，創(chuàng)建頁內超鏈接是通過使用“命名錨記”命令(用來標記位置的標識)來完成的，因此頁內超鏈接又稱為“命名錨記鏈接”。通過對文檔中指定位置的命名，允許利用鏈接打開目標文檔時，直接跳轉到相應的命名位置?！懊^記鏈接”一般用在網頁篇幅較大，瀏覽者需要翻屏查看的情況下，因此，應用“命名錨記鏈接”可以有助于瀏覽者閱讀網頁，從另一個方面也體現了網頁設計者為瀏覽者著想的一面。 顯而易見，創(chuàng)建“命名錨記鏈接”的過程要分為兩步，首先加入一個命名錨記；然后創(chuàng)建到這個命名錨記的鏈接。,創(chuàng)建E-mail鏈接,E-mail超鏈接是一種特殊的鏈接，單擊該鏈接將打開一個空白通訊窗口。在E-mail通訊窗口中允許用戶編輯電子郵件，并發(fā)送到指定的地址。 創(chuàng)建E-mail超鏈接方法同創(chuàng)建普通文本超鏈接相似，可以選擇要創(chuàng)建E-mail超鏈接的對象(文本、圖像或其他)，然后在該對象屬性檢查器的“鏈接”文本框中輸入mailto:和E-mail地址，如mailto: ；還可以選擇“插入”|“電子郵件鏈接”命令，或選擇“插入”工具欄中的“常用”選項卡，單擊“電子郵件鏈接”按鈕，在打開的“電子郵件鏈接”對話框中輸入文本和E-mail地址，然后單擊“確定”按鈕。,創(chuàng)建空鏈接和腳本鏈接,空鏈接實際上是一個未設計的鏈接，用于激活頁面上的對象或文本。一旦對象或文本被激活，當鼠標指針經過該鏈接時，用戶可為其附加行為以交換圖片或顯示層。要創(chuàng)建空鏈接，用戶只需在選定文字或圖片后，在屬性檢查器的“鏈接”下拉列表框中輸入javascript:; (javascript 一詞后依次接一個冒號和一個分號)，或是一個“#”號。 使用“#”符號的問題在于當訪問者單擊該鏈接時，某些瀏覽器可能跳到頁的頂部。單擊 JavaScript 空鏈接不會在頁上產生任何效果，因此創(chuàng)建空鏈接用 JavaScript 方法通常更 可取，只需用代碼javascript:void(null)代替原來的#號標記即可。,腳本鏈接是指執(zhí)行JavaScript代碼或調用JavaScript函數。該方式可使用戶在不離開當前頁面的情況下了解關于某個項目的一些附加信息。此外，該方式還用于執(zhí)行計算、表單驗證或其他任務。 要創(chuàng)建腳本鏈接，只需在選定文字或圖片后，在屬性檢查器的“鏈接”下拉列表框中輸入javascript:(javascript 一詞后依次接一個冒號)，并且跟一些JavaScript代碼或函數調用就可以了。例如，可輸入javascript:alert(Hello！)，這時當用戶單擊該鏈接時，系統將彈出一個提示框，其中將顯示上面輸入的文字Hello！。,創(chuàng)建圖形熱點鏈接,在為圖片創(chuàng)建鏈接時，如果圖片比較大，或是要創(chuàng)建鏈接的區(qū)域是不規(guī)則區(qū)域時，或是只給圖片中部分區(qū)域創(chuàng)建鏈接，可以將圖片分為幾個區(qū)(又稱為“熱點”)，單擊不同的區(qū)可以打開不同的鏈接，這樣的鏈接就稱為“圖形熱點鏈接”。使用“圖像”屬性檢查器可方便地創(chuàng)建圖形熱點鏈接。,6.3 創(chuàng)建導航條,導航條由一個或多個圖像組成，其顯示根據用戶的動作而改變。因此，在使用導航條命令之前，應首先創(chuàng)建一個用于導航條的圖像集。根據鼠標的動作，導航條中的圖像通常有以下4種狀態(tài)。 一般：尚未單擊時所顯示的初始圖像。 滑過：當光標從圖像上經過時出現的圖像。 按下：單擊導航條圖像時顯示的圖像。 按下時鼠標經過：單擊圖像后，當鼠標指針滑過該圖像時顯示的圖像。 插入導航條 編輯導航條,插入導航條,要在網頁中插入導航條，可以選擇“插入”|“圖像對象”|“導航條”命令，或選擇“插入”欄中的“常用”選項卡，單擊第6個按扭旁邊的下拉箭頭，選擇“導航條”命令，打開“插入導航條”對話框，如圖所示。,編輯導航條,為文檔創(chuàng)建導航條后，選擇“修改”|“導航條”命令，在打開的“修改導航條”對話框中向導航條添加圖像，或從導航條中刪除圖像。此命令可用于更改圖像或圖像組、更改單擊項目時所打開的文件、選擇在不同的窗口或框架中打開文件以及重新排序圖像。,6.4 在“站點”地圖中創(chuàng)建和修改鏈接,用戶可以通過在“文件”面板中添加、更改和刪除鏈接來修改站點的結構。Dreamweaver 8會自動更新“文件”面板以顯示對站點所做的更改。,6.5 思考與練習,填空題 1.定義超鏈接的實質是 。 2. URL指的是 ，它使用 以確定一個地址，由 、 、 以及 組成。 3.在Dreamweaver 8中，可以創(chuàng)建下列5種類型的鏈接，分別是 、 、 、 和 。 4.在Dreamweaver 8中，創(chuàng)建頁內超鏈接是通過使用 來完成的，因此頁內超鏈接又稱為 。 5.空鏈接實際上是 鏈接，利用該鏈接可激活頁面上的對象或文本；而腳本鏈接則是指 。 6.導航條中的圖像通常有4種狀態(tài)，分別是 、 、 和 。,6.5 思考與練習,選擇題 7. 下列路徑中( )是站點根目錄相對路徑。 A. /catalog.asp B. fuwu/contents.html C. /products/catalog.html D. /indexhtm 8. 在屬性檢查器的“鏈接”下拉列表框中輸入( )后，無法實現空鏈接。 A. javascript:; B. javascript: C. javascript:void(null) D. #,6.5 思考與練習,選擇題 9. 創(chuàng)建圖形熱點鏈接時