《photoshop.cs3.flash.cs3.dreamweaver.cs3商业网站开发从入门到精通-教学ppt第7章 制作网页导航条》由会员分享，可在线阅读，更多相关《photoshop.cs3.flash.cs3.dreamweaver.cs3商业网站开发从入门到精通-教学ppt第7章 制作网页导航条（16页珍藏版）》请在金锄头文库上搜索。
1、第7章 制作网页导航条,导航条是网页的一个重要组成部分。导航条的设计，有时会决定一个页面的成败，同时导航条也是提高站点易用性的关键。在本章中，将介绍导航条在页面中不同的表现形式，以及讲解常用导航条的制作方法。,7.1 网页导航条简介,网页导航条是指居于重要位置，用来显示和链接（关于链接的详细内容，将在后面的章节中讲解）站点主要栏目的部分。网站的浏览者通过导航条了解站点内容的分类，并使用导航条上的链接浏览站点的相关信息。导航条一般都处于页面最醒目的位置，以方便浏览者的使用，一个网页导航条的示例如图所示。,7.1.1 横向导航条,横向导航条是网页中最常用的导航方式。横向导航条符合人们通常的浏览习惯
2、，同时也便于页面内容的排版。其缺点在于如果使用不合理，可能会给人以呆板、单调的感觉。下面是一个使用横向导航条的示例，如图7-2所示。,7.1.2 纵向导航条,纵向导航条也是网页中比较常用的导航方式。纵向导航条也较易于被浏览者接受，但其缺点在于使页面内容的排版变得相对困难。下面是一个使用纵向导航条的示例，如图所示。,7.1.3 自由排版的导航条,自由排版的导航条一般会出现在信息量相对较少，内容较为活泼的站点上。其优点在于新颖、灵活、能引起浏览者的兴趣。但是如果使用不当，则会使浏览者进行不必要地思考，影响导航的效率。下面是一个使用自由排版导航条的示例，如图所示。,7.2 制作横向导航条,本实例中制
3、作的横向导航条为蓝色圆角导航条，并含有相应的背景。具体制作过程分为制作导航条背景、制作圆角矩形、制作文本和圆点等几个步骤，其具体显示效果和相关内容如下所示。,7.2.1 新建文档并填充背景颜色,制作背景比较简单，首先使用“选区”工具选择背景区域的位置，然后使用选定的颜色填充，具体操作如下所示。,7.2.2 制作首页圆角矩形,制作圆角矩形要使用到圆角工具和图层样式等，具体操作如下所示。,7.2.3 制作其他圆角矩形,制作其他圆角矩形和制作首页圆角矩形的方法类似，具体操作如下所示。,7.2.4 制作文本和圆点,制作文本和圆点，要使用“文本”工具、“画笔”工具等，具体操作如下所示。,7.3 制作纵向
4、导航条,本实例中制作的纵向导航条为在绿色渐变背景上显示金色文本的效果，具体制作过程包括制作导航条背景，制作菜单背景样式，制作菜单内容等几个步骤，其具体显示效果和相关内容如下所示。,7.3.1 新建文档并填充背景颜色,制作背景比较简单，菜单背景分为三个图层，两个图层为单一的背景颜色，一个图层为渐变的背景颜色，具体制作方法如下所示。,7.3.1 新建文档并填充背景颜色,制作背景比较简单，菜单背景分为三个图层，两个图层为单一的背景颜色，一个图层为渐变的背景颜色，具体制作方法如下所示。,7.3.2 制作菜单背景的样式,在制作菜单背景的样式时，主要使用了内阴影的样式，具体制作方法如下所示。,7.3.3 制作菜单内容,制作菜单内容主要使用“文字”工具，具体制作方法如下所示。,7.4 专家总结,导航条部分是连接整个站点的纽带，在制作的时候，要体现导航条的特点，让浏览者一眼便能够辨认出导航条部分。所以导航条部分的制作，最好符合导航条显示的习惯，不论显示的位置和方式，避免为使用者带来不必要的困惑。同时，导航内容的文本要与页面中普通的文本有所区别，避免显示效果的混淆。,
