4.6 網頁鏈接的創建

網站實際上是由很多網頁組成的，那么網頁之間是如何聯系的呢？這就是網頁的“鏈接”。

4.6.1 網頁鏈接的基本類型

鏈接，又稱超鏈接（Hyperlink），它作為網頁間的橋梁，起著相當重要的作用。網頁中的很多對象都可以加入“鏈接”的屬性。超鏈接是從一個網頁或文件到另一個網頁或文件的鏈接，包括圖像或多媒體文件，還可以指向電子郵件地址或程序。當網站訪問者單擊超鏈接時，將根據目標的類型執行相應的操作，即顯示在Web瀏覽器中打開或運行。

要正確創建鏈接，就必須了解鏈接與被鏈接文檔之間的路徑。每個網頁都有一個唯一的地址，稱為統一資源定位符（URL）。然而，當在網頁中創建內部鏈接時，一般不會指定鏈接文檔的完整URL，而是指定一個相對當前文檔或站點根文件夾的相對路徑。

在網頁中的鏈接按照鏈接路徑的不同可以分為3種形式：絕對路徑、相對路徑和基于根目錄路徑。

這些路徑都是網頁中的統一資源定位，只不過后兩種路徑將URL的通信協議和主機名省略了。后兩種路徑必須有參照物，一種是以文檔為參照物；另一種是以站點的根目錄為參照物。而第一種路徑就不需要有參照物，其是最完整的路徑，也是標準的URL。

4.6.2 小實例——圖像鏈接

當用戶瀏覽網頁，鼠標經過圖像時，會出現一個手形圖標，提示瀏覽者這是帶鏈接的圖像。此時單擊鼠標，會打開所鏈接的網頁，這就是圖像超鏈接。創建圖像鏈接的效果如圖4-33所示，具體操作步驟如下。

圖4-33 創建圖像鏈接效果

原始文件：原始文件/04/4.6.2/index.html
最終文件：最終文件/04/4.6.2/index1.html

步驟01 打開網頁文檔，選中要創建鏈接的圖像，如圖4-34所示。

圖4-34 打開網頁文檔

步驟02 打開“屬性”面板，在面板中單擊“鏈接”文本框右邊的“瀏覽文件”按鈕，彈出“選擇文件”對話框，選擇鏈接的文件jiafang.html，如圖4-35所示。

圖4-35 “選擇文件”對話框

步驟03 單擊“確定”按鈕，文件即可被添加到“鏈接”文本框中，如圖4-36所示。

圖4-36 添加鏈接

步驟04 保存文檔，按F12鍵在瀏覽器中預覽，效果如圖4-33所示。

4.6.3 小實例——E-mail鏈接

E-mail鏈接也叫電子郵件鏈接，電子郵件地址作為超鏈接的鏈接目標與其他鏈接目標不同。當用戶在瀏覽器上單擊指向電子郵件地址的超鏈接時，將會打開默認的郵件管理器的新郵件窗口，其中會提示用戶輸入信息并將該信息傳送給指定的E-mail地址。當單擊文字“聯系我們”時效果如圖4-37所示，具體操作步驟如下。

圖4-37 創建電子郵件鏈接的效果

原始文件：原始文件/04/4.6.3/index.html
最終文件：最終文件/04/4.6.3/index1.html

步驟01 打開網頁文檔，將光標置于要創建電子郵件鏈接的位置，如圖4-38所示。

圖4-38 打開網頁文檔

步驟02 執行“插入”︱“電子郵件鏈接”命令，彈出“電子郵件鏈接”對話框，在對話框的“文本”文本框中輸入“聯系我們”，在“電子郵件”文本框中輸入sdhzgw@163.com，如圖4-39所示。

圖4-39 “電子郵件鏈接”對話框

步驟03 單擊“確定”按鈕，創建電子郵件鏈接，如圖4-40所示。

圖4-40 創建電子郵件鏈接

步驟04 保存文檔，按F12鍵在瀏覽器中預覽，效果如圖4-37所示。

4.6.4 小實例——下載文件鏈接

如果要在網站中提供下載資料，就為文件提供下載鏈接，如果超鏈接指向的不是一個網頁文件，而是其他文件例如zip、mp3、exe文件等，單擊鏈接的時候就會下載文件。創建下載文件的鏈接效果如圖4-41所示，具體操作步驟如下。

圖4-41 下載文件的鏈接效果

原始文件：原始文件/04/4.6.4/index.html
最終文件：最終文件/04/4.6.4/index1.html

步驟01 打開網頁文檔，選中要創建鏈接的文字，如圖4-42所示。

圖4-42 打開網頁文檔

步驟02 執行“窗口”|“屬性”命令，打開“屬性”面板，在面板中單擊“鏈接”文本框右邊的按鈕，彈出“選擇文件”對話框，在對話框中選擇要下載的文件“新建文本文檔.zip”，如圖4-43所示。

圖4-43 “選擇文件”對話框

步驟03 單擊“確定”按鈕，添加到“鏈接”文本框中，如圖4-44所示。

圖4-44 添加到“鏈接”文本框中

步驟04 保存文檔，按F12鍵在瀏覽器中預覽，效果如圖4-41所示。

4.6.5 小實例——腳本鏈接

腳本鏈接執行JavaScript代碼或調用JavaScript函數。它非常有用，能夠在不離開當前網頁的情況下為訪問者提供有關某項的附加信息。下面利用腳本鏈接創建關閉網頁，效果如圖4-45所示，具體操作步驟如下。

圖4-45 利用腳本鏈接創建關閉網頁

原始文件：原始文件/04/4.6.5/index.html
最終文件：最終文件/04/4.6.5/index1.html

步驟01 打開網頁文檔，如圖4-46所示。

圖4-46 打開網頁文檔

步驟02 選中文字“關閉窗口”，在屬性面板中的“鏈接”文本框中輸入javascript:window.close()，如圖4-47所示。

圖4-47 輸入鏈接

步驟03 保存文檔，按F12鍵在瀏覽器中預覽，單擊“關閉窗口”按鈕會自動彈出一個提示對話框，提示是否關閉窗口，單擊“是”按鈕即可關閉窗口，效果如圖4-45所示。