通过Dreamweaver_CS3学习HTML+DIV+CSS_第14章__导航条的设计.ppt

第14章导航条的设计,导航条在网站网页上具有导航作用，并是指引和方便浏览者访问另一页面的快速通道。网站导航是网站的指路灯，也是网站内容的总体概述，同时也是搜索引擎收录网站的重要权衡因素。创建一套良好的网站导航系统将会使网站更易访问。,14.1导航条的风格选择,导航条的风格多种多样，有适合国字型的导航布局、有适合T字型的导航布局、有适合左右和上下宽度的导航布局。导航条使用的技术主要包括CSS+DIV的导航、框架导航和表格布局的导航。,14.1.1导航条的目的,许多网站缺乏方便的导航系统，也未提供有助于浏览者找到所需信息的帮助。这些网站把所有的导航信息都放在杂乱的按钮和文本链接上，从而造成浏览者在寻找有关内容时非常困难。因此，创建一个便于浏览者识别和操作的网站导航系统是必不可少的。,14.1.2导航条的设计原则和技巧,网站导航系统在设计上通常遵循一些基本的原则，下面讲解关于导航设计的有用技巧。1尽可能多地提供相关资源的链接2一致性原则3网站板块和层次划分合理4常用的导航技巧,14.1.3设计导航的技术,导航设计的技术一般都是根据布局的技术来确定。如果一个网站是框架布局，那么相应的导航设计也是基于框架技术实现的。下面是现在比较流行的导航设计技术。CSS+DIV设计：完全采用CSS设计导航。FLASH设计：用Flash动画制作导航，其优点是生动、形象。框架设计：导航是框架的组成部分之一。一般用于论坛或网站后台管理系统中。表格设计：采用表格技术制作导航。,14.1.4导航条的布局方式,导航条是网站风格的主要组成部分。一个好的导航可以在确定网页风格的同时，也会使页面层次清晰。导航制作一直是设计师们需要重点思考的问题，也是网页创意的重要体现。现在互联网最流行的导航布局方式有以下几种。,14.1.4导航条的布局方式,1水平导航条水平导航条以水平方式排列导航项。,14.1.4导航条的布局方式,2垂直导航条垂直导航条以垂直的方式排列导航项。,14.1.4导航条的布局方式,3POP导航条POP导航条以体现网站的个性为主，不拘一格，重点在于表现网站的与众不同。,14.1.5各式各样的导航,虽然大部分网站以水平导航为主，但大部分的导航在颜色搭配、字体控制和导航框等选择上都有自己的特色，下面是流行在网上的各式各样的导航条。效果比较简单的导航如图所示，在导航条基础上进行加光等适当地修饰导航。,14.1.5各式各样的导航,同样是水平导航，可以用绘图软件自带的小图标或英文拼音美化导航，组织有序的导航条适合网页较多的网站。下面是一个组织有序的导航条，,14.2导航条制作,上一节介绍了导航制作的目的、技巧以及导航条的风格等。在这一节中，将分别通过表格技术说明水平导航条和垂直导航条的制作方法。由于POP导航使用较少，读者如对POP导航条感兴趣可以在水平垂直导航条制作方法的基础进行扩充，制作出适合自己网站的导航条。,14.2.1水平导航条的制作,水平导航条制作方法。具体步骤如下：,14.2.1水平导航条的制作,在上一章中介绍的页面头部所用到的导航就是一个典型的水平导航条，在这一小节中将重点介绍其制作方法。具体步骤如下：,14.2.2垂直导航条的制作,在左右两栏目布局的网站和一些子页面中，垂直导航条也是比较常见的导航形式。在现实应用中，垂直导航条更多是几张图片，或文字垂直排列在单元格中。其制作步骤如下：,14.2.2垂直导航条的制作,设置各导航栏的链接。此处将各链接设置为空链接。具体的设置方法读者可参照上一小节水平导航条制作中的步骤。设置完成后的效果如图所示。,14.3样式调整及修改,通过前面的步骤，把水平导航栏和垂直导航栏的大体轮廓完成了。但是，水平导航看起来有点单调，垂直导航栏的文字颜色与背景太相近，不适合浏览。CSS有强大的表现功能，接下来用CSS样式对导航栏进行调整和修改。,14.3.1水平导航条的样式调整及修改,在14.2.1中介绍了水平导航条的制作，但其美观效果并不能达到一个网页的要求，需要对其进行样式控制。下面是其样式调整的具体步骤：,14.3.1水平导航条的样式调整及修改,将导航条放入上一章制作的页面头部中，可以看到页面头部的最终效果，如图所示。,14.3.2垂直导航条的样式调整及修改,上一节中介绍的垂直导航条制作的最终效果比较粗糙，对整个网页的美观程度有影响。下面通过样式的调整，让其变得美观实用。具体步骤如下：,14.3.2垂直导航条的样式调整及修改,调整导航条链接的样式。单击CSS面板的【编辑样式】按钮，弹出【新建CSS规则】对话框，进行如图左所示的设置。按【确定】按钮后，弹出CSS规则定义对话框，选择【分类】列表框中的【类型】选项，对链接的字体大小、粗细、修饰和颜色进行设置，如图右所示。,14.3.2垂直导航条的样式调整及修改,分别双击导航条的链接文字，在【属性】面板中单击【样式】右侧的三角按钮，在弹出的下拉列表中选择样式menu选项，设置其CSS样式如图左所示。单击【文件】|【保存】命令，保存文件index.html。按F