基于CSS的商务网站导航条设计

[摘 要]本文主要阐述了在电子商务网站开发设计过程中,优秀的导航条设计能够通过颜色、排版、形状和一些图片来帮助网站创造更好的视觉和感受.同时,笔者也探讨了基于CSS的导航条设计的几个优点,并举例说明了几种常见的CSS导航菜单的设计.

[关 键 词]CSS商务网站导航条

电子商务网站按照商务目的和业务功能可以分为四类：基本型商务网站、宣传型商务网站、客户怎么写作型商务万展、完全电子商务运作型网站,不管是哪种类型的电子商务网站,其目的都是为了宣传企业形象,提升品牌价值,从而实现企业价值最大化.而导航条的设计在网站设计中是起到决定性作用的,它是网站设计的关键元素.

一、电子商务网站的基本特点

1.网站的信息量大

在传统的宣传方式中,企业一般都会制作相应的宣传册或在报刊、杂志、电视等媒体上做广告,但若大面积地宣传覆盖,则会受限于成本、精力等因素.而这些,在网络上只要主机空间和访问速度满足的前提下,理论上可以放入无限的跟企业相关的信息,譬如,企业的产品信息、怎么写作信息、品牌文化等等.

2.内容及版面的更新需及时

商务网站必须保持经常性的更新,这里所指的更新,包括版面的更新和内容的更新.内容的更新可以不断吸引浏览者再次光临,使潜在的消费者变成客户,增强客户对企业网站的粘性,提高客户的忠诚度；版面的更新可以针对某次新产品的发布或者某次重大的活动,如果网站一成不变,是无法获得更多的浏览者的关注,也就无法获得更多的商业机会的.因此,企业网站的更新维护是一个很重要的网络营销手段,必须高度重视这一点,保持网站的持续更新.

3.突破了时间和空间的限制

从时间概念上看,在企业的电子商务网站上,客户每天24小时都可以获取他们需要的产品或怎么写作,而这些,传统的的八小时工作制根本没有办法满足他们的要求.

从空间概念上看,传统的商务活动受限于地域位置,而电子商务网站依存于Inter虚拟的空间,即使处于不同国家的企业和消费者,都可以通过这个平台实现联系.

二、优秀导航设计的基本特征

1.结构清晰、浏览者能够迅速定位信息

电子商务网站的信息量大,分类繁杂,因此,好的导航设计,就必须是结构清晰的,使得消费者在海量的信息中能够迅速地定位他们所需要的信息,那么,这样才能使这些潜在的客户逐渐转变成你的目标客户,同时,结构清晰的导航设计也能体现一定的专业性,提高客户的信任度.

2.便于更改或者添加新的网站模块

对于企业的每次版面更新,好的导航设计能够在不破坏网站整体风格的前提下,非常方便地进行诸如更改导航设计,添加新的导航项目等操作.

3.智能地适应消费者不同的浏览环境

电子商务活动突破了时间和空间的限制,好的导航设计需要真实地还原设计者的思想,需要它是智能的,对于不同浏览环境的消费者而言,都显示同一个效果.不能因为设备屏幕或者浏览平台的不同,而产生不同的浏览效果.

三、CSS概念及其制作导航条优势分析

1.CSS的概念

CSS,称之为层叠样式表（CascadingStylesheet）,用以格式化网页的格式.在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变外链该CSS文件的一个或者多个页面的样式.

2.CSS制作导航条的优势分析

（1）代码冗余少,更快下载速度.利用CSS和XHTML制作的导航菜单,其代码冗余少,同时,纯代码的下载速度肯定比使用Jascrip或图片来实现的要快得多.另外,因为网络蜘蛛对文本的兴趣要远高于图片,它会更有益于搜索引擎的索引排名,提高网站被访问的命中率.

（2）适应力强,更多人文关怀.基于CSS的导航菜单适应力强,可以应付不同用户的浏览平台.同时,如果用户关闭读取图片和(或)CSS的功能,网站仍然可以以简洁的方式浏览,网站的访问不会受到影响.

（3）网络资源多,更多设计选择.对于初次使用CSS进行导航设计的设计师来讲,如果不想从零开始编写CSS菜单代码,则可以在网络上搜索设计好的基于CSS的导航菜单,然后再加以修改部分代码以适应自己开发网站的总体风格.同时,还有一些专门设计CSS菜单的工具,譬如,CSENU就可以通过修改一些自定义样式来快速生成专业的CSS菜单.

四、利用CSS来制作几种常见的导航条

导航条的制作标签一般采用无序列表,形如超链接文本；在标签里面设置好各导航项后,就可以用CSS去描述导航超链接的各种状态,通用的代码如下所示（本例仅用了1KB不到的GIF图片）.

在上面通用代码的基础上,再稍加变化,就可以制作出二级菜单、多级菜单,以下是几种常见的导航条样式.