超級鏈接使用

第5章超級鏈接的使用本章學習目標

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

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

5.1.1超級鏈接的作用及類型

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

1、

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

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

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

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

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

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

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

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

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

默認為“文擋”完成上述步驟，屬性面板相應各項設置如圖5-1-5所示。

鏈接目標文件

方法二：將鼠標光標定位于頁面中的文字“關于本站”后，選擇主菜單“【插入】→【超級鏈接】”，彈出“超級鏈接”對話框，輸入相應內容，如圖5-1-6所示。

在“超級鏈接”對話框中，設置以下選項：

文本：顯示在頁面中的文字。

鏈接：所要鏈接的目標文檔。

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

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

“指向文件”圖標

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1、實例創(chuàng)意

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

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

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

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

5.2編輯鏈接效果

5.2.1實例：自定義鏈接顏色

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

1、實例創(chuàng)意

自定義簡單的鏈接顏色。2、制作步驟

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

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

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

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

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

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

1、實例創(chuàng)意

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

2、制作步驟

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

單擊“設計”面板中“新建CSS樣式”的圖標，彈出“新建CSS樣式”對話框，如圖5-2-6所示。

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

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

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

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

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

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

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

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