網(wǎng)頁設(shè)計(jì)與制作 第 6 章 超鏈接與導(dǎo)航

第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》北京師范大學(xué)出版第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.1文檔位置和路徑 6.1.1認(rèn)識超鏈接 6.1.2超鏈接的類型 6.1.3超鏈接的路徑 6.2創(chuàng)建超鏈接 6.2.1鏈接文件和文檔 6.2.2鏈接到文檔中的特定位置 6.2.3創(chuàng)建電子郵件鏈接 6.2.4創(chuàng)建空鏈接和腳本鏈接6.3創(chuàng)建Dreamweaver導(dǎo)航條6.4圖像映射 6.5案例綜合實(shí)現(xiàn) 本章小結(jié)第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》本章要點(diǎn)：◆

超級鏈接基礎(chǔ)◆

創(chuàng)建文本鏈接◆

創(chuàng)建郵件鏈接◆

創(chuàng)建下載鏈接◆

創(chuàng)建錨點(diǎn)鏈接◆

創(chuàng)建JavaScript腳本鏈接第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》超級鏈接是“超文本鏈接”的縮略語?？梢匝杆購姆?wù)器的某一頁轉(zhuǎn)到另一頁，也可以轉(zhuǎn)到其他服務(wù)器頁。表示超級鏈接點(diǎn)的信息可以是文字或圖像，甚至是動畫。它提供了通過單擊超級鏈接點(diǎn)將用戶從WWW文檔某一部分連接到同一文檔或不同文檔的其他部分。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.1

文檔位置和路徑6.1.1

認(rèn)識超鏈接Dreamweaver提供了多種創(chuàng)建超鏈接的方法，可創(chuàng)建到文檔、圖像、多媒體文件或可下載軟件的鏈接，也可以建立到文檔內(nèi)任意位置的任何文本或圖像的鏈接。使用IE等瀏覽器上網(wǎng)瀏覽網(wǎng)頁時(shí)，當(dāng)移動鼠標(biāo)到頁面上的某些位置時(shí)，鼠標(biāo)指針會變成一只“小手”，表明該位置是一個超鏈接。在超鏈接處單擊鼠標(biāo)左鍵，可以直接跳到與這個超鏈接相連接的網(wǎng)頁或WWW網(wǎng)站上去。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.1

文檔位置和路徑6.1.1

認(rèn)識超鏈接第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.1

文檔位置和路徑6.1.1

認(rèn)識超鏈接第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.1

文檔位置和路徑6.1.2

超鏈接的類型

按鏈接路徑分1(1)內(nèi)部鏈接

內(nèi)部鏈接是指來自網(wǎng)站以內(nèi)的鏈接，其域名中一定包括了當(dāng)前網(wǎng)站首頁的域名。(2)錨點(diǎn)鏈接錨點(diǎn)鏈接是指同一頁面內(nèi)部的鏈接。如果網(wǎng)頁很長，便可以在適當(dāng)?shù)奈恢貌迦胍恍板^點(diǎn)”，要進(jìn)入頁面特定的位置，只需單擊這類鏈接即可。(3)外部鏈接外部鏈接是指來自網(wǎng)站之外的鏈接，跳轉(zhuǎn)到其他頁面后，在地址欄上域名會變?yōu)槠渌W(wǎng)站的域名。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.1

文檔位置和路徑6.1.2

超鏈接的類型

按鏈接對象分2(1)文本超鏈接文本超鏈接是網(wǎng)頁中最常見的鏈接方式，它是指以文本作為鏈接對象，鏈接到其他目標(biāo)地址的鏈接。(2）圖像超鏈接圖像超鏈接是以各種格式的圖像作為鏈接對象，鏈接到其他目標(biāo)地址的鏈接，要打開鏈接目標(biāo)，只需單擊圖片區(qū)域即可。(3)多媒體對象鏈接除圖像外，視頻播放窗口、Flash動畫等多媒體對象也可以作為鏈接對象，鏈接到其他目標(biāo)地址。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.1

文檔位置和路徑6.1.2

超鏈接的類型

按鏈接對象分2(4)E-mail鏈接E-mail鏈接是指將對象鏈接到一個電子郵件地址。單擊這類鏈接，將自動啟動系統(tǒng)默認(rèn)的電子郵件程序（如WindowsMail、Foxmail等），并創(chuàng)建一個新郵件，將目標(biāo)電子郵件地址自動填入“收件人”文本框中。(5)空鏈接空鏈接是一種未指派的鏈接，一般用于向頁面上的對象或文本附加行為。比如，指向空鏈接，在狀態(tài)欄上看到的是“JavaScript:;”的提示信息。單擊這類鏈接，既不會出現(xiàn)鏈接出錯的提示信息，也不會打開新的窗口。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.1

文檔位置和路徑6.1.3超鏈接的路徑絕對路徑1絕對路徑是包含服務(wù)器協(xié)議的完全路徑，是一種與源地址文件無關(guān)的路徑形式。絕對路徑包含的是精確地址，創(chuàng)建對當(dāng)前站點(diǎn)以外文件的鏈接時(shí)必須使用絕對路徑。一般最常見的是URL，就是通常所說的網(wǎng)址。格式：/pc/index.htm

在網(wǎng)址前一定要加上協(xié)議名，如http、ftp等。

另外一種是文檔的絕對路徑，一般格式如下：

file:///E:/DocumentsandSettings/lm/桌面/images/1.gif第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.1

文檔位置和路徑6.1.3超鏈接的路徑相對路徑2和文檔相對的路徑是指和當(dāng)前文檔所在的文件夾相對的路徑。總是從當(dāng)前站點(diǎn)的根目錄開始，站點(diǎn)上的所有可公開的文件都存放在站點(diǎn)的根目錄下。和根目錄相對的路徑使用斜杠，以告訴服務(wù)器從根目錄開始?！窈臀臋n相對的路徑●和根目錄相對的路徑第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接用“鏈接”文本框創(chuàng)建超鏈接1(1)打開源文件“源文件\ch6\6_1\index_ori.htm”頁面，在Dreamweaver的文檔窗口中選中要創(chuàng)建超鏈接的文本、圖像等對象。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接用“鏈接”文本框創(chuàng)建超鏈接1(2)展開屬性檢査器，在“鏈接”文本框中直接輸人鏈接文檔的路徑和文件名。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接用“鏈接”文本框創(chuàng)建超鏈接1(3)輸人鏈接文檔的路徑和文件名后按下Enter鍵，可以看到文檔中選定的要創(chuàng)建超鏈接的文字對象的顏色發(fā)生了變化，并添加上了下劃線。(4)要預(yù)覽鏈接情況，只需保存文檔后按下【F12】鍵即可在IE中打開該頁面，將鼠標(biāo)指針指向設(shè)置了鏈接的文字，指針將變?yōu)椤笆中巍薄螕粼撴溄?，便可打開鏈接目標(biāo)指定的頁面。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接用【文件夾】圖標(biāo)創(chuàng)建超鏈接2使用屬性檢査器中的【文件夾】圖標(biāo)，也能創(chuàng)建超鏈接。(1)在文檔窗口中選擇要創(chuàng)建超鏈接的文本、圖像或其他對象。(2)展開屬性檢査器，單擊“鏈接”文本框右側(cè)的【文件夾】圖標(biāo)(3)出現(xiàn)“選擇文件”對話框后，選擇要鏈接到的目標(biāo)文件.在站點(diǎn)內(nèi)默認(rèn)的鏈接文件方式是“文檔”相對路徑。如果要使用“站點(diǎn)根目錄”相對路徑，應(yīng)在“相對于”下拉列表框中選擇“站點(diǎn)根目錄”選項(xiàng)，然后將URL書寫為形如“/Documents/2010062001.html”的格式，其中的“/”表示“根目錄”。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接用【文件夾】圖標(biāo)創(chuàng)建超鏈接2第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接用【指向文件】圖標(biāo)鏈接文檔3第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接用【超級鏈接】命令創(chuàng)建超鏈接4第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.1鏈接文件和文檔

如果超級鏈接指向的不是一個網(wǎng)頁文件，而是其他文件（如zip、mp3或exe文件等），單擊超鏈接的時(shí)候就會下載文件。如果在網(wǎng)站中提供下載資料，就需要為文件提供下載鏈接。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.2鏈接到文檔中的特定位置(1)首先在Dreamweaver中準(zhǔn)備一頁較長的網(wǎng)頁，這樣才能淸晰地看到它的作用。這一部分在整個錨鏈接的制作過程中起到了鋪墊的作用，為后面的工作做好了準(zhǔn)備，打開“源文件\ch6\6_2\6_2_2\6_2_2.htm”頁面。(2)然后在頁面中添加錨記，如果沒有錨記就無法添加錨鏈接。選用的這段文字共包含了6段文字記錄，分別是“交通費(fèi)用、會議室/廳費(fèi)用、住宿費(fèi)用、餐飲費(fèi)用、演員及節(jié)目、視聽設(shè)備”現(xiàn)在分別對它們進(jìn)行錨記的添加。通常用戶在打開一個網(wǎng)頁時(shí)，瀏覽器都是從頁面頂部開始顯示。要看當(dāng)前屏幕下方的內(nèi)容必須拖動頁面右邊的滾動條，或使用鼠標(biāo)中間的滾輪使頁面向下滾動。對于這種比較長的網(wǎng)頁，使用到了錨鏈接。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.2鏈接到文檔中的特定位置(3)將光標(biāo)定位到網(wǎng)頁中“1、交通費(fèi)用”文字的后面。然后從“常用”插入欄中單擊“命名錨記”按鈕。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.2鏈接到文檔中的特定位置(4)在彈出的“命名錨記”對話框中的“錨記名稱”文本框中輸入一個錨記的名稱，在這里將其命名為“a”。然后單擊“確定”按鈕，這樣就為文章的第一部分添加了錨記。有錨記的地方會有一個類似小盾牌的標(biāo)志，選中該錨記，會在屬性檢查器中查找到其名稱第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.2鏈接到文檔中的特定位置(5)接著將光標(biāo)定位到網(wǎng)頁中“2、會議室/廳費(fèi)用”的后面，單擊插入欄中的“命名錨記”按鈕。在彈出的“命名錨記”對話框中的“錨記名稱”文本框中輸入錨記名稱為“b”。

(6)使用同樣的方法繼續(xù)為剩下的四個段落添加錨記。完成后會出現(xiàn)六個錨記標(biāo)志。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.2鏈接到文檔中的特定位置第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.2鏈接到文檔中的特定位置(7)所有的準(zhǔn)備工作完成后，最后添加鏈接。先將“會議預(yù)算”右側(cè)單元格中的“交通費(fèi)用”文字選中，然后在屬性檢査器中“鏈接”文本框中輸入“#a”。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.2鏈接到文檔中的特定位置繼續(xù)為后面的各個錨記添加相應(yīng)的鏈接，添加完畢后可以在瀏覽器中預(yù)覽設(shè)置的效果。只需單擊前面添加了錨鏈接的文字標(biāo)題，就可以直接轉(zhuǎn)到相應(yīng)的段落。當(dāng)單擊“住宿費(fèi)用”鏈接時(shí)，頁面就會直接跳轉(zhuǎn)到“住宿費(fèi)用”部分第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.2鏈接到文檔中的特定位置頁面自動將住宿費(fèi)用段落滾動到上面第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.3創(chuàng)建電子郵件鏈接

(1)打開“源文件\ch6\6_2\6_2_3\email.htm”頁面，選中底部版權(quán)信息中的電子郵件地址“service@”，

電子郵件鏈接也是鏈接中比較常見的一種。在瀏覽網(wǎng)頁時(shí)，如果單擊一個電子郵件鏈接，會顯示出一個用于發(fā)送新電子郵件信息的窗口。這和在新窗口中打開的普通鏈接是不同的，這個信息窗口用來發(fā)郵件非常方便。它會為用戶提供已經(jīng)填寫好的收件人的地址或郵件發(fā)送的方式。而用戶需要做的就只是添加郵件的主題、輸入主要的內(nèi)容，單擊“發(fā)送”按鈕。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.3創(chuàng)建電子郵件鏈接(2)在插入欄中選擇“常用”選項(xiàng)卡，單擊“電子郵件鏈接”按鈕。打開“電子郵件鏈接”對話框。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.3創(chuàng)建電子郵件鏈接(3)在對話框中的“文本”文本框中輸入電子郵件鏈接的文本，也就是告訴瀏覽者此處有一個電子郵件鏈接，“電子郵件”文本框用來輸入收件人的郵箱地址。(4)單擊“確定”按鈕，將這個電子郵件的鏈接就添加好了。和標(biāo)準(zhǔn)頁面鏈接有所不同，該代碼使用的是“mailto:”前綴，其后有一個有效的郵件地址。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.3創(chuàng)建電子郵件鏈接(5)對設(shè)置好的頁面保存，然后進(jìn)行預(yù)覽。按下“F12”鍵，瀏覽網(wǎng)頁，單擊service@，如果計(jì)算機(jī)上裝有Outlook，那么會自動啟動Outlook郵件編輯窗口。在設(shè)置好的電子郵件鏈接處單擊，在電子郵件信息出現(xiàn)后，“收件人”文本框中已經(jīng)有地址了。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.4創(chuàng)建空鏈接和腳本鏈接

空鏈接是指未指定目標(biāo)文檔的鏈接。使用空鏈接可以為頁面上的對象或文本附加行為。具體操作步驟如下：（1）選中要創(chuàng)建鏈接的文字,在“屬性檢查器”，“鏈接”文本框中直接輸入“#”。（2）保存文件，在瀏覽器中預(yù)覽時(shí)，文字顯示為超文本鏈接的樣式，單擊后不會跳轉(zhuǎn)到別的頁面。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.4創(chuàng)建空鏈接和腳本鏈接

腳本超鏈接執(zhí)行JavaScript代碼或調(diào)用JavaScript函數(shù)，它非常有用，能夠在不離開當(dāng)前網(wǎng)頁文檔的情況下為訪問者提供有關(guān)某項(xiàng)的附加信息。腳本超鏈接還可以用于在訪問者單擊特定項(xiàng)時(shí)執(zhí)行計(jì)算、表單驗(yàn)證和其他處理任務(wù)。（1）打開“源文件\ch6\6_2\6_2_4\6_2_4.htm”頁面網(wǎng)頁文檔，選中文本“關(guān)閉網(wǎng)頁”，。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.4創(chuàng)建空鏈接和腳本鏈接

第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.4創(chuàng)建空鏈接和腳本鏈接

（2）在【屬性】面板中的【鏈接】文本框中輸入：“javascript:window.close()”，如圖所示。（3）保存文檔，按F12鍵在瀏覽器中瀏覽，單擊“關(guān)閉網(wǎng)頁”超文本鏈接，會自動彈出一個提示對話框，提示是否關(guān)閉窗口，單擊【是】按鈕，即可關(guān)閉窗口，如圖所示.第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.2創(chuàng)建超鏈接6.2.4創(chuàng)建空鏈接和腳本鏈接

第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.3創(chuàng)建Dreamweaver導(dǎo)航條導(dǎo)航條由若干欄目按鈕組成，并且在一個網(wǎng)頁中一般只有一個導(dǎo)航條，導(dǎo)航條上的選項(xiàng)有4種狀態(tài)，分別是鼠標(biāo)離開時(shí)、鼠標(biāo)經(jīng)過時(shí)、鼠標(biāo)單擊時(shí)和鼠標(biāo)經(jīng)過單擊后。

第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.3創(chuàng)建Dreamweaver導(dǎo)航條(1)新建HTML網(wǎng)頁文檔，以dht.html為文件名保存在“源文件\ch6\6_3”目錄下。(2)選擇【插入】|【圖像對象】|【導(dǎo)航條】命令，打開【插入導(dǎo)航條】對話框。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.3創(chuàng)建Dreamweaver導(dǎo)航條(3)在【插入導(dǎo)航條】對話框中分別插入導(dǎo)航條上的各個項(xiàng)目，并設(shè)置項(xiàng)目的屬性。(4)單擊【確定】按鈕，完成插入導(dǎo)航條的操作。第6章超鏈接與導(dǎo)航《網(wǎng)頁設(shè)計(jì)與制作》6.4圖像映射超鏈接不僅可以將整張圖像作為鏈接的載體，還可以將圖像的某一部分設(shè)為鏈接，這要通過設(shè)置圖像