創(chuàng)建超鏈接和導(dǎo)航.ppt

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