1、操作準備操作準備3.1操作演練操作演練3.2考核評價考核評價3.4考核評價考核評價技術提升技術提升3.3 超級鏈接是網頁中基本元素之一，利用它不僅可超級鏈接是網頁中基本元素之一，利用它不僅可以進行網頁間的相互鏈接，還可以使網頁鏈接到相以進行網頁間的相互鏈接，還可以使網頁鏈接到相關的圖像文件、多媒體文件以及下載程序等。關的圖像文件、多媒體文件以及下載程序等。教學目標教學目標（1 1）學會創建導航欄）學會創建導航欄（2 2）學會創建網頁的內部鏈接和外部鏈接）學會創建網頁的內部鏈接和外部鏈接（3 3）學會創建命名錨記和到該命名錨記的鏈接）學會創建命名錨記和到該命名錨記的鏈接（4 4）學會在圖像中設置

2、熱點區域，并創建圖像熱點鏈接）學會在圖像中設置熱點區域，并創建圖像熱點鏈接（5 5）學會創建電子郵件鏈接）學會創建電子郵件鏈接（6 6）學會更改鏈接顏色、設置鏈接的打開方式、設置空鏈接）學會更改鏈接顏色、設置鏈接的打開方式、設置空鏈接（7 7）學會測試鏈接的有效性）學會測試鏈接的有效性（8 8）學會創建下拉菜單，能實現菜單的自動展開與收縮功能）學會創建下拉菜單，能實現菜單的自動展開與收縮功能（9 9）能正確插入浮動框架）能正確插入浮動框架iframeiframe，并設置其屬性，并設置其屬性（1010）理解絕對路徑和相對路徑，熟悉鏈接的類型）理解絕對路徑和相對路徑，熟悉鏈接的類型教學方法教學方法

3、任務驅動法、理論實踐一體化、講練結合任務驅動法、理論實踐一體化、講練結合課時建議課時建議8 8課時（包含考核評價）課時（包含考核評價） 在本地硬盤（例如在本地硬盤（例如D盤）中創建一個文件夾盤）中創建一個文件夾“網網頁設計與制作案例頁設計與制作案例”，將光盤中的，將光盤中的“單元單元3”（包括（包括所有子文件夾以及文件）拷貝到該文件夾中。所有子文件夾以及文件）拷貝到該文件夾中。 使用創建站點向導創建名稱為使用創建站點向導創建名稱為“單元單元3”的本地的本地站點。站點。 打開文件夾打開文件夾“3-1”中的網頁文檔中的網頁文檔0303.html，在，在該網頁的該網頁的“”與與“”之間添加以下代碼之

4、間添加以下代碼，鏈接外部樣式文件。，鏈接外部樣式文件。【任務任務3-1】創建頂部橫向導航欄創建頂部橫向導航欄【任務描述任務描述】 （1）創建頂部橫向導航欄。）創建頂部橫向導航欄。 頂部橫向導航欄包括頂部橫向導航欄包括“首頁首頁”、“筆記本筆記本”、“數數碼影音碼影音”、“電玩產品電玩產品”、“手機通訊手機通訊”、 “硬件外設硬件外設”和和“辦公設備辦公設備”等等7個組成部分。個組成部分。 （2）設置頂部導航欄各個文本形式的內部鏈接。）設置頂部導航欄各個文本形式的內部鏈接。 頂部橫向導航欄的外觀效果如圖頂部橫向導航欄的外觀效果如圖3-1所示。所示。圖圖3-13-1頂部橫向導航欄的外觀效果頂部橫向

5、導航欄的外觀效果【任務實施任務實施】1創建頂部橫向導航欄創建頂部橫向導航欄 在網頁文檔在網頁文檔0303.html中中“”與與“”之間輸入以下之間輸入以下HTML代碼代碼 首頁首頁 筆記本筆記本 數碼影音數碼影音 電玩產品電玩產品 手機通訊手機通訊 硬件外設硬件外設 辦公設備辦公設備（1）使用）使用【指向文件指向文件】按鈕創建超鏈接按鈕創建超鏈接（2）使用）使用【屬性屬性】面板定義超鏈接面板定義超鏈接（3）使用菜單命令和對話框定義超鏈接）使用菜單命令和對話框定義超鏈接（4）創建空地址鏈接）創建空地址鏈接 按照同樣的方法為網頁文檔按照同樣的方法為網頁文檔0303.html中頂部導航文字中頂部導航

6、文字“手機通訊手機通訊”、“硬件外設硬件外設”、“辦公設備辦公設備”創建空地址鏈創建空地址鏈接。接。 切換到網頁文檔切換到網頁文檔0303.html的的【代碼代碼】視圖，頂部視圖，頂部橫向導航欄的橫向導航欄的HTML代碼如下所示。代碼如下所示。 首頁首頁 筆記本筆記本 數碼影音數碼影音電玩產品電玩產品 手機通訊手機通訊 硬件外設硬件外設 辦公設備辦公設備 保存網頁保存網頁0303.html，然后按快捷鍵，然后按快捷鍵F12瀏覽該網瀏覽該網頁，頂部橫向導航欄的瀏覽效果如圖頁，頂部橫向導航欄的瀏覽效果如圖3-1所示。所示。【任務任務3-2】創建底部橫向友情鏈接創建底部橫向友情鏈接導航欄導航欄【任務

7、描述任務描述】 （1）創建底部橫向友情鏈接導航欄。）創建底部橫向友情鏈接導航欄。 底部橫向友情鏈接導航欄包括底部橫向友情鏈接導航欄包括“淘寶網淘寶網”、“當當網當當網”、“京東商城京東商城”、“1號店號店”、“好買網好買網”、“一比二一比二購購”、“太平洋電腦網太平洋電腦網”、“金蛋商城金蛋商城”、“綠森數碼綠森數碼”、“樂購網樂購網”、“一瞬數碼一瞬數碼”、“品牌家電網品牌家電網”、“QQ商城商城”、“蘇寧易購蘇寧易購”等等14個超鏈接。個超鏈接。 （2）設置底部橫向友情鏈接導航欄各個文本形式的外）設置底部橫向友情鏈接導航欄各個文本形式的外部鏈接。部鏈接。 底部橫向友情鏈接導航欄的外觀效果如

8、圖底部橫向友情鏈接導航欄的外觀效果如圖3-8所所示。示。圖圖3-83-8底部橫向友情鏈接導航欄的外觀效果底部橫向友情鏈接導航欄的外觀效果【任務實施任務實施】 1創建底部橫向友情鏈接導航欄。創建底部橫向友情鏈接導航欄。 2創建文本形式的外部鏈接。創建文本形式的外部鏈接。 3查看底部橫向友情鏈接導航欄的查看底部橫向友情鏈接導航欄的HTML代碼。代碼。 4保存網頁與瀏覽網頁效果。保存網頁與瀏覽網頁效果。 保存網頁保存網頁0303.html，然后按快捷鍵，然后按快捷鍵F12，底部橫，底部橫向友情鏈接導航欄的瀏覽效果如圖向友情鏈接導航欄的瀏覽效果如圖3-8所示。所示。【任務任務3-3】創建左側幫助導航欄

9、創建左側幫助導航欄【任務描述任務描述】 （1）創建左側幫助導航欄。）創建左側幫助導航欄。 左側幫助導航欄主要包括左側幫助導航欄主要包括“新手指南新手指南”、“配送方式配送方式”、“支付方式支付方式”和和“售后服務售后服務”等等4個組成部分，每個部分又細分為多個選項個組成部分，每個部分又細分為多個選項。 （2）設置左側幫助導航欄各個文本形式的超）設置左側幫助導航欄各個文本形式的超鏈接。鏈接。 左側幫助導航欄的外觀效果如圖左側幫助導航欄的外觀效果如圖3-10所所示。示。圖圖3-103-10左側幫助導航欄的外觀效果左側幫助導航欄的外觀效果【任務實施任務實施】1創建左側幫助導航欄創建左側幫助導航欄2創

10、建文本形式的超鏈接創建文本形式的超鏈接（1）使用）使用【指向文件指向文件】按鈕創建超鏈接按鈕創建超鏈接（2）使用）使用【屬性屬性】面板定義超鏈接面板定義超鏈接（3）使用菜單命令和對話框定義超鏈接）使用菜單命令和對話框定義超鏈接 使用類似方法創建其他使用類似方法創建其他15個超鏈接。個超鏈接。3查看左側幫助導航欄的查看左側幫助導航欄的HTML代碼代碼4保存網頁與瀏覽網頁效果保存網頁與瀏覽網頁效果 保存網頁保存網頁0303.html，然后按快捷鍵，然后按快捷鍵F12，左側幫助導，左側幫助導航欄的瀏覽效果如圖航欄的瀏覽效果如圖3-10所示。所示。【任務任務3-4】創建底部幫助導航欄創建底部幫助導航欄

11、【任務描述任務描述】 （1）創建包括底部幫助導航欄的網頁）創建包括底部幫助導航欄的網頁0302help.html 。 在站點文件夾在站點文件夾“page”中創建包括底部幫助導航欄的網中創建包括底部幫助導航欄的網頁頁0302help.html，橫向排列的底部幫助導航欄主要包括，橫向排列的底部幫助導航欄主要包括“新新手指南手指南”、“配送方式配送方式”、“支付方式支付方式”、“售后服務售后服務”和和“幫助信息幫助信息”等等5個組成部分，每個部分縱向又細分為多個個組成部分，每個部分縱向又細分為多個選項。選項。 （2）設置底部幫助導航欄各個文本形式的超鏈接。）設置底部幫助導航欄各個文本形式的超鏈接。

12、底部幫助導航欄的外觀效果如圖底部幫助導航欄的外觀效果如圖3-11所示。所示。 （3）在網頁文檔）在網頁文檔0302.html中，應用浮動框架中，應用浮動框架 嵌入網頁嵌入網頁0302help.html。圖圖3-113-11底部幫助導航欄的外觀效果底部幫助導航欄的外觀效果【任務實施任務實施】 1創建包括底部幫助導航欄的網頁創建包括底部幫助導航欄的網頁0302help.html 2創建文本形式的超鏈接創建文本形式的超鏈接 3保存網頁與瀏覽網頁效果保存網頁與瀏覽網頁效果 保存網頁保存網頁0302help.html，然后按快捷鍵，然后按快捷鍵F12，底部，底部幫助導航欄的瀏覽效果如圖幫助導航欄的瀏覽效

13、果如圖3-11所示。所示。 4利用浮動框架在網頁利用浮動框架在網頁0302.html中嵌入網頁中嵌入網頁0302help.html 。 打開文件夾打開文件夾“3-1”中網頁文檔中網頁文檔0302.html，在該，在該 網頁中網頁中“”與與“”之間輸入以下之間輸入以下HTML代碼，嵌入網頁代碼，嵌入網頁0302help.html。用戶用戶幫助幫助【任務任務3-5】創建多種形式的超級鏈接創建多種形式的超級鏈接【任務描述任務描述】 在網頁在網頁0302.html中創建以下多種形式的超鏈接：中創建以下多種形式的超鏈接：（1）創建圖片形式的超鏈接）創建圖片形式的超鏈接（2）創建電子郵件鏈接）創建電子郵件

14、鏈接（3）創建錨點鏈接）創建錨點鏈接（4）創建圖像熱點鏈接）創建圖像熱點鏈接（5）檢查鏈接的有效性和正確性）檢查鏈接的有效性和正確性 網頁網頁0302.html的瀏覽效果如圖的瀏覽效果如圖3-12所示。所示。圖圖3-123-12網頁網頁0302.html0302.html的瀏覽效果的瀏覽效果【任務實施任務實施】 1創建圖片形式的內部鏈接創建圖片形式的內部鏈接 2創建電子郵件鏈接創建電子郵件鏈接 3創建錨點鏈接創建錨點鏈接（1）插入一個命名錨記）插入一個命名錨記（2）創建錨點鏈接）創建錨點鏈接4創建圖像熱點鏈接創建圖像熱點鏈接（1）選中繪制熱點區域的圖像）選中繪制熱點區域的圖像（2）繪制矩形熱點

15、區域）繪制矩形熱點區域 打開網頁文檔打開網頁文檔0302.html，切換到，切換到“代碼代碼”視圖，視圖，文字文字“設為首頁設為首頁”對應的對應的HTML代碼如下所示。代碼如下所示。設為首頁設為首頁 文字文字“收藏易購收藏易購”對應的對應的HTML代碼如下所示。代碼如下所示。收藏易購收藏易購6檢查鏈接檢查鏈接7保存網頁與瀏覽網頁效果保存網頁與瀏覽網頁效果 保存網頁保存網頁0302.html，然后按快捷鍵，然后按快捷鍵F12瀏覽其效瀏覽其效果，如圖果，如圖3-12所示，單擊各個鏈接，觀察其鏈接效果所示，單擊各個鏈接，觀察其鏈接效果是否正確。是否正確。【任務任務3-6】創建下拉菜單和自創建下拉菜單

16、和自動展開菜單動展開菜單【任務描述任務描述】 （1）創建縱向下拉列表菜單。）創建縱向下拉列表菜單。 （2）創建自動展開與收縮菜單。）創建自動展開與收縮菜單。 （3）編寫）編寫JavaScript代碼，實現菜單的展開與收縮代碼，實現菜單的展開與收縮功能。功能。 縱向下拉列表菜單和自動展開與收縮菜單的瀏覽縱向下拉列表菜單和自動展開與收縮菜單的瀏覽效果如圖效果如圖3-22所示。所示。圖圖3-223-22縱向下拉列表菜單和自動展開與收縮菜單的瀏覽效果縱向下拉列表菜單和自動展開與收縮菜單的瀏覽效果【任務實施任務實施】 1創建縱向下拉列表菜單。創建縱向下拉列表菜單。 打開文件夾打開文件夾“3-3”中網頁文

17、檔中網頁文檔0303.html，在該網頁中，在該網頁中“”下面輸入以下下面輸入以下HTML代碼。代碼。首頁首頁 筆記本筆記本 筆記本電腦筆記本電腦 筆記本配件筆記本配件 電腦包電腦包 數碼影音數碼影音 數碼影像數碼影像 MP3/MP4 GPS 便攜移動存儲便攜移動存儲/讀卡器讀卡器時尚小數碼時尚小數碼 相機相機/攝象機配件攝象機配件 錄音筆錄音筆 2創建自動展開與收縮菜單。創建自動展開與收縮菜單。 在網頁文檔在網頁文檔0303.html中縱向下拉列表菜單的中縱向下拉列表菜單的HTML代碼之后輸入以下代碼之后輸入以下HTML代碼。代碼。 快速導航快速導航 X 產品產品 手機手機 | MP3/MP

18、4 | MID | EBook 最新活動最新活動 | 新品新品信息信息 | 產品論壇產品論壇 服務與支持服務與支持 定制服務定制服務 | 銷售網點銷售網點 | 售后網點售后網點 | 服服務條款務條款 問吧問吧 | 在線在線投訴投訴 | 常見問題常見問題 產品注冊產品注冊 | 配件真偽查詢配件真偽查詢 | 資源下載資源下載 品牌與娛樂品牌與娛樂 Fans 廣場廣場 | 明星館明星館 | 訓練營訓練營 | 歡樂谷歡樂谷 會員中心會員中心 | 酷炫抽大獎酷炫抽大獎 | O幣商城幣商城 3編寫編寫JavaScript代碼，實現菜單的展開與收縮功能。代碼，實現菜單的展開與收縮功能。 在網頁文檔在網頁文檔

19、0303.html中的中的“”與與“”之間之間添加以下添加以下JavaScript代碼，實現菜單的展開與收縮功能。代碼，實現菜單的展開與收縮功能。 function menu_drop(menuId, display) document.getElementById(menuId).style.display=displayWay; 4保存網頁與瀏覽網頁效果。保存網頁與瀏覽網頁效果。 保存網頁保存網頁0303.html，按快捷鍵，按快捷鍵F12瀏覽其效果瀏覽其效果，如圖，如圖3-22所示。所示。（1）瀏覽縱向下拉列表菜單）瀏覽縱向下拉列表菜單（2）瀏覽自動展開與收縮菜單）瀏覽自動展開與收縮菜單

20、【考核任務描述考核任務描述】 教材配套光盤中已提供了考核評價項目所需教材配套光盤中已提供了考核評價項目所需 的網頁文件、的網頁文件、CSS樣式表文件和網頁素材，在網樣式表文件和網頁素材，在網 頁頁0304.html中完成以下操作。中完成以下操作。 （1）為頂部導航欄的文字）為頂部導航欄的文字“北京北京”設置超鏈接，設置超鏈接， 鏈接到文件夾鏈接到文件夾“page”的網頁文件的網頁文件03beijing.html。 （2）為網頁左上部的）為網頁左上部的“八達嶺長城八達嶺長城”圖片設置超圖片設置超 鏈接，鏈接到文件夾鏈接，鏈接到文件夾“images”中的圖片中的圖片0301.jpg。 （3）為底部導航欄的文字）為底部導航欄的文字“網上留言網上留言”設置電子郵件設置電子郵件 鏈接，鏈接到郵箱地址鏈接，鏈接到郵箱地址，設置主題為，設置主題為 “對網站的意見與建議對網站的意見與建議” 。 （4）為底部的友情鏈接文字）為底部的友情鏈接文字“張家界旅游網張家界旅游網”設置超鏈設置超鏈 接，鏈接到外部網站，其網址為接，鏈接到外部網站，其網址為http:/ （5）在網頁頂部的文字）在網頁頂部的文字“首頁首頁”左側插入一個命名錨左側插入一個命名錨 記，該錨記命名為記，該錨記命名為“b_top”，為網頁底部圖片，為網頁底部圖片03top.gif 創建