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

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