3.1 超鏈接

超鏈接（hyperlink）是網頁互相聯系的橋梁，超鏈接可以看作一個“熱點”，它可以從當前網頁定義的位置跳轉到其他位置，包括當前頁的某個位置，以及Internet、本地硬盤或局域網上的其他文件，甚至跳轉到聲音、圖像等多媒體文件。

當網頁中包含超鏈接時，其外觀形式為彩色（一般為藍色）且帶下畫線的文字或圖像。單擊這些文本或圖像，可跳轉到相應位置。鼠標指針指向超鏈接時，將變成手形。

3.1.1 超鏈接簡介

1.超鏈接的分類

根據超鏈接目標文件的不同，超鏈接可分為頁面超鏈接、錨點超鏈接、電子郵件超鏈接等；根據超鏈接單擊對象的不同，超鏈接可分為文字超鏈接、圖像超鏈接、圖像映射等。

2.路徑

創建超級鏈接時必須了解鏈接與被鏈接文本的路徑。在一個網站中，路徑通常有3種表示方式：絕對路徑、根目錄相對路徑和文檔目錄相對路徑。

（1）絕對路徑

絕對路徑是指包括服務器規范（網頁一般使用http://）在內的完全路徑。例如，http://www.adobe.com/support/dreamweaver/contents.html就是一個絕對路徑。

必須使用絕對路徑，才能鏈接到其他服務器上的文檔。盡管對本地鏈接（即到同一站點內文檔的鏈接）也可使用絕對路徑鏈接，但不建議采用這種方式，因為如果將此站點移到其他域中，則所有本地絕對路徑鏈接都將斷開。對本地鏈接使用相對路徑，也便于在本地站點內移動文件。

（2）根目錄相對路徑

根目錄相對路徑是指從站點根文件夾到被鏈接文檔經過的路徑。站點上所有公開的文件都存放在站點的根目錄下。站點根目錄相對路徑以一個正斜杠（/）開始，例如，/support/tips.htm是文件（tips.htm）的站點根目錄相對路徑，該文件位于站點根文件夾的support子文件夾中。

（3）文檔目錄相對路徑

文檔目錄相對路徑是指以當前文檔所在位置為起點到被鏈接文檔經過的路徑，這種方式適合于創建本地鏈接。文檔相對路徑的基本思想是省略當前文檔和所鏈接的文檔都相同的絕對URL部分，而只提供不同的部分。

3.1.2 超鏈接的應用

1.錨點標簽<a>…</a>

錨點（anchor）標簽由<a>定義，它在網頁上建立超文本鏈接。通過單擊一個詞、句或圖像，可從此處轉到另一個鏈接資源（目標資源），這個目標資源有唯一的地址（URL）。具有以上特點的詞、句或圖像就稱為熱點。<a>標簽的格式為：

href屬性為超文本引用，它的值為一個URL，是目標資源的有效地址。如果要創建一個不鏈接到其他位置的空超鏈接，可用“#”代替URL。target屬性設定鏈接被單擊后所要開始窗口的方式，可選值為：_blank，_parent，_self，_top。

2.指向其他頁面的鏈接

創建指向其他頁面的鏈接，就是在當前頁面與其他相關頁面之間建立超鏈接。根據目標文件與當前文件的目錄關系，有4種寫法。注意，應該盡量采用相對路徑。

（1）鏈接到同一目錄內的網頁文件

格式為：

其中，“目標文件名”是鏈接所指向的文件。

（2）鏈接到下一級目錄中的網頁文件

格式為：

（3）鏈接到上一級目錄中的網頁文件

格式為：

其中，“../”表示退到上一級目錄中。

（4）鏈接到同級目錄中的網頁文件

格式為：

表示先退到上一級目錄中，然后再進入目標文件所在的目錄。

【演練3-1】制作夢想櫥柜頁面之間的鏈接，當前頁3-1.html中包含兩個鏈接分別指向注冊頁和登錄頁，如圖3-1所示。

代碼如下：

3.指向書簽的鏈接

書簽就是用<a>標簽對網頁元素作一個記號，其功能類似于用于固定船的錨，所以書簽也稱錨記或錨點。如果頁面中有多個書簽鏈接，對不同目標元素要設置不同的書簽名。書簽名在<a>標簽的name屬性中定義，格式為：

（1）指向頁面內書簽的鏈接

要在當前頁面內實現書簽鏈接，需要定義兩個標簽：一個為超鏈接標簽，另一個為書簽標簽。超鏈接標簽的格式為：

即單擊“熱點文本”，將跳轉到“記號名”開始的網頁元素。

【演練3-2】制作指向頁面內書簽的鏈接，在頁面下方的“關于企業”文本前定義一個書簽“about”，當單擊頁面頂部的“關于企業”鏈接時，將跳轉到頁面下方的關于企業位置處，如圖3-2所示。

代碼如下：

【說明】在驗證本例效果時，可以把瀏覽器縮放到只顯示頁面上半部分信息的大小，然后單擊頂部的“關于企業”鏈接，就可以看到頁面自動定位到下方的“關于企業”位置處。

（2）指向其他頁面書簽的鏈接

要在其他頁面內實現書簽鏈接，需要定義兩個標簽：一個為當前頁面的超鏈接標簽，另一個為跳轉頁面的書簽標簽。當前頁面的超鏈接標簽的格式為：

即單擊“熱點文本”，將跳轉到目標頁面“記號名”開始的網頁元素。

【演練3-3】制作指向其他頁面書簽的鏈接，在頁面info.html的“關于企業”文本前定義一個書簽“about”，當單擊當前頁面3-3.html中頁面頂部的“關于企業”鏈接時，將跳轉到頁面info.html中“關于企業”位置處，如圖3-3所示。

當前頁面3-3.html的代碼如下：

跳轉頁面info.html的代碼如下：

4.指向下載文件的鏈接

如果鏈接到的文件不是HTML文件，則該文件將作為下載文件。指向下載文件的鏈接格式為：

例如，下載一個購物向導的壓縮包文件guide.rar，可以建立如下鏈接：

5.指向電子郵件的鏈接

單擊指向電子郵件的鏈接，將打開默認的電子郵件程序，如FoxMail、Outlook Express等，并自動填寫郵件地址。指向電子郵件鏈接的格式為：

例如，E-mail地址是cat@163.com，可以建立如下鏈接：

3.1.3 案例——制作夢想櫥柜服務指南頁面

【演練3-4】制作夢想櫥柜服務指南及下載的頁面，本例文件包括3-4.html、2-5.html兩個展示網頁和guide.rar下載文件。在瀏覽器中顯示的效果如圖3-4和圖3-5所示。

代碼如下：

【說明】

①當把鼠標指針移到超鏈接上時，鼠標指針變為手形，單擊“常見問題解答”鏈接則打開指定的網頁2-5.html。如果在<a>標簽中省略屬性target，則在當前窗口中顯示；當target="_blank"時，將在新的瀏覽器窗口中顯示。

②在圖3-5所示的網頁中單擊下載熱點“夢想櫥柜服務指南”，將打開“文件下載”對話框，將該文件下載到指定位置。