網(wǎng)頁制作Dreamweaver CS4 - 4、創(chuàng)建超級鏈接

第4講創(chuàng)建超級鏈接教學(xué)目標(biāo)4.1設(shè)置普通超級鏈接4.1.1功能講解4.1.2范例解析──設(shè)置“度假勝地”網(wǎng)頁中的超級鏈接4.1.3課堂實訓(xùn)——設(shè)置“黃山四絕”網(wǎng)頁中的超級鏈接4.2設(shè)置特殊超級鏈接4.2.1功能講解4.2.2范例解析——設(shè)置導(dǎo)航條4.2.3課堂實訓(xùn)——設(shè)置鼠標(biāo)經(jīng)過圖像4.3綜合案例──設(shè)置“宇宙速度”網(wǎng)頁中的超級鏈接教學(xué)目標(biāo)掌握設(shè)置文本和圖像超級鏈接的方法。掌握創(chuàng)建圖像熱點超級鏈接的方法。掌握設(shè)置下載超級鏈接和空鏈接的方法。掌握設(shè)置電子郵件超級鏈接和錨記超級鏈接的方法。掌握創(chuàng)建鼠標(biāo)經(jīng)過圖像和導(dǎo)航條的方法。掌握創(chuàng)建Flash文本和Flash按鈕的方法。掌握創(chuàng)建腳本鏈接的方法。返回目錄4.1設(shè)置普通超級鏈接4.1.1功能講解4.1.2范例解析──設(shè)置“度假勝地”網(wǎng)頁中的超級鏈接4.1.3課堂實訓(xùn)——設(shè)置“黃山四絕”網(wǎng)頁中的超級鏈接返回目錄4.1.1功能講解瀏覽網(wǎng)頁時，單擊網(wǎng)頁內(nèi)的某段文本或圖像，即可打開或轉(zhuǎn)到一個新的頁面，這就是超級鏈接。超級鏈接由網(wǎng)頁上的文本、圖像等元素，賦予了可以連接到其他網(wǎng)頁的Web地址而形成，讓網(wǎng)頁之間形成一種互相關(guān)聯(lián)的關(guān)系。下面介紹比較常用的超級鏈接，如文本超級鏈接、圖像超級鏈接、圖像熱點超級鏈接、下載超級鏈接、空鏈接、電子郵件超級鏈接、錨記超級鏈接等。返回目錄一、文本超級鏈接通過HTML【屬性】面板創(chuàng)建超級鏈接。通過【超級鏈接】對話框創(chuàng)建超級鏈接。設(shè)置文本超級鏈接的狀態(tài)。返回目錄（1）通過HTML【屬性】面板創(chuàng)建超級鏈接

方法是，先選中文本，然后在HTML【屬性】面板的【鏈接】列表框中輸入鏈接目標(biāo)地址，如果是同一站點內(nèi)的文件，也可以單擊列表框后面的按鈕，在彈出的【選擇文件】對話框中選擇目標(biāo)文件，或者直接將HTML【屬性】面板【鏈接】文本框右側(cè)的圖標(biāo)拖曳到【文件】面板中的目標(biāo)文件上，最后在HTML【屬性】面板的【目標(biāo)】下拉列表中選擇窗口打開方式，如果需要可以在【標(biāo)題】文本框中輸入提示性內(nèi)容，如圖所示。返回目錄（2）通過【超級鏈接】對話框創(chuàng)建超級鏈接

方法是，將光標(biāo)置于要插入超級鏈接的位置，然后選擇【插入】/【超級鏈接】命令，或者在【插入】/【常用】面板中單擊按鈕，彈出【超級鏈接】對話框。在【文本】文本框中輸入鏈接文本，在【鏈接】下拉列表中設(shè)置目標(biāo)地址，在【目標(biāo)】下拉列表中選擇目標(biāo)窗口打開方式，在【標(biāo)題】文本框中輸入提示性文本，如圖所示。可以在【訪問鍵】文本框中設(shè)置鏈接的快捷鍵，也就是按下Alt＋26個字母鍵其中1個，將焦點切換至文本鏈接，還可以在【Tab鍵索引】文本框中設(shè)置Tab鍵切換順序。返回目錄（3）設(shè)置文本超級鏈接的狀態(tài)通過【頁面屬性】對話框的【鏈接】分類，可以設(shè)置文本超級鏈接的狀態(tài)，包括字體、大小、顏色、下劃線等，如圖所示。返回目錄二、圖像超級鏈接用圖像作為鏈接載體，這就是通常意義上的圖像超級鏈接。了解了通過HTML【屬性】面板創(chuàng)建文本超級鏈接的方法，也就等于掌握了創(chuàng)建圖像超級鏈接的方法，因為操作方法一樣，只是鏈接載體由文本變成了圖像。另外，圖像超級鏈接不像文本超級鏈接那樣會發(fā)生許多提示性的變化，圖像本身不會發(fā)生改變，只是鼠標(biāo)指針在指向圖像超級鏈接時會變成手形（默認狀態(tài)）。返回目錄三、圖像熱點超級鏈接圖像熱點（或稱圖像地圖、圖像熱區(qū)）實際上就是為圖像繪制一個或幾個特殊區(qū)域，并為這些區(qū)域添加超級鏈接。創(chuàng)建圖像熱點超級鏈接必須使用圖像熱點工具，它位于圖像【屬性】面板的左下方，包括（矩形熱點工具）、（橢圓形熱點工具）和（多邊形熱點工具）3種形式。創(chuàng)建圖像熱點超級鏈接的方法是，選中圖像，然后單擊【屬性】面板左下方的熱點工具按鈕，如（矩形熱點工具）按鈕，并將鼠標(biāo)指針移到圖像上，按住鼠標(biāo)左鍵并拖曳，繪制一個矩形區(qū)域，接著在【屬性】面板中設(shè)置鏈接地址、目標(biāo)窗口和替換文本，如圖所示。返回目錄要編輯圖像熱點，可以單擊【屬性】面板中的（指針熱點工具）按鈕。該工具可以對已經(jīng)創(chuàng)建好的圖像熱點進行移動、調(diào)整大小或?qū)又g的向上向下向左向右移動等操作。還可以將含有熱點的圖像從一個文檔復(fù)制到其他文檔，或者復(fù)制圖像中的一個或幾個熱點，然后將其粘貼到其他圖像上，這樣就將與該圖像關(guān)聯(lián)的熱點也復(fù)制到新文檔中。返回目錄四、下載超級鏈接在實際應(yīng)用中，鏈接目標(biāo)也可以是其他類型的文件，如壓縮文件、Word文件等。如果要在網(wǎng)站中提供資料下載，就需要為文件提供下載超級鏈接。下載超級鏈接并不是一種特殊的鏈接，只是下載超級鏈接所指向的文件是特殊的。五、空鏈接空鏈接是一個未指派目標(biāo)的鏈接。建立空鏈接的目的通常是激活頁面上的對象或文本，使其可以應(yīng)用行為。給頁面對象添加空鏈接很簡單，在HTML【屬性】面板的【鏈接】文本框中輸入“#”即可。返回目錄六、電子郵件超級鏈接創(chuàng)建電子郵件超級鏈接的方法是，選擇【插入】/【電子郵件鏈接】命令，或在【插入】/【常用】面板中單擊按鈕，彈出【電子郵件鏈接】對話框，在【文本】文本框中輸入在文檔中顯示的信息，在【E-mail】文本框中輸入電子郵箱的完整地址，如圖所示，單擊按鈕，一個電子郵件鏈接就創(chuàng)建好了。返回目錄七、錨記超級鏈接一般超級鏈接只能從一個網(wǎng)頁文檔跳轉(zhuǎn)到另一個網(wǎng)頁文檔，使用錨記超級鏈接不僅可以跳轉(zhuǎn)到當(dāng)前網(wǎng)頁中的指定位置，還可以跳轉(zhuǎn)到其他網(wǎng)頁中指定的位置，包括同一站點內(nèi)的和不同站點內(nèi)的。創(chuàng)建錨記超級鏈接需要經(jīng)過兩步：首先需要在文檔中設(shè)置錨記，然后在HTML【屬性】面板中設(shè)置指向這些錨記的超級鏈接來鏈接到文檔的特定部分。返回目錄（1）插入錨記將光標(biāo)置于要插入錨記的位置，然后選擇【插入】/【命名錨記】命令，或者在【插入】/【常用】面板中單擊按鈕，彈出【命名錨記】對話框，在【錨記名稱】文本框中輸入名稱，單擊按鈕即在光標(biāo)處插入一個錨記。如果發(fā)現(xiàn)錨記名稱輸入錯了，選中插入的錨記標(biāo)志，然后在【屬性】面板的【名稱】文本框中修改即可，如圖所示。返回目錄（2）創(chuàng)建錨記超級鏈接方法是，先選中文本，然后在HTML【屬性】面板的【鏈接】下拉列表中輸入錨記名稱，如“#a”，或者直接將【鏈接】下拉列表后面的圖標(biāo)拖曳到錨記名稱上。也可選擇【插入】/【超級鏈接】命令，彈出【超級鏈接】對話框，在【文本】文本框中輸入文本，在【鏈接】下拉列表中選擇錨記名稱，如圖所示。返回目錄4.1.2范例解析──設(shè)置“度假勝地”網(wǎng)頁中的超級鏈接

首先將“范例解析\素材\第4講\4-1-2”文件夾下的內(nèi)容復(fù)制到站點根文件夾下，然后打開文檔“4-1-2.htm”，并根據(jù)要求設(shè)置網(wǎng)頁中的超級鏈接，最終效果如圖所示。設(shè)置文本超級鏈接：設(shè)置文本“Google”的鏈接地址為“”，打開目標(biāo)窗口的方式為在新窗口中打開，提示文本為“到Google檢索”。設(shè)置圖像超級鏈接：設(shè)置網(wǎng)頁中第1幅圖像“images/01.jpg”的鏈接目標(biāo)文件為“tu_01.htm”，打開目標(biāo)窗口的方式為在新窗口中打開，按照同樣的方式設(shè)置其他圖像的鏈接目標(biāo)文件。設(shè)置電子郵件超級鏈接：給文本“聯(lián)系我們”添加電子郵件超級鏈接，鏈接地址為“yx2008@163.com”。創(chuàng)建錨記超級鏈接：在正文中每個小標(biāo)題的后面依次添加錨記“a”、“b”、“c”、“d”、“e”、“f”、“g”、“h”、“i”、“j”，然后給文檔標(biāo)題“度假勝地”下面的導(dǎo)航文本依次添加錨記超級鏈接，分別鏈接到正文中相同內(nèi)容部分。設(shè)置文本狀態(tài)：設(shè)置鏈接顏色和已訪問鏈接顏色均為“#060”，變換圖像鏈接顏色為“#F00”，且僅在變換圖像時顯示下劃線。這是設(shè)置超級鏈接的一個例子，可以通過【屬性】面板、菜單命令以及【頁面屬性】對話框進行設(shè)置，具體操作步驟參考教材。返回目錄返回目錄4.1.3課堂實訓(xùn)——設(shè)置“黃山四絕”網(wǎng)頁中的超級鏈接

首先將“課堂實訓(xùn)\素材\第4講\4-1-3”文件夾下的內(nèi)容復(fù)制到站點根文件夾下，然后打開文檔“4-1-3.htm”，并根據(jù)要求設(shè)置“黃山四絕”網(wǎng)頁中的超級鏈接，最終效果如圖所示。設(shè)置文本和圖像超級鏈接：設(shè)置文本“迎客松”的鏈接目標(biāo)為“yingkesong.htm”，設(shè)置第1幅圖像的鏈接目標(biāo)為“qisong.htm”，第2幅圖像創(chuàng)建橢圓形熱點超級鏈接，鏈接目標(biāo)為“guaishi.htm”，第3幅圖像的鏈接目標(biāo)為“#”，目標(biāo)窗口打開方式均為“_blank”。設(shè)置錨記超級鏈接：在正文中的“1、奇松”、“2、怪石”、“3、云?！焙汀?、溫泉”處分別插入錨記名稱“1”、“2”、“3”、“4”，然后給副標(biāo)題中的“奇松”、“怪石”、“云?！?、“溫泉”建立錨記超級鏈接，分別指到錨記“1”、“2”、“3”、“4”處。設(shè)置電子郵件超級鏈接：在最后一行的“[]”內(nèi)創(chuàng)建電子郵件超級鏈接，鏈接文本和地址均為“wjx@163.com”。設(shè)置超級鏈接狀態(tài)：鏈接顏色和已訪問鏈接顏色均為“#090”，變換圖像鏈接顏色為“#F00”，且“僅在變換圖像時顯示下劃線”。這是設(shè)置超級鏈接的一個例子，可以通過【屬性】面板、菜單命令以及【頁面屬性】對話框進行設(shè)置。返回目錄返回目錄4.2設(shè)置特殊超級鏈接4.2.1功能講解4.2.2范例解析——設(shè)置導(dǎo)航條4.2.3課堂實訓(xùn)——設(shè)置鼠標(biāo)經(jīng)過圖像返回目錄4.2.1功能講解鼠標(biāo)經(jīng)過圖像。導(dǎo)航條。腳本鏈接。返回目錄一、鼠標(biāo)經(jīng)過圖像創(chuàng)建鼠標(biāo)經(jīng)過圖像的方法是，選擇【插入】/【圖像對象】/【鼠標(biāo)經(jīng)過圖像】命令，或在【插入】/【常用】面板的圖像按鈕組中單擊按鈕，彈出【插入鼠標(biāo)經(jīng)過圖像】對話框并進行參數(shù)設(shè)置即可，如圖所示。返回目錄二、導(dǎo)航條創(chuàng)建導(dǎo)航條的方法是，選擇【插入】/【圖像對象】/【導(dǎo)航條】命令，或在【插入】/【常用】面板中單擊按鈕，彈出【插入導(dǎo)航條】對話框并進行參數(shù)設(shè)置即可，如圖所示。返回目錄三、腳本鏈接超級鏈接不僅可以用來實現(xiàn)頁面之間的跳轉(zhuǎn)，也可以用來直接調(diào)用JavaScript語句。這種單擊鏈接便執(zhí)行JavaScript語句的超級鏈接通常稱為JavaScript鏈接。創(chuàng)建JavaScript鏈接的方法是，首先選定文本或圖像，然后在【屬性】面板的【鏈接】文本框中輸入“JavaScript:”，后面跟一些JavaScript代碼或函數(shù)調(diào)用即可。返回目錄JavaScript:alert('字符串')：彈出一個只包含【確定】按鈕的對話框，顯示“字符串”的內(nèi)容，整個文檔的讀取、Script的運行都會暫停，直到用戶單擊“確定”為止。JavaScript:history.go(1)：前進，與瀏覽器窗口上的“前進”按鈕是等效的。JavaScript:history.go(-1)：后退，與瀏覽器窗口上的“后退”按鈕是等效的。JavaScript:history.forward(1)：前進，與瀏覽器窗口上的“前進”按鈕是等效的。JavaScript:history.back(1)：后退，與瀏覽器窗口上的“后退”按鈕是等效的。JavaScript:history.print()：打印，與在瀏覽器菜單欄中選擇【文件】／【打印】命令是一樣的。JavaScript:window.external.AddFavorite('','老虎工作室')：收藏指定的網(wǎng)頁。JavaScript:window.close()：關(guān)閉窗口。如果該窗口有狀態(tài)欄，調(diào)用該方法后瀏覽器會警告：“網(wǎng)頁正在試圖關(guān)閉窗口，是否關(guān)閉？”，然后等待用戶選擇是否關(guān)閉；如果沒有狀態(tài)欄，調(diào)用該方法將直接關(guān)閉窗口。返回目錄4.2.2范例解析——設(shè)置導(dǎo)航條首先將“范例解析\素材\第4講\4-2-2”文件夾下的內(nèi)容復(fù)制到站點根文件夾下，然后打開文檔“4-2-2.htm”創(chuàng)建導(dǎo)航條超級鏈接，最終效果如圖所示。這是設(shè)置導(dǎo)航條超級鏈接的一個例子，可以通過【插入】/【圖像對象】/【導(dǎo)航條】菜單命令打開對話框進行設(shè)置，具體操作步驟參考教材。返回目錄4.2.3課堂實訓(xùn)——設(shè)置鼠標(biāo)經(jīng)過圖像

首先將“課堂實訓(xùn)\素材\第4講\4-2-3”文件夾下的內(nèi)容復(fù)制到站點根文件夾下，然后打開文檔“4-2-3.htm”創(chuàng)建導(dǎo)航條超級鏈接，最終效果如圖所示。這是設(shè)置鼠標(biāo)經(jīng)過圖像超級鏈接的一個例子，可以通過【插入】/【圖像對象】/【鼠標(biāo)經(jīng)過圖像