網(wǎng)頁(yè)設(shè)計(jì)與制作-單元6-網(wǎng)頁(yè)超鏈接與導(dǎo)航-任務(wù)62課件

單元6網(wǎng)頁(yè)超鏈接與導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航單元6網(wǎng)頁(yè)超鏈接與導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航2任務(wù)目標(biāo):（1）認(rèn)識(shí)網(wǎng)頁(yè)導(dǎo)航的主要作用；（2）掌握網(wǎng)頁(yè)導(dǎo)航的分類與方向；（3）掌握用CSS創(chuàng)建網(wǎng)頁(yè)水平導(dǎo)航與垂直導(dǎo)航的方法。

任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航任務(wù)目標(biāo):任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航36.2.1網(wǎng)頁(yè)導(dǎo)航概述網(wǎng)頁(yè)導(dǎo)航的目的是使網(wǎng)站的層次結(jié)構(gòu)以一種有條理的方式清晰展示出來(lái)，引導(dǎo)用戶毫不費(fèi)力地找到所需信息，使用戶在瀏覽網(wǎng)站的過(guò)程中不至于迷失。它的作用概括起來(lái)主要有以下幾個(gè)方面。（1）定位顯示位置。和現(xiàn)實(shí)生活不同，互聯(lián)網(wǎng)無(wú)法體現(xiàn)類似東西南北、前后左右的方向感，為使用戶不迷失在龐大的互聯(lián)網(wǎng)信息中，需要由網(wǎng)頁(yè)導(dǎo)航給用戶提供信息來(lái)找到方向感，如“我在哪里？”“這里有哪些內(nèi)容？”“我還能去什么地方？”“怎樣去？”等。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航6.2.1網(wǎng)頁(yè)導(dǎo)航概述任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航4（2）展現(xiàn)網(wǎng)站架構(gòu)。網(wǎng)頁(yè)導(dǎo)航需要提供信息來(lái)展現(xiàn)整個(gè)網(wǎng)站內(nèi)容的架構(gòu)，如網(wǎng)站包括哪幾部分（如首頁(yè)、公司簡(jiǎn)介、產(chǎn)品等）、主要板塊的內(nèi)容分類（如當(dāng)當(dāng)網(wǎng)站按照商品種類劃分產(chǎn)品）、每個(gè)分類中的細(xì)化分類（往往稱為二級(jí)菜單）、特殊信息的入口（如熱點(diǎn)、新聞等）。（3）顯示品牌形象。不同的品牌訴求，采用不同的網(wǎng)頁(yè)導(dǎo)航風(fēng)格，主要體現(xiàn)在顏色、線條、形狀、質(zhì)感等。（4）影響用戶體驗(yàn)。尤其對(duì)于購(gòu)物網(wǎng)站來(lái)說(shuō)，導(dǎo)航的設(shè)計(jì)對(duì)轉(zhuǎn)化率、銷售額影響巨大。如果導(dǎo)航設(shè)置不當(dāng)將導(dǎo)致顧客找不到要購(gòu)買的商品，使客服中心等服務(wù)部門成本增加，降低用戶在網(wǎng)站中的沉浸感等。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航（2）展現(xiàn)網(wǎng)站架構(gòu)。網(wǎng)頁(yè)導(dǎo)航需要提供信息來(lái)展現(xiàn)整個(gè)網(wǎng)站內(nèi)容的56.2.2網(wǎng)頁(yè)導(dǎo)航分類1．水平欄導(dǎo)航水平欄導(dǎo)航是最流行的網(wǎng)站導(dǎo)航設(shè)計(jì)模式之一，它常用于網(wǎng)站的主導(dǎo)航菜單，用于顯示網(wǎng)站的內(nèi)容分類，如圖所示。水平欄導(dǎo)航設(shè)計(jì)模式有時(shí)設(shè)有下拉菜單，當(dāng)鼠標(biāo)移到某個(gè)菜單項(xiàng)上時(shí)，會(huì)彈出對(duì)應(yīng)的二級(jí)子導(dǎo)航項(xiàng)。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航6.2.2網(wǎng)頁(yè)導(dǎo)航分類任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航62．垂直欄導(dǎo)航類似水平欄導(dǎo)航，垂直欄導(dǎo)航也是當(dāng)前最通用的模式之一，幾乎存在于各類網(wǎng)站上。垂直欄導(dǎo)航可以單獨(dú)使用，作為次導(dǎo)航，也常常與子導(dǎo)航菜單結(jié)合用于包含很多鏈接的網(wǎng)站主導(dǎo)航，如圖所示。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航2．垂直欄導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航73．選項(xiàng)卡導(dǎo)航選項(xiàng)卡導(dǎo)航幾乎可以設(shè)計(jì)成用戶想要的任何樣式，如立體效果的標(biāo)簽、圓角標(biāo)簽，以及簡(jiǎn)單的方邊標(biāo)簽等。選項(xiàng)卡導(dǎo)航存在于各種各樣的網(wǎng)站中，一般是水平方向的，也有垂直的（堆疊標(biāo)簽）。選項(xiàng)卡導(dǎo)航對(duì)用戶有積極的心理效應(yīng)，但不太適用于鏈接很多的情況，如圖所示。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航3．選項(xiàng)卡導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航84．菜單導(dǎo)航菜單導(dǎo)航主要有出式菜單和下拉菜單兩種，出式菜單（一般與垂直欄導(dǎo)航一起使用）和下拉菜單（一般與水平欄導(dǎo)航一起使用）是構(gòu)建健壯的導(dǎo)航系統(tǒng)的良好方法，它使得網(wǎng)站整體上看起來(lái)很整潔，而且使得深層結(jié)構(gòu)頁(yè)面很容易被訪問(wèn)，如圖所示。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航4．菜單導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航95．面包屑導(dǎo)航面包屑導(dǎo)航是二級(jí)導(dǎo)航的一種形式，是輔助網(wǎng)站的主導(dǎo)航系統(tǒng)。面包屑對(duì)于多級(jí)別、具有層次結(jié)構(gòu)的網(wǎng)站特別有用，它可以幫助訪客知道當(dāng)前自己在整個(gè)網(wǎng)站中所處的位置。如果訪客希望返回到某一級(jí)，只需要單擊相應(yīng)的面包屑導(dǎo)航項(xiàng)即可，如圖所示。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航5．面包屑導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航106．標(biāo)簽導(dǎo)航標(biāo)簽導(dǎo)航經(jīng)常被用于博客和新聞網(wǎng)站，它們常常被組織成一個(gè)標(biāo)簽云，導(dǎo)航項(xiàng)可能按字母順序排列，或者按流行程度排列。標(biāo)簽導(dǎo)航也多用于二級(jí)導(dǎo)航，可以提高網(wǎng)站的可發(fā)現(xiàn)性和探索性，如圖所示。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航6．標(biāo)簽導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航117．頁(yè)腳導(dǎo)航頁(yè)腳導(dǎo)航通常用于次要導(dǎo)航，而且通常用于放置其他地方都沒(méi)有的導(dǎo)航項(xiàng)。頁(yè)腳導(dǎo)航一般使用文字鏈接，偶爾帶有圖標(biāo)，如圖所示。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航7．頁(yè)腳導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航128．個(gè)性化導(dǎo)航有些網(wǎng)頁(yè)的導(dǎo)航以體現(xiàn)網(wǎng)站的個(gè)性為主，不拘一格，采用各種樣式力求使網(wǎng)站與眾不同，如圖標(biāo)樣式導(dǎo)航、氣泡樣式的導(dǎo)航、三維樣式導(dǎo)航，以及JavaScript動(dòng)畫導(dǎo)航等，如圖所示。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航8．個(gè)性化導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航136.2.3網(wǎng)頁(yè)導(dǎo)航方向網(wǎng)頁(yè)導(dǎo)航的方向總地說(shuō)來(lái)主要有橫向、縱向和不規(guī)則三種。1．橫向?qū)Ш綑M向?qū)Ш绞蔷W(wǎng)頁(yè)主導(dǎo)航采用最多的形式，而且主導(dǎo)航的項(xiàng)目個(gè)數(shù)通常在5～12個(gè)。對(duì)于有非常復(fù)雜的信息結(jié)構(gòu)且有很多模塊組成的網(wǎng)站來(lái)說(shuō)，橫向?qū)Ш綉?yīng)該使用水平欄導(dǎo)航和下拉菜單導(dǎo)航相結(jié)合的方式進(jìn)行構(gòu)建。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航6.2.3網(wǎng)頁(yè)導(dǎo)航方向任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航142．縱向?qū)Ш娇v向?qū)Ш綆缀踹m用于所有種類的網(wǎng)站，尤其適合有大量主導(dǎo)航鏈接的網(wǎng)站。由于縱向?qū)Ш讲藛慰梢圆皇茼?yè)面長(zhǎng)度限制，因此可以含有很多鏈接。但是需要注意，縱向?qū)Ш教L(zhǎng)、導(dǎo)航項(xiàng)目太多時(shí)，容易削弱用戶對(duì)已瀏覽項(xiàng)目的印象?？v向?qū)Ш娇梢苑旁陧?yè)面的左側(cè)，也可以放在右側(cè)，但是根據(jù)用戶從左向右的習(xí)慣，左邊的縱向?qū)Ш奖扔疫叺目v向?qū)Ш叫Ч?。任?wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航2．縱向?qū)Ш饺蝿?wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航153．不規(guī)則導(dǎo)航不規(guī)則導(dǎo)航打破了網(wǎng)頁(yè)常見的“橫平豎直”的布局形式，它可能是傾斜的，也可能是波浪形的，甚至是分散的。不規(guī)則導(dǎo)航可以充分體現(xiàn)網(wǎng)站的個(gè)性與特色，帶給用戶強(qiáng)烈的視覺沖擊，但是，不適合信息量特別大、需要有較多分類的網(wǎng)站。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航3．不規(guī)則導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航166.2.4為“中國(guó)地理”網(wǎng)頁(yè)增加垂直方向?qū)Ш饺蝿?wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航請(qǐng)?jiān)贒reamweaver中完成案例操作。用CSS設(shè)計(jì)制作網(wǎng)頁(yè)導(dǎo)航，是把導(dǎo)航項(xiàng)目看做列表項(xiàng)目，通常用<ul>標(biāo)簽進(jìn)行定義，然后設(shè)置列表項(xiàng)與超鏈接的樣式，這樣不僅將導(dǎo)航項(xiàng)目與樣式進(jìn)行了分別控制，更有利于導(dǎo)航項(xiàng)目的增刪與修改。下面為“中國(guó)地理網(wǎng)頁(yè)”添加垂直方向?qū)Ш綏l。6.2.4為“中國(guó)地理”網(wǎng)頁(yè)增加垂直方向?qū)Ш饺蝿?wù)6.2設(shè)17任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航.vnavlia{ color:#000; text-decoration:none; background-color:#D9FFA0; text-align:center; line-height:32px; display:block; width:189px; margin-bottom:2px;}.vnavlia:hover{ color:#ADB96E; background-color:#fff;}CSS參考代碼如下。.vnavli{ list-style-type:none;}.vnav{ margin:0; padding:0;}任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航.vnavlia{CSS參考代碼186.2.5為“中國(guó)地理”網(wǎng)頁(yè)增加水平方向?qū)Ш剿椒较驅(qū)Ш脚c垂直方向的導(dǎo)航創(chuàng)建方式類似，但是由于列表項(xiàng)目本身是垂直方向排列，因此需要設(shè)置float屬性來(lái)使導(dǎo)航項(xiàng)目浮動(dòng)以達(dá)到水平排列的效果。繼續(xù)為“中國(guó)地理”網(wǎng)頁(yè)添加水平方向的導(dǎo)航。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航請(qǐng)?jiān)贒reamweaver中完成案例操作。6.2.5為“中國(guó)地理”網(wǎng)頁(yè)增加水平方向?qū)Ш饺蝿?wù)6.2設(shè)19任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航.hnav{ list-style:none; padding:0px; }.hnavli{ float:left;}CSS參考代碼如下。.hnavlia{ color:#000; text-decoration:none; background-color:#ADB96E; text-align:center; display:block; height:auto; line-height:35px; width:118px; margin-left:2px;}.hnavlia:hover{ background-color:#093; color:#FF0;}.hnav.currenta{ background-color:#093; color:#FF0;}任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航.hnav{CSS參考代碼如下。.20謝謝！謝謝！21單元6網(wǎng)頁(yè)超鏈接與導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航單元6網(wǎng)頁(yè)超鏈接與導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航23任務(wù)目標(biāo):（1）認(rèn)識(shí)網(wǎng)頁(yè)導(dǎo)航的主要作用；（2）掌握網(wǎng)頁(yè)導(dǎo)航的分類與方向；（3）掌握用CSS創(chuàng)建網(wǎng)頁(yè)水平導(dǎo)航與垂直導(dǎo)航的方法。

任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航任務(wù)目標(biāo):任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航246.2.1網(wǎng)頁(yè)導(dǎo)航概述網(wǎng)頁(yè)導(dǎo)航的目的是使網(wǎng)站的層次結(jié)構(gòu)以一種有條理的方式清晰展示出來(lái)，引導(dǎo)用戶毫不費(fèi)力地找到所需信息，使用戶在瀏覽網(wǎng)站的過(guò)程中不至于迷失。它的作用概括起來(lái)主要有以下幾個(gè)方面。（1）定位顯示位置。和現(xiàn)實(shí)生活不同，互聯(lián)網(wǎng)無(wú)法體現(xiàn)類似東西南北、前后左右的方向感，為使用戶不迷失在龐大的互聯(lián)網(wǎng)信息中，需要由網(wǎng)頁(yè)導(dǎo)航給用戶提供信息來(lái)找到方向感，如“我在哪里？”“這里有哪些內(nèi)容？”“我還能去什么地方？”“怎樣去？”等。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航6.2.1網(wǎng)頁(yè)導(dǎo)航概述任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航25（2）展現(xiàn)網(wǎng)站架構(gòu)。網(wǎng)頁(yè)導(dǎo)航需要提供信息來(lái)展現(xiàn)整個(gè)網(wǎng)站內(nèi)容的架構(gòu)，如網(wǎng)站包括哪幾部分（如首頁(yè)、公司簡(jiǎn)介、產(chǎn)品等）、主要板塊的內(nèi)容分類（如當(dāng)當(dāng)網(wǎng)站按照商品種類劃分產(chǎn)品）、每個(gè)分類中的細(xì)化分類（往往稱為二級(jí)菜單）、特殊信息的入口（如熱點(diǎn)、新聞等）。（3）顯示品牌形象。不同的品牌訴求，采用不同的網(wǎng)頁(yè)導(dǎo)航風(fēng)格，主要體現(xiàn)在顏色、線條、形狀、質(zhì)感等。（4）影響用戶體驗(yàn)。尤其對(duì)于購(gòu)物網(wǎng)站來(lái)說(shuō)，導(dǎo)航的設(shè)計(jì)對(duì)轉(zhuǎn)化率、銷售額影響巨大。如果導(dǎo)航設(shè)置不當(dāng)將導(dǎo)致顧客找不到要購(gòu)買的商品，使客服中心等服務(wù)部門成本增加，降低用戶在網(wǎng)站中的沉浸感等。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航（2）展現(xiàn)網(wǎng)站架構(gòu)。網(wǎng)頁(yè)導(dǎo)航需要提供信息來(lái)展現(xiàn)整個(gè)網(wǎng)站內(nèi)容的266.2.2網(wǎng)頁(yè)導(dǎo)航分類1．水平欄導(dǎo)航水平欄導(dǎo)航是最流行的網(wǎng)站導(dǎo)航設(shè)計(jì)模式之一，它常用于網(wǎng)站的主導(dǎo)航菜單，用于顯示網(wǎng)站的內(nèi)容分類，如圖所示。水平欄導(dǎo)航設(shè)計(jì)模式有時(shí)設(shè)有下拉菜單，當(dāng)鼠標(biāo)移到某個(gè)菜單項(xiàng)上時(shí)，會(huì)彈出對(duì)應(yīng)的二級(jí)子導(dǎo)航項(xiàng)。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航6.2.2網(wǎng)頁(yè)導(dǎo)航分類任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航272．垂直欄導(dǎo)航類似水平欄導(dǎo)航，垂直欄導(dǎo)航也是當(dāng)前最通用的模式之一，幾乎存在于各類網(wǎng)站上。垂直欄導(dǎo)航可以單獨(dú)使用，作為次導(dǎo)航，也常常與子導(dǎo)航菜單結(jié)合用于包含很多鏈接的網(wǎng)站主導(dǎo)航，如圖所示。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航2．垂直欄導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航283．選項(xiàng)卡導(dǎo)航選項(xiàng)卡導(dǎo)航幾乎可以設(shè)計(jì)成用戶想要的任何樣式，如立體效果的標(biāo)簽、圓角標(biāo)簽，以及簡(jiǎn)單的方邊標(biāo)簽等。選項(xiàng)卡導(dǎo)航存在于各種各樣的網(wǎng)站中，一般是水平方向的，也有垂直的（堆疊標(biāo)簽）。選項(xiàng)卡導(dǎo)航對(duì)用戶有積極的心理效應(yīng)，但不太適用于鏈接很多的情況，如圖所示。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航3．選項(xiàng)卡導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航294．菜單導(dǎo)航菜單導(dǎo)航主要有出式菜單和下拉菜單兩種，出式菜單（一般與垂直欄導(dǎo)航一起使用）和下拉菜單（一般與水平欄導(dǎo)航一起使用）是構(gòu)建健壯的導(dǎo)航系統(tǒng)的良好方法，它使得網(wǎng)站整體上看起來(lái)很整潔，而且使得深層結(jié)構(gòu)頁(yè)面很容易被訪問(wèn)，如圖所示。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航4．菜單導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航305．面包屑導(dǎo)航面包屑導(dǎo)航是二級(jí)導(dǎo)航的一種形式，是輔助網(wǎng)站的主導(dǎo)航系統(tǒng)。面包屑對(duì)于多級(jí)別、具有層次結(jié)構(gòu)的網(wǎng)站特別有用，它可以幫助訪客知道當(dāng)前自己在整個(gè)網(wǎng)站中所處的位置。如果訪客希望返回到某一級(jí)，只需要單擊相應(yīng)的面包屑導(dǎo)航項(xiàng)即可，如圖所示。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航5．面包屑導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航316．標(biāo)簽導(dǎo)航標(biāo)簽導(dǎo)航經(jīng)常被用于博客和新聞網(wǎng)站，它們常常被組織成一個(gè)標(biāo)簽云，導(dǎo)航項(xiàng)可能按字母順序排列，或者按流行程度排列。標(biāo)簽導(dǎo)航也多用于二級(jí)導(dǎo)航，可以提高網(wǎng)站的可發(fā)現(xiàn)性和探索性，如圖所示。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航6．標(biāo)簽導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航327．頁(yè)腳導(dǎo)航頁(yè)腳導(dǎo)航通常用于次要導(dǎo)航，而且通常用于放置其他地方都沒(méi)有的導(dǎo)航項(xiàng)。頁(yè)腳導(dǎo)航一般使用文字鏈接，偶爾帶有圖標(biāo)，如圖所示。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航7．頁(yè)腳導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航338．個(gè)性化導(dǎo)航有些網(wǎng)頁(yè)的導(dǎo)航以體現(xiàn)網(wǎng)站的個(gè)性為主，不拘一格，采用各種樣式力求使網(wǎng)站與眾不同，如圖標(biāo)樣式導(dǎo)航、氣泡樣式的導(dǎo)航、三維樣式導(dǎo)航，以及JavaScript動(dòng)畫導(dǎo)航等，如圖所示。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航8．個(gè)性化導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航346.2.3網(wǎng)頁(yè)導(dǎo)航方向網(wǎng)頁(yè)導(dǎo)航的方向總地說(shuō)來(lái)主要有橫向、縱向和不規(guī)則三種。1．橫向?qū)Ш綑M向?qū)Ш绞蔷W(wǎng)頁(yè)主導(dǎo)航采用最多的形式，而且主導(dǎo)航的項(xiàng)目個(gè)數(shù)通常在5～12個(gè)。對(duì)于有非常復(fù)雜的信息結(jié)構(gòu)且有很多模塊組成的網(wǎng)站來(lái)說(shuō)，橫向?qū)Ш綉?yīng)該使用水平欄導(dǎo)航和下拉菜單導(dǎo)航相結(jié)合的方式進(jìn)行構(gòu)建。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航6.2.3網(wǎng)頁(yè)導(dǎo)航方向任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航352．縱向?qū)Ш娇v向?qū)Ш綆缀踹m用于所有種類的網(wǎng)站，尤其適合有大量主導(dǎo)航鏈接的網(wǎng)站。由于縱向?qū)Ш讲藛慰梢圆皇茼?yè)面長(zhǎng)度限制，因此可以含有很多鏈接。但是需要注意，縱向?qū)Ш教L(zhǎng)、導(dǎo)航項(xiàng)目太多時(shí)，容易削弱用戶對(duì)已瀏覽項(xiàng)目的印象?？v向?qū)Ш娇梢苑旁陧?yè)面的左側(cè)，也可以放在右側(cè)，但是根據(jù)用戶從左向右的習(xí)慣，左邊的縱向?qū)Ш奖扔疫叺目v向?qū)Ш叫Ч?。任?wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航2．縱向?qū)Ш饺蝿?wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航363．不規(guī)則導(dǎo)航不規(guī)則導(dǎo)航打破了網(wǎng)頁(yè)常見的“橫平豎直”的布局形式，它可能是傾斜的，也可能是波浪形的，甚至是分散的。不規(guī)則導(dǎo)航可以充分體現(xiàn)網(wǎng)站的個(gè)性與特色，帶給用戶強(qiáng)烈的視覺沖擊，但是，不適合信息量特別大、需要有較多分類的網(wǎng)站。任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航3．不規(guī)則導(dǎo)航任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航376.2.4為“中國(guó)地理”網(wǎng)頁(yè)增加垂直方向?qū)Ш饺蝿?wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航請(qǐng)?jiān)贒reamweaver中完成案例操作。用CSS設(shè)計(jì)制作網(wǎng)頁(yè)導(dǎo)航，是把導(dǎo)航項(xiàng)目看做列表項(xiàng)目，通常用<ul>標(biāo)簽進(jìn)行定義，然后設(shè)置列表項(xiàng)與超鏈接的樣式，這樣不僅將導(dǎo)航項(xiàng)目與樣式進(jìn)行了分別控制，更有利于導(dǎo)航項(xiàng)目的增刪與修改。下面為“中國(guó)地理網(wǎng)頁(yè)”添加垂直方向?qū)Ш綏l。6.2.4為“中國(guó)地理”網(wǎng)頁(yè)增加垂直方向?qū)Ш饺蝿?wù)6.2設(shè)38任務(wù)6.2設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航.vnavlia{ color:#000; text-decoration:none; background-color:#D9FFA0; text-align:center; line-height:32px; display:block; width:189px; margin-bottom:2px;}.vnavlia:hover{ color:#ADB96E; background-color:#fff;}CSS參考代碼如下。.vnavli