超級(jí)鏈接使用

第5章超級(jí)鏈接的使用本章學(xué)習(xí)目標(biāo)

掌握超級(jí)鏈接的作用及類型掌握文本和圖片鏈接的創(chuàng)建方法掌握Email、錨點(diǎn)鏈接的創(chuàng)建方法掌握熱區(qū)鏈接的創(chuàng)建方法

掌握鏈接效果的編輯方法5.1創(chuàng)建超級(jí)鏈接

5.1.1超級(jí)鏈接的作用及類型

超鏈接是文檔與文檔之間的鏈接，當(dāng)單擊它時(shí)，超鏈接可指向另外一個(gè)頁(yè)面或文件。鏈接目標(biāo)通常是另外一個(gè)網(wǎng)頁(yè)，但也可以是一幅圖片、一個(gè)電子郵件地址或其他文檔。在瀏覽器中，超鏈接通常以帶下劃線的文本以及特定的顏色區(qū)別于網(wǎng)頁(yè)內(nèi)的其他內(nèi)容，當(dāng)鼠標(biāo)指向它的時(shí)候，會(huì)變成手形，單擊即可打開超鏈接。有三種類型的鏈接路徑：

1、

絕對(duì)地址絕對(duì)路徑由http://、ftp://等開始的，它不僅提供所鏈接文檔的完整URL，而且包括所使用的協(xié)議（如對(duì)于Web服務(wù)為http://，F(xiàn)TP服務(wù)為ftp://）。注意：盡管對(duì)本地鏈接（即到同一站點(diǎn)內(nèi)文檔的鏈接）也可使用絕對(duì)路徑鏈接，但不建議采用這種方式，因?yàn)橐坏⒋苏军c(diǎn)移動(dòng)到其它服務(wù)器，則所有本地絕對(duì)路徑鏈接都將斷開。對(duì)本地鏈接使用相對(duì)路徑還能在需要在站點(diǎn)內(nèi)移動(dòng)文件時(shí)，提供更大的靈活性。

2、相對(duì)地址相對(duì)地址是由文件名及其擴(kuò)展名組成的，并且假設(shè)URL指向位于同一臺(tái)WEB服務(wù)器上的文件。例如，假設(shè)一個(gè)站點(diǎn)的結(jié)構(gòu)如圖5-1-1所示：創(chuàng)建從booklist1.htm到其它文件的鏈接，如下所示(1)要從booklist1.htm鏈接到booklist2.htm（兩個(gè)文件在同一文件夾中），文件名就是相對(duì)路徑：booklist2.htm或./booklist2.htm。其中./表示在同一文件夾中。

(2)若要鏈接到book1.htm（在名為book1的子文件夾中），可使用相對(duì)路徑book1/book1.htm。每個(gè)正斜杠(/)表示在文件夾層次結(jié)構(gòu)中下移一級(jí)。

(3)若要鏈接到index.html（在父文件夾中，booklist1.htm向上一級(jí)），可使用相對(duì)路徑../index.htm。每個(gè)../表示在文件夾層次結(jié)構(gòu)中上移一級(jí)。

(4)若要鏈接到picture1.htm（在父文件夾的其它子文件夾中），可使用相對(duì)路徑../mypictures/picture1.htm。其中../向上移至父文件夾；mypictures/向下移至mypictures子文件夾中。

3、站點(diǎn)根目錄相對(duì)路徑站點(diǎn)根目錄相對(duì)路徑以一個(gè)正斜杠(/)開始，該正斜杠表示站點(diǎn)根文件夾。例如，/mybooks/booklist1.htm是文件(booklist1.htm)的站點(diǎn)根目錄相對(duì)路徑，該文件位于站點(diǎn)根文件夾的mybooks子文件夾中。在某些Web站點(diǎn)中，需要經(jīng)常在不同文件夾之間移動(dòng)HTML文件，在這種情況下，站點(diǎn)根目錄相對(duì)路徑通常是指定鏈接的最佳方法。移動(dòng)含有根目錄相對(duì)鏈接的文檔時(shí)，不需要更改這些鏈接。在一個(gè)文檔中可以創(chuàng)建幾種類型的鏈接：鏈接到其它文檔或文件（如圖形、影片、PDF或聲音文件）的鏈接。命名錨記鏈接，此類鏈接跳轉(zhuǎn)至文檔內(nèi)的特定位置。電子郵件鏈接，此類鏈接新建一個(gè)收件人地址已經(jīng)填好的空白電子郵件?？真溄雍湍_本鏈接，此類鏈接使您能夠在對(duì)象上附加行為，或者創(chuàng)建執(zhí)行JavaScript代碼的鏈接。注意：創(chuàng)建鏈接之前，一定要清楚文檔相對(duì)路徑、站點(diǎn)根目錄相對(duì)路徑以及絕對(duì)路徑的工作方式。

5.1.2實(shí)例：創(chuàng)建超級(jí)鏈接1、實(shí)例創(chuàng)意

下面以實(shí)例制作一個(gè)簡(jiǎn)單網(wǎng)頁(yè)，實(shí)例中只用到簡(jiǎn)單的幾個(gè)頁(yè)面元素，主要有表格、文本和圖片。各個(gè)文件的文件名及位置如圖5-1-2如示。2．制作步驟（1）定義本書素材source目錄下的文件夾5-1-2為本地站點(diǎn)目錄。（2）創(chuàng)建鏈接創(chuàng)建超級(jí)鏈接有多種方法，本節(jié)將分別介紹幾種不同方式來完成超級(jí)鏈接的創(chuàng)建。多數(shù)情況下，創(chuàng)建鏈接在【屬性】面板中完成，也可以通過主菜單“【插入】→【超級(jí)鏈接】”來完成。打開根目錄下的index.htm文件并選擇“【窗口】→【屬性】”菜單命令，打開【屬性】面板，如圖5-1-3所示。

方法一：選擇頁(yè)面上方文字“語(yǔ)言學(xué)習(xí)”，然后單擊屬性面板上“鏈接”文本框右側(cè)的文件夾圖標(biāo)，彈出“選擇文件”對(duì)話框，選擇“l(fā)earnlanguage.htm”文件，在對(duì)話框“相對(duì)于”中選擇“文檔”，單擊“確定”按鈕關(guān)閉對(duì)話框，如圖5-1-4所示。

默認(rèn)為“文擋”完成上述步驟，屬性面板相應(yīng)各項(xiàng)設(shè)置如圖5-1-5所示。

鏈接目標(biāo)文件

方法二：將鼠標(biāo)光標(biāo)定位于頁(yè)面中的文字“關(guān)于本站”后，選擇主菜單“【插入】→【超級(jí)鏈接】”，彈出“超級(jí)鏈接”對(duì)話框，輸入相應(yīng)內(nèi)容，如圖5-1-6所示。

在“超級(jí)鏈接”對(duì)話框中，設(shè)置以下選項(xiàng)：

文本：顯示在頁(yè)面中的文字。

鏈接：所要鏈接的目標(biāo)文檔。

目標(biāo)：為打開的窗口類型（詳見本例最后一段）。

標(biāo)題：為鼠標(biāo)置于鏈接文字上方時(shí)所出現(xiàn)的提示。效果如圖5-1-7所示。方法三：打開屬性面板，選擇“鏈接(L)”右邊的“指向文件”圖標(biāo)“”，拖動(dòng)該圖標(biāo)至站點(diǎn)目錄下的“l(fā)earnlanguage.htm”文件，即可自動(dòng)生成鏈接。如圖5-1-8所示。

“指向文件”圖標(biāo)

如果同時(shí)打開兩個(gè)或以上編輯窗口，則只需將“指向文件”圖標(biāo)直接拖動(dòng)至目標(biāo)窗口的任意位置即可自動(dòng)生成鏈接。如圖5-1-9所示?！爸赶蛭募眻D標(biāo)指向目標(biāo)窗口任意位置方法四：打開屬性面板，在“鏈接(L)”

直接輸入鏈接地址，如要鏈接到站點(diǎn)內(nèi)的其他文檔，輸入目標(biāo)文件的具體路徑與文件名；要鏈接到站點(diǎn)以外的文檔，則輸入完整URL，而且包括所使用的協(xié)議。例如，選中“index.htm”文檔中的“l(fā)ogo.gif”圖片，打開屬性面板，在“鏈接(L)”直接輸入/index.asp，即可自動(dòng)生成目標(biāo)指向網(wǎng)站下的index.asp文檔的鏈接。如圖5-1-10所示。直接輸入/index.asp

在默認(rèn)情況下，被鏈接的文件在當(dāng)前窗口或框架內(nèi)打開。要使被鏈接的文檔顯示在其他窗口或新的窗口或框架內(nèi)，則需設(shè)置屬性面板中的“目標(biāo)(R)”選項(xiàng)，如圖5-1-11所示。目標(biāo)選項(xiàng)“目標(biāo)(R)”的各選項(xiàng)設(shè)置如下：

_blank。將鏈接的文檔在一個(gè)新的、未命名的瀏覽器窗口中打開。

_parent。將鏈接的文檔在該鏈接所在框架的父框架或父窗口中打開。如果包含鏈接的框架不是嵌套框架，則所鏈接的文檔在整個(gè)瀏覽器窗口中打開。

_self。將鏈接的文檔在鏈接所在的同一框架或窗口中打開，此目標(biāo)為默認(rèn)值，即不指定目標(biāo)，則在同一框架或窗口打開文檔。

_top。將鏈接的文檔在整個(gè)瀏覽器窗口中打開，從而取代當(dāng)前窗口的所有框架。l

5.1.3實(shí)例：創(chuàng)建電子郵件鏈接1、

實(shí)例創(chuàng)意電子郵件鏈接在網(wǎng)頁(yè)中也經(jīng)?？梢?，在網(wǎng)頁(yè)中添加電子郵件的目的在于可以使網(wǎng)頁(yè)的瀏覽者方便發(fā)送郵件，點(diǎn)擊電子郵件鏈接即可自動(dòng)打開MicrosoftOutlookExpress，并自動(dòng)創(chuàng)建新郵件，在“收件人”欄自動(dòng)添加電子郵件地址等。2、制作步驟（1）定義本書素材source目錄下的文件夾5-1-3為本地站點(diǎn)目錄。打開根目錄下的about.htm文件，選擇“【窗口】→【屬性】”菜單命令，打開屬性面板，如圖5-1-12所示。（2）創(chuàng)建電子郵件鏈接在大多數(shù)情況下，創(chuàng)建電子郵件鏈接在屬性面板中完成，也可以通過主菜單“【插入】→【電子郵件鏈接(L)】”來完成。我們分別以幾種不同方式來完成電子郵件鏈接的創(chuàng)建。方法一：選中所要?jiǎng)?chuàng)建電子郵件的文本“echo@”，屬性面板的“鏈接(L)”輸入mailto:echo@即可，如圖5-1-13所示。

直接輸入mailto:echo@方法二：將鼠標(biāo)光標(biāo)定位于頁(yè)面中要顯示電子郵件的地方，選擇主菜單“【插入】→【電子郵件鏈接(L)】”，彈出“電子郵件鏈接”對(duì)話框，輸入相應(yīng)內(nèi)容后單擊“確定”按鈕，如圖5-1-14所示?！半娮余]件鏈接”對(duì)話框中，設(shè)置以下選項(xiàng)：文本。顯示在頁(yè)面中的文字，可以為Email地址或其它文字。E-mail。郵件地址。5.1.4實(shí)例：創(chuàng)建錨點(diǎn)鏈接

1、實(shí)例創(chuàng)意錨點(diǎn)即為一個(gè)文檔中的某一個(gè)特定的位置的標(biāo)記，通過首先創(chuàng)建錨點(diǎn)，可使某個(gè)超級(jí)鏈接鏈接到文檔的某個(gè)錨點(diǎn)，方便文檔之間的跳轉(zhuǎn)。錨點(diǎn)通常放在文檔的特定主題處或頂部。然后可以創(chuàng)建到這些錨點(diǎn)的鏈接，這些鏈接可快速將訪問者帶到指定位置。創(chuàng)建到錨點(diǎn)的鏈接的過程分為兩步。首先，創(chuàng)建錨點(diǎn)，然后創(chuàng)建到該錨點(diǎn)的鏈接。2、制作步驟

（1）定義本書素材source目錄下的文件夾5-1-4為本地站點(diǎn)目錄。打開根目錄下的traandwri.htm文件，選擇“【窗口】→【屬性】”菜單命令，打開屬性面板。如圖5-1-15所示（2）創(chuàng)建錨點(diǎn)將鼠標(biāo)光標(biāo)定位于頁(yè)面中標(biāo)題“翻譯與寫作”文字之后，選擇主菜單“【插入】→【命名錨記(N)】”，彈出“命名錨記”對(duì)話框，輸入“命名錨記返回頂部”文字后單擊“確定”按鈕，如圖5-1-16所示。

創(chuàng)建錨點(diǎn)后，在錨點(diǎn)的插入處出現(xiàn)一個(gè)錨點(diǎn)標(biāo)記，如圖5-1-17所示。錨點(diǎn)標(biāo)記注意：命名錨記名稱只能包含字母和數(shù)字并且不能以數(shù)字開頭。（3）創(chuàng)建到錨點(diǎn)的鏈接1）選中所打開的文檔中的“返回頂部”文字；

2）拖動(dòng)屬性面板中“鏈接(L)”右邊的“指向文件”圖標(biāo)“”至所創(chuàng)建的錨點(diǎn)標(biāo)記即完成創(chuàng)建到該錨點(diǎn)的鏈接。如圖5-1-18所示?！爸赶蛭募眻D標(biāo)錨點(diǎn)標(biāo)記時(shí)，在“鏈接”處會(huì)出現(xiàn)該錨的名稱。注意：1.創(chuàng)建到錨點(diǎn)的鏈接，會(huì)在錨點(diǎn)名稱前加一個(gè)“＃”號(hào)，表示后面為一個(gè)錨點(diǎn)的名稱。2.若要?jiǎng)?chuàng)建到其他文檔的錨點(diǎn)，只要在文檔名后加“＃錨點(diǎn)名稱”即可。如要鏈接到abount.htm文檔中一個(gè)名為aboutme的錨點(diǎn)，只需在鏈接中輸入“about.htm#aboutme”即可。如圖5-1-19所示。3.選中打開的文檔中文本或圖像，并拖動(dòng)到所要鏈接的錨點(diǎn)，也同樣可以創(chuàng)建到錨點(diǎn)的鏈接。

直接輸入：about.htm#aboutme5.1.5實(shí)例：創(chuàng)建熱區(qū)鏈接

1、實(shí)例創(chuàng)意

一張圖片內(nèi)可以創(chuàng)建包含多個(gè)鏈接，圖像內(nèi)不同的區(qū)域或文字都可以指向具體鏈接目標(biāo)。圖像圖內(nèi)創(chuàng)建鏈接的區(qū)域稱為“熱區(qū)”，熱區(qū)與鏈接目標(biāo)逐一對(duì)應(yīng)，單擊熱區(qū)后，即可對(duì)鏈接目標(biāo)進(jìn)行跟蹤、訪問。熱區(qū)的形狀有三種：矩形、圓形與多邊形，在DreamweaverMX2004的“設(shè)計(jì)視圖”模式下，這些熱區(qū)是可見的，但在WEB瀏覽內(nèi)這些邊框卻是不可見的，因此有必要在圖像地圖內(nèi)添加一些文本標(biāo)識(shí)，為瀏覽者了解熱點(diǎn)的確切位置提供幫助。2、制作步驟

1）定義本書素材source目錄下的文件夾5-1-5為本地站點(diǎn)目錄。打開根目錄下的map.htm文件，選擇“【窗口】→【屬性】”菜單命令，打開屬性面板。如圖5-1-20所示。

選中文檔中的圖片，屬性面板出現(xiàn)相應(yīng)的各項(xiàng)設(shè)置。如圖5-1-21所示。

選擇“屬性”面板中“地圖（M）”下圖標(biāo)中的某一形狀，按住鼠標(biāo)左鍵在圖片中相應(yīng)位置拖動(dòng)即可建立一個(gè)矩形的“熱區(qū)”，在默認(rèn)情況下，剛創(chuàng)建的熱區(qū)的“鏈接(L)”為“＃”，需要手動(dòng)設(shè)置鏈接的目標(biāo)網(wǎng)址，同時(shí)也可設(shè)置“目標(biāo)(R)”及“替代（T）”。如圖5-1-22所示。在“屬性”面板中，設(shè)置以下選項(xiàng)：鏈接：鏈接的目標(biāo)地址。目標(biāo)：鏈接打開的窗口設(shè)置：_blank、_parent、_self、_top。替代：當(dāng)圖片無法顯示時(shí)，在圖片的位置用文字代替顯示。創(chuàng)建熱區(qū)鏈接后，在瀏覽器中打開map.htm文檔預(yù)覽其效果，如圖5-1-23所示。

5.2編輯鏈接效果

5.2.1實(shí)例：自定義鏈接顏色

鏈接顏色可分為三種狀態(tài)：鏈接顏色（Link）、訪問過的鏈接顏色（Visited）、活動(dòng)鏈接顏色（Active），通過CSS設(shè)置，鏈接還有第四種狀態(tài)，即指向鏈接時(shí)的動(dòng)態(tài)顏色（Hover），默認(rèn)的文字鏈接樣式都是帶下劃線的效果。在DreamweaverMX2004中允許用戶自定義鏈接的顏色（如果通過CSS的設(shè)置還可以編輯各種鏈接的樣式）。

1、實(shí)例創(chuàng)意

自定義簡(jiǎn)單的鏈接顏色。2、制作步驟

（1）定義本書素材source目錄下的文件夾5-2-1為本地站點(diǎn)目錄。（2）創(chuàng)建鏈接自定義鏈接顏色可以通過主菜單“【修改（M）】→【頁(yè)面屬性(P)…】”來完成。

打開根目錄下的linkcolor.htm文件并選擇主菜單“【修改（M）】→【頁(yè)面屬性(P)…】”打開“頁(yè)面屬性”對(duì)話框。如圖5-2-1所示。

在“頁(yè)面屬性”對(duì)話框中，通過顏色拾取器或直接輸入各顏色代碼。如圖5-2-2所示。

創(chuàng)建熱區(qū)鏈接后，在瀏覽器中打開linkcolor.htm文檔預(yù)覽其效果，如圖5-2-3所示。

5.2.2實(shí)例：同一網(wǎng)頁(yè)中設(shè)置二種不同的鏈接

默認(rèn)的文字鏈接樣式都是帶下劃線的效果，通過對(duì)CSS樣式的重新編輯，可以設(shè)計(jì)出多彩的文字鏈接效果。對(duì)鏈接樣式的設(shè)計(jì)通過DreamweaverMX2004的樣式編輯器完成。

1、實(shí)例創(chuàng)意

完成在同一網(wǎng)頁(yè)中設(shè)計(jì)二種不同的鏈接樣式，如圖5-2-4所示。

2、制作步驟

（1）定義本書素材source目錄下的文件夾5-2-2為本地站點(diǎn)目錄。（2）自定義鏈接顏色打開根目錄下的2linkcolor.htm文件，選擇主菜單“【窗口(W)】→【CSS樣式(Y)…】”，出現(xiàn)“設(shè)計(jì)”面板。如圖5-2-5所示

單擊“設(shè)計(jì)”面板中“新建CSS樣式”的圖標(biāo)，彈出“新建CSS樣式”對(duì)話框，如圖5-2-6所示。

選擇“選擇器類型”中的“高級(jí)（ID、上下文選擇器等）（A）”，并在“選擇器”中選擇“a:link”，在“定義在”選擇“僅對(duì)該文檔”，單擊“確定”按鈕，彈出“a:link的CSS樣式定義”對(duì)話框，在“分類”中選擇“類型”后，在”顏色(C)”中輸入“#FF0000”。單擊“確定”按鈕退出對(duì)話框。如圖5-2-7所示。選擇“類型”輸入顏色：#FF0000

同樣，單擊“設(shè)計(jì)”面板中“新建CSS樣式”的圖標(biāo)，彈出“新建CSS樣式”對(duì)話框。選擇“選擇器類型”中的“高級(jí)（ID、上下文選擇器等）（A）”，并在“選擇器”選擇“a:visited”，單擊“確定”按鈕，彈出“a:visited的CSS樣式定義”對(duì)話框，在“分類”中選擇“類型”，在”顏色(C)”中輸入“#00FF00”。單擊“確定”按鈕退出對(duì)話框。單擊“設(shè)計(jì)”面板中“新建CSS樣式”的圖標(biāo)，彈出“新建CSS樣式”對(duì)話框。選擇“選擇器類型”中的“高級(jí)（ID、上下文選擇器等）（A）”，并在選擇器中選擇“a:hover”，單擊“確定”按鈕，彈出“a:hover的CSS樣式定義”對(duì)話框，在“分類”中選擇“類型”，在”顏色(C)”中輸入“#0000FF”。單擊“確定”按鈕退出對(duì)話框。

單擊“設(shè)計(jì)”面板中“新建CSS樣式”的圖標(biāo)，彈出“新建CSS樣式”對(duì)話框。選擇“選擇器類型”中的“高級(jí)（ID、上下文選擇器等）（A）”，并在選擇器中選擇“a:active”，單擊“確定”按鈕，彈出“a:active的CSS樣式定義”對(duì)話框，在“分類”中選擇“類型”，在”顏色(C)”中輸入“#FFFF00”。單擊“確定”按鈕退出對(duì)話框。此時(shí)，已自定義超級(jí)鏈接的所有狀態(tài)顏色：超級(jí)鏈接顯示為紅色（#FF0000），訪問過的超級(jí)鏈接顯示為綠色（#00FF00），指向超級(jí)鏈接顯示為藍(lán)色（#0000FF），活動(dòng)超級(jí)鏈接為黃色（#FFFF00）。

凡是頁(yè)面中的所有超級(jí)鏈接均按以上自定義的幾種顏色顯示。如圖5-2-8所示。

通過CSS的設(shè)置，在頁(yè)面還可以再定義不同的超級(jí)鏈接顏色。單擊“設(shè)計(jì)”面板中“新建CSS樣式”的圖標(biāo)，彈出“新建CSS樣式”對(duì)話框。選擇“選擇器類型”中的“高級(jí)（ID、上下文選擇器等）（A）”，并在選擇器中輸入“a.dbline:link”，單擊“確定”按鈕，彈出“a.dbline:link的CSS樣式定義”對(duì)話框，在“分類”中選擇“類型”，在”顏色(C)”中輸入“#FF00FF”，在“裝飾”中選擇“無（N）”。單擊“確定”按鈕退出對(duì)話框。如圖5-2-9所示。

單擊“設(shè)計(jì)”面板中“新建CSS樣式”的圖標(biāo)，彈出“新建CSS樣式”對(duì)話框。選擇“選擇器類型”中的“高級(jí)（ID、上下文選擇器等）（A）”，并在選擇器中輸入“a.dbline:visited”，單擊“確定”按鈕，彈出“a.dbline:visited的CSS樣式定義”對(duì)話框，在“分類”中選擇“類型”，在“顏色(C)”中輸入“#FFFF00”，在“裝飾”中選擇“無（N）”。單擊“確定”按鈕退出對(duì)話框。

單擊“設(shè)計(jì)”面板中“新建CSS樣式”的圖標(biāo)，彈出“新建CSS樣式”對(duì)話框。選擇“選擇器類型”中的“高級(jí)（ID、上下文選擇器等）（A）”，并在選擇器中輸入“a.dbline:active”，單擊“確定”按鈕，彈出“a.dbline:active的CSS樣式定義”對(duì)話框，在“分類”中選擇“類型”，在”顏色(C)”中輸入“##FFFF00”，在“裝飾”中選擇“無（N）”。單擊“確定”按鈕退出對(duì)話框。

單擊“設(shè)計(jì)”面板中“新建CSS樣式”的圖標(biāo)，彈出“新建CSS樣式”對(duì)話框。選擇“選擇器類型”中的“使高級(jí)（ID、上下文選擇器等）（A）”，并在選擇器中輸入“a.dbline:hover”，單擊“確定”按鈕，彈出“a.dbline:hover的CSS樣式定義”對(duì)話框，在“分類”中選擇“類型”，在”顏色(C)”中輸入“#FF6600”，在“裝飾”中選擇“下劃線（U）”、“上劃線（O）”。單擊“確定”按鈕退出對(duì)話框。如圖5-2-10所示