1、網頁設計與制作案例教程（第2版） http:/第6章 網頁超鏈接與導航網頁設計與制作案例教程（第2版）本章學習內容o 6.1 案例1 設計制作過節樂網頁o 6.2 案例2 圖像地圖設計國家地理網站頁面o 6.3 學習任務：網頁導航概述o 6.4 案例3 用CSS設計制作網頁導航o 6.5 實訓 設計制作點點星空網站頁面網頁設計與制作案例教程（第2版）6.1 案例1 設計制作過節樂網頁o 學習目標：學習目標：認識超鏈接，掌握各類超鏈接的作用與創建方法，并設置其CSS樣式。o 知識要點：知識要點：超鏈接的分類，路徑的設置，創建文檔鏈接、錨點鏈接、電子郵件鏈接、空鏈接和腳本鏈接的方法，用CSS設置超

2、鏈接樣式的方法。案例效果如圖6-1所示，請單擊頁面上的超鏈接，觀察鏈接效果。網頁設計與制作案例教程（第2版）圖6-1 過節樂網頁效果6.1 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版）6.1.1 超鏈接概述超鏈接概述 1認識超鏈接認識超鏈接 所謂超鏈接是指從某個網頁元素指向一個目標的連接關系。這個鏈接目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一幅圖像、一個電子郵件地址、一個文件、甚至是一個應用程序。在一個網頁中用來創建超鏈接的元素，可以是一段文字，或是一幅圖像等。當瀏覽者單擊設置了超鏈接的文字或圖像后，鏈接目標將顯示在瀏覽器中，并根據目標的類型打開或運行。6.1

3、 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版） 超鏈接有以下不同的分類方式：l按照鏈接路徑的不同，網頁中超鏈接主要分為內部鏈接、局部鏈接和外部鏈接。l按照目標對象的不同，網頁中的超鏈接可以分為文檔鏈接、錨點鏈接、電子郵件鏈接、腳本鏈接、空鏈接等。 2超鏈接路徑超鏈接路徑 創建超鏈接時，超鏈接路徑的設置非常重要，如果設置不正確，將不能正確完成跳轉功能。超鏈接路徑分為絕對路徑和相對路徑兩大類。6.1 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版）6.1.2 創建各類超鏈接創建各類超鏈接 1文檔鏈接文檔鏈接 首先選中要創建超鏈接的文字或圖像，創建方法有以下幾種： （1）選擇

4、“插入超級鏈接”菜單命令，或者單擊“插入”面板“常用”類別中的“超鏈接”圖標按鈕 ，打開“超級鏈接”對話框，從中設置文本鏈接目標和鏈接目標打開的方式。6.1 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版） “超級鏈接”對話框各項含義如下。l 文本：設置要創建超鏈接的文本。l 鏈接：指定鏈接目標對象的路徑，可以直接輸入，也可以通過單擊后面的【瀏覽】按鈕 ，打開“選擇文件”對話框進行選擇。6.1 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版）l 目標：指定鏈接目標打開的窗口，其中，“_blank”表示在新窗口中打開，“_new”也表示在新窗口中打開，“_parent”表示在

5、上級窗口中打開，“_self”表示在當前窗口中打開，“_top”表示在頂層窗口中打開。默認“_self”。l 標題：設置超鏈接的標題。在瀏覽器中，當鼠標置于超鏈接文本上時，將在鼠標后出現一個黃色的浮動框，并顯示超鏈接標題的名稱。6.1 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版） （2）在“屬性”面板“HTML”類別中的“鏈接”文本框中直接輸入路徑，或者單擊“鏈接”后面的“瀏覽文件”按鈕 ，在打開的對話框中選擇目標文件創建超鏈接。 （3）在“屬性”面板中，將“鏈接”后面的“指向文件”圖標按鈕 拖曳到“文件”面板中的目標文件上創建鏈接。 （4）按住鍵，拖曳鼠標指針到“文件”面板中的

6、“目標文件”上創建鏈接。6.1 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版） 提示：創建超鏈接的目標文件不僅可以是網頁文件，還可以是其他類型文件，如圖像文件、音頻文件、視頻文件、文本文件等。單擊超鏈接，目標文件將在瀏覽器中打開，如果目標文件需要其他應用程序打開，則單擊超鏈接后會彈出“下載文件”對話框，詢問用戶打開或者保存。 提示：修改超鏈接的操作步驟與創建超鏈接相同。若刪除超鏈接，只要選定超鏈接對象，將“屬性”面板“鏈接”下拉框中的內容刪除即可。 6.1 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版） 2錨點鏈接錨點鏈接 錨點鏈接的功能是：單擊超鏈接對象后，可以跳轉到

7、本頁面或其他頁面中的指定位置，即命名錨記處。錨點超鏈接通常用于長篇文章、技術文檔等內容的網頁中。 創建錨點鏈接分為建立命名錨記和創建指向命名錨記的超鏈接兩部分。 6.1 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版） （1）創建命名錨記。 將鼠標光標定位在要設置命名錨記的位置，選擇“插入命名錨記”菜單命令，或者單擊“插入”面板“常用”類別中的“命名錨記”圖標按鈕 ，或者按下組合鍵，均能彈出“命名錨記”對話框，在對話框中輸入命名錨記的名稱。 （2）創建指向命名錨記的超鏈接。 選中要設置錨點鏈接的文本或圖像，在“屬性”面板的“鏈接”框中，輸入一個“#”字符和命名錨記名稱，或將“指向文件

8、”圖標按鈕拖曳到命名錨記處。6.1 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版） 3電子郵件鏈接電子郵件鏈接 使用電子郵件鏈接，可以方便地打開瀏覽器默認的郵件處理程序進行發送電子郵件操作，收件人地址即為電子郵件鏈接指定的郵箱地址。 選中要設置電子郵件超鏈接的文本，選擇“插入電子郵件鏈接”菜單命令，或者單擊“插入”面板“常用”類別中的“電子郵件鏈接”圖標按鈕 ，彈出“電子郵件鏈接”對話框，在“電子郵件”文本框中輸入收件人的電子郵箱地址，單擊【確定】按鈕完成電子郵件超鏈接的創建。 6.1 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版） 4空鏈接空鏈接 空鏈接是未指派的鏈接

9、，主要用于向頁面上的對象或文本附加行為。 選中要設置空鏈接的文本，在“屬性”面板的“鏈接”框中輸入“#”或“javascript:;”。 例如，可以為空鏈接添加事件來設置主頁。 設為主頁6.1 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版） 5腳本鏈接腳本鏈接 腳本鏈接能執行JavaScript代碼或調用JavaScript函數。它的作用廣泛，能夠在不離開當前Web頁面的情況下為訪問者提供有關某項的附加信息，還可用于在訪問者單擊特定項時，執行計算、驗證表單和完成其他處理任務等。 例如，將網頁加入收藏夾。javascript:window.external.addFavorite(h

10、ttp:/,過節樂);6.1 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版）6.1.3 用用CSS設置超鏈接樣式設置超鏈接樣式 選擇“修改頁面屬性”菜單命令，或單擊“屬性”面板上的【頁面屬性】按鈕，打開“頁面屬性”對話框，選擇“鏈接（CSS）”類別，在其中設置鏈接的字體、大小、鏈接狀態的顏色、以及下畫線樣式等。6.1 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版） CSS樣式可以設置超鏈接不同狀態的樣式，為此CSS定義了4種偽類：l“a:link”設置超鏈接對象正常顯示的樣式，即未訪問前的樣式；l“a:visited”設置超鏈接對象已訪問后的樣式；l“a:hover”設

11、置超鏈接對象變換時的樣式，即鼠標懸停在超鏈接文本上的樣式；l“a:active”設置超鏈接對象活動鏈接時的樣式，即單擊超鏈接并釋放超鏈接之前的樣式，此過程時間非常短，通常效果不明顯。6.1 案例1 設計制作過節樂網頁網頁設計與制作案例教程（第2版）6.2 案例2 圖像地圖設計國家地理網站頁面o 學習目標：學習目標：掌握創建圖像地圖的方法。o 知識要點：知識要點：圖像地圖的功能，圖像地圖的創建。案例效果如圖6-14所示，單擊山東、遼寧、湖南省地圖區域，分別打開鏈接的網頁。網頁設計與制作案例教程（第2版）圖6-14 國家地理頁面效果6.2 案例2 圖像地圖設計國家地理網站頁面網頁設計與制作案例教程

12、（第2版） 所謂圖像地圖是指已被分為多個區域的圖像，這些區域稱為熱點。當用戶單擊某個熱點時，會顯示其鏈接的目標文件。l 選中要設置熱點的圖像，單擊“屬性”面板左下角的熱點工具圖標按鈕，在圖像上拖動創建熱點。l 可以選定【指針熱點工具】圖標按鈕，拖動熱點區域的位置或調整熱點區域的大小。l 繪制一個不規則形狀的熱點區域時，需要在圖像上各個轉折點單擊一下，最后單擊【指針熱點工具】按鈕封閉此形狀。6.2 案例2 圖像地圖設計國家地理網站頁面網頁設計與制作案例教程（第2版）6.3 學習任務：網頁導航概述 本節學習任務本節學習任務 認識網頁導航，了解其主要作用、分類與方向。6.3.1 網頁導航作用網頁導航

13、作用 網頁導航的目的是使網站的層次結構以一種有條理的方式清晰展示，引導用戶毫不費力地找到所需信息，讓用戶在瀏覽網站過程中不至迷失。l 定位顯示位置。l 展現網站架構。l 顯示品牌形象。l 影響公司業績。 網頁設計與制作案例教程（第2版）6.3 學習任務：網頁導航概述6.3.2 網頁導航分類網頁導航分類 1水平欄導航水平欄導航 水平欄導航是最流行的網站導航設計模式之一，它常用于網站的主導航菜單，用于顯示網站的內容分類。水平欄導航設計模式有時設有下拉菜單，當鼠標移到某個菜單項上時，會彈出對應的二級子導航項。 網頁設計與制作案例教程（第2版）6.3 學習任務：網頁導航概述 2垂直欄導航垂直欄導航 垂

14、直導航也是當前最通用的模式之一。垂直導航常與子導航菜單一起使用，也可以單獨使用。垂直導航多用于包含很多鏈接的網站主導航。 網頁設計與制作案例教程（第2版）6.3 學習任務：網頁導航概述 3選項卡導航選項卡導航 選項卡導航幾乎可以設計成用戶想要的任何樣式，如逼真的、有手感的標簽，圓滑的標簽，以及簡單的方邊標簽等。選項卡導航對用戶有積極的心理效應，但不太適用于鏈接很多的情況。 網頁設計與制作案例教程（第2版）6.3 學習任務：網頁導航概述 4菜單導航菜單導航 菜單導航主要有彈出式菜單和下拉菜單兩種。彈出式菜單（一般與垂直欄導航一起使用）和下拉菜單（一般與水平欄導航一起使用）是構建健壯的導航系統的良

15、好方法。它使得網站整體上看起來很整潔，而且使得深層章節很容易被訪問。 網頁設計與制作案例教程（第2版）6.3 學習任務：網頁導航概述 5面包屑導航面包屑導航 面包屑導航是二級導航的一種形式，輔助網站的主導航系統。面包屑對于多級別、具有層次結構的網站特別有用，它可以幫助訪客了解到當前自己在整個網站中所處的位置。如果訪客希望返回到某一級，只需要單擊相應的面包屑導航項即可。 網頁設計與制作案例教程（第2版）6.3 學習任務：網頁導航概述 6標簽導航標簽導航 標簽經常被用于博客和新聞網站，它們常常被組織成一個標簽云，導航項可能按字母順序排列，或者按流行程度排列。標簽導航也多用于二級導航，可以提高網站的

16、可發現性和探索性。 網頁設計與制作案例教程（第2版）6.3 學習任務：網頁導航概述 7頁腳導航頁腳導航 頁腳導航通常用于次要導航，而且通常用于放置其他地方都沒有的導航項。頁腳導航一般使用文字鏈接，偶爾帶有圖標。 網頁設計與制作案例教程（第2版）6.3 學習任務：網頁導航概述 8個性化導航個性化導航 有些網頁的導航以體現網站的個性為主，不拘一格，采用各種樣式力求使網站與眾不同，如圖標樣式的導航、氣泡樣式的導航、三維樣式的導航，以及JavaScript動畫導航等。 網頁設計與制作案例教程（第2版）6.3 學習任務：網頁導航概述6.3.3 網頁導航方向網頁導航方向 1橫向導航橫向導航 橫向導航是網頁

17、導航，尤其是網頁主導航采用最多的形式，而且主導航的項目個數通常在512個。對于有非常復雜的信息結構且有很多模塊組成的網站來說，橫向的導航應該使用水平欄導航和下拉菜單導航相結合的方式進行構建。 網頁設計與制作案例教程（第2版）6.3 學習任務：網頁導航概述 2縱向導航縱向導航 縱向導航適用于幾乎所有種類的網站，尤其適合有一堆主導航鏈接的網站。由于縱向導航菜單可以不受頁面限制，所以可以含有很多鏈接，但是需要注意，縱向導航太長時可能將用戶淹沒。 3不規則導航不規則導航 不規則導航打破了網頁由表格排版造成的“橫平豎直”的布局，可能是傾斜的，也可能是波浪型的，甚至是分散的。 網頁設計與制作案例教程（第2

18、版）6.4 案例3 用CSS設計制作網頁導航o 學習目標：學習目標：掌握用CSS創建網頁導航的方法。o 知識要點：知識要點：用CSS創建網頁導航的方法。案例效果如圖6-28所示。圖6-28 CSS設計網頁導航效果網頁設計與制作案例教程（第2版） 傳統制作網頁導航通常使用表格技術，將導航項目分別放置在表格的單元格中，然后設置表格和單元格的樣式。而用CSS設計制作網頁導航，則把導航項目看做列表，用標簽進行定義，然后設置列表項的樣式。 具體步驟： （1）添加導航項目。 輸入導航項目，將其設置為列表并創建空超鏈接。6.4 案例3 用CSS設計制作網頁導航網頁設計與制作案例教程（第2版） （2）用CSS定義導航樣式。 其中，設置列表項左浮動，從而使下一個列表項在右側貼近自身，每一個列表項應用此規則，就會形成水平排列的樣式。 （3）應用導航項CSS規則。 （4）用CSS定義當前導航項樣式。 （5）應用當前導航項CSS規則。6.4 案例3 用CSS設計制作網頁導航網頁設計與制作案例教程（第2版）6.5 實訓 設計制作點點星空網站頁面 1實訓目的實訓目