《《網(wǎng)頁(yè)中的超級(jí)鏈接》PPT課件.ppt》由會(huì)員分享，可在線(xiàn)閱讀，更多相關(guān)《《網(wǎng)頁(yè)中的超級(jí)鏈接》PPT課件.ppt（69頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、第 6章 網(wǎng)頁(yè)中的超級(jí)鏈接 在主頁(yè)制作中，大家對(duì)鏈接的作用并不陌生，可以這樣說(shuō)， 鏈接是主頁(yè)的靈魂是網(wǎng)頁(yè)的核心。有了它，就能夠輕而易 舉地實(shí)現(xiàn)互聯(lián)網(wǎng)上的信息訪(fǎng)問(wèn)、資源共享。在此，作為超 文本標(biāo)記語(yǔ)言（ HTML）可以鏈接到其他的網(wǎng)頁(yè)、圖像、多 媒體、電子郵件地址、可下載的文件等?？梢哉f(shuō)只要瀏覽 器能夠顯示的內(nèi)容，都可以從一個(gè) HTML文件中得到。我們 只所以能在網(wǎng)絡(luò)世界恣意暢游，頁(yè)面之間的鏈接功不可沒(méi)。 而對(duì)于網(wǎng)頁(yè)制作者來(lái)說(shuō)，鏈接看似簡(jiǎn)單卻并不容易。 本章對(duì)網(wǎng)頁(yè)中的鏈接進(jìn)行一個(gè)綜合的介紹，以期讓大家對(duì) 它有一個(gè)全面而深入的理解。對(duì)于鏈接在 HTML 中的寫(xiě)法， 在這里就不作過(guò)多講解，有
2、興趣的讀者可參考有關(guān)資料學(xué) 習(xí)。 6.1 超級(jí)鏈接概述 超級(jí)鏈接在通過(guò)網(wǎng)頁(yè)瀏覽獲取信息中有如此重要的作用， 所以要想實(shí)現(xiàn)一個(gè)科學(xué)合理的鏈接，就應(yīng)學(xué)習(xí)超級(jí)鏈接的 相關(guān)知識(shí)并熟練掌握實(shí)現(xiàn)的技術(shù)。 6.1.1 超級(jí)鏈接的定義 所謂的超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系， 這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同 位置，還可以是一個(gè)圖片、一個(gè)電子郵件地址、一個(gè)文件， 甚至是一個(gè)應(yīng)用程序。能合理、協(xié)調(diào)地把網(wǎng)站中的各個(gè)元 素以及網(wǎng)站中的頁(yè)面通過(guò)超級(jí)鏈接構(gòu)成了一個(gè)有機(jī)整體， 使瀏覽者能快速地訪(fǎng)問(wèn)到想要訪(fǎng)問(wèn)的頁(yè)面。 超鏈接由源端點(diǎn)和目標(biāo)端點(diǎn)兩部分組成，其中設(shè)置了鏈接 的一端
3、稱(chēng)為源端點(diǎn)，跳轉(zhuǎn)到的頁(yè)面或?qū)ο蠓Q(chēng)為鏈接的目標(biāo) 端點(diǎn)，同樣，超級(jí)鏈接也是網(wǎng)頁(yè)中最重要、最基本的元素 之一。 而在一個(gè)網(wǎng)頁(yè)中用來(lái)作超鏈接的對(duì)象，可以是一段文本或 者是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后， 鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類(lèi)型來(lái)打開(kāi) 或運(yùn)行。 6.1.2 超鏈接的類(lèi)型 1. 根據(jù)超鏈接的鏈接路徑分 通常情況下將超鏈接分為以下三種： （ 1）絕對(duì) URL超鏈接也稱(chēng)為絕對(duì)路徑。頁(yè)面之間的鏈接是 用統(tǒng)一資源定位符 URL(United Resource Location)來(lái)表 示。 （ 2）相對(duì) URL的超鏈接，又稱(chēng)為相對(duì)路徑。 （ 3）同一網(wǎng)
4、頁(yè)的超鏈接。 2. 根據(jù)超鏈接目標(biāo)位置的不同分 （ 1）內(nèi)部鏈接：指在同一站點(diǎn)內(nèi)部，不同頁(yè)面之 間的超鏈接。 （ 2）錨記鏈接：網(wǎng)頁(yè)內(nèi)部的鏈接。通常情況下， 錨記鏈接用于鏈接到網(wǎng)頁(yè)內(nèi)部某個(gè)特定的位置。 （ 3）外部鏈接：站點(diǎn)外部的鏈接，是網(wǎng)頁(yè)與因特 網(wǎng)中某個(gè)目標(biāo)網(wǎng)頁(yè)的鏈接。 （ 4） E-mail鏈接：指鏈接到電子郵箱的鏈接。單 擊該鏈接可以用于發(fā)送電子郵件。 （ 5）可執(zhí)行文件鏈接：通常又稱(chēng)為下載鏈接，單 擊該鏈接可以運(yùn)行可執(zhí)行文件，可以用于下載文 件或或在線(xiàn)運(yùn)行可執(zhí)行文件。 超鏈接源與目標(biāo)路徑概括如圖 6-1所示。 圖 6-1 鏈接源與目標(biāo)路徑 6.1
5、.3 內(nèi)部、外部與腳本鏈接 常規(guī)的鏈接包括內(nèi)部超鏈接、外部超鏈接和腳本鏈接。下 面介紹各個(gè)鏈接的操作方法。 3.腳本超鏈接 就是通過(guò)腳本的方法來(lái)控制鏈接。其主要用來(lái)執(zhí)行計(jì)算、 表單驗(yàn)證和其他處理。 1.內(nèi)部超鏈接 內(nèi)部超鏈接是指目標(biāo)端點(diǎn)內(nèi)部的超鏈接，其設(shè)置非常靈活 。 6.2 關(guān)于鏈接路徑 鏈接是有路徑的，深入理解路徑的含意， 根據(jù)網(wǎng)站的不同需要選擇不同的路徑，對(duì) 創(chuàng)建網(wǎng)站非常重要。 6.2.1 絕對(duì)路徑 絕對(duì)路徑提供鏈接文檔的完整的 URL，包括所使用的協(xié)議，比如對(duì)于 Web頁(yè)來(lái)說(shuō)，通常使用 http:/，其中 http （ Hypertext Transfe
6、r Protocol）就超文本傳輸協(xié)議。 例如， http://www.xawl.org/cms/data/html/doc/2012- 12/21/25126/index.html就是一個(gè)絕對(duì)路徑。 盡管本地鏈接（即到同一站點(diǎn)文檔的鏈接）也可以使用絕 對(duì)路徑鏈接，但最好不要采用這種方式，因?yàn)橐坏⒋苏?點(diǎn)移動(dòng)到其它域，則所有本地絕對(duì)路徑鏈接都將斷開(kāi)。 絕對(duì)路徑也會(huì)出現(xiàn)在尚未保存的網(wǎng)頁(yè)上，在沒(méi)有保存的網(wǎng) 頁(yè)上插入圖像或添加鏈接， Dreamweaver會(huì)暫時(shí)使用絕對(duì) 路徑。 當(dāng)插入圖像（非鏈接）時(shí)，如果使用圖像的絕對(duì)路徑，而 圖像又駐留在遠(yuǎn)程服務(wù)器而不在本地硬盤(pán)驅(qū)動(dòng)器上，則將 無(wú)法
7、在文檔窗口中查看該圖像，此時(shí)，必須在瀏覽器中預(yù) 覽該文檔才能看到，只要情況允許，對(duì)于圖像，就要使用 文檔或站點(diǎn)根目錄相對(duì)路徑。 6.2.2 相對(duì)路徑 文檔的相對(duì)路徑，例如 data/html/doc/2012- 12/21/25126/index.html。 相對(duì)路徑對(duì)于絕大多數(shù) Web站點(diǎn)的本地鏈接，是最全適的 路徑。相對(duì)路徑還可以需要站點(diǎn)內(nèi)移動(dòng)文件時(shí)，提供更大 的靈活性。 在當(dāng)前文檔與所要鏈接的文檔處于同一文件夾內(nèi)，而且在 繼續(xù)保持這種狀態(tài)的情況下，文檔相對(duì)路徑非常有用。 文檔相對(duì)路徑還可以用來(lái)鏈接到其他文件夾中的文檔，方 法是利用文件夾層次結(jié)構(gòu)，指定從當(dāng)前文檔所鏈接的文
8、檔 的路徑。 文檔相對(duì)路徑，是省略掉了當(dāng)前文檔和所鏈接的文檔都相 同的絕對(duì) URL部分，而只提供不同的路徑部分。如圖 6-2所 示我們建立的一個(gè)站點(diǎn)的內(nèi)部結(jié)構(gòu)。 圖 6-2 站點(diǎn)結(jié)構(gòu) 如果成組移動(dòng)一組文件，例如移動(dòng)整個(gè)文件夾時(shí)，該文件 夾內(nèi)所有文件保持彼此間的相對(duì)路徑不變，此時(shí)不需要更 新文件間的文檔相對(duì)鏈接。如果，移動(dòng)含有文檔相對(duì)鏈接 的單個(gè)文件或者移動(dòng)文檔相對(duì)鏈接到的單個(gè)文件時(shí)，則必 須更新這些鏈接 6.2.3 根路徑 站點(diǎn)根目錄相對(duì)路徑，例如 /cms/data/html/doc/2012-12/21/25126/index.html。即緊跟在網(wǎng)站域名后。 站點(diǎn)根目錄
9、相對(duì)路徑提供從站點(diǎn)的根文件夾到文檔的路徑， 在處理使用多個(gè)服務(wù)器的大型 Web站點(diǎn)，或者在承載有多 個(gè)不同站點(diǎn)的服務(wù)器，則可能需要使用這個(gè)類(lèi)型的路徑， 如果不太熟悉這個(gè)類(lèi)型的路徑，最好使用文檔相對(duì)路徑為 妥。 站點(diǎn)根目錄相對(duì)路徑以一個(gè)正斜扛“ /” 開(kāi)始，正斜扛表 示站點(diǎn)根文件夾。比如 /lwjun/index.html是文件 index.html的站點(diǎn)根目錄相對(duì)路徑，該文件位于站點(diǎn)根文 件夾的 lwjun子文件夾中。 在有些 Web站點(diǎn)中，需要經(jīng)常在不同文件夾之間移動(dòng) HTML 文件，在這種情況下，站點(diǎn)根目錄相對(duì)路徑通常是指定鏈 接的最佳方法。 如果移動(dòng)或重命名根目錄相對(duì)鏈接所鏈
10、接的文檔，即使文 檔彼此之間的相對(duì)路徑?jīng)]有改變，仍必須更新這些鏈接。 例如，如果移動(dòng)某個(gè)文件夾，則指向該文件夾中文件的所 有根目錄相對(duì)鏈接都必須更新。 6.3 創(chuàng)建超鏈接的技術(shù)方法 創(chuàng)建超鏈接的方法并不復(fù)雜，主要有使用 “屬性”面板創(chuàng)建超鏈接、使用指向文件 圖標(biāo)創(chuàng)建鏈接和使用菜單創(chuàng)建鏈接，下面 這些方法作一介紹。 6.3.1 使用“屬性”面板創(chuàng)建超鏈接 首先，在網(wǎng)頁(yè)中選擇準(zhǔn)備創(chuàng)建鏈接的對(duì)象， 在菜單欄中，選擇“窗口” “屬性”菜 單項(xiàng)，在“屬性”面板“鏈接”后面的文 本框中，輸入準(zhǔn)備鏈接的路徑，即可完成 使用“屬性”面板創(chuàng)建鏈接的操作。如圖 6-3所示。 圖 6-3 “屬性
11、”面板 6.3.2 使用指向文件圖標(biāo)創(chuàng)建鏈接 首先，在網(wǎng)頁(yè)中選擇準(zhǔn)備創(chuàng)建鏈接的對(duì)象，在菜單欄中， 選擇“窗口” “屬性”菜單項(xiàng)，在“屬性”面板中，單 擊“指向文件”按鈕 ，單擊并拖動(dòng)到站點(diǎn)窗口的目標(biāo)文 件上，釋放鼠標(biāo)左鍵即可完成創(chuàng)建鏈接的操作。如圖 6-4 所示。 圖 6-4 圖標(biāo)創(chuàng)建鏈接 6.3.3 使用菜單創(chuàng)建鏈接 首先，在網(wǎng)頁(yè)中選擇準(zhǔn)備創(chuàng)建鏈接的文本， 選擇“插入” “超級(jí)鏈接”菜單項(xiàng)，彈 出“超級(jí)鏈接”對(duì)話(huà)框，在“鏈接”文本 框中輸入鏈接的目標(biāo)，或者單擊“鏈接” 文本框，選擇相應(yīng)的鏈接目標(biāo)，單擊“確 定”按鈕，即可完成使用菜單創(chuàng)建鏈接的 操作。如圖 6-5（ a）
12、、（ b）所示 圖 6-5 菜單操作 圖 6-5 創(chuàng)建鏈接 （ a） （ b） 6.4 各種類(lèi)型鏈接的創(chuàng)建 在網(wǎng)頁(yè)中常見(jiàn)的超鏈接主要包括文本超鏈 接、圖像超鏈接、 E-mail鏈接、錨鏈接、空 鏈接、腳本鏈接等。 6.4.1 創(chuàng)建文本超鏈接 文本超鏈接是網(wǎng)頁(yè)文件中最常用的鏈接， 單擊文本鏈接將激發(fā)文本鏈接所連接的文 件，使用文本鏈接創(chuàng)建連接的文件對(duì)象可 以是網(wǎng)頁(yè)、圖像等。 （ 1）啟動(dòng) Dreamweaver CS5，打開(kāi)或建 立一個(gè)網(wǎng)頁(yè)。打開(kāi)如圖 5-6所示的網(wǎng)站頁(yè)面。 圖 5-6 創(chuàng)建鏈接的網(wǎng)頁(yè)頁(yè)面 實(shí)現(xiàn)通過(guò)單擊網(wǎng)頁(yè)中的文本“ 3.大雁塔”實(shí)現(xiàn)網(wǎng)頁(yè)跳轉(zhuǎn)
13、相 應(yīng)的內(nèi)容網(wǎng)頁(yè)。實(shí)現(xiàn)方法如下： （ 1）在網(wǎng)頁(yè)中選擇“ 3.大雁塔”文本，如圖 6-5所示。 （ 2）除了可以通過(guò)上節(jié)所講的超鏈接方法來(lái)實(shí)現(xiàn)外，可 以通過(guò)“插入”面板的操作方式來(lái)實(shí)現(xiàn)。如圖 5-6所示 。 圖 5-6“插入”面板 圖 5-7 超鏈接設(shè)置 （ 3）在單擊如圖 5-6所示的“插入” “常用” “超級(jí) 鏈接”彈出如圖 5-7所示“超級(jí)鏈接”對(duì)話(huà)框。在相應(yīng)的網(wǎng) 站中選擇要鏈接的文件（如網(wǎng)頁(yè)），本例選擇的是“旅游 景點(diǎn)”網(wǎng)頁(yè)文件。并進(jìn)行相應(yīng)的設(shè)置。 目標(biāo)：定義瀏覽器在打開(kāi)目標(biāo)的文檔或目錄時(shí)的方式，在 框架網(wǎng)頁(yè)中，用戶(hù)可以將某個(gè)框架前的 ID作為鏈接的目標(biāo)，
14、定義在該框架中打開(kāi)鏈接。默認(rèn)有 4種目標(biāo)與文本的“屬性” 檢查器中的的目標(biāo)類(lèi)型相同。 經(jīng)過(guò)設(shè)置會(huì)看到“屬性”面板會(huì)發(fā)生相應(yīng)的變化，當(dāng)然也 可以在屬性面板完成相應(yīng)設(shè)置。如圖 6-8所示。 圖 6-8 “屬性”面板變化 經(jīng)過(guò)設(shè)置確認(rèn)后，鏈接文本顯示會(huì)出現(xiàn)如圖 6-9所示的效 果。一般還可以對(duì)鏈接后的文本的顯示顏色等進(jìn)行設(shè)置， 在下節(jié)講 圖 6-9 鏈接文本顯示變化 （ 4）按 F12鍵運(yùn)行，在瀏覽頁(yè)面中，單擊已經(jīng)設(shè)置的鏈接 文本。跳轉(zhuǎn)到如圖 6-9所示的頁(yè)面，可看到相應(yīng)的內(nèi)容。 圖 6-9 鏈接打開(kāi)的目標(biāo)頁(yè)面 6.4.2 文本鏈接的狀態(tài) 文本在鏈接后的狀態(tài)可以通過(guò)設(shè)置鏈接
15、的顏色來(lái)表示，文 本鏈接一般有 3種狀態(tài)： 未單擊的狀態(tài)。即在鼠標(biāo)未單擊時(shí)的默認(rèn)狀態(tài)。 單擊后的狀態(tài)。即在鼠標(biāo)單擊鏈接后的狀態(tài)。 鼠標(biāo)懸浮在文本鏈接上的狀態(tài)。 下面對(duì)三種狀態(tài)的設(shè)置作一介紹。 （ 1）先打開(kāi)或建立一個(gè)網(wǎng)頁(yè)。 （ 2）在網(wǎng)頁(yè)中設(shè)置一個(gè)文本（“西安”）超鏈接，如圖 6-10所示。 圖 6-10 設(shè)置超鏈接 圖 6-11 “屬性”面板設(shè)置 （ 3）在如圖 6-11所示的“屬性”面板中，單擊“頁(yè)面屬 性”按鈕。 （ 4）在彈出的“頁(yè)面屬性”對(duì)話(huà)框中，選擇“分類(lèi)”列 表下的“鏈接（ CSS）”選項(xiàng)，如圖 6-12所示。 圖 6-12 頁(yè)面屬性設(shè)置
16、 （ 5）在該對(duì)話(huà)框中，可對(duì)鏈接文本進(jìn)行設(shè)置，更改“鏈接 顏色”、“變換圖像鏈接”和“已訪(fǎng)問(wèn)鏈接”顏色以及 “下劃線(xiàn)樣式”的設(shè)置。如圖 6-13所示。在確定后，在網(wǎng) 頁(yè)編輯窗口中，原來(lái)鏈接文本“西安”由藍(lán)色變成了紅色。 圖 6-13 設(shè)置實(shí)現(xiàn) （ 6）保存文檔。按 F12鍵，可在瀏覽窗口觀察相應(yīng)的操作 效果： 當(dāng)鼠標(biāo)停留到鏈接文本時(shí)，變成綠色，如圖 6-14所示。 當(dāng)鼠標(biāo)單擊鏈接文本時(shí)變成紫色； 當(dāng)單擊完成鏈接后，變成所設(shè)置的淺黃色 。 圖 6-14 瀏覽效 果圖 6.4.3 下載文件鏈接 大家在上網(wǎng)時(shí)，經(jīng)常會(huì)遇到下載文件鏈接，單擊它會(huì)彈出 一個(gè)下載提示框，下載鏈
17、接在軟件下載網(wǎng)站和源代碼下載 網(wǎng)站中應(yīng)用的比較多，下載鏈接的創(chuàng)建方式和一般的鏈接 創(chuàng)建方法基本相同，只是所鏈接的內(nèi)容是一個(gè)軟件文件或 者壓縮文件，而不是圖像或者網(wǎng)頁(yè)。如圖 6-15所示，是在 本機(jī)安裝了相關(guān)的下載工具，單擊下載鏈接后常出現(xiàn)的下 載界面 在網(wǎng)站中創(chuàng)建下載鏈接的方法如下： （ 1）打開(kāi)或新建一個(gè)網(wǎng)頁(yè)，在網(wǎng)頁(yè)中輸入并選中要?jiǎng)?chuàng)建 鏈接的文本，如圖 6-16所示 圖 6-16 創(chuàng)建鏈接文本 （ 2）在“屬性”面板單擊“指向文件”按鈕，并拖動(dòng)至 如圖 6-17所示的“本地文件”中要下載的文件上，當(dāng)釋放 后就會(huì)創(chuàng)建文本與下載文件之間的鏈接，如圖 6-17所示。 在“屬性”面板的
18、“鏈接”文本框中就會(huì)出現(xiàn)鏈接文件名， 同時(shí)鏈接文本顏色會(huì)發(fā)生變化。 圖 6-17 下載鏈接創(chuàng)建 （ 3）保存網(wǎng)頁(yè)。按 F12運(yùn)行網(wǎng)頁(yè)，如圖 6-18所示。 （ 4）單擊“單擊此處”，彈出如圖 6-19的文件下載對(duì)話(huà) （ 5）然后將文件“保存”到相應(yīng)的存儲(chǔ)器中。 圖 6-18 網(wǎng)頁(yè)瀏 覽頁(yè)面 圖 6-19 文件 下載 6.4.4 創(chuàng)建電子郵件鏈接 電子郵件鏈接是網(wǎng)頁(yè)中經(jīng)常用到的一種方法，單擊電子郵 電鏈接對(duì)象，不是跳轉(zhuǎn)到一個(gè)相應(yīng)的頁(yè)面或下載文件頁(yè)面。 而是自動(dòng)啟動(dòng)計(jì)算機(jī)上默認(rèn)的電子郵件收發(fā)軟件，比如常 見(jiàn)的 Outlook Express等，其作用是方便網(wǎng)頁(yè)瀏覽者
19、書(shū)寫(xiě) 電子郵件，并發(fā)送到指定的用戶(hù)信箱中去。但是對(duì)于 Windows 7操作系統(tǒng)來(lái)說(shuō)，它并沒(méi)有安裝默認(rèn)的郵件收發(fā) 客戶(hù)端，需要用戶(hù)自己下載并安裝郵件客戶(hù)端，并將其設(shè) 置為默認(rèn)的電子郵電收發(fā)客戶(hù)端。下面簡(jiǎn)要介紹一下創(chuàng)建 的過(guò)程。 （ 1）打開(kāi)或創(chuàng)建一個(gè)網(wǎng)頁(yè)。如圖 6-20所示。 圖 6-20 創(chuàng)建的網(wǎng)頁(yè) （ 2）選中網(wǎng)頁(yè)中的文本，選擇“插入” “電子郵件鏈 接”彈出，如圖 6-22所示的電子郵件鏈接對(duì)話(huà)框。 圖 6-21 郵電鏈接菜單 （ 3）在如圖 6-22中的“電子郵件”文本框中填寫(xiě)電子郵 件的地址。 （ 4）保存網(wǎng)頁(yè)。并在瀏覽器中運(yùn)行，效果如圖 6-23所示。 （
20、 5）單擊瀏覽頁(yè)面中的“請(qǐng)單擊此處”，出現(xiàn)郵件發(fā)送 界面，輸入相應(yīng)信息發(fā)送郵件 圖 6-22 郵電鏈接設(shè)置 圖 6-23 瀏覽器顯示效果 6.5 圖像超鏈接 在瀏覽網(wǎng)頁(yè)時(shí) ， 網(wǎng)頁(yè)上經(jīng)常會(huì)有以圖像方式來(lái)實(shí)現(xiàn)鏈接的 ， 尤其是以廣告或產(chǎn)品介紹應(yīng)用最為廣泛 ， 比如在購(gòu)物網(wǎng)站 上 ， 其產(chǎn)品往往是以圖片的方式顯示的 ， 當(dāng)單擊該圖片時(shí) 就會(huì)彈出相應(yīng)介紹或購(gòu)買(mǎi)的網(wǎng)頁(yè)及其內(nèi)容 。 6.5.1 圖像超鏈接 圖像超鏈接與文本超鏈接的實(shí)現(xiàn)方法基本相同，實(shí)際只要 將超鏈接的文本換成圖像就是了，簡(jiǎn)單介紹如下： （ 1）打開(kāi)如圖 6-24所示頁(yè)面 圖 6-24 圖像鏈接設(shè)置 （ 2
21、）選中網(wǎng)頁(yè)中的圖像，在“屬性”面板中的“鏈接” 如前所講的相似方式設(shè)置鏈接文件，同時(shí)也可對(duì)圖像本身 進(jìn)行相應(yīng)處理。 （ 3）保存網(wǎng)頁(yè)。按 F12鍵運(yùn)行。效果如圖 6-25所示。 圖 6-25 瀏覽效果 6.5.2 鼠標(biāo)經(jīng)過(guò)圖像鏈接 在瀏覽網(wǎng)頁(yè)時(shí)，經(jīng)常能夠發(fā)現(xiàn)當(dāng)鼠標(biāo)經(jīng)過(guò)一個(gè)圖像時(shí)，這 幅圖像就會(huì)變成另一幅圖像，但當(dāng)鼠標(biāo)離開(kāi)時(shí)則又恢復(fù)為 原來(lái)的圖像，這樣的設(shè)計(jì)對(duì)提高了網(wǎng)頁(yè)的動(dòng)態(tài)變化效果， 提高瀏覽者的注意力和興趣都有非常好的效果。 出現(xiàn)這種鏈接的效果，并不復(fù)雜，實(shí)際上它是由兩幅圖像 組成的，即有主圖像（首次加載頁(yè)面時(shí)顯示的圖像）和次 圖像（鼠標(biāo)指針經(jīng)過(guò)主圖時(shí)顯示的圖像）。但應(yīng)當(dāng)注
22、意的 是這兩個(gè)圖像的大小應(yīng)當(dāng)相等，如果兩個(gè)圖像的大小不同 時(shí)， Dreamweaver 就會(huì)將第二個(gè)圖像的大小調(diào)整為和第一 張圖像相匹配的大小。具體操作如下： （ 1）在所建立的網(wǎng)站不準(zhǔn)備好兩幅大小相等的圖像。 （ 2）在網(wǎng)站中新建一個(gè)網(wǎng)頁(yè)，并進(jìn)行相應(yīng)的菜單操作， 如圖 6-26所示。 圖 6-26 操作菜單 （ 2）在彈出的如圖 6-27所示對(duì)話(huà)框中，分別單擊“原始 圖像”、“鼠標(biāo)經(jīng)過(guò)圖像”文本框后的“瀏覽”分別選擇 相對(duì)應(yīng)的圖像文件 圖 6-27 鼠標(biāo)經(jīng)過(guò) 圖像設(shè)置 （ 3）確定后，會(huì)在頁(yè)面中出現(xiàn)類(lèi)似與運(yùn)行瀏覽（如圖 6- 28）所示效果。 圖 6-28 插入圖像效
23、果 （ 4）在瀏覽狀態(tài)下，當(dāng)鼠標(biāo)移動(dòng)到如圖 6-28所示圖像時(shí) 就會(huì)出現(xiàn)如圖 6-29所示的效果 圖 6-29 交替效果 6.5.3 創(chuàng)建錨記鏈接 創(chuàng)建命名錨記（簡(jiǎn)稱(chēng)錨點(diǎn)）就是在文檔中設(shè)置位置標(biāo)簽， 并給該位置設(shè)置一個(gè)名稱(chēng)，以便引用。通過(guò)創(chuàng)建錨點(diǎn)，可 以使鏈接指向當(dāng)前文檔或者不同文檔中的指定位置。錨點(diǎn) 常常被用來(lái)實(shí)現(xiàn)到特定的主題或者文檔頂部的跳轉(zhuǎn)鏈接， 使訪(fǎng)問(wèn)者能夠快速瀏覽到選定的位置，加快信息檢索速度。 創(chuàng)建錨點(diǎn)鏈接，要設(shè)置一個(gè)命名錨點(diǎn)，該命名錨點(diǎn)就是鏈 接目標(biāo)。操作如下： （ 1）打開(kāi)或新一個(gè)網(wǎng)頁(yè)。如圖 6-30所示，將定鼠標(biāo)定位 在網(wǎng)頁(yè)中第一行文本的起始位置，選擇“插入
24、” “命名 錨記” 。 圖 6-30 錨記命令操作 （ 2）在如圖 6-31所示的“命名錨記”對(duì)話(huà)框的“錨記名 稱(chēng)”文本框中輸入“錨記”名稱(chēng)。 （ 3）在輸入名稱(chēng)確定后，在網(wǎng)頁(yè)鼠標(biāo)定位位置出現(xiàn)如圖 6-32所示的錨記標(biāo)志。 圖 6-31 命令錨記對(duì)話(huà)框 圖 6-32 錨記標(biāo)記 （ 4）然后選擇如圖 6-33網(wǎng)頁(yè)中的文本，如 “反回頂部”，并在“屬性”面板的“鏈 接”文本框中輸入“ #（英文半角下輸入） 錨記”后，按回車(chē)鍵即刻鏈接設(shè)置。 圖 6-33 創(chuàng)建錨記鏈接 （ 5）保存網(wǎng)頁(yè)。按 F12鍵，在瀏覽頁(yè)面中，單擊“反回頂 部”，網(wǎng)頁(yè)中內(nèi)容會(huì)自動(dòng)移動(dòng)到錨記標(biāo)志所定位的
25、行，如 本網(wǎng)頁(yè)中的第一行。這種通過(guò)錨記鏈接的方式實(shí)現(xiàn)在網(wǎng)頁(yè) 中的跳轉(zhuǎn)在瀏覽的網(wǎng)頁(yè)比較長(zhǎng)內(nèi)容比較多的情況下非常方 便。 圖 6-34 瀏覽效果 6.5.4 創(chuàng)建空鏈接 所謂的空鏈接，就是指未指定對(duì)象的鏈接，用來(lái)向頁(yè)面中 的對(duì)象或文本附加行為，可用來(lái)設(shè)置空鏈接的對(duì)象包括： 文本、圖像、熱點(diǎn)鏈接等。實(shí)現(xiàn)方法如下： （ 1）打開(kāi)或創(chuàng)建一個(gè)網(wǎng)頁(yè)，如圖 6-35所示。 圖 6-35 空鏈接設(shè)置 （ 2）在“屬性”面板的“鏈接”文本框中輸入“ #” ，然 后按回車(chē)鍵即可。 （ 3）保存頁(yè)面文件。按 F12鍵運(yùn)行，在瀏覽的頁(yè)面中單擊 鏈接文本，不發(fā)生任何跳轉(zhuǎn)行為。 6.5.5 創(chuàng)建腳
26、本鏈接 一般腳本鏈接可用來(lái)執(zhí)行計(jì)算、表單驗(yàn)證和其他處理。下 面介紹下腳本鏈接的實(shí)現(xiàn)方法。 （ 1）打開(kāi)或創(chuàng)建一個(gè)網(wǎng)頁(yè)文件，如圖 3-36所示，選擇鏈 接文本“關(guān)閉”，在“屬性”面板的“鏈接”文本框中輸 入“ javascript:window.close()” ，然后按回車(chē)鍵。 圖 6-36 腳本鏈接設(shè)置 （ 2）保存網(wǎng)頁(yè)文件。按 F12鍵運(yùn)行，在瀏覽器單擊“關(guān)閉” 會(huì)彈出如圖 6-37所示的對(duì)話(huà)框。如果單擊“是”則關(guān)閉瀏 覽網(wǎng)頁(yè)窗口。 圖 6-37 實(shí)現(xiàn)瀏覽效果 6.6 管理超鏈接 前面各節(jié)主要講了如何建立各種超鏈接，在 Dreamweaver CS5中，可以實(shí)現(xiàn)對(duì)
27、超鏈接的管理，即可以對(duì)超鏈接進(jìn)行 檢查或自動(dòng)更新鏈接。 6.6.1 自動(dòng)更新鏈接 每當(dāng)在本地站點(diǎn)內(nèi)移動(dòng)或重命名文檔時(shí)， Dreamweaver都 可更新起自以及指向該文檔的鏈接，在將整個(gè)站點(diǎn)或其中 完全獨(dú)立的一個(gè)部分存儲(chǔ)在本地磁盤(pán)上時(shí)，此項(xiàng)功能最適 用， Dreamweaver不更改遠(yuǎn)程文件夾中的文件，除非將這 些本地文件放在或者存回到遠(yuǎn)程服務(wù)器上。 為了加快更新過(guò)程，在 Dreamweaver中可創(chuàng)建一個(gè)緩存文 件，用來(lái)存儲(chǔ)本地文件夾中所有鏈接的信息，在添加、更 改或刪除本地站點(diǎn)上的鏈接時(shí)，該緩存文件以不見(jiàn)的方式 進(jìn)行更新。下面具本來(lái)介紹。 在已經(jīng)打開(kāi)或新的 Dreamwea
28、ver CS5窗口中，選擇“編 輯” “首選參數(shù)”命令，則彈出“首選參數(shù)”對(duì)話(huà)框， 如圖 6-38所示 。 圖 6-38 首選參數(shù)操作 “ 分類(lèi) ” 列表框中選擇 “ 常規(guī) ” 選項(xiàng)，在 “ 文檔選項(xiàng) ” 區(qū) 域中單擊展開(kāi) “ 移動(dòng)文件時(shí)更新鏈接 ” 的下拉按鈕，選擇 不同的選項(xiàng)，即進(jìn)入不同的設(shè)置。 各稱(chēng)其參數(shù)如下： 總是：每當(dāng)移動(dòng)或重命名選定文檔時(shí)，自動(dòng)更新起自和指 向該文檔的所有鏈接。 從不：移動(dòng)或重命名選定文檔時(shí)，不自動(dòng)更新起自和指向 該文檔的所有鏈接。 提示：顯示一個(gè)對(duì)話(huà)框，列出此更改影響到的所有文件。 單擊 “ 更新 ” 按鈕可更新這些文件中的鏈接，在單擊 “
29、 不 更新 ” 按鈕時(shí)將保留原文件不變。 6.6.2 在站點(diǎn)范圍內(nèi)更改鏈接 除了當(dāng)移動(dòng)或重命名文件時(shí)通過(guò) Dreamweaver自動(dòng)更改鏈接 以外，還可以通過(guò)手動(dòng)的方式更改所有鏈接，比如電子郵 件、 FTP鏈接、腳本鏈接和空鏈接，從而使其指向其他位置。 下面對(duì)方法作一介紹。 （ 1）在打開(kāi)的網(wǎng)頁(yè)文件窗口的“文件”面板的“本地文件” 區(qū)域中選擇一個(gè)文件，如圖 6-39所示。 圖 6-39 選擇網(wǎng)頁(yè)文件 （ 2）在菜單欄選擇“站點(diǎn)” “改變站點(diǎn)范圍的鏈接” 命令，如圖 6-40所示。 圖 6-40 選擇命令操作 （ 2）在彈出的“更改所有的鏈接”對(duì)話(huà)框的“變成新鏈 接”文
30、本框，輸入或通過(guò)瀏覽選擇準(zhǔn)備鏈接的文件。如圖 6-41所示 。 圖 6-40 輸入選擇鏈接文件 6.6.3 檢查站點(diǎn)中的鏈接錯(cuò)誤 在 Dreamweaver CS5中，還可以對(duì)站點(diǎn)中的鏈接的錯(cuò)誤進(jìn) 行檢查，通過(guò)檢查鏈接的錯(cuò)誤，保證網(wǎng)頁(yè)設(shè)計(jì)的正確性， 對(duì)于大型的鏈接非常多的復(fù)雜網(wǎng)站來(lái)說(shuō)，鏈接的正確性、 合理性對(duì)一個(gè)網(wǎng)站的使用效果來(lái)說(shuō)尤為重要，為了避免在 設(shè)計(jì)過(guò)程中出現(xiàn)鏈接上的錯(cuò)誤或者不合理，在實(shí)現(xiàn)鏈接之 前，應(yīng)當(dāng)先對(duì)整個(gè)網(wǎng)站鏈接進(jìn)行設(shè)計(jì)，比如選擇哪種鏈接 方法。最好是預(yù)先畫(huà)出文檔之間鏈接關(guān)系圖，這樣會(huì)一目 了然，減少鏈接錯(cuò)誤。 下面介紹檢查站點(diǎn)中的鏈接錯(cuò)誤的操作方法。 （ 1）
31、打開(kāi)可新建一個(gè)網(wǎng)頁(yè)文件。選擇菜單“站 點(diǎn)” “檢查站點(diǎn)范圍的鏈接”命令。如圖 6-41所示。 圖 6-41 檢查站點(diǎn)菜單 （ 2）在彈出如圖 6-42所示的“鏈接檢查器”面板，在 “顯示”選項(xiàng)中包括斷掉的鏈接、外部鏈接和孤立的文件 3個(gè)選項(xiàng)，單擊其中任何一項(xiàng)就可以檢查相應(yīng)的信息。 圖 6-42鏈接檢查 （ 3）若要關(guān)閉“鏈接檢查器”面板，可單擊按鈕，在彈 出的菜單中選擇“關(guān)閉標(biāo)簽組”即可。如圖 6-43所示。 圖 6-43 關(guān)閉標(biāo)簽組 小結(jié) Dreamweaver的重要功能之一就是網(wǎng)站中的超級(jí)鏈接，它 是網(wǎng)站必不可少的組成部分，本章比較詳細(xì)地介紹了超級(jí) 鏈接的相關(guān)概念和實(shí)現(xiàn)超級(jí)鏈接方法。同時(shí)對(duì)文本鏈接、 郵件鏈接、圖像鏈接、腳本鏈接、熱點(diǎn)鏈接、錨記鏈接等 作了介紹，作為學(xué)習(xí)者對(duì)這些超鏈接的操作一定認(rèn)真學(xué)習(xí) 和掌握。
《網(wǎng)頁(yè)中的超級(jí)鏈接》PPT課件.ppt
