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

項目五

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

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

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

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

選中要創(chuàng)建郵件鏈接的圖像

電子郵件鏈接電子郵件鏈接”對話框

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

添加鏈接前的頁面效果

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

“收藏”視圖“添加URL”對話框

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

應用URL

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

實例效果

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

添加選擇器

設(shè)置屬性

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