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

2012-04-29乔巍

商场现代化 2012年7期

乔巍

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

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

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

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

1.网站的信息量大

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.CSS的概念

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

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

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

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

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

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

导航条的制作标签一般采用无序列表，形如