網(wǎng)頁中使用超鏈接.doc

第五章網(wǎng)頁中使用超鏈接超鏈接是WWW的魅力所在。為了把Internet上眾多分散的網(wǎng)站的網(wǎng)頁聯(lián)系起來，構(gòu)成一個(gè)有機(jī)的整體，就是在網(wǎng)頁上加入鏈接。通過點(diǎn)擊網(wǎng)頁上的鏈接，才能真正實(shí)現(xiàn)網(wǎng)絡(luò)無國界，我們才可以在信息海洋中盡情遨游。Macromedia Dreamweaver 8提供多種創(chuàng)建超文本鏈接的方法，可創(chuàng)建到文檔、圖像、多媒體文件或下載軟件的鏈接，可以建立到文檔內(nèi)任意位置的任何文本或圖像（包括標(biāo)題列表、表、層或框中的文本或圖像）的鏈接。本章主要介紹利用Dresmweaver 創(chuàng)建的編輯各種超鏈接的方法。通過本章的學(xué)習(xí)，讀者應(yīng)該掌握以下內(nèi)容；l 認(rèn)識超鏈接l 掌握利用Dreamweaver創(chuàng)建各種超鏈接的方法l 掌握利用Dreamweaver編輯各種超鏈接的方法l 管理超鏈接下的方法5.1超鏈接基礎(chǔ)511超鏈接的種類超鏈接為暢游網(wǎng)絡(luò)提供了方便，它是網(wǎng)頁制作中使用比較多的一種技術(shù)。超鏈接是用預(yù)先準(zhǔn)備的好文本、按鈕、圖像等對象與其他對象建立的一種鏈接，也就是源端和目標(biāo)端點(diǎn)之間的建立一種鏈接。源端點(diǎn)是超鏈接的超始端點(diǎn)，也稱為源錨；目標(biāo)端點(diǎn)是鏈接的像，也簽名為目標(biāo)錨。超鏈接按源端點(diǎn)的鏈接劃分，可分為超文本鏈接和非超文本鏈接兩類。超文本鏈接的源錨文本下方有下劃線，而非超文本鏈接是用除文本之外的其他對象構(gòu)建的鏈接，其源錨可以是圖像、表格、列表、表單、多媒體等對象。超鏈接按目標(biāo)端點(diǎn)的鏈接劃分，可分為外部鏈接、內(nèi)部鏈接、電子郵件鏈接、局部鏈接、腳本鏈接等。512文檔路徑類型掌握從作為鏈接起點(diǎn)的文檔到作為鏈接目標(biāo)文檔之間的文件路徑，對于創(chuàng)建鏈接至關(guān)重要。文檔路徑類型有絕對路徑和相對路徑兩種。1.絕對路徑絕對路徑是包括服務(wù)器協(xié)議（本例中為HTTP）的完全路徑，比發(fā)如“洪恩在線電腦樂園”，完全路徑為;/pe/index.htm.如果要鏈接當(dāng)前站點(diǎn)之外的文檔，就必須使用絕對路徑。每個(gè)網(wǎng)頁都有一個(gè)惟一的地址，稱為統(tǒng)一資源定位器(URL)。絕對路徑提供鏈接文檔的完整URL，包括使用的協(xié)議(對于網(wǎng)頁通常是http:/ )。例如,/support/dreamweaver/contents.html 就是一個(gè)絕對路徑。必須使用絕對路徑來鏈接其他服務(wù)器上的文檔 。對本地鏈接（文檔在相同的站點(diǎn)中）也可使用絕對路徑鏈接，鉭并不贊成這種用法，如果將站點(diǎn)移到另一個(gè)域中，所有的本地絕對路徑鏈接都有將打斷。當(dāng)創(chuàng)建本地鏈接（即從一個(gè)文檔到同一站點(diǎn)上另一個(gè)文檔的鏈接）時(shí)，通常不指定要鏈接到的文檔 的完整URL，而是指定一個(gè)從當(dāng)前文檔或站點(diǎn)根文件開始的相對路徑。2.相對路徑相對路徑包括根相對路（Site Root）和文檔相對路徑(Document)兩種。在本地磁盤上編輯網(wǎng)頁時(shí)，需要選定一個(gè)文件夾來定義本地站點(diǎn)，模擬服務(wù)器上的根文件夾，系統(tǒng)就根據(jù)這個(gè)文件夾來確定所有鏈接的本地文件位置，而根相對路徑中的根就是指這個(gè)文件夾。使用相對路徑鏈接為在本地站點(diǎn)內(nèi)移動(dòng)文件提供了很大的靈活性。（1）根相對路徑以（也稱相對根目不暇接錄）“/”開頭，路徑是從當(dāng)前站點(diǎn)的根目錄開始計(jì)算。如時(shí)D盤my web目錄就是名為“my web ”的站點(diǎn)，這時(shí)“/index.htm”路徑就表示文件位置為D:my webindex.htm.根相對路徑適用于鏈接內(nèi)容頻繁更換的文件，這樣即使站點(diǎn)中的文件被移動(dòng)了，其鏈接仍可經(jīng)生效。如果目錄結(jié)構(gòu)過深，在引用根目錄下有文件時(shí)，用根相對路徑會更好些。比如某一個(gè)網(wǎng)頁文件中引用根目錄下img目錄中的一個(gè)圖片文件”a.gif”時(shí)，在當(dāng)前網(wǎng)頁中用文檔相對路徑表示為：././././img/a.gif,而用要根相對路徑只要表示為”/img/a.gif”就行了.圖5-1 將站點(diǎn)所在目錄虛擬為一個(gè)盤注意：在預(yù)覽 文件時(shí)，用根相對路徑鏈接的內(nèi)容在本地瀏覽器中不會顯示出來，這是因?yàn)闉g覽不會承認(rèn)站點(diǎn)的根文件夾服務(wù)器。這時(shí)可以將站點(diǎn)的根目錄虛擬不為一個(gè)盤。比如要瀏覽D:my web下的文件，可以選擇Windows“開始”菜單中的“運(yùn)行”，彈出運(yùn)行對話框，輸入“substh:d:my web”，如圖：5-1所示，D盤下的My we文件夾就被虛擬為H盤，在瀏覽器中查看H盤下網(wǎng)頁，用根相對路徑鏈接的內(nèi)容都可以正常顯示了。（2）文檔相對路徑文檔相對路徑對于大多數(shù)WEB站點(diǎn)的本地鏈接來說，是最合適的路徑。在當(dāng)前文檔與鏈接的文檔在同一文件夾中，而且很可能長久保留在一起時(shí)，文檔相對鏈接是尤其有用的。文檔相對路徑還可用來鏈接到其他文件夾中的文檔，方法是利用文件夾層次結(jié)構(gòu)指定從當(dāng)前文檔到所鏈接的文檔的路徑。文檔相對路徑的基本思想是省略當(dāng)前文檔和鏈接的文檔都有相同的絕對URL部分，而只提供不同的那部分路徑。若要鏈接的文件與當(dāng)前文檔處在同一文檔夾中，只需輸入文件名即可。若要鏈接的文件夾位于當(dāng)前文檔 所在文件夾的父文件夾中，提供文件夾名，然后加上正斜線（/）和文件名。若要鏈接的文件位于當(dāng)前文檔所在文件夾的父文件夾中，文件名前加./ (其中”.”表示”文件夾分層結(jié)構(gòu)中的上一級文件夾”)文檔相對于路徑就是指包含當(dāng)前文檔所在文件夾，也就是當(dāng)前網(wǎng)頁所在文件夾為基礎(chǔ)開始計(jì)算路徑。比如：當(dāng)前網(wǎng)頁所在位置為D:my webmypic,那么： “a.htm”就表示D:my webmypica.htm;“./a.htm”相當(dāng)于D:my weba.htm;，其中”./”表示當(dāng)文件夾上級文件夾?！癷mg/a.gif”是指D:my webmypicimga.gif, 其中“img”意思是漢前文件夾下名為 文件夾。文檔相對路徑是最簡單的路徑，一般多用于鏈接保存在同一文件夾中的文檔。 5.2 利用Dreamweaver 8創(chuàng)建超鏈接521 創(chuàng)建文字超鏈接如果想在Dreamweaver 8中為頁面中的文本對象創(chuàng)建超鏈接，可以在文本“屬性”面板中按如下方法進(jìn)行操作。1.使用“瀏覽文件”圖標(biāo)（1）選中欲設(shè)置超級鏈接的文本對象。（2）在菜單欄中單擊“窗口”“屬性”（或按Ctrl+F3鍵），打開如圖5-2所示的文本“屬性”面板。圖5-2 文本“屬性”面板（3）在“屬性”面板上單擊“鏈接”文本框右側(cè)的“瀏覽文件”圖標(biāo)，打開圖5-3所示的“選擇文件”對話框。圖5-3 “選擇文件”對話框（4）設(shè)置“選擇文件”對話框的參數(shù)。該對話框中具體參數(shù)的含義如下所述。URL（URL地址）：在選定“相對于”后，該處即會顯示將出現(xiàn)在文本“屬性”面板中“鏈接”文本框的地址。相對于：在該下拉列表中你可以選擇鏈接路徑的形式，有“文檔”和“站點(diǎn)根目錄”兩個(gè)選項(xiàng)。參數(shù)：單擊“參數(shù)”按鈕，可以打開如圖5-4所示的鏈接參數(shù)設(shè)置窗口，不過需要注意的是該項(xiàng)只對數(shù)據(jù)庫中鏈接的文檔有效。圖5-4 “參數(shù)”對話框在“選擇文件”對話框中選擇文本鏈接目標(biāo)文件，單擊“確認(rèn)”按鈕，則圖5-2中“鏈接”文本框中將出現(xiàn)鏈接目標(biāo)文件名。2.使用“指向文件”圖標(biāo)（1）選中欲設(shè)置超級鏈接的文本對象。（2）如果鏈接目標(biāo)文檔已經(jīng)打開，則直接將“指向文件”圖標(biāo)拖動(dòng)到目標(biāo)文檔窗口，拖動(dòng)過程有一條從“指向文件”圖標(biāo)出發(fā)的箭頭線，將其拖動(dòng)到指定區(qū)域即可完成該鏈接，如圖5-5所示。圖5-5 拖動(dòng)“指向文件”圖標(biāo)到目標(biāo)窗口（3）如果目標(biāo)文檔沒有打開，也可以將“指向文件”圖標(biāo)拖動(dòng)到站點(diǎn)窗口中相應(yīng)的位置，如圖5-6所示。圖5-6 拖動(dòng)“指向文件”圖標(biāo)到站點(diǎn)文件（4）拖放到目標(biāo)地址后，釋放鼠標(biāo)即可在屬性“面板”的“鏈接”文本框中看到鏈接目標(biāo)端文檔的URL地址。圖5-7 “超級鏈接”對話框3.使用“超級鏈接”對象（1）把光標(biāo)置于欲設(shè)置超級鏈接的地方，選擇“插入”“超級鏈接”菜單命令，或者直接單擊“插入”面板上“常用”選項(xiàng)卡下的“超級鏈接”圖標(biāo)，彈出“超級鏈接”對話框，如圖5-7所示。（2）“超級鏈接”對話框中各項(xiàng)參數(shù)的含義如下。文本：欲設(shè)置超級鏈接的文本對象。鏈接：文本對象鏈接的目標(biāo)地址。目標(biāo)：從目標(biāo)的下拉列表框中選擇文檔的打開位置。若要使所鏈接的文檔出現(xiàn)在當(dāng)前窗口或框架以外的其他位置，可以從下拉列表框中選擇一個(gè)選項(xiàng)。l _blank在一個(gè)未命名的新瀏覽器窗口中載入所鏈接的文檔。l _parent在該鏈接所在框架的父框架或父窗口中載入所鏈接的文檔。如果包含鏈接的框架不是嵌套框架，則所鏈接的文檔載入整個(gè)瀏覽器窗口。l _self在鏈接所在的同一框架或窗口中載入所鏈接的文檔。l _top在整個(gè)瀏覽器窗口中載入所鏈接的文檔，但它會刪除所有框架。 標(biāo)題：當(dāng)鼠標(biāo)指針指向超鏈接的文本對象時(shí)的提示文字。 在“超級鏈接”對話框中設(shè)置參數(shù)，如圖5-7所示。（3）設(shè)置具體的鏈接信息后單擊“確定”按鈕，即可在所需區(qū)域插入文本超級鏈接了，按F12鍵即可在瀏覽器中預(yù)覽其效果，如圖5-8所示。圖5-8 當(dāng)鼠標(biāo)指針指向超文本鏈接后瀏覽器中所見的結(jié)果522 創(chuàng)建錨點(diǎn)超鏈接當(dāng)一個(gè)網(wǎng)頁的主題或文字較多時(shí)，可以在網(wǎng)頁內(nèi)建立多個(gè)標(biāo)記點(diǎn)，將超鏈接指定到這些標(biāo)記點(diǎn)上，能夠使瀏覽者快速找到要閱讀的內(nèi)容，這些標(biāo)記點(diǎn)稱為錨記。在網(wǎng)頁設(shè)計(jì)中，要?jiǎng)?chuàng)建某個(gè)網(wǎng)頁的指定位置的超鏈接被稱為創(chuàng)建網(wǎng)頁的錨點(diǎn)超鏈接。創(chuàng)建網(wǎng)頁的錨點(diǎn)鏈接可分為兩步完成：首先在網(wǎng)頁的某個(gè)指定位置創(chuàng)建鏈接的目標(biāo)端點(diǎn)（即錨記），并為其命名。源端點(diǎn)處建立該錨記的超鏈接。在瀏覽網(wǎng)頁時(shí)，用鼠標(biāo)單擊源端點(diǎn)，光標(biāo)就會馬上移到錨記的位置上。1.命名錨記在文檔窗口的設(shè)計(jì)視圖中，將插入點(diǎn)放在需要命名錨記的地方。在菜單欄中單擊“插入”“命名錨記”命令，打開如圖5-9 所示的以話框。圖5-9 創(chuàng)建命令錨記在“錨記名稱”文本框中輸入該錨記的名稱（名稱區(qū)分大小寫），單擊“確定”按鈕。這時(shí)，錨記標(biāo)記將在插入點(diǎn)處出現(xiàn)。若看不到錨記標(biāo)記，則選擇“查看”“可視化助理”“不可見元素”命令。在命名錨記時(shí)，應(yīng)遵循以下規(guī)則。（1）只能使用字母和數(shù)字，錨記的命名不支持中文。雖然在“命名錨記”對話框中可以輸入中文，但在“屬性”面板中顯示的則是一堆亂碼，并且在為錨記添加鏈接時(shí)，也無法工作。（2）錨記名稱的第一個(gè)字母最好是英文字母，一般不要以數(shù)字作為錨記名稱的開頭。（3）錨記名稱區(qū)別英文字母的大小寫。（4）錨記名稱間不能含有空格，也不能含有特殊的字符。注意：錨點(diǎn)不能放在層中。2鏈接到命名錨記在文檔窗口的設(shè)計(jì)視圖中，選擇要從其創(chuàng)建鏈接的對象（文本，圖像等）。在屬性面板的“鏈接”文本框中輸入一個(gè)數(shù)字符號（）和錨記名稱。例如：如果要鏈接到當(dāng)前文檔中名為“bottom”的錨記，要鍵入bottom。如果要鏈接到同一文件夾內(nèi)其他名為“bottom”的錨記，可鍵入filename.htmlbottom,如圖5-10所示。圖5-10 在屬性面板中鏈接到命令錨記如果要使用指向到文件方法鏈接到命名錨記，可打開所需命名錨記的文檔。在文檔窗口的設(shè)計(jì)視圖中，選擇要從其創(chuàng)建鏈接的對象（文本、圖像等）。單擊屬性面板中“鏈接”文本框右側(cè)的“指向文件”圖標(biāo)，然后將其拖動(dòng)到要鏈接的錨記（可以是同一文檔的錨記或其他文檔的錨記）上。5.2.3創(chuàng)建電子郵件鏈接在網(wǎng)頁上創(chuàng)建郵件鏈接,可以方便地讓訪問者反饋意見。訪問者只需單擊頁面上的電子郵件鏈接即可打開一個(gè)新的空白郵件窗口（使用的是與用戶瀏覽器相關(guān)聯(lián)的郵件程序）。在電子郵件消息窗口中，“收件人”域自動(dòng)更新為顯示電子郵件鏈接中指定的地址。在Dreamweaver 8中，可以使用如下方法在頁面中創(chuàng)建電子郵件鏈接。1.插入電子郵件鏈接（1）在“文檔”窗口的“設(shè)計(jì)”視圖中，將插入點(diǎn)放在希望出現(xiàn)電子郵件鏈接的位置，或者選擇要作為電子郵件鏈接出現(xiàn)的文本或圖像。選擇“插入”“電子郵件鏈接”命令，將出現(xiàn)“電子郵件鏈接”對話框，如圖5-11所示。圖5-11 “電子郵件鏈接”對話框（2）完成此對話框的相關(guān)內(nèi)容。單擊“確定”按鈕。2.使用屬性面板創(chuàng)建電子郵件鏈接在“文檔”窗口的“設(shè)計(jì)”視圖中選擇文本或圖像。在屬性面板的“鏈接”文本框中，鍵入mailto，后面跟電子郵件地址。在冒號和電子郵件地址之間不能鍵入任何空格。如鍵入mailto：，如圖5-12所示。圖5-12 使用屬性面板創(chuàng)建電子郵件鏈接5.2.4創(chuàng)建空鏈接和腳本鏈接空鏈接是未指派的鏈接?？真溄佑糜谙蝽撁嫔系膶ο蠡蛭谋靖郊有袨椤．?dāng)創(chuàng)建空鏈接后，可向空鏈接附加行為，以便當(dāng)鼠標(biāo)指針滑過該鏈接時(shí)交換圖像或顯示層。1.創(chuàng)建空鏈接為文本創(chuàng)建空鏈接時(shí)，只需在文檔窗口中選定文本，然后在屬性面板的“鏈接”文本框中鍵入“#”即可，如圖5-13所示。建立空鏈接的目的主要是為了應(yīng)用行為，在其他情況下不必創(chuàng)建空鏈接。圖5-13 創(chuàng)建空鏈接2.創(chuàng)建腳本鏈接在“文檔”窗口的“設(shè)計(jì)”視圖中選擇文本、圖像或?qū)ο?。在屬性面板的“鏈接”文本框中鍵入java Script：；(javascript一詞后依次一個(gè)冒號和一個(gè)分號)，即可創(chuàng)建空鏈接，如圖5-14所示。圖5-14 創(chuàng)建腳本空鏈接腳步本鏈接執(zhí)行JavaScript代碼或調(diào)用JavaScript函數(shù)。腳本鏈接非常有用，能夠在不離開當(dāng)前網(wǎng)頁的情況下為訪問者提供有關(guān)某項(xiàng)的附加信息。腳本鏈接還可用于在訪問者單擊特定選項(xiàng)時(shí)，執(zhí)行計(jì)算、表單驗(yàn)證和其他處理任務(wù)。創(chuàng)建腳本鏈接操作方法如下。在“文檔”窗口的“設(shè)計(jì)”視圖中選擇文本、圖像或?qū)ο?。在屬性面板的“鏈接”文本框中，鍵入JavaScript：，后面跟一些JavaScript代碼或函數(shù)調(diào)用。如在“鏈接”文本框中鍵入javascript:alert(“This link leads to the index）可生成這樣一個(gè)鏈接：單擊該鏈接時(shí)，會顯示一個(gè)含有消息This link leads to the index的javascript警告框，如圖5-15所示。圖5-15 創(chuàng)建腳本鏈接樣例注意：因?yàn)樵贖TML中JavaScript代碼放在雙引號中（作為href屬性的值），所以在腳本代碼中必須合用單引號，或者可通過在雙引號前添加反斜杠，將所有雙引號“轉(zhuǎn)義”（例如“This link leads to the index”）。5.2.5創(chuàng)建下載文件超鏈接如果想讓網(wǎng)站提供文件下載的功能，可以建立下載文件超鏈接。實(shí)現(xiàn)文件下載的功能很簡單，只需加入連接到文件的超鏈接就可以了。連接網(wǎng)站中下載文件的超鏈接也屬于內(nèi)部超級鏈接中的一種。創(chuàng)建下載文件超鏈接的方法如下。道德選擇主窗口中“站點(diǎn)”“站點(diǎn)文件”菜單命令，打開站點(diǎn)窗口，找到需要鏈接的目標(biāo)文件。然后選擇網(wǎng)頁中需要建立超鏈接的文字，按下一步Shift鍵拖動(dòng)鼠標(biāo)指針到站點(diǎn)窗口中的目標(biāo)文件。5.2.6圖像地圖圖像地圖指已被分為多個(gè)區(qū)域（或稱為熱點(diǎn)）的圖像。當(dāng)用戶單擊某個(gè)熱點(diǎn)時(shí)，會發(fā)生某種操作（如，打開一個(gè)或一個(gè)文件）。使用圖像屬性面板可創(chuàng)建或編輯客房端圖像地圖。客戶端圖像地圖將超文本鏈接信息存儲在文檔中，而不是像服務(wù)器端圖像地圖那樣，存儲在單獨(dú)的地圖文件中。當(dāng)站點(diǎn)訪問者單擊圖像中的熱點(diǎn)時(shí)，相關(guān)被直接發(fā)送到服務(wù)器。這就是使得客戶端圖像地圖要快，因?yàn)榉?wù)器不必解釋訪問者的單擊位置。Dreamweaver并不改變現(xiàn)有文檔中對服務(wù)器端圖像地圖的引用。在同一文檔中，可以同時(shí)使用客戶端圖像地圖。不過，同時(shí)支持這兩種圖像地圖類型的瀏覽器賦予客戶端圖像地圖以優(yōu)先權(quán)。若要在文檔中包含服務(wù)器端圖像地圖，必須編寫相應(yīng)的代碼。1.創(chuàng)建圖像地圖（1）選擇圖像在“文檔”窗口中，選擇圖像。在屬性面板中，單擊右下角的展開箭頭，查看所有屬性。在“地圖名稱”域中，為此圖像地圖鍵入一個(gè)惟一的名稱，如圖5-16所示。注意：如果在同一文檔中使用多個(gè)圖像地圖，要確保每個(gè)地圖，要確保每個(gè)地圖都有惟一名稱，以便設(shè)置每個(gè)圖像地圖的超鏈接。（2）定義客戶端圖像地圖中的優(yōu)點(diǎn)圖5-16 圖像屬性面板創(chuàng)建熱點(diǎn)。若要定義圖像地圖區(qū)域，選擇下列方法之一。l 選擇圓形工具，并將鼠標(biāo)指針拖到圖像上，創(chuàng)建一個(gè)圓形熱點(diǎn)。l 選擇矩形工具，并將鼠標(biāo)指針拖至圖像上，創(chuàng)建一個(gè)矩形熱點(diǎn)。l 選擇多邊形工具，在各個(gè)頂點(diǎn)上單擊一下，定義一個(gè)不規(guī)則的熱點(diǎn)，然后單擊箭頭工具封閉此開頭如圖5-17所示。 圖5-17 定義圖像地圖區(qū)域定義熱點(diǎn)屬性選中其中一個(gè)熱點(diǎn)，在熱點(diǎn)屬性面板設(shè)置其屬性，如圖5-18所示。圖5-18 設(shè)置熱點(diǎn)屬性在熱點(diǎn)屬性檢查的“鏈接”文本框中，單擊文件夾圖標(biāo)，選擇要鏈接的文件，可者鍵入此文件的名稱。如果鏈接到同一站點(diǎn)內(nèi)的文件，可輸入相對于文檔的路徑（以file:/開始的文件名，不是相對路徑文件名）。在“目標(biāo)”彈出菜單的“目標(biāo)”域中，選擇應(yīng)該用于打開該文件的窗口。當(dāng)前文檔中所有已命名框架的名稱都顯示在此彈出列表中。如果指定的框架不存在，當(dāng)文檔在瀏覽器中打開時(shí)，所鏈接的頁面將載入一個(gè)新窗口該窗口使用所指定的名稱。也可選用保留目標(biāo)名，如-blank,-paresnt,-self 和-top.在“替換文本”域中鍵入希望在純文本瀏覽器或設(shè)為動(dòng)手下載圖像的瀏覽器中作為替換文本出現(xiàn)的文本。比如圖5-18所示的“head”有些瀏覽器在用戶鼠標(biāo)指針暫停與該熱點(diǎn)之上時(shí)，將此文本顯示為工具提示。注意：只有當(dāng)所算熱點(diǎn)包含鏈接時(shí)，目標(biāo)才可用。按F12鍵可以預(yù)覽熱點(diǎn)設(shè)置的效果，如圖5-19所示。圖5-19 熱點(diǎn)預(yù)覽效果2. 修改圖像地圖對在圖像地圖中所創(chuàng)建的熱點(diǎn)進(jìn)行編輯很容易?？梢砸苿?dòng)熱點(diǎn)，調(diào)整熱點(diǎn)大小，或者在層之間向上或向下移動(dòng)熱點(diǎn)。（1）復(fù)制熱點(diǎn)可以將含有熱點(diǎn)的地圖從一格文檔拷貝到另一格文檔，或者拷貝某圖像中的一個(gè)或多個(gè)熱點(diǎn)，然后將其粘貼到其他圖像上，這樣就將與該圖像關(guān)聯(lián)的熱點(diǎn)也拷貝到了新文檔中，如圖像中有若干相同形狀的熱點(diǎn)，只需要?jiǎng)?chuàng)建一個(gè)，然后復(fù)制即可。（2）選擇圖像地圖中的多個(gè)熱點(diǎn)使用指針熱點(diǎn)工具選擇一個(gè)熱點(diǎn)。按下Shift鍵的同時(shí)單擊要選擇的其他熱點(diǎn)。按Ctrl+A鍵，選擇所有的熱點(diǎn)。（3）移動(dòng)熱點(diǎn)使用指針熱點(diǎn)工具選擇一個(gè)熱點(diǎn)。拖動(dòng)此熱點(diǎn)到新區(qū)域，用Shift+箭頭鍵將熱點(diǎn)向選定方向一次移動(dòng)10個(gè)像素；使用箭頭鍵將熱點(diǎn)向選定方向一次移動(dòng)一個(gè)像素。（4）調(diào)整熱點(diǎn)的大小用指針熱點(diǎn)工具選擇要調(diào)整大小的熱點(diǎn)。拖動(dòng)熱點(diǎn)選擇手柄，可以更改熱點(diǎn)的大小或形狀。 5.3利用Dreamweaver 8編輯超鏈接5.3.1設(shè)置鏈接顏色在通常情況下，超鏈接默認(rèn)的顏色為藍(lán)色，活動(dòng)超鏈接的顏色為紅色，已訪問過的超鏈接顏色為紫色。如果用戶對這種默認(rèn)的配色方案不滿意，可以按自己的喜好隨意修改顏色。更改配色方案的操作步驟如下。（1）在網(wǎng)頁中單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“頁面屬性”命令，打開“頁面屬性”對話框。（2）分別單擊3種超鏈接的顏色右側(cè)的“”按鈕，在彈出的顏色面板中重新選擇其顏色，如圖5-20所示。圖5-20 “頁面屬性”對話框（3）設(shè)置完成后單擊“確定”按鈕。注意：此方法只對當(dāng)前網(wǎng)頁生效，當(dāng)建立新網(wǎng)頁時(shí)，新網(wǎng)頁的超級鏈接的配色方案還是最初的默認(rèn)值。5.3.2設(shè)置鏈接字體不但鏈接的顏色可以改變，而且鏈接的字體也能改變?？梢灾苯釉趯傩悦姘逯凶煮w下拉列表框中修改鏈接字體，如圖5-21所示。圖5-21 修改字體樣例5.3.3刪除超鏈接如果對網(wǎng)頁中的超鏈接不滿意或不想使用了,可以對其進(jìn)行刪除.刪除超鏈接有兩種方法:一是通過刪除超鏈接對象來刪除超鏈接；二是通過“編輯超鏈接”對話框中的“刪除超鏈接”按來刪除超鏈接。（1）刪除超鏈接對象在“普通”視窗下選中超鏈接，然后按下Delete鍵，不但可以刪除超鏈接，而且可以將超鏈接文本一同刪除。（2）刪除超鏈接如果刪除超鏈接時(shí)想保留文本，可以執(zhí)行以下操作。l 在網(wǎng)頁中選定超鏈接文本。l 在工具欄中單擊“插入超鏈接”按鈕，打開“編輯超鏈接”對話框。l 單擊“刪除超鏈接”按鈕。l 單擊“確定”按鈕。5.4創(chuàng)建導(dǎo)航條5.4.1認(rèn)識導(dǎo)航條1. 導(dǎo)航條的作用通常在網(wǎng)頁的首頁上可設(shè)置一個(gè)導(dǎo)航條,這樣既可為瀏覽者瀏覽網(wǎng)站提供一個(gè)索引,又能引導(dǎo)瀏覽者瀏覽整個(gè)網(wǎng)站的不同頁面。導(dǎo)航條可由一幅圖像或多幅圖像所組成,這些圖像的顯示內(nèi)容隨用戶動(dòng)作而變化.導(dǎo)航條通常為站點(diǎn)上的頁面和文件之間移動(dòng)提供一條捷徑的途徑,如圖5-22所示。圖5-22 頁面中的導(dǎo)航條2.導(dǎo)航條的4種狀態(tài)使用插入導(dǎo)航條命令之前,應(yīng)首先為各個(gè)導(dǎo)航條項(xiàng)目的顯示狀態(tài)創(chuàng)建一組圖像(可將導(dǎo)航條項(xiàng)目視為按鈕,因?yàn)楫?dāng)單擊它時(shí),導(dǎo)航條項(xiàng)目會將用戶帶到其他頁面中),這些圖像分別表示導(dǎo)航條的4種狀態(tài).（1）一般：指用戶尚未單擊或尚未與此項(xiàng)目交互時(shí)所顯示的圖像，如圖5-23所示此種項(xiàng)目看起來未被單擊過。（2）滑過：指鼠標(biāo)指針滑過“一般”圖像時(shí)所顯示的圖像，如圖5-24所示。圖像的外觀發(fā)生變化（如變得更亮），以讓用戶知道可與這個(gè)項(xiàng)目進(jìn)行交互。 圖5-23 導(dǎo)航條的一般狀態(tài) 圖5-24 導(dǎo)航條的滑過狀態(tài)（3）按下：指項(xiàng)目被單擊后所顯示的圖像。如，用戶單擊某項(xiàng)目后而導(dǎo)航條仍然顯示，只是被單擊的項(xiàng)目變暗，表示它曾被選擇過。（4）按下時(shí)鼠標(biāo)經(jīng)過：指在項(xiàng)目被單擊后，鼠標(biāo)指針滑過“按下”圖像時(shí)所顯示的圖像，如項(xiàng)目變淡或變灰，此狀態(tài)可作為一個(gè)用戶的可視提示，告訴用戶在站點(diǎn)的這一部分，此項(xiàng)目不能再被單擊。在設(shè)計(jì)中不必包括所有這4種狀態(tài)的導(dǎo)航圖像。如，可以只選用“一般”和“按下”這兩種狀態(tài)。5.4.2插入導(dǎo)航條要在文檔中插入導(dǎo)航條，可以按照如下方法進(jìn)行操作。（1）在菜單欄中單擊“插入”“交互式圖像”“導(dǎo)航條”，或在插入欄的“常用”選項(xiàng)卡中單擊“導(dǎo)航條”圖標(biāo)，這時(shí)會打開如圖5-25所示的對話框。圖5-25 “插入導(dǎo)航條”對話框（2）在“項(xiàng)目名稱”文本框中為導(dǎo)航條第一項(xiàng)選擇名稱。例如，可以輸入“本站首頁”。單擊“瀏覽” 按鈕，可以從磁盤上選擇圖片文件。（3）在“狀態(tài)圖像”文本框中，輸入導(dǎo)航按鈕圖像彈起狀態(tài)（即正常顯示狀態(tài)）。單擊“瀏覽”按鈕，可以從磁盤上選擇圖片文件。狀態(tài)圖像為必需項(xiàng)，其他圖像的狀態(tài)選項(xiàng)為可選項(xiàng)。（4）在“鼠標(biāo)經(jīng)過圖像”本框中，輸入導(dǎo)航按鈕圖像在鼠標(biāo)指針經(jīng)過的圖像文件的URL。單擊“瀏覽”按鈕，可以從磁盤上選擇圖片文件。（6）在“按下圖像”文本框中，輸入導(dǎo)航按鈕圖像按下狀態(tài)示的圖像文件。單擊“瀏覽”按鈕，可以從磁盤上選擇圖片文件。（5）在“按下時(shí)鼠標(biāo)經(jīng)過圖像”文本框中，輸入導(dǎo)航按鈕圖像按下狀態(tài)時(shí)的輪替圖像文件的URL。單擊“瀏覽”按鈕，可以從磁盤上選擇圖片文件。（7）在“替換文本”文本框中，輸入項(xiàng)目的描述性名稱。替換文本在純文本瀏覽器或設(shè)為手動(dòng)下載的圖像的瀏覽器中，替代圖像出現(xiàn)在應(yīng)顯示圖的位置。屏幕閱讀器讀取替換文本，而且有的瀏覽器在用戶鼠標(biāo)指針滑過導(dǎo)航條項(xiàng)目時(shí)顯示替換文本。（8）在“按下時(shí)，前往的URL”文本框中，輸入單擊導(dǎo)航按鈕圖像時(shí)跳轉(zhuǎn)的URL 地址。單擊“瀏覽”按鈕，可以從磁盤上選擇目標(biāo)端點(diǎn)的文檔。（9）在“按下時(shí)，前往的URL”文本框右邊的下拉列表框中可以選擇文檔被打開的目標(biāo)窗口。選擇“主窗口”，則表明在同一窗口中打開目標(biāo)端點(diǎn)文檔。如果當(dāng)前使用了框架，還可以從其中選擇目標(biāo)框架的名稱。如果希望選擇的框架尚未命名，則需要先命名，然后再在這里進(jìn)行選擇。（10）選中“預(yù)先載入圖像”復(fù)選框，可在載入頁面時(shí)下載圖像。如果未選擇此選項(xiàng)，在用戶鼠標(biāo)指針滑過圖像時(shí)可會出現(xiàn)延遲。（11）如果選中“頁面載入時(shí)就顯示鼠標(biāo)按下圖像”復(fù)選框，則網(wǎng)頁被瀏覽器載入后，將該按鈕圖像顯示為按下狀態(tài)。這主要用于該圖像對應(yīng)鏈接是當(dāng)前頁面的情形。（12）在“插入”下拉列表，可以設(shè)置導(dǎo)航條的放置方向。選擇“水平”，則水平放置導(dǎo)航條；選擇“垂直”，則垂直放置導(dǎo)航條。（13）如果希望導(dǎo)航條放置于表格中，可以選中“使用表格”復(fù)選框，這樣可以利用表格控制頁面中的文本。（14）按照上述操作可以向?qū)Ш綏l中添加第一個(gè)“本站首頁”按鈕圖像，單擊對話框上的按鈕，可以繼續(xù)添加其他的按鈕圖像。單擊對話框上的按鈕，可以刪除按鈕圖像。（15）所有導(dǎo)航條的元素設(shè)置完畢后，按下“確定”按鈕，完成插入導(dǎo)航條操作，這時(shí)文檔中就添加了一個(gè)導(dǎo)航條。5.4.3修改導(dǎo)航條為文檔創(chuàng)建導(dǎo)航條后，可以使用“修改導(dǎo)航條”命令向?qū)Ш綏l中添加圖像，或者從導(dǎo)航條中刪除圖像，此命令可以用于更改圖像或圖像組，更改單擊項(xiàng)目時(shí)打開文件，選擇在不同的窗口或框架中打開文件以及重新排列圖像等。選擇“修改”“導(dǎo)航條”，將出現(xiàn)“修改導(dǎo)航條”對話框，如圖5-26所示。圖5-26 “修改導(dǎo)航條”對話框在“導(dǎo)航條元素”列表中，選擇要編輯的項(xiàng)目。根據(jù)需要進(jìn)行更改后單擊“確定”按鈕即可。如果要修改導(dǎo)航條中項(xiàng)目的順序，可在圖5-26所示的“修改導(dǎo)航條”對話框中單擊或按鈕來調(diào)整導(dǎo)航條中項(xiàng)目的順序。 5.5管理超鏈接5.5.1 設(shè)計(jì)一個(gè)清晰的超鏈接在網(wǎng)站中建立清晰的超鏈接，既提供給瀏覽者一個(gè)良好的訪問環(huán)境，也方便網(wǎng)站管理人員的管理與維護(hù)。為此，要考慮以下幾點(diǎn)。1 設(shè)計(jì)一個(gè)清晰的超鏈接首先要定位網(wǎng)站的主題，如個(gè)人網(wǎng)站、商業(yè)網(wǎng)站、知識類網(wǎng)站和娛樂類網(wǎng)站等。然后就來看看這個(gè)網(wǎng)站包含哪些內(nèi)容，需要多少網(wǎng)頁文件，可以畫一個(gè)草圖來理清思路。2. 首頁上的超鏈接要“有去有回”不論網(wǎng)站的鏈接多么的豐富，都要給瀏覽者隨時(shí)回到首頁的可能，使之不會在Internet上迷失方向。3. 給圖像超鏈接做文字說明簡單的文字說明可以讓瀏覽者知道要鏈接的目標(biāo)。為圖像做超鏈接有兩種方法：一是把文字直接做在圖像上，成為圖像的一部分；二是把文字直接寫在屬性面板上的Alt文本框中，這樣當(dāng)鼠標(biāo)指針指向圖像時(shí)，就會出現(xiàn)文字提示。6.5.2 利用站點(diǎn)地圖管理超鏈接 站點(diǎn)地圖上的樹狀結(jié)構(gòu)顯示了網(wǎng)站上的超鏈接狀況，因此通過站點(diǎn)地圖可以建立、更改、刪除超鏈接。1. 建立網(wǎng)頁間的超鏈接（1）在菜單欄中單擊“站點(diǎn)”-“站點(diǎn)地圖”，或Alt+F8鍵打開站點(diǎn)窗口（按F8鍵，可快速打開站點(diǎn)窗口），如圖5-27所示（2）選中需要鏈接的文件，比如index.html，在鼠標(biāo)右鍵捷菜單中選擇鏈接到磨擦文件“鏈接到已有文件”即可建立網(wǎng)頁的超鏈接，如圖5-28所示。2移除網(wǎng)頁間的超鏈接對于不需要的鏈接關(guān)系，在站點(diǎn)地圖的樹狀結(jié)構(gòu)上可以非常輕松地移除。（1）樹狀結(jié)構(gòu)上選擇要移除鏈接關(guān)系的對象圖標(biāo)，如圖：5-28中的Shp.htm （2（2）在右鍵快捷菜單中選擇“移除鏈接后的站點(diǎn)地圖如圖書所示。3更新超鏈接 在制作網(wǎng)頁的過程中，可能為了某種特定的需要，必須改變站點(diǎn)中某個(gè)文件夾的文件名?？墒沁@樣的話，那些鏈接此網(wǎng)頁的鏈接目標(biāo)名稱也必須更換，如果一個(gè)個(gè)地手動(dòng)更新的話，不僅麻煩而且極易產(chǎn)生差錯(cuò)。在Dreamweaver 8中利用站點(diǎn)地圖，此項(xiàng)操作則變得非常簡單。在“站點(diǎn)“浮動(dòng)面板的站點(diǎn)地圖上更改文件的名稱與Windows下的操作基本相同。（1） 首先單擊選中欲更改名稱的文件。（2） 再次單擊該文件的文件名，輸入新的文件名后，輸入新的文件名后按一下回車鍵即可（3） 當(dāng)文檔被更名后，系統(tǒng)會彈出如圖5-30所示的“更新文件”對話框，詢問站點(diǎn)中被鏈接的網(wǎng)頁名稱是否也作修改。（4）在該對話框中單擊“更新”按鈕即可完成操作。4檢查超鏈接Dreamweaver 8提供“結(jié)果”浮動(dòng)面板組，除了具有檢查瀏覽器兼容性、代碼兼容性等強(qiáng)大功能外，還可以利用它來檢查甚至修改站點(diǎn)中的超鏈接。（1）自動(dòng)對整個(gè)站點(diǎn)的超鏈接情況進(jìn)行檢查。1) 可以在Dreamweaver 8的“站點(diǎn)”浮動(dòng)面板組上選擇“文件”檢查站點(diǎn)范圍的鏈接命今，也可以直接使用鍵盤快捷鍵Shift+F8，可以在“結(jié)果”浮動(dòng)面板組的“鏈接檢查器”面板中單擊位于左邊的綠色箭頭的下拉菜單中的“為整個(gè)站點(diǎn)檢查鏈接”選項(xiàng)。2) Dreamweaver 8會自動(dòng)對整個(gè)站點(diǎn)的超鏈接情況進(jìn)行檢查，而且在打開的“鏈接檢查器”面板中還可以顯示詳細(xì)的檢查信息。需要注意的是，還可以在該面板“顯示”標(biāo)識符后的下拉列表框中設(shè)置檢查后在列表欄中顯示的鏈接狀態(tài)。l 斷掉的鏈接：顯示包含有斷裂超鏈接的網(wǎng)頁名稱。l 外部鏈接：顯示包含外部超鏈接的網(wǎng)頁名稱。l 孤立文件：顯示網(wǎng)站中沒有被使用到的或沒有被鏈接的文件。（）修復(fù)站點(diǎn)中的超鏈接如果在“鏈接檢查器”浮動(dòng)面板的“顯示”標(biāo)識符的下拉列表框中選擇“斷掉的鏈接”選項(xiàng)，則Dreamweaver 8將自動(dòng)列出網(wǎng)站中所有的斷裂鏈接。在該浮動(dòng)面板的列表欄中，關(guān)于超鏈接的“斷掉的鏈接”選項(xiàng)如下。l 文件：此欄列出了所有斷裂的超鏈接的文件名。l 無效鏈接：原來斷裂的超鏈接是連在此欄中的相應(yīng)文件上的。出現(xiàn)斷裂的原因可能是此文件已經(jīng)不存在或是此文件已經(jīng)改了名稱。如果你想修復(fù)此鏈接，在該浮動(dòng)面也有兩種方法。 雙擊“文件”欄中的文件名，打開網(wǎng)頁（在打開的網(wǎng)頁時(shí)斷裂的超鏈接會被自動(dòng)選擇），然后就可以使用屬性面板中的“鏈接”選項(xiàng)進(jìn)行修改。 單擊“無效鏈接”欄中的文件名，在文件名的右側(cè)即出現(xiàn)一個(gè)文件夾按鈕，單擊此按鈕重新選擇鏈接目標(biāo)，如圖5-3所示。（3）處理外部超鏈接 如果在“結(jié)果”面板中“鏈接檢查器”選項(xiàng)卡的“顯示”標(biāo)識符后的下拉列表中選擇“外部鏈接“選項(xiàng)，則Dreamweaver 8并不會自動(dòng)列出網(wǎng)站中所有的外部超鏈接文件，如圖5-34所示。但是Dreamweaver 8并不會自動(dòng)檢查這些外部超鏈接是否正常，所以必須親自動(dòng)手鏈接外部網(wǎng)站進(jìn)行檢查。通常，在此面板列表中檢查外部超鏈接有如下兩種方法。 雙擊網(wǎng)頁文檔名稱，打開網(wǎng)頁查看是否有出錯(cuò)的超鏈接。 單擊列表欄中的超鏈接，則此超鏈接的地址被選中，可以把它復(fù)制到瀏覽器的地址輸入框中檢查是否能正確地連接到該網(wǎng)站。（4）處理孤立文件 所謂孤立文件并不是指沒有用的文件，而是指沒有與其他網(wǎng)頁發(fā)生鏈接的文件。 如果在“結(jié)果”面板中“鏈接檢查器”選項(xiàng)卡的“顯示”標(biāo)識符后的下拉列表中選擇“孤立文件”選