Dreamweaver——导航条的设计及制作

来源：百度文库编辑：神马文学网时间：2024/04/29 01:37:46

作者：佚名成果来源：本站原创点击数： 3304 更新时间：2007-05-16
教学进度：正常
教学目标：1、通过分析几个典型的导航，让学生掌握几种典型的导航条的做法。
2、通过分析典型的网站，使学生有序的组织导航。
教学重点：分析、掌握导航条的做法。
教学难点　能根据banner设计导航条。
教学过程：
导航栏的设计一直是网页制作中比较重要的问题，它一般分横向和纵向，对网页设计者来说，设计的导航栏不仅要美观，而且又要突出重点，用绘图软件我们可以快速制作出漂亮的网页导航栏，接下来我们介绍导航栏设计制作中常见的几种做法。
一、较简单的导航栏
如下图：
http://www.sxszjzx.com/~t188/8/1/

在此基础上我们还可以对导航栏加适当的亮光，如我们校园网上的导航:
http://www.sxszjzx.com/index1.php

这种导航栏采用比较简单的做法，只是渐变的背景和文字进行组合，中间可用线条分开。
在这个基础上我们还可以对其进行描边、加适当的分隔线等对其进行美化，并且渐变颜色的深浅上的制作也可以变化。如下图所示：
http://www.sxszjzx.com/~t188/8/3

http://www.sxszjzx.com/~t188/8/4

同样都是横向显示的网页，我们可以用绘图软件自带的小图形和拼音等来美化导航条，如下图所示：　　　　　　　　　http://www.sxszjzx.com/~t188/8/5

如果网站的内容较多的话可以分两栏显示，如下图，这比较适合用于大型的网站。
http://www.sxszjzx.com/~t188/8/6

也可让导航条与网页主体溶为一体，不特意划分区域，如下图所示：
http://www.sxszjzx.com/~t188/8/7

这种设计一般适合于设计比较简洁的网页，
二、方形导航条
这种导航条在做法上相对比较复杂些，但同时要比上面的导航条更醒目，如下图：
http://www.sxszjzx.com/~t188/8/8

http://www.sxszjzx.com/~t188/8/9

再如淘宝网的导航：

三、效果较复杂的导航条：
这些导航条往往具有一定的品质，如下图，就有一种金属质感，又比较的精细，对网页的美化起一定的作用。http://www.sxszjzx.com/~t188/8/10

四、导航要组织有序
我们有些同学往往觉得网页张数做不多，甚至会几个导航就做几张网页，这就是在导航的组织上有问题，下面我们请看下面两个网站：
1、http://www.sxschool.com/s0123/s012314/web/
2、子页如图所示：

长虹练习（下载）
作业：请大家完成此张网页的导航条：http://www.sxszjzx.com/~t188/8/1-hw

Dreamweaver——导航条的设计及制作点滴精华 Dreamweaver网页设计制作技巧精华 Dreamweaver网页设计制作技巧 Dreamweaver网页制作教程：表格设计精华 Dreamweaver网页设计制作技巧 Dreamweaver网页制作教程：表格设计制作水晶导航条 Photoshop制作特色导航条用CSS设计的纵向导航条实例用Dreamweaver制作透明背景的Flash 用Dreamweaver制作透明背景的Flash 制作首页浏览导航的代码及方法导航表格的制作导航表格的制作导航表格的制作导航表格的制作 Dreamweaver构建Blog全程实录(3):数据库的设计和连接　[Dreamweaver] 用表格巧妙制作导航条按钮导航条的选择制作首页浏览导航的代码及方法 - 哥们干杯！的日志 - 网易博客制作首页浏览导航的代码及方法 - 迎春的日志 - 网易博客鸟的天堂教学网站—网站设计制作：贺海江 Dreamweaver实现Blog的随笔及评论管理 dreamweaver里标签及属性的详细解释