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

靜態(tài)網(wǎng)頁設(shè)計(jì)制作STYLEREFbt1a項(xiàng)目五STYLEREFbt1b制作超鏈接項(xiàng)目五制作超鏈接思政目標(biāo)學(xué)會(huì)不求甚解，實(shí)事求是，真正掌握所學(xué)內(nèi)容。樹立正確的職業(yè)觀，培養(yǎng)正確的職業(yè)操守技能目標(biāo)學(xué)會(huì)創(chuàng)建文本、圖像和E-Mail鏈接學(xué)會(huì)連接到命名錨點(diǎn)學(xué)會(huì)利用“URLs”面板管理超鏈接學(xué)會(huì)使用熱點(diǎn)制作圖像映射項(xiàng)目導(dǎo)讀Internet的核心就是超級(jí)鏈接（Hyperlink），沒有鏈接，就不存在WorldWideWeb。使用超級(jí)鏈接可以將各個(gè)網(wǎng)頁聯(lián)接起來，構(gòu)成一個(gè)有機(jī)整體，使訪問者能夠在各個(gè)頁面之間跳轉(zhuǎn)。超級(jí)鏈接可以是一段文本，一幅圖像或其他網(wǎng)頁元素，在瀏覽器中單擊這些對象，瀏覽器可以載入一個(gè)指定的新頁面，或者轉(zhuǎn)到頁面的其他位置。任務(wù)1認(rèn)識(shí)超級(jí)鏈接任務(wù)引入小明發(fā)現(xiàn)在瀏覽網(wǎng)頁時(shí)有時(shí)只要一點(diǎn)擊某個(gè)圖片或某段文字，就會(huì)跳轉(zhuǎn)到其他的網(wǎng)頁或圖像等，原來這是通過創(chuàng)建超級(jí)鏈接來實(shí)現(xiàn)的，小明也想對網(wǎng)頁實(shí)現(xiàn)這種操作，那么什么是超級(jí)鏈接呢？知識(shí)準(zhǔn)備超鏈接由兩部分組成，一部分是在瀏覽網(wǎng)頁時(shí)可以看到的部分，稱為超鏈接載體；另一部分是超鏈接所鏈接的目標(biāo)。在瀏覽網(wǎng)頁時(shí)，單擊超鏈接的載體打開鏈接目標(biāo)。超鏈接載體可以是文本、圖像；鏈接的目標(biāo)可以是網(wǎng)頁、圖像、視頻、聲音和電子郵件地址等。例如：單擊如圖5-1所示的產(chǎn)品圖像或產(chǎn)品名稱，可以打開如圖5-2所示的產(chǎn)品詳細(xì)介紹頁面。圖5-1單擊超級(jí)鏈接的載體圖5-2打開的鏈接目標(biāo)在這里，產(chǎn)品圖像或產(chǎn)品名稱就是超級(jí)鏈接載體，而打開的產(chǎn)品詳情頁面則是鏈接目標(biāo)。網(wǎng)頁上的超鏈接一般有三種：一種是絕對網(wǎng)址的超鏈接，例如鏈接到清華大學(xué)的站點(diǎn)主頁；第二種是相對網(wǎng)址的超鏈接，例如將主頁上的圖像鏈接到本站點(diǎn)的其他頁面；還有一種是同一個(gè)頁面的超鏈接，也稱為錨點(diǎn)。了解了超鏈接的基本概念和分類之后，接下來介紹各種超鏈接的具體創(chuàng)建方法。在Dreamweaver2021中創(chuàng)建超級(jí)鏈接有多種方法，創(chuàng)建超鏈接后，用戶還可以隨時(shí)對鏈接載體、鏈接目標(biāo)和鏈接的打開方式進(jìn)行修改。此外，還可以通過“URLs”面板統(tǒng)一管理網(wǎng)站中的所有超鏈接。任務(wù)2制作、管理超鏈接任務(wù)引入了解了超鏈接的概念之后，小明就可以根據(jù)網(wǎng)頁的需求創(chuàng)建合適的鏈接，那么如何創(chuàng)建文本、圖像或者郵件鏈接，如何創(chuàng)建虛擬鏈接和腳本鏈接，如何管理鏈接呢？知識(shí)準(zhǔn)備一、創(chuàng)建文本超鏈接在網(wǎng)頁上用到最多的就是文本超鏈接，例如，單擊文本，跳轉(zhuǎn)到另一個(gè)頁面。案例——?jiǎng)?chuàng)建文本超鏈接創(chuàng)建文本超鏈接的方法很多，下面通過一個(gè)簡單的示例進(jìn)行簡要說明。（1）在文檔窗口中選中需要建立鏈接的文本。例如頁面上的。通常，創(chuàng)建超級(jí)鏈接是在屬性面板的“鏈接”文本框中完成的。（2）執(zhí)行“窗口”/“屬性”菜單命令打開屬性面板。在“鏈接”文本框中輸入鏈接目標(biāo)。本例輸入。操作完成后，可以看到被選擇的文本變?yōu)樗{(lán)色，并且?guī)в邢聞澗€。在瀏覽器中將鼠標(biāo)移到文本上時(shí)，鼠標(biāo)指針變?yōu)槭中?。如圖5-3所示。默認(rèn)情況下，文本鏈接顯示為藍(lán)色，并加有下劃線。可以執(zhí)行“文件”/“頁面屬性”菜單命令，在“頁面屬性”對話框的“鏈接”分類設(shè)置超級(jí)鏈接在各種狀態(tài)下的顏色，以及是否顯示下劃線。圖5-3超級(jí)鏈接效果如果鏈接目標(biāo)是計(jì)算上的一個(gè)文件或圖像，可以單擊“鏈接”文本框右側(cè)的文件夾圖標(biāo)，打開“選擇文件”對話框，查找并選擇文件?；蛘咴凇爸赶蛭募眻D標(biāo)上按下鼠標(biāo)左鍵拖動(dòng)到“文件”面板中一個(gè)已有的頁面。（3）在“目標(biāo)”下拉列表中選擇打開鏈接目標(biāo)的方式。注意如果要鏈接到站點(diǎn)外的某一頁面，應(yīng)始終使用_top或_blank，以確保該頁面不會(huì)顯示為站點(diǎn)的一部分。此外，還可以執(zhí)行“插入”/“超級(jí)鏈接”菜單命令，或直接單擊“HTML”插入面板中的“超級(jí)鏈接”按鈕，打開“超級(jí)鏈接”對話框設(shè)置選定文本的超鏈接。二、創(chuàng)建圖像鏈接很多情況下，為了去掉文本鏈接默認(rèn)的下劃線效果或美化頁面，網(wǎng)頁設(shè)計(jì)者會(huì)選擇用圖像代替文本創(chuàng)建超鏈接，這種方式適用于所有能識(shí)別圖像的瀏覽器。創(chuàng)建圖像鏈接的方法與創(chuàng)建文本鏈接大致相同，不同之處在于鏈接的載體是圖像，而不是文本。案例——?jiǎng)?chuàng)建圖像超鏈接下面通過為一個(gè)圖像創(chuàng)建超鏈接，演示創(chuàng)建圖像鏈接的步驟。（1）選中需要?jiǎng)?chuàng)建鏈接的圖像，如圖5-4所示的Google網(wǎng)徽。（2）在屬性面板的“鏈接”文本框中鍵入超鏈接的URL。本例輸入。（3）在“替換”文本框中鍵入“Google”。在瀏覽器中，當(dāng)該圖像沒有下載或不能顯示時(shí)，在圖像所在位置顯示替換文本。（4）在“目標(biāo)”下拉列表中選擇打開該網(wǎng)站的方式。本例使用默認(rèn)設(shè)置。至此，圖像鏈接創(chuàng)建完畢，按F12鍵在瀏覽器中預(yù)覽。使用圖像鏈接時(shí)，瀏覽器中的鏈接圖像默認(rèn)顯示一個(gè)藍(lán)色邊框，如圖5-5所示。圖5-4選定需要設(shè)置超鏈接的圖像圖5-5設(shè)置了邊框的圖像鏈接如果不希望顯示該邊框，可以新建一個(gè)CSS規(guī)則，將邊框?qū)挾仍O(shè)置為0。例如下面的代碼定義網(wǎng)頁中的所有<img>標(biāo)簽都不顯示邊框：img{ border-width:0px;}三、鏈接到命名錨點(diǎn)通常情況下，使用絕對地址或相對地址鏈接到一個(gè)網(wǎng)頁時(shí)，瀏覽器會(huì)重新載入并顯示這個(gè)頁面。如果網(wǎng)頁的內(nèi)容比較多，瀏覽者就必須滾動(dòng)頁面，查看當(dāng)前屏幕以下的信息。使用命名錨點(diǎn)可以立即響應(yīng)瀏覽者單擊錨點(diǎn)的事件，由于整個(gè)頁面已被載入，所以瀏覽器只需移動(dòng)到文檔中的特定位置。這種技術(shù)能夠迅速定位需要的主題或返回菜單，而無需手工來回滾動(dòng)頁面。命名錨點(diǎn)通常與目錄或索引列表結(jié)合使用，放置在網(wǎng)頁中每個(gè)屏幕或每個(gè)主題之后。單擊某一個(gè)命名錨點(diǎn)時(shí)，可以轉(zhuǎn)到網(wǎng)頁的特定段落，以方便閱讀。案例——命名錨點(diǎn)下面通過一個(gè)簡單實(shí)例演示命名錨點(diǎn)的使用方法。（1）將光標(biāo)放在要設(shè)置錨點(diǎn)的位置，如圖5-6所示的“觀書有感”之前。切換到“代碼”視圖，輸入<aid="m1"></a>，即創(chuàng)建一個(gè)命名為m1的錨點(diǎn)。切換到“設(shè)計(jì)”視圖，在頁面指定的位置可看到插入的命名錨點(diǎn)，效果如圖5-7所示。圖5-6指定插入錨點(diǎn)的位置圖5-7插入的命名錨點(diǎn)注意如果看不到錨點(diǎn)標(biāo)記，執(zhí)行“查看”/“設(shè)計(jì)視圖選項(xiàng)”/“可視化助理”/“不可見元素”命令。（2）在頁面中選擇要鏈接到命名錨點(diǎn)的文字。例如圖5-7中，水平線以上的“觀書有感”。然后在屬性設(shè)置面板的“鏈接”文本框中輸入錨點(diǎn)的名稱。本例輸入“#m1”。注意在“鏈接”文本框中輸入錨點(diǎn)名稱時(shí)，需要在錨點(diǎn)名稱前面添加一個(gè)特殊的符號(hào)“#”。例如：#top，其中，top為命名錨點(diǎn)。如果所鏈接的錨點(diǎn)不在當(dāng)前文檔中，則在“鏈接”文本框中首先要添加鏈接頁面的URL，然后輸入井號(hào)（#）和錨點(diǎn)名稱。例如，如果要在當(dāng)前頁面調(diào)用同一文件夾中的index.html頁面上名為top的錨點(diǎn)，則應(yīng)在“鏈接”文本框中輸入index.html#top。在同一頁面中可以添加任意數(shù)量的命名錨點(diǎn)。（3）參照上面的步驟，在“春日”和“泛舟”兩首詩之前也添加命名錨點(diǎn)，分別為“m2”和“m3”，然后為相應(yīng)的文本添加超鏈接，鏈接到命名錨點(diǎn)。四、創(chuàng)建E-Mail鏈接如果要在訪問站點(diǎn)時(shí)能與網(wǎng)絡(luò)管理者取得聯(lián)系，一個(gè)最簡單的辦法就是在頁面的適當(dāng)位置加上網(wǎng)絡(luò)管理者的E-mail地址的超鏈接。只要訪問者單擊這個(gè)地址，就可以調(diào)用默認(rèn)的電子郵件程序，并新建一個(gè)郵件窗口，給網(wǎng)絡(luò)管理者發(fā)送電子郵件。如果需要，還可以自定義發(fā)送主題、內(nèi)容、抄送等。案例——?jiǎng)?chuàng)建E-Mail鏈接下面通過一個(gè)簡單例子演示創(chuàng)建E-Mail鏈接的步驟。（1）在文檔窗口的“設(shè)計(jì)”視圖中，選中需要?jiǎng)?chuàng)建E-Mail鏈接的文本或圖像。如圖5-8所示的郵箱圖標(biāo)。（2）在屬性面板的“鏈接”文本框中輸入收件人的地址。本例輸入mailto:webmaster@。然后在“替換”文本框中鍵入替換文本“Email”。（3）保存文檔，并按F12鍵預(yù)覽頁面，效果如圖5-9所示。圖5-8選中要?jiǎng)?chuàng)建郵件鏈接的圖像圖5-9電子郵件鏈接在瀏覽網(wǎng)頁時(shí)，單擊圖像，即可打開默認(rèn)的電子郵件程序編輯郵件，收件人郵件地址自動(dòng)填充為指定的電子郵件地址。在“鏈接”文本框中輸入郵件地址時(shí)，與創(chuàng)建常規(guī)超鏈接不同，在郵件地址前面必須添加“mailto:”，表示該超級(jí)鏈接是郵件鏈接。如果沒有選中任何文本或圖像，可以通過“電子郵件鏈接”對話框在頁面中插入E-Mail鏈接，例如下面的示例。（1）將插入點(diǎn)放置在需要添加郵件鏈接的位置。例如“聯(lián)系作者：”之后。（2）單擊“HTML”面板中的“電子郵件鏈接”按鈕；或者執(zhí)行“插入”/“HTML”/“電子郵件鏈接”菜單命令，彈出如圖5-10所示的“電子郵件鏈接”對話框。（3）在“文本”域中鍵入要顯示在頁面上的鏈接文本，本例輸入webmaster；在“電子郵件”域中輸入要發(fā)送到的E-mail地址，本例輸入webmaster@。（4）單擊“確定”按鈕關(guān)閉對話框，完成鏈接的創(chuàng)建。（5）保存文檔，按F12鍵在瀏覽器中預(yù)覽。頁面效果如圖5-11所示。在“文本”域中輸入的文本顯示為超鏈接文本，在瀏覽器中將鼠標(biāo)指針移到該文本上時(shí)，狀態(tài)欄顯示該鏈接的具體地址mailto:webmaster@。圖5-10“電子郵件鏈接”對話框圖5-11頁面效果五、虛擬鏈接和腳本鏈接虛擬鏈接也稱為空鏈接，是指沒有指定鏈接目標(biāo)的鏈接，一般用于向頁面上的文本或?qū)ο筇砑有袨椤Ｌ摂M鏈接主要包含以下兩種格式：<ahref="#">虛擬鏈接</a><ahref="javascript:;">虛擬鏈接</a>使用第1種格式的虛擬鏈接在單擊后將返回到頁面頂部，這種格式無法添加行為；采用第2種格式創(chuàng)建的虛擬鏈接在單擊時(shí)不會(huì)發(fā)生任何動(dòng)作，就好像根本沒有單擊一樣。如果為第2種虛擬鏈接添加了動(dòng)作腳本，則執(zhí)行相應(yīng)的動(dòng)作行為，此時(shí)的鏈接即為腳本鏈接。腳本鏈接可以執(zhí)行JavaScript代碼或調(diào)用JavaScript函數(shù)，在不離開當(dāng)前網(wǎng)頁的情況下給予訪問者有關(guān)項(xiàng)目的補(bǔ)充信息。腳本鏈接也可用于在訪問者點(diǎn)擊特定項(xiàng)目時(shí)執(zhí)行計(jì)算、表單驗(yàn)證或其他處理任務(wù)。案例——?jiǎng)?chuàng)建虛擬鏈接和腳本鏈接下面通過一個(gè)簡單實(shí)例演示虛擬鏈接和腳本鏈接的創(chuàng)建方法及功能。（1）選擇要作為虛擬鏈接的文本，例如圖5-12所示的“返回頁面頂端”。（2）打開屬性設(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鍵在瀏覽器中瀏覽。當(dāng)把鼠標(biāo)指針移到虛擬鏈接或腳本鏈接上時(shí)，鼠標(biāo)指針變?yōu)槭中?；單擊虛擬鏈接“返回頁面頂端”，頁面會(huì)返回到頂端；單擊腳本鏈接“VIP通道”，會(huì)彈出一個(gè)警告框，顯示“只有VIP會(huì)員方可進(jìn)入！”，如圖5-13所示。圖5-12添加鏈接前的頁面效果圖5-13預(yù)覽效果六、使用“URLs”面板管理超鏈接對于某些大型站點(diǎn)來說，處理所有超鏈接資源的完整列表是一件很棘手的事情。利用Dreamweaver提供的“URLs”面板，可以將所有鏈接資源歸類在一起，為資源指定別名以指明用途，以便日后查找、維護(hù)資源。URL的全稱是UniformResourceLocator（統(tǒng)一資源定位器）。從最簡單的單一頁面到復(fù)雜的綜合站點(diǎn)，所有的資源內(nèi)容都可以通過“URLs”面板進(jìn)行訪問。案例——新建和編輯URL下面通過一個(gè)簡單例子演示新建URL和編輯URL的方法。（1）執(zhí)行“窗口”/“資源”菜單命令，打開“資源”面板。（2）單擊“資源”面板左側(cè)的“URLs”按鈕，切換到“URLs”面板。如圖5-14所示?！癠RLs”面板有兩種視圖：“站點(diǎn)”視圖和“收藏”視圖?！罢军c(diǎn)”視圖如圖5-14所示，在該面板下方的列表窗格中，列出了當(dāng)前站點(diǎn)中使用的所有鏈接資源及類型，包括FTP、gopher、HTTP、HTTPS、JavaScript、電子郵件（mailto）以及本地文件（file://）鏈接?！笆詹亍币晥D用于收藏常用的資源，存儲(chǔ)的是對“站點(diǎn)”視圖列表中的資源的引用。（3）單擊“收藏”單選按鈕，切換到“收藏”視圖，如圖5-15所示。圖5-14“站點(diǎn)”視圖圖5-15“收藏”視圖（4）單擊“收藏”視圖底部的“新建URL”按鈕，彈出如圖5-16所示的“添加URL”對話框。（5）在“添加URL”對話框中輸入U(xiǎn)RL以及昵稱。本例在“URL”文本框中輸入；在“昵稱”欄鍵入“新浪”。（6）單擊“確定”按鈕關(guān)閉對話框。此時(shí)，在“收藏”視圖中可以看到新建的URL，視圖下方的窗格中顯示該URL的昵稱為“新浪”，類型為“HTTP”，值為，如圖5-17所示。圖5-16“添加URL”對話框圖5-17添加URL（7）在“設(shè)計(jì)”視圖中選中要應(yīng)用該URL的文本或圖像，如圖5-18所示。（8）在“URLs”面板的“收藏”視圖中選中需要的URL，例如“百度搜索”，然后單擊視圖底部的“應(yīng)用”按鈕，即可將指定的URL應(yīng)用到選定文本。如圖5-19所示。（9）如果在第（7）步中沒有選中文本，而是將插入點(diǎn)放在文本后面，則“收藏”視圖底部的“應(yīng)用”按鈕變?yōu)椤安迦搿卑粹o。單擊該按鈕，可在插入點(diǎn)處插入指定的鏈接文本，如圖5-20所示。圖5-18選中文本圖5-19應(yīng)用URL圖5-20插入U(xiǎn)RL任務(wù)3使用熱點(diǎn)制作圖像映射任務(wù)引入小明已經(jīng)學(xué)會(huì)了創(chuàng)建圖像鏈接，但是有時(shí)候需要對圖像的不同部分建立連接，這就需要利用熱點(diǎn)工具來創(chuàng)建圖像映射，具體要怎么操作呢？知識(shí)準(zhǔn)備在通常情況下，一個(gè)圖像只能對應(yīng)一個(gè)超鏈接。在瀏覽網(wǎng)頁時(shí)，讀者可能會(huì)遇到一個(gè)圖像的不同部分建立了不同的超鏈接，這就是圖像映射，只要使用熱點(diǎn)工具就可以輕松實(shí)現(xiàn)。簡單地說，圖像映射就是用熱點(diǎn)工具將一幅圖像分割為若干個(gè)區(qū)域，并將這些子區(qū)域設(shè)置成熱點(diǎn)區(qū)域，然后將這些不同的熱點(diǎn)區(qū)域鏈接到不同的頁面。單擊圖像上的不同熱點(diǎn)區(qū)域，可以跳轉(zhuǎn)到不同的頁面。案例——?jiǎng)?chuàng)建圖像映射下面通過一個(gè)實(shí)例介紹創(chuàng)建圖像映射的方法，最終效果如圖5-21所示。具體制作步驟如下：（1）新建一個(gè)空白的HTML文件。執(zhí)行“插入”｜“Image”命令，在文檔窗口中插入圖像。（2）選中圖像，單擊屬性面板上的“圓形熱點(diǎn)工具”按鈕，此時(shí)該圖標(biāo)會(huì)下凹，表示被選中。在圖像上的“景點(diǎn)”二字左上角按下鼠標(biāo)左鍵，然后向右下角拖動(dòng)鼠標(biāo)，直到出現(xiàn)的圓形框?qū)ⅰ熬包c(diǎn)”兩個(gè)字包圍，釋放鼠標(biāo)，第一個(gè)熱點(diǎn)建立完成。熱點(diǎn)區(qū)域顯示為半透明的藍(lán)色區(qū)域。（3）在屬性設(shè)置面板上單擊“矩形熱點(diǎn)工具”按鈕，此時(shí)該圖標(biāo)會(huì)下凹，表示被選中。在圖像上的“交通”二字的左上角按下鼠標(biāo)左鍵，然后向右下角拖動(dòng)鼠標(biāo)，直到出現(xiàn)的矩形框?qū)ⅰ敖煌ā眱蓚€(gè)字包圍，釋放鼠標(biāo)，第二個(gè)熱點(diǎn)建立完成。（4）在屬性設(shè)置面板上單擊“多邊形熱點(diǎn)工具”按鈕，此時(shí)該圖標(biāo)會(huì)下凹，表示被選中。在圖像上的“食宿”二字的左上角單擊鼠標(biāo)左鍵，加入一個(gè)定位點(diǎn)；移動(dòng)鼠標(biāo)單擊，加入第二個(gè)定位點(diǎn)，這時(shí)兩個(gè)定位點(diǎn)之間會(huì)連成一條直線。按同樣的方法添加三個(gè)定位點(diǎn)，此時(shí)5個(gè)定位點(diǎn)會(huì)連成一個(gè)多邊形，將“食宿”兩個(gè)字包圍，第三個(gè)熱點(diǎn)建立完成。（5）如果要調(diào)整熱點(diǎn)區(qū)域的大小，在屬性設(shè)置面板中單擊“指針熱點(diǎn)工具”按鈕，再單擊要調(diào)整大小的熱點(diǎn)區(qū)域，此時(shí)被選中的熱點(diǎn)區(qū)域四周會(huì)出現(xiàn)控制手柄。將光標(biāo)放在控制手柄上，然后按下鼠標(biāo)左鍵拖動(dòng)，即可改變熱點(diǎn)區(qū)域的大小，效果如圖5-22所示。圖5-21實(shí)例效果圖5-22加入熱點(diǎn)后的圖像（6）在屬性設(shè)置面板中單擊“指針熱點(diǎn)工具”按鈕，再單擊“景點(diǎn)”的熱點(diǎn)區(qū)域，選中該熱點(diǎn)區(qū)域。單擊屬性設(shè)置面板“鏈接”文本框右側(cè)的文件夾圖標(biāo)，打開文件選擇對話框，從站點(diǎn)目錄中選擇一個(gè)文件后，單擊“確定”按鈕關(guān)閉窗口，“鏈接”文本框中顯示超級(jí)鏈接文件的路徑及文件名。（7）按照上一步同樣的方法，為其他兩個(gè)熱點(diǎn)區(qū)域建立超級(jí)鏈接。（8）執(zhí)行“文件”｜“保存”命令保存文檔。在瀏覽器中預(yù)覽頁面。將鼠標(biāo)指針移到熱點(diǎn)區(qū)域上時(shí)，指針的形狀變?yōu)槭中?，并且在瀏覽器下方的狀態(tài)欄中顯示鏈接的路徑。單擊各個(gè)熱點(diǎn)區(qū)域，可以打開對應(yīng)的鏈接文件，并顯示相關(guān)的內(nèi)容。綜合實(shí)例文本與鏈接網(wǎng)頁實(shí)例下面通過一個(gè)實(shí)例展示文本與超級(jí)鏈接的應(yīng)用，效果如圖5-23所示。圖5-23實(shí)例效果（1）執(zhí)行“文件”｜“新建”命令，彈出“新建文檔”對話框。在對話框中選擇“新建文檔”類別的HTML文件，框架“無”，文檔類型默認(rèn)為HTML5，單擊“創(chuàng)建”按鈕，創(chuàng)建新文檔。（2）切換到“設(shè)計(jì)”視圖，在空白處右擊鼠標(biāo)，在彈出的快捷菜單中執(zhí)行“頁面屬性”命令，彈出“頁面屬性”對話框，如圖5-24所示。（3）在“背景顏色”文本框中輸入“#ABDEED”。（4）單擊“標(biāo)題/編碼”分類，在“標(biāo)題”文本框中輸入“朱熹名作欣賞”。單擊“確定”按鈕關(guān)閉對話框。（5）在“設(shè)計(jì)”視圖中輸入文字“聯(lián)系作者：webmaster”。選中“webmaster”，在屬性設(shè)置面板上的“鏈接”文本框中輸入“mailto:webmaster@”。（6）定義郵件鏈接的樣式。執(zhí)行“窗口”|“CSS設(shè)計(jì)器”命令，打開“CSS設(shè)計(jì)器”面板。單擊“添加CSS源”按鈕，在彈出的下拉菜單中選擇“在頁面中定義”；單擊“添加選擇器”按鈕，設(shè)置選擇器名稱為a:link，如圖5-25所示。（7）在CSS設(shè)計(jì)器的“屬性”窗格中取消選中“顯示集”，然后單擊“文本”圖標(biāo)，設(shè)置文本顏色為#FF6600，字體大小為16px，無修飾，如圖5-26所示。首次啟動(dòng)Dreamweaver2021時(shí)，默認(rèn)選中“屬性”部分的“顯示集”復(fù)選框，并在所有后續(xù)Dreamweaver會(huì)話中保留此選項(xiàng)的任何更改（選擇或取消選擇）。（8）輸入文字“鏈接到新浪:”，選中，在屬性設(shè)置面板上的“鏈接”文本框中輸入“”。圖5-24“頁面屬性”對話框圖5-25添加選擇器圖5-26設(shè)置屬性（9）執(zhí)行“插入”|“表格”菜單命令，在彈出的對話框中設(shè)置行數(shù)為7，列數(shù)為3，寬度為600像素，邊框粗細(xì)為0，單元格邊距和間距均為0。選中插入的表格，在屬性面板上設(shè)置表格在頁面上居中對齊。（10）依次合并第二行以外的其他行的單元格，并設(shè)置單元格內(nèi)容水平和垂直對齊方式均為居中，然后輸入標(biāo)題、頁內(nèi)超級(jí)鏈接地址和詩詞具體內(nèi)容。（11）選中“朱熹名作欣賞”，在屬性面板上對應(yīng)的“格式”下拉列表框中選擇“標(biāo)題1”，在屬性面板上設(shè)置字體為華文行楷，大小為36，顏色為#3399FF，且文本對齊方式為“居中對齊”。注意如果在“字體”列表中沒有找到需要的字體，可以單擊下拉列表底端的“管理字體”命令，在彈出的“管理字體”對話框中單擊“自定義字體堆?！表摵灒缓笤凇翱捎米?/p>