Chapter 03 超鏈接

3.1 超鏈接的概念與路徑知識(shí)

超鏈接的主要作用是將物理上無(wú)序的內(nèi)容組成一個(gè)有機(jī)的統(tǒng)一體。超鏈接對(duì)象上存放某個(gè)網(wǎng)頁(yè)文件的地址，以便用戶打開(kāi)相應(yīng)的網(wǎng)頁(yè)文件。在瀏覽網(wǎng)頁(yè)時(shí)，當(dāng)用戶將鼠標(biāo)光標(biāo)移到文字或圖像上時(shí)，光標(biāo)的形狀或顏色會(huì)改變，這就是在提示瀏覽者：“此對(duì)象為鏈接對(duì)象”。用戶只需單擊這些鏈接對(duì)象，就可完成打開(kāi)鏈接的網(wǎng)頁(yè)、下載文件、打開(kāi)郵件工具收發(fā)郵件等操作。

要?jiǎng)?chuàng)建鏈接就必須了解鏈接對(duì)象與鏈接文件間的路徑。網(wǎng)頁(yè)中的鏈接路徑主要有以下三種。

絕對(duì)路徑

絕對(duì)路徑提供所鏈接文檔的完整 URL，而且包括所使用的協(xié)議（如對(duì)于 Web 頁(yè)，通常使用http://）。主要用于描述Internet上的信息資源，包括所使用的傳輸協(xié)議、主機(jī)地址、文件地址三部分。例如http://www.sina.com/news/default.htm就是一個(gè)絕對(duì)路徑。其中，http表示http協(xié)議，www.sina.com表示www服務(wù)器，/news/default.htm表示文件地址。一般情況下，創(chuàng)建外部鏈接（從一個(gè)網(wǎng)站的網(wǎng)頁(yè)鏈接到其他網(wǎng)站的網(wǎng)頁(yè)）時(shí)用絕對(duì)路徑表示。

文檔相對(duì)路徑

文檔相對(duì)路徑對(duì)于大多數(shù) Web 站點(diǎn)的本地鏈接來(lái)說(shuō)，是最適用的路徑。指定文檔相對(duì)路徑時(shí)，省去了當(dāng)前文件和被鏈接文件的URL中相同的部分。如果當(dāng)前文件和要鏈接的文件在同一個(gè)文件夾內(nèi)，則只需輸入文件名，如zt.htm；如果當(dāng)前文件和要鏈接的文件在同一個(gè)文件夾的某個(gè)子文件夾下，則只需輸入子文件夾名/文件名，如news/zt.htm；如果當(dāng)前文件和要鏈接的文件在同一個(gè)上層文件夾內(nèi)，需輸入．./文件名，如．./zt.htm。

站點(diǎn)根目錄相對(duì)路徑

站點(diǎn)根目錄相對(duì)路徑提供從站點(diǎn)的根文件夾到文檔的路徑。站點(diǎn)根目錄相對(duì)路徑以一個(gè)正斜杠開(kāi)始，該正斜杠表示站點(diǎn)根文件夾，如/news/zt.htm是文件 (zt.htm) 的站點(diǎn)根目錄相對(duì)路徑，該文件位于站點(diǎn)根文件夾的new子文件夾中。

通常，網(wǎng)站設(shè)計(jì)者使用站點(diǎn)根目錄相對(duì)路徑的鏈接方式，因?yàn)檫@樣做兼容性比較好，移植性強(qiáng)。當(dāng)移動(dòng)包含站點(diǎn)根目錄相對(duì)路徑鏈接的文件時(shí)，無(wú)需對(duì)原有的鏈接進(jìn)行任何修改。

根據(jù)鏈接對(duì)象和鏈接方式可將鏈接分為9種，它們是文本鏈接、圖像鏈接、郵件鏈接、錨點(diǎn)鏈接、多媒體文件鏈接、可下載的文件鏈接、圖像映射鏈接、空鏈接和腳本鏈接。下面介紹它們的用途和使用方法。

3.2 文本超鏈接

文本鏈接是以文本為鏈接對(duì)象的一種常用的鏈接方式。作為鏈接對(duì)象的文本帶有標(biāo)識(shí)性，它標(biāo)識(shí)鏈接網(wǎng)頁(yè)的主要內(nèi)容或主題。

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

創(chuàng)建文本鏈接的方法非常簡(jiǎn)單，主要是在鏈接文本的【屬性】面板中指定鏈接文件。指定鏈接文件的方法有三種。

1．直接輸入要鏈接文件的路徑和文件名

在文檔窗口中選中作為鏈接對(duì)象的文本，執(zhí)行菜單【窗口】→【屬性】命令，彈出【屬性】面板，如圖3-1所示。在【鏈接】選項(xiàng)的文本框中，直接輸入要鏈接文件的路徑和文件名。

2．使用瀏覽文件按鈕

在文檔窗口中選中作為鏈接對(duì)象的文本，在【屬性】面板中單擊【鏈接】選項(xiàng)右側(cè)的【瀏覽文件】按鈕 ，彈出【選擇文件】對(duì)話框。選擇要鏈接的文件，在【相對(duì)于】選項(xiàng)的下拉列表中選擇【文檔】選項(xiàng)，如圖3-2所示，單擊【確定】按鈕。

3．使用指向文件圖標(biāo)

使用【指向文件】圖標(biāo) ，可以快捷地指定站點(diǎn)窗口內(nèi)的鏈接文件，或指定另一個(gè)打開(kāi)文件中命名錨點(diǎn)的鏈接。

在文檔窗口中選中作為鏈接對(duì)象的文本，在【屬性】面板中，拖曳【指向文件】圖標(biāo) 指向右側(cè)站點(diǎn)窗口內(nèi)的文件，如圖3-3所示。松開(kāi)鼠標(biāo)左鍵，【鏈接】選項(xiàng)被更新并顯示出所建立的鏈接。

完成鏈接文件后，【屬性】面板中的【目標(biāo)】選項(xiàng)變?yōu)榭捎茫湎吕斜碇懈鬟x項(xiàng)的作用如下。

【_blank】選項(xiàng)：將鏈接文件加載到未命名的新瀏覽器窗口中。

【_parent】選項(xiàng)：將鏈接文件加載到包含該鏈接的父框架集或窗口中。如果包含鏈接的框架不是嵌套的，則鏈接文件加載到整個(gè)瀏覽器窗口中。

【_self】選項(xiàng)：將鏈接文件加載到鏈接所在的同一框架或窗口中。此目標(biāo)是默認(rèn)的，因此通常不需要指定它。

【_top】選項(xiàng)：將鏈接文件加載到整個(gè)瀏覽器窗口中，并由此刪除所有框架。

3.2.2 文本鏈接的狀態(tài)

一個(gè)未被訪問(wèn)過(guò)的鏈接文字與一個(gè)被訪問(wèn)過(guò)的鏈接文字在形式上是有所區(qū)別的，以提示瀏覽者鏈接文字所指示的網(wǎng)頁(yè)是否被看過(guò)。下面講解文本鏈接狀態(tài)的設(shè)置，具體操作步驟如下。

（1）執(zhí)行菜單【修改】→【頁(yè)面屬性】命令，彈出【頁(yè)面屬性】對(duì)話框，如圖3-4所示。

（2）在對(duì)話框中設(shè)置文本的鏈接狀態(tài)。選擇【分類】選項(xiàng)框中的【鏈接】選項(xiàng)，單擊【鏈接顏色】選項(xiàng)右側(cè)的圖標(biāo) ，打開(kāi)調(diào)色板，選擇一種顏色，來(lái)設(shè)置鏈接文字的顏色。

單擊【已訪問(wèn)鏈接】選項(xiàng)右側(cè)的圖標(biāo) ，打開(kāi)調(diào)色板，選擇一種顏色，設(shè)置訪問(wèn)過(guò)的鏈接文字的顏色。

單擊【活動(dòng)鏈接】選項(xiàng)右側(cè)的圖標(biāo) ，打開(kāi)調(diào)色板，選擇一種顏色，設(shè)置活動(dòng)的鏈接文字的顏色。

在【下劃線樣式】選項(xiàng)的下拉列表中設(shè)置鏈接文字是否加下劃線，如圖3-6所示。

3.3 命名錨記超鏈接

若網(wǎng)頁(yè)的內(nèi)容很長(zhǎng)，為了尋找一個(gè)主題，瀏覽者往往需要拖動(dòng)滾動(dòng)條進(jìn)行查看，非常不方便。Dreamweaver提供了錨點(diǎn)鏈接功能可快速定位到網(wǎng)頁(yè)的不同位置。

錨點(diǎn)也叫書(shū)簽，顧名思義，就是在網(wǎng)頁(yè)中作標(biāo)記。每當(dāng)要在網(wǎng)頁(yè)中查找特定主題的內(nèi)容時(shí)，只需快速定位到相應(yīng)的標(biāo)記（錨點(diǎn)）處即可，這就是錨點(diǎn)鏈接。建立錨點(diǎn)鏈接要分兩步實(shí)現(xiàn)，首先要在網(wǎng)頁(yè)的不同主題內(nèi)容處定義不同的錨點(diǎn)，然后在網(wǎng)頁(yè)的開(kāi)始處建立主題導(dǎo)航，并為不同主題導(dǎo)航建立定位到相應(yīng)主題處的錨點(diǎn)鏈接。

1．創(chuàng)建錨點(diǎn)

（1）打開(kāi)要加入錨點(diǎn)的網(wǎng)頁(yè)。

（2）將光標(biāo)移到某一個(gè)主題內(nèi)容處。

（3）通過(guò)以下幾種方法打開(kāi)【命名錨記】對(duì)話框如圖3-7所示。

◎ 按快捷鍵【Ctrl+AIt+A】。

◎ 執(zhí)行菜單【插入】→【命名錨記】命令。

◎ 單擊【插入】→【常用】面板中的【命名錨記】按鈕 。

在【錨記名稱】選項(xiàng)中輸入錨記名稱，如“ZJ1”，然后單擊【確定】按鈕建立錨點(diǎn)標(biāo)記。

（4）根據(jù)需要重復(fù)步驟（1）～（3），在不同的主題內(nèi)容處建立不同的錨點(diǎn)標(biāo)記，如圖3-8所示。

2．建立錨點(diǎn)鏈接

（1）在網(wǎng)頁(yè)的開(kāi)始處，選擇鏈接對(duì)象，如某主題文字。

（2）通過(guò)以下幾種方法建立錨點(diǎn)鏈接。

◎ 在【屬性】面板的【鏈接】選項(xiàng)中直接輸入“#錨點(diǎn)名”，如“#ZJ2”。

◎ 在【屬性】面板中，用鼠標(biāo)拖動(dòng)【鏈接】選項(xiàng)右側(cè)的【指向文件】圖標(biāo) ，指向需要鏈接的錨點(diǎn)，如“ZJ2”錨點(diǎn)，如圖3-9所示。

◎ 在【文檔】窗口中，選中鏈接對(duì)象，按住【Shift】鍵的同時(shí)將鼠標(biāo)從鏈接對(duì)象拖向錨記。

（3）根據(jù)需要重復(fù)步驟（1）～（2），在網(wǎng)頁(yè)開(kāi)始處為不同的主題建立相應(yīng)的錨點(diǎn)鏈接。

3.4 圖像超鏈接

所謂圖像超鏈接就是以圖像作為鏈接對(duì)象。當(dāng)用戶單擊該圖像時(shí)打開(kāi)鏈接網(wǎng)頁(yè)或文檔。建立圖像超鏈接的操作步驟如下。

（1）在文檔窗口中選擇圖像。

（2）在【屬性】面板中，單擊【鏈接】選項(xiàng)右側(cè)的【瀏覽文件】按鈕 ，為圖像添加文檔相對(duì)路徑的鏈接，具體內(nèi)容參見(jiàn)3.2.1節(jié)。

（3）在【替代】選項(xiàng)中可輸入替代文字。設(shè)置替代文字后，當(dāng)圖片不能下載時(shí)，會(huì)在圖片的位置上顯示替代文字；當(dāng)瀏覽者將鼠標(biāo)指向圖像時(shí)也會(huì)顯示替代文字。

（4）按快捷鍵【F12】預(yù)覽網(wǎng)頁(yè)的效果。

3.5 熱區(qū)鏈接

前面介紹的圖片鏈接是指一張圖只能對(duì)應(yīng)一個(gè)鏈接，但有時(shí)需要在圖上創(chuàng)建多個(gè)鏈接去打開(kāi)不同的網(wǎng)頁(yè)，Dreamweaver為網(wǎng)站設(shè)計(jì)者提供的熱區(qū)鏈接功能，就能解決這個(gè)問(wèn)題。

創(chuàng)建熱區(qū)鏈接的具體操作步驟如下。

（1）選取一張圖片，在【屬性】面板的【地圖】選項(xiàng)下方選擇熱區(qū)創(chuàng)建工具，如圖3-10所示。

各工具的作用如下。

【指針熱點(diǎn)工具】 ：用于選擇不同的熱區(qū)。

【矩形熱點(diǎn)工具】 ：用于創(chuàng)建矩形熱區(qū)。

【圓形熱點(diǎn)工具】 ：用于創(chuàng)建圓形熱區(qū)。

【多邊形熱點(diǎn)工具】 ：用于創(chuàng)建多邊形熱區(qū)。

（2）利用【矩形熱點(diǎn)工具】、【圓形熱點(diǎn)工具】、【多邊形熱點(diǎn)工具】、【指針熱點(diǎn)工具】在圖片上建立相應(yīng)形狀的熱區(qū)。

將鼠標(biāo)放在圖片上，當(dāng)鼠標(biāo)光標(biāo)變?yōu)椤笆弊謺r(shí)，在圖片上拖曳出相應(yīng)形狀的藍(lán)色熱區(qū)。如果圖片上有多個(gè)熱區(qū)，可通過(guò)【指針熱點(diǎn)工具】 ，選擇不同的熱區(qū)，并通過(guò)熱區(qū)的控制點(diǎn)調(diào)整熱區(qū)的大小。例如，利用【矩形熱點(diǎn)工具】 ，在圖3-11上建立多個(gè)矩形鏈接熱區(qū)。

（3）此時(shí)，對(duì)應(yīng)的【屬性】面板如圖3-12所示。在【鏈接】選項(xiàng)的文本框中輸入要鏈接的網(wǎng)頁(yè)地址，在【替換】選項(xiàng)的文本框中輸入當(dāng)鼠標(biāo)指向熱區(qū)時(shí)所顯示的替換文字，詳細(xì)內(nèi)容參見(jiàn)3.2.1節(jié)。通過(guò)熱區(qū)，用戶可以在圖片的任何地方做一個(gè)鏈接。反復(fù)操作，就可以在一張圖片上劃分多個(gè)熱區(qū)，并為每一個(gè)熱區(qū)設(shè)置一個(gè)鏈接，從而實(shí)現(xiàn)在一張圖片上單擊鼠標(biāo)鏈接到不同頁(yè)面的效果。

（4）按快捷鍵【F12】預(yù)覽網(wǎng)頁(yè)，效果如圖3-13所示。

3.6 電子郵件超鏈接

網(wǎng)頁(yè)只能作為單向傳播的工具，將網(wǎng)站的信息傳送給瀏覽者，如果網(wǎng)站建立者想要接收使用者的反饋信息，最有效的方式就是讓瀏覽者給網(wǎng)站發(fā)送E-mail。在網(wǎng)頁(yè)制作中使用電子郵件超鏈接就可以實(shí)現(xiàn)。

當(dāng)瀏覽者單擊包含電子郵件超鏈接的網(wǎng)頁(yè)對(duì)象時(shí)，就會(huì)打開(kāi)郵件處理工具（如微軟的Outlook Express），并且將收信人地址自動(dòng)設(shè)置為網(wǎng)站建設(shè)者的郵箱地址，方便瀏覽者給網(wǎng)站發(fā)送反饋信息。

1．利用屬性面板建立電子郵件超鏈接

（1）在文檔窗口中選擇對(duì)象，一般是文字，如“請(qǐng)聯(lián)系我們”。

（2）在【鏈接】選項(xiàng)的文本框中輸入“mailto：地址”。例如，網(wǎng)站管理者的E-mail地址是wmaster@taste.net，則在【鏈接】選項(xiàng)的文本框中輸入“mailto:wmaster@taste.net”，如圖3-14所示。

2．利用電子郵件鏈接對(duì)話框建立電子郵件超鏈接

（1）在文檔窗口中選擇需要添加電子郵件鏈接的網(wǎng)頁(yè)對(duì)象。

（2）通過(guò)以下幾種方法打開(kāi)【電子郵件鏈接】對(duì)話框。

◎ 執(zhí)行菜單【插入】→【電子郵件鏈接】命令 。

◎ 單擊【插入】→【常用】面板中的【電子郵件鏈接】工具 。

在【文本】選項(xiàng)的文本框中輸入要在網(wǎng)頁(yè)中顯示的鏈接文字，并在【E-Mail】選項(xiàng)的文本框中輸入完整的郵箱地址，如圖3-15所示。

（3）單擊【確定】按鈕，完成電子郵件鏈接的創(chuàng)建。

3.7 下載文件鏈接

瀏覽網(wǎng)站的目的往往是查找并下載資料，下載文件可利用下載文件鏈接來(lái)實(shí)現(xiàn)。建立下載文件鏈接的步驟如同創(chuàng)建文字鏈接，區(qū)別在于所鏈接的文件不是網(wǎng)頁(yè)文件而是其他文件，如．exe、.Zip等文件。

建立下載文件鏈接的具體操作步驟如下。

（1）在文檔窗口中選擇需添加下載文件鏈接的網(wǎng)頁(yè)對(duì)象。

（2）在【鏈接】選項(xiàng)的文本框中指定鏈接文件，詳細(xì)內(nèi)容參見(jiàn)3.2.1節(jié)。

（3）按快捷鍵【F12】預(yù)覽網(wǎng)頁(yè)。

3.8 鼠標(biāo)經(jīng)過(guò)圖像鏈接

鼠標(biāo)經(jīng)過(guò)圖像是一種常用的互動(dòng)技術(shù)，當(dāng)鼠標(biāo)經(jīng)過(guò)圖像時(shí)，圖像會(huì)隨之發(fā)生變化。一般鼠標(biāo)經(jīng)過(guò)圖像效果由兩張大小相等的圖像組成，一張稱為主圖像，另一張稱為次圖像。主圖像是首次載入網(wǎng)頁(yè)時(shí)顯示的圖像，次圖像是當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)更換的另一張圖像。鼠標(biāo)經(jīng)過(guò)圖像經(jīng)常應(yīng)用于網(wǎng)頁(yè)中的按鈕上。

建立鼠標(biāo)經(jīng)過(guò)圖像的具體操作步驟如下。

（1）在文檔窗口中將光標(biāo)放置在需要添加圖像的位置。

（2）通過(guò)以下幾種方法打開(kāi)【插入鼠標(biāo)經(jīng)過(guò)圖像】對(duì)話框，如圖3-16所示。

◎ 執(zhí)行菜單【插入】→【圖像對(duì)象】→【鼠標(biāo)經(jīng)過(guò)圖像】命令。

◎ 在【插入】→【常用】面板中，單擊【圖像】展開(kāi)式工具按鈕 ，選擇【鼠標(biāo)經(jīng)過(guò)圖像】選項(xiàng) 。

【插入鼠標(biāo)經(jīng)過(guò)圖像】對(duì)話框中各選項(xiàng)的作用如下。

【圖像名稱】選項(xiàng)：設(shè)置鼠標(biāo)經(jīng)過(guò)圖像對(duì)象時(shí)的名稱。

【原始圖像】選項(xiàng)：設(shè)置載入網(wǎng)頁(yè)時(shí)顯示的圖像文件的路徑。

【鼠標(biāo)經(jīng)過(guò)圖像】選項(xiàng)：設(shè)置在鼠標(biāo)指針滑過(guò)原始圖像時(shí)顯示的圖像文件的路徑。

【預(yù)載鼠標(biāo)經(jīng)過(guò)圖像】選項(xiàng)：若希望圖像預(yù)先載入瀏覽器的緩存中，以便用戶將鼠標(biāo)指針滑過(guò)圖像時(shí)不發(fā)生延遲，則勾選此復(fù)選框。

【替換文本】選項(xiàng)：設(shè)置替換文本的內(nèi)容。設(shè)置后，在瀏覽器中當(dāng)圖片不能下載時(shí)，會(huì)在圖片位置上顯示替代文字；當(dāng)瀏覽者將鼠標(biāo)指向圖像時(shí)會(huì)顯示替代文字。

【按下時(shí)，前往的 URL】選項(xiàng)：設(shè)置跳轉(zhuǎn)網(wǎng)頁(yè)文件的路徑，當(dāng)瀏覽者單擊圖像時(shí)打開(kāi)此網(wǎng)頁(yè)。

（3）在對(duì)話框中按照需要設(shè)置選項(xiàng)，然后單擊【確定】按鈕完成設(shè)置，按快捷鍵【F12】預(yù)覽網(wǎng)頁(yè)。

3.9 添加文本鏈接

案例效果：Ch03\效果\文本鏈接和錨記鏈接\ index.htm。

制作要點(diǎn)：通過(guò)頁(yè)面屬性對(duì)話框改變鏈接文字的顏色，使用錨記鏈接文本。

01 按快捷鍵【Ctrl+O】，打開(kāi)光盤中的“Ch03\素材\文本鏈接和錨記鏈接\index.htm”文件，如圖3-17所示。在左側(cè)的目錄表格中選中文字“鮮嫩珍珠雞腿肉”，如圖3-18所示。

02執(zhí)行菜單【修改】→【頁(yè)面屬性】命令，彈出【頁(yè)面屬性】對(duì)話框，如圖3-19所示。選擇【分類】選項(xiàng)框中的【鏈接】選項(xiàng)，將【鏈接顏色】選項(xiàng)設(shè)置為“黑色（#000000）”, 【變換圖像鏈接】選項(xiàng)設(shè)置為“綠色（#99C C33）”, 【已訪問(wèn)鏈接】選項(xiàng)設(shè)置為“黑色（#000000）”,【活動(dòng)鏈接】選項(xiàng)設(shè)置為“藍(lán)色（#66FFFF）”，在【下劃線樣式】選項(xiàng)的下拉列表中選擇【始終無(wú)下劃線】，單擊【確定】按鈕，完成設(shè)置。

03 保持文字的選取狀態(tài)，在【屬性】面板【鏈接】選項(xiàng)的文本框中輸入"#a"，按【Enter】鍵，如圖3-20所示。

04將鼠標(biāo)光標(biāo)置入到文檔“鮮嫩珍珠雞腿肉”之前，如圖3-21所示。單擊【插入】→【常用】面板中的【命名錨記】按鈕 ，彈出【命名錨記】對(duì)話框，如圖3-22所示。在【錨記名稱】選項(xiàng)中輸入“a”，單擊【確定】按鈕，效果如圖3-23所示。

05使用相同的方法，為其他文字制作錨記鏈接。

06保存并預(yù)覽網(wǎng)頁(yè)，單擊鏈接文字，如圖3-24所示，頁(yè)面會(huì)自動(dòng)跳轉(zhuǎn)到鏈接文字所鏈接的段落上，如圖3-25所示。

3.10 添加圖像鏈接

案例效果：Ch03\效果\圖像鏈接\index.htm。

制作要點(diǎn)：通過(guò)屬性面板中的瀏覽文件按鈕為圖像加入鏈接。

01按快捷鍵【Ctrl+O】，打開(kāi)光盤中的“Ch03\素材\圖像鏈接\index.htm”文件，如圖3-26所示。選擇需要鏈接的圖片，如圖3-27所示。

02在【屬性】面板中單擊【鏈接】選項(xiàng)右側(cè)的【瀏覽文件】按鈕 ，彈出【選擇文件】對(duì)話框，如圖3-28所示。在光盤目錄下的“Ch03\素材\圖像鏈接\image”文件夾中選擇圖片“11s.jpg”，單擊【確定】按鈕，完成鏈接設(shè)置，【屬性】面板如圖3-29所示。

03保存并預(yù)覽網(wǎng)頁(yè)，單擊鏈接圖片，如圖3-30所示，彈出鏈接窗口，如圖3-31所示。

3.11 添加電子郵件超鏈接

案例效果：Ch03\效果\電子郵件鏈接\index.htm。

制作要點(diǎn)：使用電子郵件鏈接按鈕為文字加入郵件鏈接。

01按快捷鍵【Ctrl+O】，打開(kāi)光盤中的“Ch03\素材\電子郵件鏈接\index.htm”文件，如圖3-32所示。在文檔窗口中選中需要添加郵件鏈接的文字，如圖3-33所示。

02 單擊【插入】→【常用】面板中的【電子郵件鏈接】按鈕 ，彈出【電子郵件鏈接】對(duì)話框，如圖3-34所示。在【E-Mail】對(duì)話框中輸入完整的郵箱地址，單擊【確定】按鈕，電子郵件鏈接設(shè)置完成。

03 保存并預(yù)覽網(wǎng)頁(yè)，單擊鏈接文字，如圖3-35所示，彈出電子郵件的鏈接頁(yè)面，如圖3-36所示。

3.12 添加下載文件鏈接

案例效果：Ch03\效果\下載文件鏈接\index.htm。

制作要點(diǎn)：應(yīng)用鏈接命令為網(wǎng)站下載文件加入鏈接。

01按快捷鍵【Ctrl+O】，打開(kāi)光盤中的“Ch03\素材\下載文件鏈接\index.htm”文件，如圖3-37所示。

02在頁(yè)面的左下方選中文字“瑞星下載”，如圖3-38所示。在【屬性】面板中單擊【鏈接】選項(xiàng)右側(cè)的【瀏覽文件】按鈕 ，彈出【選擇文件】對(duì)話框，如圖3-39所示。在光盤目錄下的“Ch03\素材\下載文件鏈接\image”文件夾中選擇圖片“瑞星下載”，單擊【確定】按鈕，為文字添加鏈接。

03 按快捷鍵【F12】預(yù)覽網(wǎng)頁(yè)，單擊文字“瑞星下載”，彈出【文件下載】對(duì)話框，如圖3-40所示，單擊【保存】按鈕，將下載的文件保存到本地計(jì)算機(jī)中。

3.13 插入輪換圖像

案例效果：Ch03\效果\輪換圖像\index.htm。

制作要點(diǎn)：使用鼠標(biāo)經(jīng)過(guò)圖像按鈕制作輪換圖像效果。

01按快捷鍵【Ctrl+O】，打開(kāi)光盤中的“Ch03\素材\輪換圖像\index.htm”文件，如圖3-41所示。

02 將鼠標(biāo)光標(biāo)置入到右下方的空白單元格中，如圖3-42所示。

03在【插入】→【常用】面板中，單擊【圖像】展開(kāi)式工具按鈕 ，選擇【鼠標(biāo)經(jīng)過(guò)圖像】按鈕 ，彈出【插入鼠標(biāo)經(jīng)過(guò)圖像】對(duì)話框，如圖3-43所示。單擊【原始圖像】選項(xiàng)右側(cè)的【瀏覽】按鈕，彈出【Original Image】對(duì)話框，選擇光盤目錄下“Ch03\素材\輪換圖像\image”文件夾中的“01.jpg”，單擊【確定】按鈕，完成設(shè)置。使用相同的方法，設(shè)置【鼠標(biāo)經(jīng)過(guò)圖像】選項(xiàng)的連接圖像“02.jpg”，單擊【確定】按鈕，完成設(shè)置，效果如圖3-44所示。

04 按快捷鍵【F12】預(yù)覽輪換圖像，效果如圖3-45所示。當(dāng)鼠標(biāo)經(jīng)過(guò)圖片上方時(shí)，圖片切換為另一幅圖片，效果如圖3-46所示。

小結(jié)