耿 海
（浙江财经大学 东方学院，浙江 海宁 314408）
“Internet与网页设计”中导航条的设计及其应用
耿海
（浙江财经大学 东方学院，浙江海宁314408）
“Internet与网页设计”是高校计算机等相关专业必不可少的课程之一，导航条的设计也是“Internet与网页设计”课程中1个较为重要的基本应用。在教学过程中对于导航条的设计一般会采用两种方式，一种是基础部分采用表格的形式来进行，另一部分采用DIV+CSS方式来进行导航条的设计，文章分别介绍这两种方式来布局导航条。
网页设计；导航条；表格布局；DIV+CSS
导航条是1个网站必不可少的组成部分之一，实用的导航条设计不仅能够满足用户寻找资源最基本的要求，更能给用户带来比较好的视觉享受。教学过程中针对导航条的设计一般采用表格布局和DIV+CSS两种方式，两种方式各有优劣。本文就这两种导航条的特点进行阐述，并且结合这两种方式，给出相关的应用和相应的教学实验安排，能够让学生更好的了解这两种导航条的布局方式。
1 表格布局制作导航条
1.1表格的定义和用法
在超级文本标记语言（HHyperText Markup Language，LHTML）中，采用
标签来定义表格，一般来说，1个简单的HTML表格是由table元素以及1个或者多个tr，th或者td元素来组成，其中，tr元素定义了表格的行，th元素定义了表头，td元素定义了表格的单元。1.2通过表格布局导航条的案例
表格布局导航条的案例处处可见，本文选取本校学生去的比较多的本校官网网页中的1个导航条作为教学案例，如图1所示。
分析上面导航条可以发现，若是采用表格来对其进行布局，首先肯定需要1个表格，并且至少1行，那么就需要1个
标签，1个标签。接着观察还会发现，1行中有若干个单元格，因为有“首页”“学院概况”“教学管理”“科技服务”“学生管理”“招生就业”“图书馆”这些导航超级链接，所以至少需要有7个单元格| 标签，但是接着观察发现，这个超级链接中间还有6条竖线来分隔，所以，最简单的方法是把这些竖线也作为单元格的一部分内容放入 | 标签中，所以要制作出这样的导航条，就至少需要1个标签，1个标签，13个| 标签。 
图1 本校某一页导航条 
图2 学生表格布局导航条作品 1.3制作过程解析 首先，通过 | 等标签来搭建导航条的基本框架，接着给导航条插入蓝色背景，可有两种方式进行。第一种方式是直接通过一些颜色拾色器软件，获取图1中导航条的背景色的基本值，另一种方式是通过截取图1导航条中1个很小的片段，然后把这个片段作为背景图片，插入到整个表格中。本文采用的是第二种方式，通过表格中的background属性对其进行添加。 接着，就是中间竖线分割线的制作，在教学过程中发现，很多学生在制作这个竖线的时候经常会认为是表格的边框。但是仔细观察会发现，这个线条还没有达到上下边缘，只是中间一小部分。所以，在制作这个分割线的时候采用的方法是，先截取图1中的1个分割线条，然后把它作为单元格的1个图片内容插入到单元格中，本文使用![]() 标签对其进行插入操作，这样能比较好地解决分割线问题。 最后，给剩下的单元格补充进去导航条文字信息就基本完成了。选取学生做的1个导航条展示，如图2所示。 分析图2展示的导航条发现，导航条已经基本能够满足正常使用需求，并且和实际的导航条已经非常接近了，但是依然存在一些问题。如仔细观察图1中的导航条会发现，4个边是带有弧度的圆角边，但是图2中的边是直角边，看起来稍显僵硬。 2 DIV+CSS布局导航条2.1DIV+CSS布局 DIV+CSS是目前网页比较流行的一种布局方式，不仅体现在整个网页中，还广泛应用于很多网页元素的制作中，如导航条。与上面介绍的利用表格 标签来制作导航条的方式不同，DIV+CSS的布局方式，实现了网页页面内容和表现相分离的效果。其中，“盒模型”是DIV+CSS布局的1个非常重要的基础理论，相关属性从内到外依次为内容（content）、填充（padding）、边框（border）、边界（margin）。2.2DIV+CSS布局横向导航条 前面图1中，通过表格布局，制作出的导航条提到的1个缺点就是解决圆弧边较为困难，那么通过DIV+CSS布局的时候，能否解决这个问题呢？本文选取了1个带有圆角边的导航进行分析，如图3所示。 
图3 带有圆边的导航 分析图3所示导航条中圆角边发现，圆角边由长短不一的“盒子”组成，最上方的“盒子”是由1个高度（height）不是太高、具有全部边框的盒子构成；接下来的第二个“盒子”的宽度略微比上面的“盒子”要宽，但是如果宽度相差太大会造成视觉上的“锯齿感”，一般选取的是1 px左右的偏差，并且制作此“盒子”只需要有左右边框，上下不需要边框；接下来的几个“盒子”制作手法类似，一直做到和整个区域的宽度一致即可。这样便给用户一种视觉上具有圆角边的感觉。最后，只要制作出其中1个区域，其他基本类似。 2.3DIV+CSS布局纵向导航条 除此之外，网页中比较常见的纵向导航条也是比较常见的设计，本文选取通过DIV+CSS布局的最简单的导航条进行分析，如图4所示。 
图4 纵向导航条 观察图4发现，除了基本的导航条链接功能外，点击其中的“链接三”，给用户一种凹陷的视觉感受。首先，本文按照1个无序列表对这些导航信息进行排序，使用1个 标签，6个- 标签；接着，设计每一块的内容，给背景添加颜色，给每个列表的边界（margin）和填充（padding）部分设置相应的像素值；最后关键部分是如何使得鼠标点击某个区域时可以呈现出凹陷的视觉效果。观察图4导航条，发现“链接三”和其他导航的区别，其他导航的上边框和左边框接近于白色边框，右边和下边接近于黑色的边框，而“链接三”恰好相反，上边框和左边框接近于黑色边框，右边和下边接近于白色的边框，利用这个效果使得鼠标停留在上面给用户有种“按下去”的视觉感受，代码实现上可根据边框颜色（border-color）来进行改变，但是除此之外，不仅边框上的色彩会改变，背景区域也会随着边框颜色的变化而变化，所以背景采用的是相对定位对其移动，当鼠标移动到该区域时（a:hover），通过相对定位（position: relative），分别向上和向左移动2px实现其移动效果。
3 导航条应用导航条的制作是网页设计课程中必不可少的一部分内容，但是导航条一般情况下不单独存在，大部分情况下需要放入相关网页中，作为1个或者几个页面的连接。所以，接下来本文就将上面设计的几个简单的导航条放入到相关的网页中。选取1个较为简单的网页进行模仿训练，网页中存在两个导航，其中横向导航作为各个页面之间的联系，纵向导航条作为该页面中各段文字位置的1个跳转链接，固定不变在网页的最左边。网页最终效果如图5所示。 
图5 导航条在网站中的应用 3.1网站分析 本文想要制作出如图5所示的网站，首先要看出网站是有1个渐变效果的背景；接着，在网站的最上部存在一张类似于网页图标的图片，当然这边的图片可以根据需求任意进行转换；接下来，就是两个导航条位置的摆放。观察图5，可以发现该网站存在两个导航条，即本文制作出来的两个导航条如图3—4所示。横向导航条摆放在网站内容部分的上端，可以通过这个导航条实现不同页面的转换等；纵向导航条摆放在整个网站的左边，可以通过这个导航条实现该页面不同位置的切换；最后，就是网站内容的制作，根据实际需求进行内容的设置。 3.2网站制作过程解析 首先，针对网站的背景，从上面分析可知，背景的效果是1个渐变的过程，在教学过程中还未涉及渐变操作的相应知识，所以为了解决这个问题，可以通过其他途径来解决。由于背景是从白色渐变为银灰色，而下边大部分区域为银灰色，所以可以先截取该网站或者类似网站中白色渐变为银灰色的部分作为背景图片插入到网页中，设置body样式中的background-image属性，接着再通过颜色拾色器把截图下来的这段渐变图片的最底端的颜色获取出来，然后把这个颜色作为网页的这个背景色，通过设置body样式中的background-color属性，这样让整个背景呈现出1个渐变的过程，背景设置完成。接着，就是对网页中显示出来的一些基本要素进行布局，网页的最顶端是一张图片，所以，仅需要通过![]() 标签进行插入即可。但是，如果直接通过![]() 标签插入的话比较难以掌握其布局位置，所以本文在操作这块内容的时候通过设置1个 标签进行操作，在这个 中调用相关的id样式进行图片的插入，id样式里面可以设置图片宽度和高度等相关属性，若是需要把图片居中显示，则可添加margin属性，设置margin的值为0和auto即可。随后，在网页主体部分插入需要显示的相关内容文字就可以大致显示出整体效果。 最后，最关键的一部分内容便是把横竖导航条插入到整个网页中。横向导航条作为相关页面的跳转导航，所以只需要将上面做好的横向导航条代码复制到相关位置，然后根据网页需求给导航条中每一项设置超级链接。纵向导航条作为当前网页的位置导航，设置稍微复杂一些，首先由于网页的整个页面较长，篇幅较大，所以出现滚动条。这时候就需要设置纵向导航条始终保持在左侧不变。所以，本文需要给纵向导航条样式中添加1个position属性，属性值为fixed，这样纵向导航条就可以一直出现在网页的左边，不会随着滚动条的移动而移动。紧接着，纵向导航条作为该页面的位置导航，点击相关的链接，需要显示本页中某一块的内容，所以，本文需要给页面中主体文字部分设置锚点，然后在纵向导航条中对这些锚点进行链接设置，这时候左边导航条便可以固定不动，通过点击相关的导航，本网页可以跳转到相关的文字内容。 4 实验教学安排导航条一般不单独出现，它是链接各个网页的关键性指南，所以这块的实验教学安排致力于把导航条的制作插入到网页中应用。经过前面理论部分知识的学习以及相关案例的介绍，实验教学的安排是检验学习效果的重要手段之一，所以，首先可以引导学生对一些经典网页中导航条进行观察分析，分析通过目前所学的知识可否制作出相关或者类似的导航条出来；接着，在给定的时间内，着手对这些导航条进行实际的动手制作，并且发现其中存在的问题；最后，展示各自的项目并且自我评价，总结本节课程。 5 结语Internet与网页设计是计算机相关专业必修的专业课之一，其中导航条的制作是该课程中比不可少的基础知识。本文就教学过程中制作两种简单导航条的方式进行讲解，1个是基于表格 标签进行制作，另一种是基于DIV+CSS的方式进行导航条的制作，最后讲解导航条在网页中布局的应用，给出实验安排。［1］SHEA D，HOLZSCHLAG M E，陈黎夫，等. CSS禅意花园［M］.北京：人民邮电出版社，2007. Design and application of the navigation bar in the “Internet and Web Design” Geng Hai
（Dongfang College of Zhejiang University of Finance & Economics， Haining 314408， China） The “Internet and Web Design” is one of essential courses in college computer related majors， and the navigation bar design is also an important basic application in the “Internet and Web Design”course. Navigation design usually adopts two ways in the teaching process， one is adopted table form for basic part and another part uses DIV + CSS way for the design of the navigation bar. This paper separately introduces the two ways to layout the navigation bar. web design； navigation bar； table layout； DIV + CSS 耿海（1988— ），男，江苏南京，硕士，助教；研究方向：网站建设。。
| | |
