【任務(wù)】制作包含超級(jí)鏈接的展示張家界景點(diǎn)的網(wǎng)頁(yè)課件

1、網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)教程 （第3版）2單元6制作包含超級(jí)鏈接和 導(dǎo)航欄的網(wǎng)頁(yè)【任務(wù)6-1】制作包含超級(jí)鏈接的展示 張家界景點(diǎn)的網(wǎng)頁(yè)3【任務(wù)描述】【任務(wù)6-1】制作包含超級(jí)鏈接的展示 張家界景點(diǎn)的網(wǎng)頁(yè)（1）創(chuàng)建樣式文件base.css和main.css，在該樣式文件中定義標(biāo)簽的屬性、類(lèi)選擇符及其屬性。（2）創(chuàng)建網(wǎng)頁(yè)文檔0401.html，且鏈接外部樣式文件base.css和main.css。4【任務(wù)實(shí)施】1打開(kāi)網(wǎng)頁(yè)打開(kāi)已有網(wǎng)頁(yè)0601.html。2設(shè)置超級(jí)鏈接的屬性打開(kāi)【頁(yè)面屬性】對(duì)話框，在該對(duì)話框單擊“分類(lèi)”列表項(xiàng)“鏈接（CSS）”，在右側(cè)設(shè)置“鏈接”屬性，將“鏈接顏色”顏色設(shè)置為“#00A

2、5F6”，“變換圖像鏈接”顏色設(shè)置為“#C60119”，“已訪問(wèn)鏈接”顏色設(shè)置為“#1A22C4”，“活動(dòng)鏈接”顏色設(shè)置為“#FFA024”。5“下劃線樣式”設(shè)置為“僅在變換圖像時(shí)顯示下劃線”，如圖6-2所示，設(shè)置完成單擊【確定】按鈕即可。圖6-2在【頁(yè)面屬性】對(duì)話框設(shè)置鏈接屬性63創(chuàng)建文本形式的外部鏈接（1）選中網(wǎng)頁(yè)底部導(dǎo)航欄中的文字“張家界旅游網(wǎng)”。（2）在【屬性】面板的“鏈接”文本框中輸入外部鏈接的絕對(duì)路徑“”。7（3）外部鏈接的絕對(duì)路徑輸入完成之后，屬性面板中的“目標(biāo)”下拉列表框即變?yōu)榭蛇x狀態(tài)，下拉列表中有多個(gè)選項(xiàng)可供選擇，這里選擇“_blank”?？梢园凑胀瑯拥姆椒椤包S山旅游網(wǎng)”、

3、“途牛網(wǎng)”、“昆明旅游網(wǎng)”、“桂林旅游網(wǎng)”等文本設(shè)置外部超級(jí)鏈接。84創(chuàng)建文本形式的內(nèi)部鏈接（1）選中網(wǎng)頁(yè)頂部導(dǎo)航欄中的文字“天子山自然保護(hù)區(qū)”。（2）在Dreamweaver CC的主界面中，選擇命令【插入】【Hyperlink】，彈出【Hyperlink】對(duì)話框。（3）在【Hyperlink】對(duì)話框中，單擊“鏈接”列表框中右邊的【瀏覽文件】按鈕，在彈出的【選擇文件】對(duì)話框中選擇文件夾“webpage”中的網(wǎng)頁(yè)文件“tzs.html”。9（4）在“目標(biāo)”下拉列表框中選擇“_blank”。（5）在“標(biāo)題”文本框中輸入文字“欣賞天子山美景”，如圖6-5所示。超級(jí)鏈接的參數(shù)設(shè)置完成后，單擊【確定】

4、按鈕即可。圖6-5在【Hyperlink】對(duì)話框中設(shè)置超級(jí)鏈接的參數(shù)10至此，1個(gè)文本形式的內(nèi)部鏈接便創(chuàng)建完成。可以按照同樣的方法為網(wǎng)頁(yè)頂部導(dǎo)航欄中的文本“索溪峪自然保護(hù)區(qū)”、“黃龍洞”、“寶峰湖”、“張家界其他景點(diǎn)”添加內(nèi)部鏈接，“目標(biāo)”設(shè)置為“_blank”。115創(chuàng)建圖片形式的內(nèi)部鏈接（1）選中網(wǎng)頁(yè)0601.html中的圖片“bfh.jpg”，然后在【屬性】面板中，單擊“鏈接”列表框中右邊的【瀏覽文件】按鈕，在彈出的【選擇文件】對(duì)話框中選擇文件夾“webpage”中的網(wǎng)頁(yè)文檔“bfh.html”，單擊【確定】按鈕返回【屬性】面板。12接著在【屬性】面板的“目標(biāo)”下拉列表框中選擇“_bla

5、nk”，如圖6-6所示。圖6-6在【屬性】面板中設(shè)置圖片的鏈接屬性（2）設(shè)置超級(jí)鏈接title屬性單擊【文檔】工具欄中的【拆分】按鈕，切換到拆分視圖窗口。13在標(biāo)簽內(nèi)添加title屬性，即輸入以下HTML代碼：title=云梯百丈上天臺(tái)，高峽平湖一鑒開(kāi)。（3）保存網(wǎng)頁(yè)，按F12鍵預(yù)覽其效果，將鼠標(biāo)指針?lè)胖迷谠O(shè)置了超級(jí)鏈接的圖片上時(shí)，就會(huì)看到圖片旁邊的提示信息。14按照同樣的方法為網(wǎng)頁(yè)0601.html中另一張圖片“tzs.jpg”設(shè)置超級(jí)鏈接和提示信息，鏈接到文件夾“webpage”中的網(wǎng)頁(yè)文檔“tzs.html”，“目標(biāo)”設(shè)置為“_blank”。156創(chuàng)建電子郵件鏈接（1）選中網(wǎng)頁(yè)0601.

6、html底部導(dǎo)航欄的文字“您的建議”，在【屬性】面板的“鏈接”文本框中輸入“mailto:”和郵箱地址，如“mailto:”。16（2）在郵箱地址的后面加上“?subject=對(duì)網(wǎng)站的意見(jiàn)與建議”，完整的語(yǔ)句為“mailto:?subject=對(duì)網(wǎng)站的意見(jiàn)與建議”。這樣預(yù)覽頁(yè)面時(shí)，用戶(hù)單擊該電子郵件鏈接彈出發(fā)信窗口會(huì)有現(xiàn)有的主題。然后單擊【確定】按鈕即可。177創(chuàng)建錨點(diǎn)鏈接創(chuàng)建到命名錨記的鏈接分為兩個(gè)步驟：首先創(chuàng)建1個(gè)命名錨記，然后創(chuàng)建到該命名錨記的鏈接，也就是錨點(diǎn)鏈接。（1）插入第1個(gè)命名錨記切換到【代碼】視圖，將鼠標(biāo)指針置于網(wǎng)頁(yè)頂部導(dǎo)航欄文字“首頁(yè)”的左側(cè)。然后輸入以下代碼插入一個(gè)命名錨記

7、：18（2）插入第二個(gè)命名錨記將光標(biāo)置于網(wǎng)頁(yè)頂部導(dǎo)航欄文字“索溪峪自然保護(hù)區(qū)”的左側(cè)，然后輸入以下代碼插入另一個(gè)命名錨記：19（3）創(chuàng)建錨點(diǎn)鏈接選中表格中的文字“回到頁(yè)首”，在【屬性】面板的“鏈接”文本框中輸入“#top”，如圖6-8所示。圖6-8 在【屬性】面板中設(shè)置鏈接為“#top”保存該網(wǎng)頁(yè)，按F12預(yù)覽其效果，單擊錨點(diǎn)鏈接文字“回到頁(yè)首”即可跳轉(zhuǎn)到網(wǎng)頁(yè)中文字“首頁(yè)”的命名錨記位置。208、創(chuàng)建空地址鏈接選中網(wǎng)頁(yè)中的文字“返回首頁(yè)”，然后在【屬性】面板的“鏈接”文本框中輸入半角字符“#”，即可創(chuàng)建空地址鏈接。保存該網(wǎng)頁(yè)，按F12預(yù)覽其效果，單擊該空地址鏈接“返回首頁(yè)”，則會(huì)跳轉(zhuǎn)到當(dāng)前網(wǎng)頁(yè)

8、的開(kāi)始。219、創(chuàng)建圖像熱點(diǎn)鏈接在一幅尺寸較大的圖像中，可以同時(shí)創(chuàng)建多個(gè)熱點(diǎn)，熱點(diǎn)的形狀可以是矩形、橢圓形或多邊形。（1）選中繪制熱點(diǎn)區(qū)域的圖像單擊選中表格中的圖像“map01.jpg”。22（2）繪制矩形熱點(diǎn)區(qū)域在圖像的【屬性】面板中單擊【矩形熱點(diǎn)工具】按鈕，此時(shí)鼠標(biāo)指針變成“”形狀，然后將鼠標(biāo)指針移到圖像“map01.jpg”左上角“天子山自然保護(hù)區(qū)”位置，按住鼠標(biāo)左鍵拖動(dòng)繪制1個(gè)矩形，當(dāng)矩形的大小合適時(shí)釋放鼠標(biāo)左鍵，于是1個(gè)矩形的熱點(diǎn)區(qū)域便繪制完成，且用透明的藍(lán)色矩形顯示指定圖像的熱點(diǎn)區(qū)域。23在熱點(diǎn)的【屬性】面板中，單擊“鏈接”文本框中右邊的【瀏覽文件】按鈕，在彈出的【選擇文件】對(duì)話框

9、中選擇文件夾“webpage”中的網(wǎng)頁(yè)文檔“tzs.html”，單擊【確定】按鈕返回【屬性】面板，在“目標(biāo)”列表框中選擇“_blank”，在“替換”列表框中輸入“天子山自然保護(hù)區(qū)”，且按【Enter】鍵結(jié)束輸入，如圖6-10所示。圖6-10在矩形熱點(diǎn)的【屬性】面板中設(shè)置鏈接屬性241個(gè)熱點(diǎn)區(qū)域創(chuàng)建完成后，單擊“熱點(diǎn)”的【屬性】面板左下角的【指針熱點(diǎn)工具】，結(jié)束熱點(diǎn)區(qū)域的繪制狀態(tài)?？梢赃x中熱點(diǎn)區(qū)域，對(duì)其大小和位置進(jìn)行適當(dāng)?shù)恼{(diào)整。25（3）繪制橢圓形熱點(diǎn)區(qū)域在圖像的【屬性】面板中單擊【橢圓形熱點(diǎn)工具】按鈕，此時(shí)鼠標(biāo)指針變成“”形狀，然后將鼠標(biāo)指針移到圖像“map01.jpg”右側(cè)的“索溪峪自然保護(hù)

10、區(qū)”位置，按住鼠標(biāo)左鍵拖動(dòng)繪制1個(gè)橢圓，當(dāng)橢圓的大小合適時(shí)釋放鼠標(biāo)左鍵，于是1個(gè)橢圓的熱點(diǎn)區(qū)域便繪制完成，26在熱點(diǎn)的【屬性】面板中，單擊“鏈接”文本框中輸入“#索溪峪”，在“目標(biāo)”列表框中選擇“_blank”，在“替換”列表框中輸入“索溪峪”，且按【Enter】鍵結(jié)束輸入，如圖6-11所示。然后單擊“熱點(diǎn)”的【屬性】面板左下角的【指針熱點(diǎn)工具】，結(jié)束熱點(diǎn)區(qū)域的繪制狀態(tài)。圖6-11在橢圓形熱點(diǎn)的【屬性】面板中設(shè)置鏈接屬性27（4）繪制多邊形熱點(diǎn)區(qū)域在圖像的【屬性】面板中單擊【多邊形熱點(diǎn)工具】按鈕，此時(shí)鼠標(biāo)指針變成“”形狀，然后將鼠標(biāo)指針移到圖像“map01.jpg”左下角“張家界國(guó)家森林公園”

11、的合適位置，單擊鼠標(biāo)左鍵，然后依次在多個(gè)不同的點(diǎn)單擊，便會(huì)形成1個(gè)任意多邊形區(qū)域。28圖像“map01.jpg”中繪制的3個(gè)熱點(diǎn)區(qū)域如圖6-12所示。圖6-12 圖像“map01.jpg”中繪制的3個(gè)熱點(diǎn)區(qū)域29最后單擊“熱點(diǎn)”的【屬性】面板左下角的【指針熱點(diǎn)工具】，結(jié)束熱點(diǎn)區(qū)域的繪制狀態(tài)。（5）保存網(wǎng)頁(yè)，預(yù)覽其效果，單擊各個(gè)熱點(diǎn)鏈接，觀察其效果。3010、檢查鏈接（1）在Dreamweaver CC主窗口的【窗口】菜單中，選擇【結(jié)果】【鏈接檢查器】命令，打開(kāi)【鏈接檢查器】面板。（2）在【鏈接檢查器】面板中，單擊面板左上角的綠色箭頭，彈出如圖6-15所示的下拉菜單，在該菜單中選擇命令項(xiàng)【檢查當(dāng)前文檔中的鏈接】。圖6-15檢查鏈接的下拉菜單31（3）自動(dòng)開(kāi)始檢查站點(diǎn)鏈接，檢查完畢后，如果存在無(wú)效鏈接，便會(huì)顯示在該對(duì)話框中。如果要修改無(wú)效鏈接，直接