使用文本&图像的数据库驱动的导航条
可能你在浏览一些专业网站的时候会被一些导航条所吸引。实际上，已有的一个内插式的导航条创建工具来创建有onMouseOver（鼠标移过） 和 onMouseOut （鼠标移出）行为的导航条，可以使得你的网站更专业。但是如果你的网站经常地改变呢？有一种选择是装入图片并且用一个数据库驱动导航条来粘贴，它是使用了重复区域（repeat
region）。在本教程中我先介绍这种方法，然后我们将探讨怎样利用数据库驱动地连接和图片来替换UltraDev的导航条图片行为。
目录数据库表格
以下示基本的数据库表格来创建用于导航条的内容表格。
区域名字 数据类型 数据类型 描述
SQL Server 7 Access 97/2000
-------------------------------------------------------------
PageID Autonumber Autonumber 主键
Page varchar(50) text 网页标题
URL varchar(50) text 相关连接
Image1 varchar(50) text 向上图的位置
Image2 varchar(50) text 向下图的位置
Active Bit Yes/No 设置是否在内容表格中显示这个页面
示例数据
你将会注意到在数据库中的连接都与站点根目录有联系。
区域名字 示例
-----------------------
PageID 1
Page Articles 文章
URL . ./articles/default.asp
Image1 .. /images/articles1.gif
Image2 .. /images/articles1_f2.gif
创建内容表格的导航条
如图1所示，它是一个已经完成的网页。
（图1）
我将把它留给你创建的页面布局。
1.使用Data
Bindings Server Behavior（数据绑定服务器行为）来创建一个记录集，如图2所示。在本例子中我在SQL 7中使用Stored Procedure（存储过程）。这里称记录集为rsTOC
（图2）
2.在左手边的列插入一个新的一行一列表格，并且拖拉网页记录集对象(rsTOC.Fields.Item("Page").Value)到行中。
3.使用Server
Behaviors（服务器行为）将这一行设置为一个重复区域并且显示所有记录。
4.现在既然只有显示连接的名字，我们需要连接到实际的URL。这时你需要打开代码，手动修改一些代码，具体代码如下：
< a href ="< %
=(rsTOC.Fields.Item("URL").Value)% >"
style="text-decoration:none" ><
%=(rsTOC.Fields.Item("Page").Value)% > < /a >
< a href ="< %=(rsTOC.Fields.Item("URL").Value)%
>"< /a >< /font >
在内容表格中创建动态连接到特定项目的URL，并且从你的记录集中显示数值作为页面。你将会看到在服务器行为对话框中有一个动态连接。
图3是在UltraDev中网页处于设计模式的图。
（图3）
当你增加新的项目的时候你只需在你的数据库表格中增加必要的条目，并且设置新条目有效区域为True，它就将会在你网站的所有内容表格显示出来。最后，当然要把有效区域设置为False。
带图片的导航条
现在我们继续我们第二部分的教程。文本的连接已经没问题了，但是麻烦就出在图片和按钮需要花很多的时间来创建。为解决问题，你现在可以使用动态数据库驱动来连接它们。我们将利用我们上面使用的以及UltraDev产生的代码来创建我们的图片驱动导航条。创建表格和放置适当的图片作为标识的工作留给你自己取完成。通过在网页的上方放置一个表格以及插入在Fireworks处理的图片，一切都完成了，结果如图4所示。
（图4）
为了创建正确的代码，请使用UltraDev来产生你的导航条。导航条对话框将引导你来创建基于图片连接的过程，它有不同的状态，比如
Up（向上）、Over(移过)等等。记住保存网页，然后再修改代码。你现在只需要一个具有正确的up/down（向上/向下）灯状态的图片按钮用于创建你所需要的代码。只要你所有的图片示相同的尺寸，你的工作就不会有问题。图5是导航条对话框。
（图5）
现在让我们看看三段UltraDev创建管理导航条的代码。第一段代码是客户端的Javascript，它是设置导航条的图片交换。这段代码是在<
html >上方。这里不要改变这段代码的任何地方，并且将这段代码粘贴到你新的NavBar.asp网页上。如果你想，你可以在你的网页上放置一个包含文件。
< Script language="JavaScript" >
< !--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i< a.length;
i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image;
d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))@0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<
d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i< d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_nbGroup(event, grpName) { //v3.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new
Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null)
{
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null)
{
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : args[i+1];
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
if ((nbArr = document[grpName]) != null)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up;
img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null)
{
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
}
//-- >
< /script >
第二段代码出现在<
Body >标识中，它只是重装载图片以至于可以更好地交换图片。你仔细检查一下在导航条对话框中的预装载图片方框，你就会发现它是插入的。
< body bgcolor="#FFFFFF"
onLoad="MM_preloadImages('../images/articles1_f2.jpg'),'../images/oehome1_f2.jpg')"
>
现在当预装载时候，只显示两张图片。如果你想预更多的图片，它们需要以相同的格式包含到这个字符串中并且如果它永远伸展则必须所有都在一行上。如果你检查图片在对话框中UltraDev就会自动做这一切。对应数据库驱动的导航条这段代码没什么问题。既然图片列表是在<
body >中作为onLoad命令的一部分传递的，所以记录集将不会动态产生它们。你现在可以不检查预装载图片或者为你的导航条创建列表来包括所有可能的图片。因为绝大多数的图片是小的GIF或者JPG格式的，所以不会出现什么问题。
第三段代码是有UltraDev生成的，它实际上是导航条的动作代码。这些代码才是真正初始化连接。仔细看以下的代码，你会发现一这些代码创建连接到网页上，并且利用适当的图片设置了onMouseOver
和
onMouseOut行为。
< a href="../articles/default.asp"
onClick="MM_nbGroup('down','group1','Articles','../images/articles1_f2.jpg',1)"
onMouseOver="MM_nbGroup('over','Articles','../images/articles1_f2.jpg','',1)"
onMouseOut="MM_nbGroup('out')" >< img name="Articles"
src="../images/articles1.jpg" border="0"
onLoad="" width="99" height="19" >< /a >
现在已经到了增加数据库组件的时候了。具体过程如下：
1. 你需要增加相同的rsTOC到这个新的ASP网页上，步骤根上面所述一样。
2. 象本教程前面所述的，插入一行一列的表格并将它设置为重复区域。记住，不要从记录集中向表格插入任何的区域数值。
3. 拷贝导航条动作代码到这个表格上。
4. 现在我们将要在重复区域上将代码数值从记录集传递到UltraDev导航条行为。
< a href="< %=(rsTOC.Fields.Item("URL").Value)% >"
onClick="MM_nbGroup('down','group1','<
%=(rsTOC.Fields.Item("Page").Value)% >','<
%=(rsTOC.Fields.Item("Image2").Value)% >',1)" onMouseOver="MM_nbGroup('over','<
%=(rsTOC.Fields.Item("Page").Value)% >','< %=(rsTOC.Fields.Item("Image2").Value)%
>','',1)" onMouseOut="MM_nbGroup('out')" >< img
name="Articles" src="<
%=(rsTOC.Fields.Item("Image1").Value)% >"
border="0" onLoad="" width="99"
height="19" >< /a >
最后的代码如下图6所示。
（图6）
刚才我们所做的是创建一个动态的基于图片的导航条。如上所述，增加新的项目到数据库以及新的图片将大大扩充了导航条。当退出的时候，在数据库中将Active设置为False。下面说说我对设计的一点改进。因为我想在最后一张图片连接下面让背景颜色扩展一点，我在重复区域下面增加了另外的行给表格。然后在制作另外一张图片，它跟其它的图片一样，只是上面没有文字；再设置这张图片为背景图片，这样导航条看起来就有点扩展了，如图7所示。
（图7）
最后给出存储过程的代码：
Alter Procedure spTOC
As
set nocount on
SELECT Page, URL, Image1, Image2
FROM WebTOC
WHERE Active = 1
ORDER BY Page
return