大型网站导航列表设计步骤 如何设计网页导航条

    导航条的功劳来自于有着网站导航的作用。很多的客户在搜索引擎中搜索就是要快速的找到自己需要的信息，而网站导航的目的就是帮助用户更便捷的，在网站内的网页上快速的寻找，快速的完成对网站各主要内容的浏览。为了引导客户浏览与所需信息相关的页面，在网站的众多的内容中理清链接，导航条可以分为几种类型，最常见的有全局导航、用的最广的有局部导航和辅助导航等等，都是为了这个目的，即对网站所有的内容进行高度的总结、整理并且引导正确的索引和理解。
    当然了，导航条中比较常见的还有网站地图和内容索引表。看着网站地图和内容索引表就对于整个网站的目录信息有了了解，客户查找起来也更方便、快捷。 今天我们来看看整站网页设计步骤中导航列表的基本设计。列表的应用是很广泛的，可以说大多数的网站中都有列表，只是表达的方式有些不一样。
    可以说每个网站中都是具有导航的，而且一个好的导航列表可以给网站增添不少的色彩。
    现在我们就来看看一个简单的列表是如何产生的吧，首先先新建一个页面，然后插入一个ID为menu的div，然后在设计视图中选中文字，点击工具栏的ul图标，也即是会自动插入ul和li，然后修改文字内容为你需要的内容。做好这些以后，你在浏览器中会发现在内容的周围的空隙会很大，而且每一行的前端都是由一个点，这就是标签的默认样式造成的。
    显然这样的效果我们是很不满意的，那么我就需要调整它的效果。首先要在视图中，选中我们要编辑的内容，在点击下端的ul新建CSS的规则，在其中就可以定义一下我们创建的列表的方框与列表属性。接下来就要调整一下列表的全局，也就是文字设计、字体大小，间距等。在CSS样式面板中点击新建，在弹出的窗口中选择标签，名称选择body，在这里就可以调整内容的样式了。如果想要调整列表的边框及背景，那么给li定义一下CSS规则就可以了，做法同上。
    接下来就是把这个列表中的内容，加上链接。这个就不多说，大家都知道。同时定义a的状态和鼠标划过的状态。在CSS中创建一个a规则，并调整当鼠标划过链接文字时的颜色。在这里就要涉及到伪类，在这里直接调用就好。
    对于采用CSS进行网页设计的初学者，大多数人都不知道使用子选择器，这样会影响效率。这是后就可以使用派生选择器，就可以减少大量的class的定义。这个代码如下：
    #menu ul { list-style: none; margin: 0px; padding: 0px; }
    #menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }
    #menu ul和#menu ul li即为派生选择器，如果我们把前边的#menu去掉，那么将是对ul标签重定义，重定义的属性将应用到全局，而前边加上#menu后，将是定义ID为menu元素内ul的样式，设置它的样式只对#menu下的ul生效，不对它之后的ul生效，这个有点像编程中的局部变量，而直接定义ul则相当于全局变量。#menu ul li 是定义ID为menu元素内ul下的li，派生选择器可以使我们不用再给每个li定义一个样式名来定义样式，只需使用派生选择器，从它的父元素处选择即可，这样能大大提高网页设计的效率。
    当然成功的导航方式是可以复用的，虽然在用户的眼睛里没有导航，然而在网站策划师的视野中优秀的导航随处可见，整站网页设计的导航并不存在什么诀窍和秘密，如果理解每种导航结构的特点，那么就“拿来主义”吧。