1、14.1 14.1 導(dǎo)航條的風(fēng)格選擇 導(dǎo)航條的風(fēng)格多種多樣，有適合國字型的導(dǎo)航布局、有適合T字型的導(dǎo)航布局、有適合左右和上下寬度的導(dǎo)航布局。導(dǎo)航條使用的技術(shù)主要包括CSS+DIV的導(dǎo)航、框架導(dǎo)航和表格布局的導(dǎo)航。第1頁/共23頁14.1.1 14.1.1 導(dǎo)航條的目的 許多網(wǎng)站缺乏方便的導(dǎo)航系統(tǒng)，也未提供有助于瀏覽者找到所需信息的幫助。這些網(wǎng)站把所有的導(dǎo)航信息都放在雜亂的按鈕和文本鏈接上，從而造成瀏覽者在尋找有關(guān)內(nèi)容時(shí)非常困難。因此，創(chuàng)建一個(gè)便于瀏覽者識(shí)別和操作的網(wǎng)站導(dǎo)航系統(tǒng)是必不可少的。第2頁/共23頁14.1.2 14.1.2 導(dǎo)航條的設(shè)計(jì)原則和技巧 網(wǎng)站導(dǎo)航系統(tǒng)在設(shè)計(jì)上通常遵循一些基本的

2、原則，下面講解關(guān)于導(dǎo)航設(shè)計(jì)的有用技巧。 1盡可能多地提供相關(guān)資源的鏈接 2一致性原則 3網(wǎng)站板塊和層次劃分合理 4常用的導(dǎo)航技巧第3頁/共23頁14.1.3 14.1.3 設(shè)計(jì)導(dǎo)航的技術(shù) 導(dǎo)航設(shè)計(jì)的技術(shù)一般都是根據(jù)布局的技術(shù)來確定。如果一個(gè)網(wǎng)站是框架布局，那么相應(yīng)的導(dǎo)航設(shè)計(jì)也是基于框架技術(shù)實(shí)現(xiàn)的。下面是現(xiàn)在比較流行的導(dǎo)航設(shè)計(jì)技術(shù)。 CSS+DIV設(shè)計(jì)：完全采用CSS設(shè)計(jì)導(dǎo)航。 FLASH設(shè)計(jì)：用Flash動(dòng)畫制作導(dǎo)航，其優(yōu)點(diǎn)是生動(dòng)、形象。 框架設(shè)計(jì)：導(dǎo)航是框架的組成部分之一。一般用于論壇或網(wǎng)站后臺(tái)管理系統(tǒng)中。 表格設(shè)計(jì)：采用表格技術(shù)制作導(dǎo)航。 第4頁/共23頁14.1.4 14.1.4 導(dǎo)航條

3、的布局方式 導(dǎo)航條是網(wǎng)站風(fēng)格的主要組成部分。一個(gè)好的導(dǎo)航可以在確定網(wǎng)頁風(fēng)格的同時(shí)，也會(huì)使頁面層次清晰。導(dǎo)航制作一直是設(shè)計(jì)師們需要重點(diǎn)思考的問題，也是網(wǎng)頁創(chuàng)意的重要體現(xiàn)。現(xiàn)在互聯(lián)網(wǎng)最流行的導(dǎo)航布局方式有以下幾種。第5頁/共23頁14.1.4 14.1.4 導(dǎo)航條的布局方式 1水平導(dǎo)航條 水平導(dǎo)航條以水平方式排列導(dǎo)航項(xiàng)。 第6頁/共23頁14.1.4 14.1.4 導(dǎo)航條的布局方式 2垂直導(dǎo)航條 垂直導(dǎo)航條以垂直的方式排列導(dǎo)航項(xiàng)。 第7頁/共23頁14.1.4 14.1.4 導(dǎo)航條的布局方式 3POP導(dǎo)航條 POP導(dǎo)航條以體現(xiàn)網(wǎng)站的個(gè)性為主，不拘一格，重點(diǎn)在于表現(xiàn)網(wǎng)站的與眾不同。 第8頁/共23頁

4、14.1.5 14.1.5 各式各樣的導(dǎo)航 雖然大部分網(wǎng)站以水平導(dǎo)航為主，但大部分的導(dǎo)航在顏色搭配、字體控制和導(dǎo)航框等選擇上都有自己的特色，下面是流行在網(wǎng)上的各式各樣的導(dǎo)航條。 效果比較簡單的導(dǎo)航如圖所示，在導(dǎo)航條基礎(chǔ)上進(jìn)行加光等適當(dāng)?shù)匦揎棇?dǎo)航。第9頁/共23頁14.1.5 14.1.5 各式各樣的導(dǎo)航 同樣是水平導(dǎo)航，可以用繪圖軟件自帶的小圖標(biāo)或英文拼音美化導(dǎo)航， 組織有序的導(dǎo)航條適合網(wǎng)頁較多的網(wǎng)站。下面是一個(gè)組織有序的導(dǎo)航條， 第10頁/共23頁14.2 14.2 導(dǎo)航條制作 上一節(jié)介紹了導(dǎo)航制作的目的、技巧以及導(dǎo)航條的風(fēng)格等。在這一節(jié)中，將分別通過表格技術(shù)說明水平導(dǎo)航條和垂直導(dǎo)航條的制作

5、方法。由于POP導(dǎo)航使用較少，讀者如對POP導(dǎo)航條感興趣可以在水平垂直導(dǎo)航條制作方法的基礎(chǔ)進(jìn)行擴(kuò)充，制作出適合自己網(wǎng)站的導(dǎo)航條。第11頁/共23頁14.2.1 14.2.1 水平導(dǎo)航條的制作 水平導(dǎo)航條制作方法。具體步驟如下：第12頁/共23頁14.2.1 14.2.1 水平導(dǎo)航條的制作 在上一章中介紹的頁面頭部所用到的導(dǎo)航就是一個(gè)典型的水平導(dǎo)航條，在這一小節(jié)中將重點(diǎn)介紹其制作方法。具體步驟如下：第13頁/共23頁14.2.2 14.2.2 垂直導(dǎo)航條的制作 在左右兩欄目布局的網(wǎng)站和一些子頁面中，垂直導(dǎo)航條也是比較常見的導(dǎo)航形式。在現(xiàn)實(shí)應(yīng)用中，垂直導(dǎo)航條更多是幾張圖片，或文字垂直排列在單元格中

6、。其制作步驟如下：第14頁/共23頁14.2.2 14.2.2 垂直導(dǎo)航條的制作 設(shè)置各導(dǎo)航欄的鏈接。此處將各鏈接設(shè)置為空鏈接。具體的設(shè)置方法讀者可參照上一小節(jié)水平導(dǎo)航條制作中的步驟。設(shè)置完成后的效果如圖所示。 第15頁/共23頁14.3 14.3 樣式調(diào)整及修改 通過前面的步驟，把水平導(dǎo)航欄和垂直導(dǎo)航欄的大體輪廓完成了。但是，水平導(dǎo)航看起來有點(diǎn)單調(diào)，垂直導(dǎo)航欄的文字顏色與背景太相近，不適合瀏覽。CSS有強(qiáng)大的表現(xiàn)功能，接下來用CSS樣式對導(dǎo)航欄進(jìn)行調(diào)整和修改。第16頁/共23頁14.3.1 14.3.1 水平導(dǎo)航條的樣式調(diào)整及修改 在14.2.1中介紹了水平導(dǎo)航條的制作，但其美觀效果并不能達(dá)

7、到一個(gè)網(wǎng)頁的要求，需要對其進(jìn)行樣式控制。下面是其樣式調(diào)整的具體步驟：第17頁/共23頁14.3.1 14.3.1 水平導(dǎo)航條的樣式調(diào)整及修改 將導(dǎo)航條放入上一章制作的頁面頭部中，可以看到頁面頭部的最終效果，如圖所示。第18頁/共23頁14.3.2 14.3.2 垂直導(dǎo)航條的樣式調(diào)整及修改 上一節(jié)中介紹的垂直導(dǎo)航條制作的最終效果比較粗糙，對整個(gè)網(wǎng)頁的美觀程度有影響。下面通過樣式的調(diào)整，讓其變得美觀實(shí)用。具體步驟如下：第19頁/共23頁14.3.2 14.3.2 垂直導(dǎo)航條的樣式調(diào)整及修改調(diào)整導(dǎo)航條鏈接的樣式。單擊CSS面板的【編輯樣式】按鈕，彈出【新建CSS規(guī)則】對話框，進(jìn)行如圖左所示的設(shè)置。 按【確定】按鈕后，彈出CSS規(guī)則定義對話框，選擇【分類】列表框中的【類型】選項(xiàng)，對鏈接的字體大小、粗細(xì)、修飾和顏色進(jìn)行設(shè)置，如圖右所示。 第20頁/共23頁14.3.2 14.3.2 垂直導(dǎo)航條的樣式調(diào)整及修改 分別雙擊導(dǎo)航條的鏈接文字，在【屬性】面板中單擊【樣式】右側(cè)的三角按鈕，在彈出的下拉列表中選擇樣式menu選項(xiàng)，設(shè)置其CSS樣式如圖左所示。 單擊【文件】|【保存】命令，保存文件index.html。按F12鍵瀏覽對樣式調(diào)整后的導(dǎo)航條?？梢钥吹饺鐖D右所示的