靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作 課件 第5章 制作超鏈接

項(xiàng)目五

制作超鏈接任務(wù)1

認(rèn)識(shí)超級(jí)鏈接任務(wù)2制作、管理超鏈接任務(wù)3使用熱點(diǎn)制作圖像映射任務(wù)1認(rèn)識(shí)超級(jí)鏈接任務(wù)引入小明發(fā)現(xiàn)在瀏覽網(wǎng)頁(yè)時(shí)有時(shí)只要一點(diǎn)擊某個(gè)圖片或某段文字，就會(huì)跳轉(zhuǎn)到其他的網(wǎng)頁(yè)或圖像等，原來(lái)這是通過(guò)創(chuàng)建超級(jí)鏈接來(lái)實(shí)現(xiàn)的，小明也想對(duì)網(wǎng)頁(yè)實(shí)現(xiàn)這種操作，那么什么是超級(jí)鏈接呢？知識(shí)準(zhǔn)備超鏈接由兩部分組成，一部分是在瀏覽網(wǎng)頁(yè)時(shí)可以看到的部分，稱(chēng)為超鏈接載體；另一部分是超鏈接所鏈接的目標(biāo)。在瀏覽網(wǎng)頁(yè)時(shí)，單擊超鏈接的載體打開(kāi)鏈接目標(biāo)。超鏈接載體可以是文本、圖像；鏈接的目標(biāo)可以是網(wǎng)頁(yè)、圖像、視頻、聲音和電子郵件地址等。例如：?jiǎn)螕羧鐖D所示的產(chǎn)品圖像或產(chǎn)品名稱(chēng)，可以打開(kāi)如圖所示的產(chǎn)品詳細(xì)介紹頁(yè)面。單擊超級(jí)鏈接的載體打開(kāi)的鏈接目標(biāo)在這里，產(chǎn)品圖像或產(chǎn)品名稱(chēng)就是超級(jí)鏈接載體，而打開(kāi)的產(chǎn)品詳情頁(yè)面則是鏈接目標(biāo)。網(wǎng)頁(yè)上的超鏈接一般有三種：一種是絕對(duì)網(wǎng)址的超鏈接，例如鏈接到清華大學(xué)的站點(diǎn)主頁(yè)；第二種是相對(duì)網(wǎng)址的超鏈接，例如將主頁(yè)上的圖像鏈接到本站點(diǎn)的其他頁(yè)面；還有一種是同一個(gè)頁(yè)面的超鏈接，也稱(chēng)為錨點(diǎn)。了解了超鏈接的基本概念和分類(lèi)之后，接下來(lái)介紹各種超鏈接的具體創(chuàng)建方法。在Dreamweaver2021中創(chuàng)建超級(jí)鏈接有多種方法，創(chuàng)建超鏈接后，用戶還可以隨時(shí)對(duì)鏈接載體、鏈接目標(biāo)和鏈接的打開(kāi)方式進(jìn)行修改。此外，還可以通過(guò)“URLs”面板統(tǒng)一管理網(wǎng)站中的所有超鏈接。任務(wù)2制作、管理超鏈接任務(wù)引入了解了超鏈接的概念之后，小明就可以根據(jù)網(wǎng)頁(yè)的需求創(chuàng)建合適的鏈接，那么如何創(chuàng)建文本、圖像或者郵件鏈接，如何創(chuàng)建虛擬鏈接和腳本鏈接，如何管理鏈接呢？知識(shí)準(zhǔn)備一、創(chuàng)建文本超鏈接在網(wǎng)頁(yè)上用到最多的就是文本超鏈接，例如，單擊文本，跳轉(zhuǎn)到另一個(gè)頁(yè)面。案例——?jiǎng)?chuàng)建文本超鏈接創(chuàng)建文本超鏈接的方法很多，下面通過(guò)一個(gè)簡(jiǎn)單的示例進(jìn)行簡(jiǎn)要說(shuō)明。（1）在文檔窗口中選中需要建立鏈接的文本。例如頁(yè)面上的。通常，創(chuàng)建超級(jí)鏈接是在屬性面板的“鏈接”文本框中完成的。（2）執(zhí)行“窗口”/“屬性”菜單命令打開(kāi)屬性面板。在“鏈接”文本框中輸入鏈接目標(biāo)。本例輸入。超級(jí)鏈接效果（3）在“目標(biāo)”下拉列表中選擇打開(kāi)鏈接目標(biāo)的方式。二、創(chuàng)建圖像鏈接很多情況下，為了去掉文本鏈接默認(rèn)的下劃線效果或美化頁(yè)面，網(wǎng)頁(yè)設(shè)計(jì)者會(huì)選擇用圖像代替文本創(chuàng)建超鏈接，這種方式適用于所有能識(shí)別圖像的瀏覽器。創(chuàng)建圖像鏈接的方法與創(chuàng)建文本鏈接大致相同，不同之處在于鏈接的載體是圖像，而不是文本。案例——?jiǎng)?chuàng)建圖像超鏈接下面通過(guò)為一個(gè)圖像創(chuàng)建超鏈接，演示創(chuàng)建圖像鏈接的步驟。（1）選中需要?jiǎng)?chuàng)建鏈接的圖像，如圖5-4所示的Google網(wǎng)徽。（2）在屬性面板的“鏈接”文本框中鍵入超鏈接的URL。本例輸入。（3）在“替換”文本框中鍵入“Google”。在瀏覽器中，當(dāng)該圖像沒(méi)有下載或不能顯示時(shí)，在圖像所在位置顯示替換文本。（4）在“目標(biāo)”下拉列表中選擇打開(kāi)該網(wǎng)站的方式。本例使用默認(rèn)設(shè)置。選定需要設(shè)置超鏈接的圖像

設(shè)置了邊框的圖像鏈接三、鏈接到命名錨點(diǎn)通常情況下，使用絕對(duì)地址或相對(duì)地址鏈接到一個(gè)網(wǎng)頁(yè)時(shí)，瀏覽器會(huì)重新載入并顯示這個(gè)頁(yè)面。如果網(wǎng)頁(yè)的內(nèi)容比較多，瀏覽者就必須滾動(dòng)頁(yè)面，查看當(dāng)前屏幕以下的信息。使用命名錨點(diǎn)可以立即響應(yīng)瀏覽者單擊錨點(diǎn)的事件，由于整個(gè)頁(yè)面已被載入，所以瀏覽器只需移動(dòng)到文檔中的特定位置。這種技術(shù)能夠迅速定位需要的主題或返回菜單，而無(wú)需手工來(lái)回滾動(dòng)頁(yè)面。命名錨點(diǎn)通常與目錄或索引列表結(jié)合使用，放置在網(wǎng)頁(yè)中每個(gè)屏幕或每個(gè)主題之后。單擊某一個(gè)命名錨點(diǎn)時(shí)，可以轉(zhuǎn)到網(wǎng)頁(yè)的特定段落，以方便閱讀。案例——命名錨點(diǎn)下面通過(guò)一個(gè)簡(jiǎn)單實(shí)例演示命名錨點(diǎn)的使用方法。（1）將光標(biāo)放在要設(shè)置錨點(diǎn)的位置，如圖5-6所示的“觀書(shū)有感”之前。指定插入錨點(diǎn)的位置

插入的命名錨點(diǎn)（2）在頁(yè)面中選擇要鏈接到命名錨點(diǎn)的文字。例如圖5-7中，水平線以上的“觀書(shū)有感”。（3）參照上面的步驟，在“春日”和“泛舟”兩首詩(shī)之前也添加命名錨點(diǎn)，分別為“m2”和“m3”，然后為相應(yīng)的文本添加超鏈接，鏈接到命名錨點(diǎn)。四、創(chuàng)建E-Mail鏈接如果要在訪問(wèn)站點(diǎn)時(shí)能與網(wǎng)絡(luò)管理者取得聯(lián)系，一個(gè)最簡(jiǎn)單的辦法就是在頁(yè)面的適當(dāng)位置加上網(wǎng)絡(luò)管理者的E-mail地址的超鏈接。只要訪問(wèn)者單擊這個(gè)地址，就可以調(diào)用默認(rèn)的電子郵件程序，并新建一個(gè)郵件窗口，給網(wǎng)絡(luò)管理者發(fā)送電子郵件。如果需要，還可以自定義發(fā)送主題、內(nèi)容、抄送等。案例——?jiǎng)?chuàng)建E-Mail鏈接下面通過(guò)一個(gè)簡(jiǎn)單例子演示創(chuàng)建E-Mail鏈接的步驟。（1）在文檔窗口的“設(shè)計(jì)”視圖中，選中需要?jiǎng)?chuàng)建E-Mail鏈接的文本或圖像。如圖所示的郵箱圖標(biāo)。（2）在屬性面板的“鏈接”文本框中輸入收件人的地址。本例輸入mailto:webmaster@。然后在“替換”文本框中鍵入替換文本“Email”。（3）保存文檔，并按F12鍵預(yù)覽頁(yè)面，效果如圖所示。

選中要?jiǎng)?chuàng)建郵件鏈接的圖像

電子郵件鏈接電子郵件鏈接”對(duì)話框

頁(yè)面效果五、虛擬鏈接和腳本鏈接虛擬鏈接也稱(chēng)為空鏈接，是指沒(méi)有指定鏈接目標(biāo)的鏈接，一般用于向頁(yè)面上的文本或?qū)ο筇砑有袨?。虛擬鏈接主要包含以下兩種格式：<ahref="#">虛擬鏈接</a><ahref="javascript:;">虛擬鏈接</a>使用第1種格式的虛擬鏈接在單擊后將返回到頁(yè)面頂部，這種格式無(wú)法添加行為；采用第2種格式創(chuàng)建的虛擬鏈接在單擊時(shí)不會(huì)發(fā)生任何動(dòng)作，就好像根本沒(méi)有單擊一樣。如果為第2種虛擬鏈接添加了動(dòng)作腳本，則執(zhí)行相應(yīng)的動(dòng)作行為，此時(shí)的鏈接即為腳本鏈接。腳本鏈接可以執(zhí)行JavaScript代碼或調(diào)用JavaScript函數(shù)，在不離開(kāi)當(dāng)前網(wǎng)頁(yè)的情況下給予訪問(wèn)者有關(guān)項(xiàng)目的補(bǔ)充信息。腳本鏈接也可用于在訪問(wèn)者點(diǎn)擊特定項(xiàng)目時(shí)執(zhí)行計(jì)算、表單驗(yàn)證或其他處理任務(wù)。案例——?jiǎng)?chuàng)建虛擬鏈接和腳本鏈接下面通過(guò)一個(gè)簡(jiǎn)單實(shí)例演示虛擬鏈接和腳本鏈接的創(chuàng)建方法及功能。（1）選擇要作為虛擬鏈接的文本，例如圖5-12所示的“返回頁(yè)面頂端”。（2）打開(kāi)屬性設(shè)置面板，在“鏈接”文本框中輸入“#”或“javascript:;”。讀者要注意，javascript一詞后依次有一個(gè)冒號(hào)和一個(gè)分號(hào)。（3）選擇需要作為腳本鏈接的文本，例如圖5-12所示的“VIP通道”。（4）在屬性面板的“鏈接”文本框中輸入腳本，如：javascript:alert('只有VIP會(huì)員方可進(jìn)入！')。括號(hào)中的內(nèi)容必須使用單引號(hào)，或在雙引號(hào)前添加反斜杠進(jìn)行轉(zhuǎn)義，例如，JavaScript:alert(\"只有VIP會(huì)員方可進(jìn)入！\"）。（5）保存文檔，按F12鍵在瀏覽器中瀏覽。六、使用“URLs”面板管理超鏈接對(duì)于某些大型站點(diǎn)來(lái)說(shuō)，處理所有超鏈接資源的完整列表是一件很棘手的事情。

添加鏈接前的頁(yè)面效果

預(yù)覽效果案例——新建和編輯URL下面通過(guò)一個(gè)簡(jiǎn)單例子演示新建URL和編輯URL的方法。（1）執(zhí)行“窗口”/“資源”菜單命令，打開(kāi)“資源”面板。（2）單擊“資源”面板左側(cè)的“URLs”按鈕，切換到“URLs”面板。如圖所示。（3）單擊“收藏”單選按鈕，切換到“收藏”視圖，如圖所示。（4）單擊“收藏”視圖底部的“新建URL”按鈕，彈出如圖所示的“添加URL”對(duì)話框。（5）在“添加URL”對(duì)話框中輸入U(xiǎn)RL以及昵稱(chēng)。本例在“URL”文本框中輸入；在“昵稱(chēng)”欄鍵入“新浪”。（6）單擊“確定”按鈕關(guān)閉對(duì)話框?！罢军c(diǎn)”視圖

“收藏”視圖“添加URL”對(duì)話框

添加URL（7）在“設(shè)計(jì)”視圖中選中要應(yīng)用該URL的文本或圖像，如圖所示。（8）在“URLs”面板的“收藏”視圖中選中需要的URL，例如“百度搜索”，然后單擊視圖底部的“應(yīng)用”按鈕，即可將指定的URL應(yīng)用到選定文本。如圖所示。（9）如果在第（7）步中沒(méi)有選中文本，而是將插入點(diǎn)放在文本后面，則“收藏”視圖底部的“應(yīng)用”按鈕變?yōu)椤安迦搿卑粹o。單擊該按鈕，可在插入點(diǎn)處插入指定的鏈接文本，如圖所示。選中文本

應(yīng)用URL

插入U(xiǎn)RL任務(wù)3使用熱點(diǎn)制作圖像映射任務(wù)引入小明已經(jīng)學(xué)會(huì)了創(chuàng)建圖像鏈接，但是有時(shí)候需要對(duì)圖像的不同部分建立連接，這就需要利用熱點(diǎn)工具來(lái)創(chuàng)建圖像映射，具體要怎么操作呢？知識(shí)準(zhǔn)備在通常情況下，一個(gè)圖像只能對(duì)應(yīng)一個(gè)超鏈接。在瀏覽網(wǎng)頁(yè)時(shí)，讀者可能會(huì)遇到一個(gè)圖像的不同部分建立了不同的超鏈接，這就是圖像映射，只要使用熱點(diǎn)工具就可以輕松實(shí)現(xiàn)。簡(jiǎn)單地說(shuō)，圖像映射就是用熱點(diǎn)工具將一幅圖像分割為若干個(gè)區(qū)域，并將這些子區(qū)域設(shè)置成熱點(diǎn)區(qū)域，然后將這些不同的熱點(diǎn)區(qū)域鏈接到不同的頁(yè)面。單擊圖像上的不同熱點(diǎn)區(qū)域，可以跳轉(zhuǎn)到不同的頁(yè)面。案例——?jiǎng)?chuàng)建圖像映射下面通過(guò)一個(gè)實(shí)例介紹創(chuàng)建圖像映射的方法，最終效果如圖所示。具體制作步驟如下：（1）新建一個(gè)空白的HTML文件。執(zhí)行“插入”｜“Image”命令，在文檔窗口中插入圖像。（2）選中圖像，單擊屬性面板上的“圓形熱點(diǎn)工具”按鈕，此時(shí)該圖標(biāo)會(huì)下凹，表示被選中。（3）在屬性設(shè)置面板上單擊“矩形熱點(diǎn)工具”按鈕，此時(shí)該圖標(biāo)會(huì)下凹，表示被選中。（4）在屬性設(shè)置面板上單擊“多邊形熱點(diǎn)工具”按鈕，此時(shí)該圖標(biāo)會(huì)下凹，表示被選中。（5）如果要調(diào)整熱點(diǎn)區(qū)域的大小，在屬性設(shè)置面板中單擊“指針熱點(diǎn)工具”按鈕，再單擊要調(diào)整大小的熱點(diǎn)區(qū)域，此時(shí)被選中的熱點(diǎn)區(qū)域四周會(huì)出現(xiàn)控制手柄。（6）在屬性設(shè)置面板中單擊“指針熱點(diǎn)工具”按鈕，再單擊“景點(diǎn)”的熱點(diǎn)區(qū)域，選中該熱點(diǎn)區(qū)域。（7）按照上一步同樣的方法，為其他兩個(gè)熱點(diǎn)區(qū)域建立超級(jí)鏈接。（8）執(zhí)行“文件”｜“保存”命令保存文檔。

實(shí)例效果

加入熱點(diǎn)后的圖像綜合實(shí)例文本與鏈接網(wǎng)頁(yè)實(shí)例下面通過(guò)一個(gè)實(shí)例展示文本與超級(jí)鏈接的應(yīng)用，效果如圖所示。（1）執(zhí)行“文件”｜“新建”命令，彈出“新建文檔”對(duì)話框。在對(duì)話框中選擇“新建文檔”類(lèi)別的HTML文件，框架“無(wú)”，文檔類(lèi)型默認(rèn)為HTML5，單擊“創(chuàng)建”按鈕，創(chuàng)建新文檔。（2）切換到“設(shè)計(jì)”視圖，在空白處右擊鼠標(biāo)，在彈出的快捷菜單中執(zhí)行“頁(yè)面屬性”命令，彈出“頁(yè)面屬性”對(duì)話框，如圖所示。（3）在“背景顏色”文本框中輸入“#ABDEED”。（4）單擊“標(biāo)題/編碼”分類(lèi)，在“標(biāo)題”文本框中輸入“朱熹名作欣賞”。單擊“確定”按鈕關(guān)閉對(duì)話框。（5）在“設(shè)計(jì)”視圖中輸入文字“聯(lián)系作者：webmaster”。選中“webmaster”，在屬性設(shè)置面板上的“鏈接”文本框中輸入“mailto:webmaster@”。（6）定義郵件鏈接的樣式。執(zhí)行“窗口”|“CSS設(shè)計(jì)器”命令，打開(kāi)“CSS設(shè)計(jì)器”面板。單擊“添加CSS源”按鈕，在彈出的下拉菜單中選擇“在頁(yè)面中定義”；單擊“添加選擇器”按鈕，設(shè)置選擇器名稱(chēng)為a:link，如圖所示。（7）在CSS設(shè)計(jì)器的“屬性”窗格中取消選中“顯示集”，然后單擊“文本”圖標(biāo)，設(shè)置文本顏色為#FF6600，字體大小為16px，無(wú)修飾，如圖所示。（8）輸入文字“鏈接到新浪:”，選中，在屬性設(shè)置面板上的“鏈接”文本框中輸入“”。（9）執(zhí)行“插入”|“表格”菜單命令，在彈出的對(duì)話框中設(shè)置行數(shù)為7，列數(shù)為3，寬度為600像素，邊框粗細(xì)為0，單元格邊距和間距均為0。選中插入的表格，在屬性面板上設(shè)置表格在頁(yè)面上居中對(duì)齊。（10）依次合并第二行以外的其他行的單元格，并設(shè)置單元格內(nèi)容水平和垂直對(duì)齊方式均為居中，然后輸入標(biāo)題、頁(yè)內(nèi)超級(jí)鏈接地址和詩(shī)詞具體內(nèi)容。（11）選中“朱熹名作欣賞”，在屬性面板上對(duì)應(yīng)的“格式”下拉列表框中選擇“標(biāo)題1”，在屬性面板上設(shè)置字體為華文行楷，大小為36，顏色為#3399FF，且文本對(duì)齊方式為“居中對(duì)齊”?！绊?yè)面屬性”對(duì)話框

添加選擇器

設(shè)置屬性

選擇字體（12）將光標(biāo)定位到詩(shī)文“觀書(shū)有感”右側(cè)，執(zhí)行“插入”|“HTML”|“水平線”菜單命令，插入水平線。（13）同樣的方法，在其他詩(shī)文下方插入水平線。（14）將光標(biāo)定位到標(biāo)題“觀書(shū)有感”左側(cè)，在“代碼”視圖中輸入<aid="m1"></a>，定義一個(gè)錨記。（15）用同樣方法，在另兩首詩(shī)標(biāo)題前插入錨記，錨記名稱(chēng)從上到下分別為m2