2.4 水平导航条应用
网站导航条对于每个网站来说都是必不可少的，它相当于城市中的路标，可以指引浏览者找到自己热衷的内容。水平导航条有很多种，如本节中介绍的带图标的文字导航条、Flash导航条、图片按钮导航条、质感效果的导航条等。下面将介绍网站中常用的几种导航条。
实例042 带图标的文字导航条
本实例是一个美化界面、人性化的程序
实例位置：光盘\mingrisoft\02\042
实例说明
为了方便浏览者浏览网站中的内容，每个网站都设有导航条。本实例主要介绍的是带图标的文字导航条，在导航文字前设置图标，是为了能够让浏览者在进行页面浏览时，不通过文字也可以知道每个导航条的大致内容，增强网站的趣味性。运行本实例，如图2.16所示，当单击导航文字或图标时，可以进入所对应的链接页面。
图2.16 带图标的文字导航条
技术要点
本实例主要是应用HTML的IMG标记（插入导航条中的图标）和A标记（设置文字和图标的超链接）来实现的。下面将详细介绍IMG标记和A标记。
IMG标记的语法格式如下：
<img attribute>
参数说明：
● attribute：IMG标记的属性列表，常用的属性如表2.6所示。
表2.6 IMG标记的常用属性
A标记的语法格式如下：
<a href="URL地址" name="名称" title="提示性文字" target="指定超链接的目标窗口" accesskey="key" event="脚本">超链
接文字</a>
属性说明：
● href：用于指定目标文件的URL地址，通常有绝对地址、文件相对地址和根目录相对地址3种形式。
● name：指定超链接的名字。
● title：该属性可选，用于指定指向超链接时显示的标题文字。
● target：该属性可选，用于指定超链接页面的打开方式，如果省略该属性，则目标文件将取代包含该超链接的文件。target属性既可以是窗口或框架的名称，又可以是“_blank”、“_parent”、“_self”和“_top”4个保留字中的一个。
● accesskey：指向该超链接的快捷键。当用户按下Alt+Key键时，选择该超链接。其中Key代表键盘上的任何数字或字母键。例如：accesskey="M"，当用户按下Alt+M键时，选择该超链接。
● event：用于指定当用户选择该超链接时执行的操作。event的值可以是onBlur、onClick、onMousemove、onMouseout、ondblclick、onMouseover等鼠标事件。
技巧：在对Image对象进行超链接时，会出现蓝色边框，此时只需将borders属性值设置为0，即可去掉此边框。
实现过程
（1）在页面中的适当位置插入一个一行多列的表格，该表格的列数请根据导航链接的个数确定。
（2）首先在每个单元格中添加一个IMG标记作为图标的图片，然后再添加一个回车符和超链接文字，最后，为图标和文字设置超链接。关键代码如下：
<td width="12%" align="center"><a href="index.jsp"><img src="images/N_index.gif" width="37" height="30" border= "0"><br>
首页</a></td>
技巧：作为图标的图片采用GIF格式，可以实现图标的背景透明，前提条件是设计的图标是背景透明的。
举一反三
根据本实例，读者可以：
设计开发企业门户网站中的导航条；
设计电子商务网站中的导航条。
设计搜索网站中的导航条。
实例043 Flash导航条
本实例是一个美化界面的程序
实例位置：光盘\mingrisoft\02\043
实例说明
在开发网站的过程中，为了使网站有一个更好的视觉感受，增强页面的表现力，可以使用Flash制作导航条。运行本实例，将鼠标指针移动到“首页”导航文字上时，其下方将显示一条红色的线，如图2.17所示，鼠标指针移出后，该红线即刻消失，单击Flash中的导航文字就会进入相应的页面。
图2.17 Flash导航条
技术要点
本例中，主要应用到了Flash的动作脚本中Button类的release方法。release方法在按下并释放鼠标左键时被触发。
语法如下：
on(release)
{
//此处是您的语句
}
实现过程
（1）新建一个Flash，在菜单中选择“插入”→“新建元件”命令，在弹出的“创建新元件”对话框中选择“按钮”单选按钮，单击“确定”按钮。
（2）在“弹起”的关键帧输入文本“首页”，选择“指针经过”帧，单击鼠标右键，在弹出的快捷菜单中选择“插入关键帧”命令，在“按下”帧插入一个动画元件，在“点击”帧中画出作用区域。
（3）返回场景，从库中将按钮元件拖入到场景中适当的位置。
（4）选中按钮，打开“动作”面板，在代码区中输入相应的代码如下：
on (release)
{
getURL("index.jsp");
}
（5）依次做出多个按钮。
（6）生成SWF文件。
（7）在网页中插入刚刚生成的SWF文件，代码如下：
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=7,0,19,0" width="767" height="80">
<param name="movie" value="navigation.swf" />
<param name="quality" value="high" />
<embed src="navigation.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/
x-shockwave-flash" width="767" height="80"></embed>
</object>
举一反三
根据本实例，读者可以开发网站中的各种Flash导航条。
实例044 图片按钮导航条
本实例是一个人性化的程序
实例位置：光盘\mingrisoft\02\044
实例说明
网站网页形式的多样性，是吸引浏览者的一个重要途径，增强页面的立体感是网站多样性的一种表现，设计按钮形式的导航条使导航效果更加明显，给人以更加真实的感觉。当浏览者单击该链接按钮时，给浏览者一种直接触摸按钮的感觉。运行本实例，如图2.18所示。
图2.18 图片按钮导航条
技术要点
本实例主要应用图片热点超链接来实现，通过HTML的<map>标记可以为图片添加热点。为图片设置热点超链接的语法格式如下：
<img src=“file_name” usemap=“#MapName”>
<map name=“MapName”>
<area shape=“value” coords=“坐标” href=“URL” alt=“描述文字”>
…
</map>
标记<map>属性如表2.7所示。
表2.7 <map>标记的属性说明
在<map>标记中，根据属性shape的取值不同，相应坐标的设定也不同。下面介绍属性shape的3种取值以及相应坐标的设定。
（1）设定属性shape的属性值为rect。
属性shape取值为rect时，表示矩形区域，属性coords的坐标形式为“X1，Y1，X2，Y2”。其中，X1、Y1代表矩形左上角的x坐标和y坐标，X2、Y2代表矩形右下角的x坐标和y坐标。
（2）设定属性shape的属性值为circle。
属性shape取值为circle时，表示圆形区域，属性coords的坐标形式为“X，Y，r”。其中，X、Y为圆心坐标，r为圆的半径。
（3）设定属性shape的属性值为poly。
属性shape取值为poly时，表示多边形区域，属性coords的坐标形式为“X1，Y1，X2，Y2，……，Xn，Yn”。其中，Xn、Yn代表构成多边形每一顶点的坐标值，n的取值为1，2，3，……n，多边形有几条边就有几对x、y坐标。
注意：可以在<body>区域中的任一位置定义<map name="mapname"></map>标签，name是图片热点的名称。
实现过程
（1）在图像制作软件中设计一张带有超链接按钮的图片。
（2）在Dreamweaver的菜单中，选择“插入”→“图像”命令，将插入一张图片，单击选中此图片，此时在“属性”面板中可以看到此图片的相关属性。初次使用“属性”面板时其默认为“简化”形式，单击右下方的向下箭头可打开其扩展属性模式。
（3）选择图片后，在其“属性”面板中选择“矩形热点工具”，为图片的每个按钮添加热点超链接。选中热点区域，在其“属性”面板中的“超链接”文本框中输入超级链接的地址，本实例中设置为空链接“#”，依次为每个热点设置超链接地址。
举一反三
根据本实例，读者可以：
实现图形化比较强的游戏网站中的导航条；
实现公司门户网站中的导航条；
实现个人主页中的导航条。
实例045 导航条的动画效果
本实例是一个美化界面的程序
实例位置：光盘\mingrisoft\02\045
实例说明
导航条是网站设计中不可缺少的元素之一，它能正确地引导浏览者查找需要的资料，成为浏览者的网站路标。同时，网页导航条的设计风格也能影响页面的整体效果，对于一个静态元素居多的页面，可以为导航条添加动态效果，这样可以使整个网站不至于太呆板，增强网页的欣赏价值。例如，在明日科技网站中，为导航条设计了动画效果，这样只要用户将鼠标指针移动到任意一个导航按钮上时，该按钮都会突出显示，鼠标指针移走后，又恢复为原来状态。如图2.19所示。
图2.19 导航条的动画效果
技术要点
本实例主要是通过Image对象的鼠标事件控制Image对象的src属性的值实现的。
在JavaScript里提供了对图像进行处理的专用对象Image来装入文档的图像。Image对象类型与其他对象的差别在于，其允许通过构造器显示和创建新的Image对象类型，创造和预装入的图形之前并非是Web页面的组成部分。Image对象存在于浏览器的缓冲区中，用于替换已经显示的图像。
用image()构造器创建图形的语法格式如下：
ObjImg=new image() //创建了一个新的Image对象，并将其赋予变量ObjImg
ObjImg.src="图片文件相对路径" //设置Image对象的src属性
在利用Image对象编程之前，首先利用IMG标志显示属性。在HTML中，要显示图片可以用如下语句来实现：
<IMG src="pictureName.gif" name="ImgName">
在JavaScript中可以用下面的语句访问Image对象。
document.Img.src=" menu_01.gif";
实现过程
（1）准备14 张图片，7 张鼠标指针移出时显示的图片，图片的名称为“menu_0”加上1至7的数字再加上“.gif”，7张鼠标移入时显示的图片，图片的名称为“menu_0”加上1至7的数字再加上“_over.gif”。
注意：如果图片menu_01.gif代表的是公司首页的图片，则menu_01_over.gif代表的图片一定也是公司首页的图片。
（2）将步骤（1）所准备的7张鼠标指针移出时显示的图片按顺序插入到页面中的适当位置，并设置其鼠标事件onMouseMove和onMouseout执行的操作，这里分别调用两个不同的自定义JavaScript函数move()和out()，关键代码如下：
<img src="Images/top/menu_01.gif" id="image1" width="95" height="119" border="0" onMouseMove="move(this,'1')" onMou
seout="out(this,'1')">
<img src="Images/top/menu_02.gif" id="image2" width="95" height="119" border="0" onMouseMove="move(this,'2')" onMou
seout="out(this,'2')">
<img src="Images/top/menu_03.gif"name="image3" width="95"height="119"border="0"onMouseMove="move(this,'3')"on
Mouseout="out(this,'3')">
<img src="Images/top/menu_04.gif" name="image4" width="94" height="119" border="0" onMouseMove="move(this,'4')" on
Mouseout="out(this,'4')">
<img src="Images/top/menu_05.gif" name="image5" width="95" height="119" border="0" onMouseMove="move(this,'5')" on
Mouseout="out(this,'5')">
<img src="Images/top/menu_06.gif" name="image6" width="94" height="119" border="0" onMouseMove="move(this,'6')" on
Mouseout="out(this,'6')">
<img src="Images/top/menu_07.gif" width="95" name="image7" height="119" border="0" onMouseMove="move(this,'7')" on
Mouseout="out(this,'7')">
（3）编写自定义的JavaScript函数move()和out()。move()用于设置鼠标指针移入导航按钮上时显示的图片，out()用于设置鼠标指针移出导航按钮上时显示的图片，代码如下：
<script language="javascript">
//鼠标移动效果
var A_Img=new Image();
function move(image,num){
image.src='Images/top/menu_0'+num+'_over.gif';
}
function out(image,num){
image.src='Images/top/menu_0'+num+'.gif';
}
</script>
举一反三
根据本实例，读者可以：
开发企业门户网站的导航条；
开发在线影院的导航条；
开发电子商务网站的导航条。
实例046 不用图片实现质感导航条
本实例是一个提高效率、人性化的程序
实例位置：光盘\mingrisoft\02\046
实例说明
很多网站都采用了质感比较强的导航条，用以增强网页的视觉冲击力，大多数情况下，这些导航条的背景都是通过图像制作软件制作的质感图片实现的，应用这种方法制作的网站，如果想改变网页的主体色调会比较麻烦，需要再次修改图片。下面介绍一种只需修改网页代码就可改变导航条背景色的方法，那就是应用CSS样式实现。运行本实例，如图2.20所示，导航条的背景的质感效果就是通过CSS样式实现的。
图2.20 不用图片实现质感导航条
技术要点
本实例主要通过CSS的波浪变形效果滤镜Wave实现的。Wave滤镜的基本语法如下：
{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}
参数说明：
● add：表示是否要把对象按照波形样式打乱。值为true或false。
● freq：表示波形的频率，也就是指定在对象上一共需要产生多少个完整的波纹。
● lightstrength：表示可以对波纹增强光影效果，范围是0~100。
● phase：用来设置正弦波的偏移量。
● strength：用来设置振幅的大小。
实现过程
（1）在网页的导航条的位置添加一个单线边框的表格，并将表格的背景颜色设置为页面的主色调，同时添加导航文字，代码如下：
<table width="100%"height="27" border="1"cellpadding="0"cellspacing="0"
bordercolor="#FFFFFF" bordercolordark="#FFFFFF" bordercolorlight="#006666"
bgcolor="#336666" >
<tr align="center">
<td valign="bottom"><a href="#" class="shadow">公司首页</a></td>
<td valign="bottom"><a href="#" class="shadow">公司简介</a></td>
<td valign="bottom"><a href="#" class="shadow">产品介绍</a></td>
<td valign="bottom"><a href="#" class="shadow">技术支持</a></td>
<td valign="bottom"><a href="#" class="shadow">公司荣誉</a></td>
<td valign="bottom"><a href="#" class="shadow">网站地图</a></td>
<td valign="bottom"><a href="#" class="shadow">招贤纳士</a></td>
<td valign="bottom"><a href="#" class="shadow">与我联系</a></td>
</tr>
</table>
（2）为步骤（1）中制作的导航条添加质感效果，即在<table>标记中添加style属性，该属性值为wave滤镜的代码，具体代码如下：
style="filter:wave(add=false,freq=1,lightstrength=50,phase=50,strngth=10)"
举一反三
根据本实例，读者可以：
为图片添加特殊的效果；
实现网站的自动换肤功能。
实例047 标签页导航条
本实例是一个提高效率、人性化的程序
实例位置：光盘\mingrisoft\02\047
实例说明
当一个页面内容比较多，比较复杂时，可以使用标签页，将功能类似的信息放在同一个标签页内，用户可以方便地在不同的标签页间切换。Dojo提供了方便实现标签页的工具包。本实例将介绍如何通过Dojo实现标签页导航条。运行本实例，在页面中将以标签页形式显示社会、法制、体育和娱乐等类别的即时新闻，如图2.21所示。单击“法制”、“体育”和“娱乐”标签，将分别显示各类别的最新新闻。
图2.21 标签页导航条
技术要点
Dojo是一个JavaScript库，包含很多用JavaScript编写的包，负责处理在开发一个JavaScript应用时通常必须自己实现的基础工作。
Dojo提供了美观而实用的工具集，这个工具集包括树、富文本编辑器、日期选择器、菜单和容器等。本实例中应用的就是Widget家族的TabContainer和ContentPane容器。
在使用Dojo时，首先需要加载所需包的对象。dojo对象的require函数，可以调用某个包空间的对象。在使用Dojo时，如果需要的对象未引入到JavaScript文件中，则应该调用require函数来请求这个包空间，Dojo会根据require请求自动得到相应的js文件，并加载到内存中。Dojo会自动维护已经加载的包列表，所以不会重复加载。require函数的语法如下：
dojo.require(object)
参数说明：
● object：用于指定要调用的对象，包括包路径。
例如，加载TabContainer包的具体代码如下：
dojo.require("dijit.layout.TabContainer");
一个标签页效果需要由TabContainer和ContentPane两个容器组成，其中TabContainer表示整个标签页容器，而ContentPane则用于声明每一个标签页。
在页面中，可以很方便地声明TabContainer对象，只需在<div>标记中设置dojoType属性为dijit.layout.TabContainer就可以了。例如，本实例中声明TabContainer对象的具体代码如下：
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:541px;height:177px; display:block; border:0
solid #FFFFFF;">
接下来还需要声明ContentPane对象。在声明ContentPane对象时，与声明TabContainer对象一样，也需要指定dojoType属性，所不同的时，此时需要指定属性值为dijit.layout.ContentPane。另外，通常还需要应用以下属性。
● refreshOnShow：用于指定在该标签页从隐藏到展现时，是否刷新数据，值为true或false。
● href：用于指定该标签页内显示页面的URL地址。
● selected：用于指定该标签页是否为选中状态，值为true或false。
● title：用于指定单个标签页的标题。
● preload：用于指定是否强制加载数据，值为true或false。
实现过程
（1）从http://dojotoolkit.org/downloads网站下载最新的Dojo，目前较新的版本为1.2.3，下载后的文件为dojo-release-1.2.3.tar.gz。
（2）解压缩文件dojo-release-1.2.3.tar.gz到本地服务器上，并将其保存到应用所在文件夹下的js文件夹下，如图2.22所示。
图2.22 Dojo安装后的目录结构
（3）编写index.jsp页面。在该页面的合适位置添加实现即时新闻导航的标签页。
导入Dojo提供的外部CSS样式表文件并引用Dojo库和dijit库，以及加载所需的包对象。具体代码如下：
<style type="text/css">
@import "js/dijit/themes/tundra/tundra.css";
@import "js/dojo/resources/dojo.css";
</style>
<link href="CSS/style.css" rel="stylesheet">
<script type="text/javascript"src="js/dojo/dojo.js"djConfig="parseOnLoad:true"></script> <!--引用Dojo库-->
<script type="text/javascript"src="js/dijit/dijit.js"></script> <!--引用dijit库-->
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer"); //加载TabContainer对象
dojo.require("dijit.layout.ContentPane"); //加载ContentPane对象
</script>
声明TabContainer和ContentPane对象，实现标签页导航，关键代码如下：
<div style="position:absolute;" class="tundra">
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
style="width:541px;height:177px; display:block; border:0 solid #FFFFFF;">
<div id="news1" dojoType="dijit.layout.ContentPane" refreshOnShow="true"
selected="true" title="社会"style="float:left;"
href="newsList.jsp?type=社会" preload="true">社会新闻
</div>
<div id="news2" dojoType="dijit.layout.ContentPane" title="法制"
refreshOnShow="true" href="newsList.jsp?type=法制">
法制新闻
</div>
<div id="news3" dojoType="dijit.layout.ContentPane" title="体育"
refreshOnShow="true" href="newsList.jsp?type=体育">
体育新闻
</div>
<div id="news4" dojoType="dijit.layout.ContentPane" title="娱乐"
refreshOnShow="true" href="newsList.jsp?type=娱乐">
娱乐新闻
</div>
</div>
</div>
（4）编写获取指定类别新闻，并显示的newsList.jsp页面。该页面的关键代码如下：
<jsp:useBean id="conn" class="com.core.ConnDB"/>
<%
request.setCharacterEncoding("GBK");
String type=request.getParameter("type"); //获取新闻类别
type=new String(type.getBytes("ISO-8859-1"),"GBK"); //对新闻类别并进行转码
String sql="SELECT * FROM tb_news WHERE type='"+type+"'";
ResultSet rs=conn.executeQuery(sql); //执行查询语句
String path="";
if("社会".equals(type)){ //设置“社会”标签页显示的图片
path="shehui.jpg";
}else if("法制".equals(type)){ //设置“法制”标签页显示的图片
path="fazhi.jpg";
}else if("体育".equals(type)){ //设置“体育”标签页显示的图片
path="tiyu.jpg";
}else{ //设置“娱乐”标签页显示的图片
path="yule.jpg";
}
<table width="520" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="241"><img src="images/<%=path%>" width="202" height="118"></td>
<td width="289" valign="top" background="images/bg_news.jpg"
style="background-repeat:no-repeat; background-position:bottom right">
<table width="275" border="0" cellspacing="0" cellpadding="0">
<%
int id=0;
String title="";
while(rs.next()){ //通过循环输出获取的新闻标题
id=rs.getInt("id");
title=rs.getString("title");
%>
<tr><td height="22"><%=title %></td></tr>
<%} %>
</table>
</td>
</tr>
</table>
举一反三
根据本实例，读者可以：
实现在线音乐网中新歌速递；
实现连锁培训机构的网站导航。