3.4 超鏈接

3.4.1 基本概念

超鏈接是網頁設計中非常重要的部分，它可以將互聯網上眾多的網站和網頁聯系起來，使暢游網絡變得便捷。

1．超鏈接的定義

超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是文本、圖像、電子郵件地址、文件等，甚至是一個應用程序。超鏈接是連接網頁之間的橋梁。

超鏈接由源端點和目標端點兩部分組成，其中設置鏈接的一端為源端點，跳轉到的頁面或對象為目標端點。如單擊圖3-34中的“新聞”超鏈接則打開圖3-35所示的頁面，在這個超鏈接中，圖3-34百度首頁的“新聞”為源端點，而圖3-35中的百度新聞頁面為目標端點。

2．超鏈接類型

按鏈接路徑的不同，超鏈接分為內部鏈接和外部鏈接。內部鏈接的目標端點位于站點內部，通常使用相對路徑。外部鏈接的目標端點位于其他網站中（本站點之外），通常使用絕對路徑。

絕對路徑：鏈接中使用完整的URL地址，這種鏈接路徑稱為絕對路徑。一般用于鏈接外部網站或外部資源，如http://www.baidu.com。

相對路徑：以鏈接源端點所在位置為參考基礎而建立的路徑。因此，當保存于不同目錄的網頁引用同一個文件時，所使用的路徑將不相同，故稱為相對。一般用于同站點內不同文件之間的鏈接。其中，“../”表示上一層目錄；“./”為當前目錄，一般書寫時可省略。

按使用對象的不同，超鏈接分為文本鏈接、圖像鏈接、電子郵件鏈接、熱點鏈接、空鏈接、下載鏈接、錨記鏈接等。

3.4.2 設置超鏈接

1．創建超鏈接

創建超鏈接的常用方法有以下幾種。

1）在“屬性”面板的“鏈接”文本框中直接輸入要鏈接對象的路徑。

2）單擊“鏈接”文本框右側的“瀏覽文件”按鈕，在彈出的“選擇文件”對話框中選擇鏈接對象。

3）單擊并拖動“鏈接”文本框右側的“指向文件”按鈕到“文件”面板的文件上。

“屬性”面板中的“鏈接”文本框下方的“目標”表示打開鏈接文檔的方式，默認是在當前窗口中打開鏈接網頁。表3-2為目標列表中各個選項的含義。

2．取消超鏈接

當創建的超鏈接錯誤或不需要的時候可以取消超鏈接。選中已設置為超鏈接的對象，刪除“屬性”面板中“鏈接”文本框中的內容即可取消超鏈接。

3.4.3 常用超鏈接

常用的超鏈接主要有文本鏈接、圖像鏈接、熱點鏈接、電子郵件鏈接、下載鏈接、空鏈接、錨記鏈接等。

1．文本鏈接、圖像鏈接

文本鏈接是以文本為對象的超級鏈接，鏈接的源端點是文本。圖像鏈接是以圖像為對象的超級鏈接，鏈接的源端點是圖像。這兩種鏈接是網頁中最常見、最簡單的鏈接方式。

要創建文本鏈接、圖像鏈接，首先選定需設置鏈接的文本或圖像，然后根據3.4.2中提到的創建超鏈接的方法設置鏈接路徑，最后選擇鏈接的目標窗口。

例3-1 在網站“book”中創建相關的文本和圖像鏈接。

素材所在位置：……\素材\課堂案例\案例素材\No3\book\……

效果所在位置：……\素材\課堂案例\案例效果\No3\book\……

步驟：

1)打開Dreamweaver CS6創建站點，在“文件”面板中雙擊打開“index.html”文件，如圖3-36所示。

2)選定圖3-37所示的文本“書籍分類”，單擊“屬性”面板中“鏈接”編輯框右側的“瀏覽文件”按鈕，在彈出的“選擇文件”對話框中選擇網頁文件“type.html”，單擊“確定”按鈕；或直接在“鏈接”文本框中輸入“type.html”。

3)選定圖3-38所示的圖像“新書排行榜”，在“屬性”面板中單擊并拖動“鏈接”文本框右側的“指向文件”按鈕到“文件”面板的“new.html”來實現圖像鏈接。同理，可為圖像“熱門作者”創建到“author.html”的鏈接。

2．熱點鏈接

熱點鏈接又稱為熱區鏈接或圖像映射，就是使用熱點工具將一張圖片劃分為多個區域，并為這些區域分別設置鏈接。

要創建熱點鏈接，首先選定圖像，利用圖3-39所示的“屬性”面板上的熱點工具繪制熱區，然后為繪制的熱區設置鏈接路徑，最后選擇鏈接目標窗口。

熱點工具有矩形熱點工具、圓形熱點工具和多邊形熱點工具，利用這些工具在選定的圖像上單擊并拖動鼠標即可繪制出熱點區域。

例3-2 在網站“book”中創建熱點鏈接。

素材所在位置：……\素材\課堂案例\案例素材\No3\book\……

效果所在位置：……\素材\課堂案例\案例效果\No3\book\……

步驟：

1)打開Dreamweaver CS6并創建站點，在“文件”面板中雙擊打開“type.html”文件。

2)選定圖像“s5.jpg”，利用熱點工具在“書籍分類”圖像上繪制矩形熱區，在“屬性”面板的“鏈接”文本框中直接輸入“game.html”，如圖3-40所示。

提示：

圖像鏈接是圖像作為一個整體的鏈接；而熱點鏈接卻可以根據需要選擇圖像的一部分或某些區域進行鏈接。

3．電子郵件鏈接

使用電子郵件鏈接可以方便地給網站管理者發送郵件。單擊網頁中的電子郵件鏈接可打開“Outlook Express”的“新郵件”窗口，即可書寫郵件。

創建電子郵件鏈接，首先需選定設置郵件鏈接的對象，然后在“鏈接”文本框中以“mailto:電子郵件地址”格式輸入內容，或選擇菜單“插入”→“電子郵件鏈接”命令，在打開的對話框中設置鏈接，如圖3-41所示。

例3-3 在網站“book”中為文件“index.html”版權區域的“聯系我們”創建電子郵件鏈接。

素材所在位置：……\素材\課堂案例\案例素材\No3\book\……

效果所在位置：……\素材\課堂案例\案例效果\No3\book\……

步驟：

1)打開Dreamweaver CS6并創建站點，在“文件”面板中雙擊打開“index.html”文件。

2)如圖3-42所示，選定版權區域的“聯系我們”，在“屬性”面板的“鏈接”文本框內直接輸入“mailto:bookshop@126.com”。

4．下載鏈接

下載鏈接是指單擊某鏈接時會打開一個“文件下載”對話框（或自動啟動下載工具），通過在該對話框中單擊“打開”或“保存”按鈕，可以打開或下載文件。

通常，文件的格式是EXE、ZIP、RAR類型時，瀏覽器無法直接打開，便可通過下載鏈接實現。

例3-4 在網站“book”中為文件“type.html”內的“電子圖書”部分創建下載鏈接。

素材所在位置：……\素材\課堂案例\案例素材\No3\book\……

效果所在位置：……\素材\課堂案例\案例效果\No3\book\……

步驟：

1)打開Dreamweaver CS6并創建站點，在“文件“面板中雙擊打開“type.html”文件。

2)如圖3-43所示，選定“電子圖書”部分“中國的歷史”下方的文本“下載”，在“屬性”面板上單擊并拖動“鏈接”文本框右側的“指向文件”按鈕到“文件”面板的“Ebook.rar”來實現下載鏈接。

5．空鏈接

空鏈接用來激活頁面中的對象或文本，只有鏈接的形式，而沒有具體的鏈接內容。要創建空鏈接，首先選中需設置空連接的對象，然后在“鏈接”文本框中輸入“#”即可。

【練習】在網站“book”中為文件“index.html”導航區的文本“排行榜”創建空鏈接。

6．錨記鏈接

該鏈接的目標端點是網頁中的命名錨點，利用這種鏈接可以跳轉到當前網頁中某一指定的位置上。

要創建錨記鏈接，首先需創建命名錨記，也就是在網頁中設置位置標記，并為其命名。然后選中鏈接對象，在“鏈接”文本框中輸入“#錨點名”。

例3-5 在網站“book”中為文件“index.html”底部的“TOP”創建錨記鏈接，單擊“TOP”后使網頁返回頁面頂端。

素材所在位置：……\素材\課堂案例\案例素材\No3\book\……

效果所在位置：……\素材\課堂案例\案例效果\No3\book\……

步驟：

1)打開Dreamweaver CS6并創建站點，在“文件”面板中雙擊打開“index.html”文件。

2)將光標置于“index.html”頁面左上角，選擇菜單“插入”→“命名錨記”命令，在圖3-44所示的“命名錨記”對話框內輸入錨記名稱“abc”，單擊“確定”按鈕后發現頁面左上角出現了錨記符號，如圖3-45所示。

3)選定頁面底部文本“TOP”，在“屬性”面板文本框內輸入“#abc”即實現錨記鏈接，如圖3-46所示。