基于CSS的商務網(wǎng)站導航條設計

喬巍

[摘要]本文主要闡述了在電子商務網(wǎng)站開發(fā)設計過程中，優(yōu)秀的導航條設計能夠通過顏色、排版、形狀和一些圖片來幫助網(wǎng)站創(chuàng)造更好的視覺和感受。同時，筆者也探討了基于CSS的導航條設計的幾個優(yōu)點，并舉例說明了幾種常見的CSS導航菜單的設計。

[關鍵詞]CSS商務網(wǎng)站導航條

電子商務網(wǎng)站按照商務目的和業(yè)務功能可以分為四類：基本型商務網(wǎng)站、宣傳型商務網(wǎng)站、客戶服務型商務萬展、完全電子商務運作型網(wǎng)站，不管是哪種類型的電子商務網(wǎng)站，其目的都是為了宣傳企業(yè)形象，提升品牌價值，從而實現(xiàn)企業(yè)價值最大化。而導航條的設計在網(wǎng)站設計中是起到決定性作用的，它是網(wǎng)站設計的關鍵元素。

一、電子商務網(wǎng)站的基本特點

1.網(wǎng)站的信息量大

在傳統(tǒng)的宣傳方式中，企業(yè)一般都會制作相應的宣傳冊或在報刊、雜志、電視等媒體上做廣告，但若大面積地宣傳覆蓋，則會受限于成本、精力等因素。而這些，在網(wǎng)絡上只要主機空間和訪問速度滿足的前提下，理論上可以放入無限的跟企業(yè)相關的信息，譬如，企業(yè)的產品信息、服務信息、品牌文化等等。

2.內容及版面的更新需及時

商務網(wǎng)站必須保持經常性的更新，這里所指的更新，包括版面的更新和內容的更新。內容的更新可以不斷吸引瀏覽者再次光臨，使?jié)撛诘南M者變成客戶，增強客戶對企業(yè)網(wǎng)站的粘性，提高客戶的忠誠度；版面的更新可以針對某次新產品的發(fā)布或者某次重大的活動，如果網(wǎng)站一成不變，是無法獲得更多的瀏覽者的關注，也就無法獲得更多的商業(yè)機會的。因此，企業(yè)網(wǎng)站的更新維護是一個很重要的網(wǎng)絡營銷手段，必須高度重視這一點，保持網(wǎng)站的持續(xù)更新。

3.突破了時間和空間的限制

從時間概念上看，在企業(yè)的電子商務網(wǎng)站上，客戶每天24小時都可以獲取他們需要的產品或服務，而這些，傳統(tǒng)的的八小時工作制根本沒有辦法滿足他們的要求。

從空間概念上看，傳統(tǒng)的商務活動受限于地域位置，而電子商務網(wǎng)站依存于Internet虛擬的空間，即使處于不同國家的企業(yè)和消費者，都可以通過這個平臺實現(xiàn)聯(lián)系。

二、優(yōu)秀導航設計的基本特征

1.結構清晰、瀏覽者能夠迅速定位信息

電子商務網(wǎng)站的信息量大，分類繁雜，因此，好的導航設計，就必須是結構清晰的，使得消費者在海量的信息中能夠迅速地定位他們所需要的信息，那么，這樣才能使這些潛在的客戶逐漸轉變成你的目標客戶，同時，結構清晰的導航設計也能體現(xiàn)一定的專業(yè)性，提高客戶的信任度。

2.便于更改或者添加新的網(wǎng)站模塊

對于企業(yè)的每次版面更新，好的導航設計能夠在不破壞網(wǎng)站整體風格的前提下，非常方便地進行諸如更改導航設計，添加新的導航項目等操作。

3.智能地適應消費者不同的瀏覽環(huán)境

電子商務活動突破了時間和空間的限制，好的導航設計需要真實地還原設計者的思想，需要它是智能的，對于不同瀏覽環(huán)境的消費者而言，都顯示同一個效果。不能因為設備屏幕或者瀏覽平臺的不同，而產生不同的瀏覽效果。

三、CSS概念及其制作導航條優(yōu)勢分析

1.CSS的概念

CSS，稱之為層疊樣式表（Cascading Stylesheet），用以格式化網(wǎng)頁的格式。在網(wǎng)頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確的控制。只要對相應的代碼做一些簡單的修改，就可以改變外鏈該CSS文件的一個或者多個頁面的樣式。

2.CSS制作導航條的優(yōu)勢分析

（1）代碼冗余少，更快下載速度。利用CSS和XHTML制作的導航菜單，其代碼冗余少，同時，純代碼的下載速度肯定比使用Javascrip或圖片來實現(xiàn)的要快得多。另外，因為網(wǎng)絡蜘蛛對文本的興趣要遠高于圖片，它會更有益于搜索引擎的索引排名，提高網(wǎng)站被訪問的命中率。

（2）適應力強，更多人文關懷。基于CSS的導航菜單適應力強，可以應付不同用戶的瀏覽平臺。同時，如果用戶關閉讀取圖片和(或)CSS的功能，網(wǎng)站仍然可以以簡潔的方式瀏覽，網(wǎng)站的訪問不會受到影響。

（3）網(wǎng)絡資源多，更多設計選擇。對于初次使用CSS進行導航設計的設計師來講，如果不想從零開始編寫CSS菜單代碼，則可以在網(wǎng)絡上搜索設計好的基于CSS的導航菜單，然后再加以修改部分代碼以適應自己開發(fā)網(wǎng)站的總體風格。同時，還有一些專門設計CSS菜單的工具，譬如，CSS MENU就可以通過修改一些自定義樣式來快速生成專業(yè)的CSS菜單。

四、利用CSS來制作幾種常見的導航條

導航條的制作標簽一般采用無序列表，形如

• 超鏈接文本

；在

標簽里面設置好各導航項后，就可以用CSS去描述導航超鏈接的各種狀態(tài)，通用的代碼如下所示（本例僅用了1KB不到的GIF圖片）。

在上面通用代碼的基礎上，再稍加變化，就可以制作出二級菜單、多級菜單，以下是幾種常見的導航條樣式。

參考文獻：

[1] Dan Cederholm.Web標準實戰(zhàn).人民郵電出版社，2008，（5）

[2]Dan Cederholm.無懈可擊的Web設計.清華大學出版社，2009，（4）