《網(wǎng)頁設(shè)計與制作（第2版）》第6章 網(wǎng)頁中的超鏈接

第

6

章網(wǎng)頁中的超鏈接網(wǎng)頁設(shè)計與制作（第2版）2023/1/3第6章網(wǎng)頁中的超鏈接1第6章網(wǎng)頁中的超鏈接6.1超鏈接概述6.2關(guān)于鏈接路徑6.3創(chuàng)建超鏈接的方法6.4

各種類型超鏈接的創(chuàng)建6.5管理超鏈接6.6綜合案例：創(chuàng)建“我愛攝影網(wǎng)”2023/1/3第6章網(wǎng)頁中的超鏈接26.1超鏈接概述超鏈接的定義

超鏈接是指從一個網(wǎng)頁指向一個目標的連接關(guān)系，這個目標可以是另一個網(wǎng)頁，也可

以是相同網(wǎng)頁上的不同位置，還可以是一個圖片、一個電子郵件地址、一個文件，甚至是一個應(yīng)

用程序。超鏈接由源端點和目標端點兩部分組成，其中設(shè)置了鏈接的一端稱為源端點，跳轉(zhuǎn)到的頁面或?qū)ο蠓Q為鏈接的目標端點，超鏈接是網(wǎng)頁中最重要、最基本的元素之一。

2023/1/3第6章網(wǎng)頁中的超鏈接36.1超鏈接概述超鏈接的類型按照不同的標準，超鏈接可以有不同的分類。

2023/1/3第6章網(wǎng)頁中的超鏈接46.1超鏈接概述根據(jù)超鏈接的鏈接路徑劃分

絕對URL超鏈接：提供完整路徑。

相對URL超鏈接：只提供不同的路徑部分。

站點根目錄相對路徑：描述從站點的根文件夾到文檔的路徑。

2023/1/3第6章網(wǎng)頁中的超鏈接56.1超鏈接概述根據(jù)超鏈接目標位置的不同劃分內(nèi)部超鏈接：指在同一站點內(nèi)部、不同頁面之間的超鏈接。錨記超鏈接：是網(wǎng)頁內(nèi)部的鏈接。通常情況下，錨記鏈接用于鏈接到網(wǎng)頁內(nèi)部某個特定的位置。外部超鏈接：是站點外部的鏈接，是網(wǎng)頁與因特網(wǎng)中某個目標網(wǎng)頁的鏈接。電子郵件超鏈接：指鏈接到電子郵箱的鏈接。單擊該鏈接可以發(fā)送電子郵件?？蓤?zhí)行文件超鏈接：通常又稱下載鏈接，單擊該鏈接可以運行可執(zhí)行文件，可以用于下載文件或在線運行可執(zhí)行文件。

2023/1/3第6章網(wǎng)頁中的超鏈接66.1超鏈接概述2023/1/3第6章網(wǎng)頁中的超鏈接7超鏈接源與目標路徑6.1超鏈接概述根據(jù)鏈接載體對象的不同劃分文本超鏈接：以文本作為超鏈接載體。圖像超鏈接：以圖像作為超鏈接載體。

2023/1/3第6章網(wǎng)頁中的超鏈接86.1超鏈接概述根據(jù)鏈接目標對象的不同劃分網(wǎng)頁超鏈接下載超鏈接電子郵件超鏈接空鏈接腳本超鏈接錨記超鏈接

2023/1/3第6章網(wǎng)頁中的超鏈接96.2關(guān)于鏈接路徑在網(wǎng)頁中，每一個鏈接對應(yīng)一個鏈接路徑。在網(wǎng)站中，每一個網(wǎng)頁都有一個唯一的地址與之對應(yīng)，這個地址成為統(tǒng)一資源定位符，即URL(UniformResourceLocator)。

2023/1/3第6章網(wǎng)頁中的超鏈接106.2關(guān)于鏈接路徑絕對路徑

絕對路徑提供鏈接文檔完整的URL。例如，圖中顯示的瀏覽器地址欄中的網(wǎng)址“/”，就是一個絕對路徑。

2023/1/3第6章網(wǎng)頁中的超鏈接116.2關(guān)于鏈接路徑相對路徑

相對路徑文檔相對路徑是省略掉了當(dāng)前文檔和所鏈接的文檔都相同的絕對URL部分，而只提供不同的路徑部分。如圖中的路徑“images/beijing.jpg”。

2023/1/3第6章網(wǎng)頁中的超鏈接126.2關(guān)于鏈接路徑根路徑

根路徑即從站點的根文件夾到文檔的路徑。

如圖中的“\style\main.css”。

2023/1/3第6章網(wǎng)頁中的超鏈接136.3創(chuàng)建超鏈接的方法使用“屬性”面板創(chuàng)建超鏈接

在網(wǎng)頁中選擇準備創(chuàng)建鏈接的對象，在菜單欄中選擇“窗口”→“屬性”菜單項，在“屬性”面板“鏈接”后面的文本框中輸入準備鏈接的路徑，即可完成使用“屬性”面板創(chuàng)建鏈接的操作，如下圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接146.3創(chuàng)建超鏈接的方法使用指向文件圖標創(chuàng)建超鏈接在網(wǎng)頁中選擇準備創(chuàng)建超鏈接的對象，在菜單欄中選擇“窗口”→“屬性”菜單項，在“屬性”面板中單擊“指向文件”按鈕，單擊并拖動到站點窗口的目標文件上，釋放鼠標左鍵，即可完成創(chuàng)建超鏈接的操作。如下圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接156.3創(chuàng)建超鏈接的方法2023/1/3第6章網(wǎng)頁中的超鏈接166.3創(chuàng)建超鏈接的方法使用“屬性”面板創(chuàng)建超鏈接在網(wǎng)頁中選擇準備創(chuàng)建超鏈接的對象，如下圖（a）所示，選擇“插入”→“超鏈接”菜單項，彈出“超鏈接”對話框，在“鏈接”文本框中輸入鏈接的目標，或者單擊“鏈接”文本框，選擇相應(yīng)的鏈接目標，單擊“確定”按鈕，即可完成使用菜單創(chuàng)建超鏈接的操作，如下圖（b）和下圖（c）所示。

2023/1/3第6章網(wǎng)頁中的超鏈接176.3創(chuàng)建超鏈接的方法2023/1/3第6章網(wǎng)頁中的超鏈接186.4各種類型超鏈接的創(chuàng)建創(chuàng)建文本超鏈接用文本做鏈接載體，就是通常所說的文本超鏈接，文本超鏈接是網(wǎng)頁文件中最常用的鏈接，單擊文本鏈接將激發(fā)文本鏈接所連接的文件，使用文本鏈接創(chuàng)建連接的文件對象可以是網(wǎng)頁、圖像等。

2023/1/3第6章網(wǎng)頁中的超鏈接196.4各種類型超鏈接的創(chuàng)建創(chuàng)建文本超鏈接的步驟：①在網(wǎng)頁中選擇“個人簡歷”文本，如下圖所示。②除了可以通過上節(jié)所講的創(chuàng)建超鏈接方法來實現(xiàn)外，也可以通過操作“插入”面板的方式來實現(xiàn)。

2023/1/3第6章網(wǎng)頁中的超鏈接206.4各種類型超鏈接的創(chuàng)建2023/1/3第6章網(wǎng)頁中的超鏈接216.4各種類型超鏈接的創(chuàng)建③選擇“插入”→“常用”→“超鏈接”命令，彈出下圖所示的“超鏈接”對話框。在相應(yīng)的網(wǎng)站中選擇要鏈接的文件（如網(wǎng)頁），并進行相應(yīng)的設(shè)置。

2023/1/3第6章網(wǎng)頁中的超鏈接226.4各種類型超鏈接的創(chuàng)建④按F12鍵運行，查看運行效果，單擊網(wǎng)頁中“個人簡歷”超鏈接，頁面跳轉(zhuǎn)到鏈接的目標頁面，查看相應(yīng)的內(nèi)容，如圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接236.4各種類型超鏈接的創(chuàng)建創(chuàng)建下載文件超鏈接

人們在經(jīng)常會遇到下載文件鏈接，單擊它則會彈出一個下載提示框，下載鏈接在軟件下載網(wǎng)站和源代碼下載網(wǎng)站中應(yīng)用得比較多，下載鏈接的創(chuàng)建方式和一般的鏈接創(chuàng)建方法基本相同，只是所鏈接的內(nèi)容是一個軟件文件或者壓縮文件，而不是圖像或者網(wǎng)頁。

2023/1/3第6章網(wǎng)頁中的超鏈接246.4各種類型超鏈接的創(chuàng)建在網(wǎng)站中創(chuàng)建下載鏈接的方法如下：①打開或新建一個網(wǎng)頁，在網(wǎng)頁中輸入并選中要創(chuàng)建鏈接的文本，如圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接256.4各種類型超鏈接的創(chuàng)建②在“屬性”面板中單擊“指向文件”按鈕，并拖動至“本地文件”中所要下載的文件上，當(dāng)釋放后，就會創(chuàng)建文本與下載文件之間的鏈接，如圖6-25所示。在“屬性”面板的“鏈接”文本框中會出現(xiàn)鏈接文件名，同時鏈接文本的顏色會發(fā)生變化。

2023/1/3第6章網(wǎng)頁中的超鏈接266.4各種類型超鏈接的創(chuàng)建2023/1/3第6章網(wǎng)頁中的超鏈接276.4各種類型超鏈接的創(chuàng)建③保存網(wǎng)頁后，按F12鍵運行網(wǎng)頁，如下圖(a)。④單擊“單擊此處”鏈接，彈出“文件下載”對話框,如下圖(b)。⑤最后將文件“本地下載”到相應(yīng)的存儲器中。

2023/1/3第6章網(wǎng)頁中的超鏈接28（a）（b）6.4各種類型超鏈接的創(chuàng)建創(chuàng)建電子郵件超鏈接電子郵件超鏈接是網(wǎng)頁中經(jīng)常用到的一種方法，單擊電子郵件超鏈接對象，會自動啟動計算機上默認的電子郵件收發(fā)客戶端，例如常見的OutlookExpress等。

2023/1/3第6章網(wǎng)頁中的超鏈接296.4各種類型超鏈接的創(chuàng)建創(chuàng)建電子郵件超鏈接的步驟①打開需要創(chuàng)建電子郵件超鏈接的文檔，如下圖

所示。將光標置于文檔窗口中要顯示電子郵件超鏈接的地方，選定即將顯示為電子郵件超鏈接的文本或圖像。

2023/1/3第6章網(wǎng)頁中的超鏈接306.4各種類型超鏈接的創(chuàng)建

2023/1/3第6章網(wǎng)頁中的超鏈接316.4各種類型超鏈接的創(chuàng)建②選中網(wǎng)頁中的文本，選擇“插入”→“電子郵件鏈接”命令，彈出下圖所示的“電子郵件鏈接”對話框。③在“電子郵件”文本框中填寫電子郵件的地址。

2023/1/3第6章網(wǎng)頁中的超鏈接326.4各種類型超鏈接的創(chuàng)建④保存網(wǎng)頁，并在瀏覽器中運行，效果如下圖所示。⑤單擊瀏覽頁面中的“請單擊此處”，將出現(xiàn)郵件發(fā)送界面，輸入相應(yīng)信息即可發(fā)送郵件。

2023/1/3第6章網(wǎng)頁中的超鏈接336.4各種類型超鏈接的創(chuàng)建創(chuàng)建圖像超鏈接在瀏覽網(wǎng)頁時，網(wǎng)頁上經(jīng)常會有以圖像方式來實現(xiàn)的鏈接，尤其是在廣告或產(chǎn)品介紹中應(yīng)用最為廣泛，比如在購物網(wǎng)站上，其產(chǎn)品往往是以圖片的方式顯示的，當(dāng)單擊該圖片時，就會彈出相應(yīng)介紹或購買的網(wǎng)頁。

2023/1/3第6章網(wǎng)頁中的超鏈接346.4各種類型超鏈接的創(chuàng)建創(chuàng)建圖像超鏈接的步驟①打開頁面，如圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接356.4各種類型超鏈接的創(chuàng)建②選中網(wǎng)頁中的圖像，使用“屬性”面板中的“鏈接”選項以如前所講的相似方式設(shè)置鏈接文件，同時可對圖像本身進行相應(yīng)處理。③保存網(wǎng)頁后，按F12鍵運行，并單擊鏈接圖像，效果如下圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接366.4各種類型超鏈接的創(chuàng)建2023/1/3第6章網(wǎng)頁中的超鏈接376.4各種類型超鏈接的創(chuàng)建鼠標經(jīng)過圖像鏈接的步驟①在所建立的網(wǎng)站中準備好兩幅大小相等的圖像。②在網(wǎng)站中新建一個網(wǎng)頁，并進行相應(yīng)的菜單操作，如下圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接386.4各種類型超鏈接的創(chuàng)建2023/1/3第6章網(wǎng)頁中的超鏈接396.4各種類型超鏈接的創(chuàng)建③在彈出的對話框中，分別單擊“原始圖像”“鼠標經(jīng)過圖像”文本框后的“瀏覽”按鈕，選擇相對應(yīng)的圖像文件。

2023/1/3第6章網(wǎng)頁中的超鏈接406.4各種類型超鏈接的創(chuàng)建④單擊“確定”按鈕后，會在頁面中出現(xiàn)類似于運行瀏覽的效果，如圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接416.4各種類型超鏈接的創(chuàng)建⑤在瀏覽狀態(tài)下，當(dāng)鼠標移動到圖像時，就會變成下圖所示的效果。

2023/1/3第6章網(wǎng)頁中的超鏈接426.4各種類型超鏈接的創(chuàng)建創(chuàng)建錨記超鏈接

創(chuàng)建命名錨記（簡稱錨點）就是在文檔中設(shè)置位置標簽，并給該位置設(shè)置一個名稱，以便引用。通過創(chuàng)建錨點，可以使鏈接指向當(dāng)前文檔或者不同文檔中的指定位置。

2023/1/3第6章網(wǎng)頁中的超鏈接436.4各種類型超鏈接的創(chuàng)建創(chuàng)建錨記超鏈接的步驟①打開或建立一個網(wǎng)頁。如圖所示，將鼠標定位在網(wǎng)頁中正文第一行文本的起始位置，選擇“插入”→“命名錨記”命令。

2023/1/3第6章網(wǎng)頁中的超鏈接446.4各種類型超鏈接的創(chuàng)建②在下圖所示的“命名錨記”對話框的“錨記名稱”文本框中輸入“錨記”名稱。

2023/1/3第6章網(wǎng)頁中的超鏈接456.4各種類型超鏈接的創(chuàng)建③在輸入名稱并單擊“確定”按鈕后，在網(wǎng)頁鼠標定位位置將出現(xiàn)下圖所示的錨記標志。

2023/1/3第6章網(wǎng)頁中的超鏈接466.4各種類型超鏈接的創(chuàng)建④選擇下圖所示網(wǎng)頁中的文本，如“返回頂部”，并在“屬性”面板的“鏈接”文本框中輸入“#（英文半角下輸入）錨記”后，按回車鍵即可設(shè)置鏈接。

2023/1/3第6章網(wǎng)頁中的超鏈接476.4各種類型超鏈接的創(chuàng)建⑤保存網(wǎng)頁后，按F12鍵，在瀏覽頁面中單擊“返回頂部”，網(wǎng)頁中內(nèi)容會自動移動到錨記標志所定位的行，如本網(wǎng)頁中的第一行，如圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接486.4各種類型超鏈接的創(chuàng)建創(chuàng)建空鏈接所謂空鏈接，就是指未指定對象的鏈接，用來向頁面中的對象或文本附加行為，可用來設(shè)置空鏈接的對象包括文本、圖像、熱點鏈接等。

2023/1/3第6章網(wǎng)頁中的超鏈接496.4各種類型超鏈接的創(chuàng)建創(chuàng)建空鏈接的步驟①打開或創(chuàng)建一個網(wǎng)頁，如圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接506.4各種類型超鏈接的創(chuàng)建②在“屬性”面板的“鏈接”文本框中輸入“#”，然后按回車鍵。③保存頁面文件后，按F12鍵運行，在瀏覽的頁面中單擊鏈接文本，不發(fā)生任何跳轉(zhuǎn)行為。

2023/1/3第6章網(wǎng)頁中的超鏈接516.4各種類型超鏈接的創(chuàng)建創(chuàng)建腳本超鏈接

一般腳本超鏈接可用來執(zhí)行計算、表單驗證和其他處理。

2023/1/3第6章網(wǎng)頁中的超鏈接526.4各種類型超鏈接的創(chuàng)建創(chuàng)建腳本超鏈接的步驟①打開或創(chuàng)建一個網(wǎng)頁文件，如圖所示，選擇鏈接文本“關(guān)閉”，在“屬性”面板的“鏈接”文本框中輸入“javascript:window.close()”，然后按回車鍵。

2023/1/3第6章網(wǎng)頁中的超鏈接536.4各種類型超鏈接的創(chuàng)建2023/1/3第6章網(wǎng)頁中的超鏈接546.4各種類型超鏈接的創(chuàng)建②保存網(wǎng)頁文件后，按F12鍵運行，在瀏覽器中單擊“關(guān)閉”，將會彈出下圖所示的對話框。單擊“是”按鈕，關(guān)閉瀏覽網(wǎng)頁窗口。

2023/1/3第6章網(wǎng)頁中的超鏈接556.5管理超鏈接自動更新鏈接每當(dāng)在本地站點內(nèi)移動或重命名文檔時，Dreamweaver都可以更新起自以及指向該文檔的鏈接，在將整個站點或其中完全獨立的一個部分存儲在本地磁盤上時，此項功能最適用，Dreamweaver不更改遠程文件夾中的文件，除非將這些本地文件放在或者存回到遠程服務(wù)器上。

2023/1/3第6章網(wǎng)頁中的超鏈接566.5管理超鏈接在已經(jīng)打開或更新的DreamweaverCS6窗口中選擇“編輯”→“首選參數(shù)”命令，彈出“首選參數(shù)”對話框，如圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接576.5管理超鏈接在站點范圍內(nèi)更改鏈接

除了當(dāng)移動或重命名文件時通過Dreamweaver自動更改鏈接以外，還可以通過手動的方式更改所有鏈接，如電子郵件、FTP、腳本和空鏈接，而使其指向其他位置。

2023/1/3第6章網(wǎng)頁中的超鏈接586.5管理超鏈接在站點范圍內(nèi)更改鏈接的操作方法①在打開的網(wǎng)頁文件窗口的“文件”面板的“本地文件”區(qū)域選擇一個文件，如圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接596.5管理超鏈接②在菜單欄中選擇“站點”→“改變站點范圍的鏈接”命令，如圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接606.5管理超鏈接③在彈出的“更改整個站點鏈接”對話框的“變成新鏈接”文本框中輸入或通過瀏覽選擇準備鏈接的文件，如圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接616.5管理超鏈接檢查站點中的鏈接錯誤

在DreamweaverCS6中，可以對站點中的鏈接錯誤進行檢查，通過檢查鏈接的錯誤，可以保證網(wǎng)頁設(shè)計的正確性

。

2023/1/3第6章網(wǎng)頁中的超鏈接626.5管理超鏈接檢查站點中的鏈接錯誤的步驟

①打開或新建一個網(wǎng)頁文件。選擇菜單“站點”→“檢查站點范圍的鏈接”命令，如圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接636.5管理超鏈接②在彈出的“鏈接檢查器”面板中，在“顯示”選項中包括斷掉的鏈接、外部鏈接和孤立的文件3個選項，單擊其中任何一項，就可以檢查相應(yīng)的信息。

2023/1/3第6章網(wǎng)頁中的超鏈接646.5管理超鏈接③若要關(guān)閉“鏈接檢查器”面板，可單擊按鈕

，在彈出的菜單中選擇“關(guān)閉標簽組”即可，如圖所示。

2023/1/3第6章網(wǎng)頁中的超鏈接656.6綜合案例：創(chuàng)建“我愛攝影網(wǎng)”

【內(nèi)容】創(chuàng)建一個站點，名稱為“我愛攝影網(wǎng)”，對應(yīng)的本地路徑是“D:\SheYingWang”。在站點根目錄下新建網(wǎng)頁文件index.html作為網(wǎng)站的首頁，然后建立風(fēng)光網(wǎng)頁，名稱為fengguang.html，用于存放風(fēng)光類攝影圖片。新建一個文件夾，名稱是“images”，用來存放相關(guān)圖片。最后使用超鏈接將網(wǎng)頁、圖片、郵件等鏈接起來。

2023/1/3第6章網(wǎng)頁中的超鏈接666.6綜合案例：創(chuàng)建“我愛攝影網(wǎng)”【目標】通過本案例練習(xí)，熟悉并掌握DreamweaverCS6中文本、圖片、郵件等超鏈接制作方法。

【思路】先設(shè)計好網(wǎng)頁，然后使用相關(guān)類型的超鏈接來實現(xiàn)網(wǎng)頁、圖片之間的關(guān)系。

2023/1/3第6章網(wǎng)頁中的超鏈接676.6綜合案例：創(chuàng)建“我愛攝影網(wǎng)”【步驟】步驟1：在D盤根目錄下創(chuàng)建一個文件夾，名稱為“SheYingWang”，再在“SheYingWang”文件夾中創(chuàng)建子文件夾“images”，并存放四張風(fēng)光類圖片，名稱分別為“fg1”“fg2”“