用Dreamweaver MX 2004设计属于你自己的留言本（四）留言板各页设计①显示留言

①显示留言

在DW中新建一页(在New Document新文档对话框中选ASP VBScript类型的文档)(图16)，存为index.asp，并修改页面标题为留言板首页(图17)

点击Common工具组里的表格图标(图18)(或者按Ctrl+Alt+T)，插入一个5行1列的表格(记为表格1)，设置如下：

选中表格，然后在属性面板中把它设置为居中对齐：

把光标定位到第一行的单元格后在属性面板中把它的高设为35：

同理把第二、四、五行单元格的高都设为20，再如法炮制，在属性面板里把第一行和第五行的单元格设置为水平居中对齐，第二行和第四行的单元格为水平居右对齐：

然后在各单元格里写上文字，完成后如图：

可能会有朋友找不到那个版权符号的插入方法，顺便说一说。有三种方法可以插入版权符号：
1)Insert>>HTML>>Special Characters>>Copyright
2)在Text工具组里最右边的下拉选项里：

3)在源码状态下输入©

光标定位到第三行的单元格里，插入一个一行两列的表格(记为表格二)，宽度设为100%，边框宽为1；左边单元格的宽度设为70，垂直居顶对齐，并插入一个两行一列的表格(记为表格三)，完成后效果如图：

在新插入的表格
的第一个单元格里在按Ctrl+Alt+I插入一个头像(头像路径在留言板目录下images/icon里,在网上找的几个图片稍微加工了一下)，并在第二个单元格里写上访客昵称，之后设置两个单元格的水平对齐方式均为居中：

现在只剩下一个很大的空白单元格了，这个就是我们用来显示访客留言及访客资料的区域，在这个单元格里插入一个三行一列的表格(记为表格四)，写上文字、设置水平对齐方式、单元格高度后如图所示：

再插入一个显示留言内容和回复内容的两行两列的表格(记为表格五)到唯一空白的单元格里，写上文字并设置后效果如下：

最后是给留言、查看、管理这几个字分别加上链接(方法：选中文字后在属性面板的Link输入框中输入链接地址)insert.asp、index.asp、login.asp

用Dreamweaver MX 2004设计属于你自己的留言本（四）留言板各页设计②用CSS美化页面

②用CSS美化页面

保存所有修改，在IE中输入http://localhost/guestbook/index.asp(或者http://localhost/guestbook/)看看你的成果：

是不是觉得很难看？没关系，现在我们用CSS和图片简单修饰一下。

按Shift+F11展开CSS面板，点击图30中的加号按钮

在弹出的New CSS Style对话框中作如图31设置后单击OK，出现一个让你选择可在CSS文件的对话框，这里我们就保存为css.css(图32)

之后在弹出的CSS Style Definition for body in css.css对话框中作如下两步设置：

保存css.css，可以明显的看到现在的index.asp好看多了，不过我们的美化页面工作还没完成，继续定义链接的CSS----单击图30中的加号按钮，在弹出的New CSS Style对话框中作如图35设置，单击OK按钮，再设置(图35)

刚才定义的是正常状态和点击之后的链接，现在再定义一下鼠标移上时的链接状态：

保存css.css，刷新浏览器中index.asp页，看看效果----好象还少点东西，表格线不是网上常见的那种细线，对不对？好，我们现在就开始打造细线表格。用DW打开css.css，在最后加上代码：

.thin {
    border-collapse: collapse;
}
现在css.css里的文件代码如下：

然后给需要做细线的表格(表格一、表格二、表格四和表格五)的table标签里加上class=thin，给表格二、表格四和表格五的table标签里加上frame=void，完成后代码大概如图40，在IE中看的效果如图41所示：

注意，这种方法制作的细线表格，必须保证有class=thin、border=1和bordercolor=#666666(边框颜色，可以选择自己喜欢的颜色)三个属性，并且只适用 于IE5.0+。
最后是给几个单元格加上背景图片和背景颜色，完成后在IE中的效果如图所示：

至此，显示留言页(index.asp)的前台部分全部完成

用Dreamweaver MX 2004设计属于你自己的留言本（四）留言板各页设计 ③连接数据库

③连接数据库

按Ctrl+F9展开服务器行为面板，看那四项中的前三项前是否有勾号，如果没有就是相应项在定义站点是没设置好，重做DW的站点定义那一步，然后开始创建记录集，有三种方法：
1)在服务器行为面板上单击+号
2)在插入菜单上Insert>>Application Objects>>Recordset
3)在Application工具组里单击第一个图标：

因为我们还没连接过数据库，所以现在还需要定义连接数据库字符串。在弹出的Recordset对话框中单击如图45所标的Define...按钮，再单击Connections for Site guestbook对话框中的New按钮，在出现的下拉选项中选Custom Connection String

现在是最关键的一步，在Custom Connection String对话框中填写自定义字符串：
Connection name一项填：conn
Connection string一项填(注意要带双引号)：Provider=Microsoft.Jet.OLEDB.4.0;Data Source=&Server.MapPath(/guestbook/data.mdb)
再选中Using driver on testing server

之后一路点OK或Done，回到图44所示的Recordset对话框，填写如下：
Name(记录集名称)：rs
Connection(连接)：conn
Table(表)：main
Columns(字段)：先选中Selected再按住Shift或Ctrl选择除ID以外的所有字段
Sort(排序)：选择以Data字段内容的Descending(倒序)方式排序

确定后出现一个提示窗口，大概意思是记录集已添加到该页，在绑定面板中可以访问该记录集的各字段，选中Dont show me again后按OK

用Dreamweaver MX 2004设计属于你自己的留言本（四）留言板各页设计 ④数据绑定

④数据绑定
我们把头像地址跟数据库中的数据关联想来，也就是绑定ICON字段的数据到图片地址：
1)选中那个头像图片，单击属性面板中如图48所示的图标
2)在弹出的Select Image Source对话框中的Select file name from项选Data sources切换到从数据源选择图片源模式(图49)
3)先把URL那一栏的内容剪切，然后单击ICON字段，再把刚才的内容粘贴回来，修改成如图50所示

这样就完成了头像的绑定，自己对照一下绑定前后图片的路径。是不是开始觉得有点意思了？OK，不要停，继续绑定Name字段到头像下面的访客昵称：
1)选中访客昵称四字后按Ctrl+F10展开Bindings(绑定)面板
2)从中选择Name字段后单击下面的Insert按钮(图51)
3)这时在Name字段右方出现格式化的倒三角形，点击之后选择Encode - Server.HTMLEncode

同理把Name字段绑定到访客发表于2003-9-27 4:04:49中的访客上、Date字段绑定到访客发表于2003-9-27 4:04:49中的时间日期上、Content绑定到留言内容“、Reply绑定到回复内容，在回复内容后软回车再绑定RDate字段：

仔细看看，好象还有主页、信箱和QQ未绑定数据。按照我们的计划，这三组文字应该都是带链接的，而链接地址跟访客输入的相关资料绑定，其实这个跟绑定头像的方法有点相似：
1)选中主页，并单击属性面板中的Browse for File按钮,在弹出的Select File对话框中作如图54的设置后点OK，最后回到属性面板中把Target的值选为_blank，以在新窗口中打开访客主页
2)同理缩写信箱的链接，稍有不同的是信箱的链接前面需要加上mailto:，如图55
3)做QQ的链接又跟前面的稍有不同，因为我们查看QQ用户的资料地址是http://search.tencent.com/cgi-bin/friend/user_show_info?ln=******，所以我们要做的是把星号换成QQ字段的数据，如图56

现在所有的数据都绑定完了，但是不要高兴得太早，这样的留言板永远只会显示一条留言记录，所以我们还需要设定重复域和翻页
1)光标定位到头像所在单元格内，然后点选表格二中的<tr>，如图57所示
2)按Ctrl+F9展开服务器行为面板，点击+”按钮，在出现的下拉菜单中选择Repeat Region，或者在Application工具组中点左起第四个图标，然后弹出Repeat Region对话框，这里都用默认设置，所以直接点“OK”
3)选中表格二，然后应用服务器行为Show Region If Recordset Is Not Empty，如图58

这是为了在数据库没有记录时不会出错的，相信在图58中大家也注意到了第一项的Show Region If Recordset Is Empty，这个可以设置当数据库无记录时显示的内容。
数据记录多了之后肯定不能都让它们在一页里显示，所以我们还需要给显示留言加上翻页功能。选择首页，按Ctrl+F9展开服务器行为面板，
单击上面的+号，在下拉菜单中选择Recordset Paging>>Move To First Recordset(图59)，同理给上页、下页和尾页加上翻页功能，分别对应的服务器行为为Move To Previous Recordset、Move To Next Recordset和Move To Last Recordset，顺便说一下，这些服务器行为也可以在Application工具组里找到，而且还有一个直接插入Recordset Navigation Bar(导航栏)，可以自己试试看跟我们刚才所做的有什么区别。最后记住也给导航条应用Show Region If Recordset Is Not Empty命令，没有记录的话翻页就用不着了。

做到这里，我们的留言板首页终于完成了，可以稍息一下，在IE中输入http://localhost/guestbook看看劳动成果......什么？什么也没有？

当然了，因我们的数据库中还没记录，如果急着想看效果的话可以用ACCESS打开数据库直接添加记录。

用Dreamweaver MX 2004设计属于你自己的留言本（四）留言板各页设计⑤添加留言页

⑤添加留言页

把index.asp另存为insert.asp，修改页面标题留言板首页为填写留言，删除一些表格，并在服务器面板中把除第一条Recordset(rs)以外的行为都选中后按上面的-号删除，完成后大概是这样：

光标定位到第三行的单元格里后点Application工具组里的Record Insertion Form Wizard图标(图63)，弹出Record Insertion Form对话框，删掉一些项，并作设置如下(没写的属性项均用默认值)：
Connection:conn
Insert into table:main
After inserting,go to:index.asp
Name{
    Label:昵称:
}
Email{
    Label:信箱:
}
Homepage{
    Label:主页:
    Default value:http://
}
QQ{
    Submit as:Numeric
}
Content{
    Label:内容:
    Display as:Text area
}
ICON{
    Display as:Hidden field
    Default value:01
}
IP{
    Display as:Hidden field
    Default value:<%= Request.ServerVariables(REMOTE_ADDR) %>
}
除了上面提到的，其它项按上面的-号删除，并通过上三角和下调整各项的顺序，填好后如图所示

到这里添加留言的页面在功能上已经完成了，下面是我调整一下表单项的位置并用CSS对文本框作了美化后的效果：

    
把头像图片所在的单元格的id设为icon(在单元格td标签内加上id=icon)，并添加下面的代码到css.css文件中：
input,textarea {
    font-family: Verdana, 宋体;
    font-size: 12px;
    background-color: #DDDDDD;
    height: 18px;
    width: 150px;
    border: 1px solid #333333;
}
textarea{
    height:120px;
    width:98%;
    overflow:hidden;
}
#icon img{
    margin:2px;
    cursor:hand;
}
还有下面的脚本代码添加到insert.asp的head部分：
<script language=JavaScript>
<!--
window.onload=function (){//页面加载完毕时执行
    var obj=document.form1;
    obj.onmouseover=function(){//表单项(文本框、多行文本框)在鼠标移上时变换背景颜色的函数(函数①)
        if(event.srcElement.tagName==INPUT||event.srcElement.tagName==TEXTAREA)//判断当对象标签为input或textarea时执行
            event.srcElement.style.backgroundColor=#EEEEEE;//对象背景颜色变换#EEEEEE
    }
    obj.onmouseout=function(){//表单项(文本框、多行文本框)在鼠标移出时变换背景颜色的函数(函数②)
        if(event.srcElement.tagName==INPUT||event.srcElement.tagName==TEXTAREA)//判断当对象标签为input或textarea时执行
            event.srcElement.style.backgroundColor=#DDDDDD;//对象背景颜色变换#DDDDDD
    }
    icon.onclick=function(){//单击头像图片时把图片名中的数字传递到隐藏域ICON的函数(函数③)
        obj.ICON.value=event.srcElement.src.match(/(0[1-6])(?=\.jpg)/g)[0];//将所点击的图片路径地址中的01-06赋值给隐藏域ICON
    }
    obj.onsubmit=function(){//验证表单的函数(函数④)
    var error=
    if(obj.Name.value==)error+=●昵称项不能为空\n\n;
    if(obj.Email.value==)error+=●信箱项不能为空\n\n;
    else if(!/^\w(\w*\.*)*@(\w+\.)+\w{2,4}$/.test(obj.Email.value))error+=●信箱格式不正确\n\n;
    if(obj.Homepage.value!=obj.Homepage.defaultValue&&!/^(http:\/\/[A-Za-z0-9\./=\?%\-&_~`@[\]\:+!]+)$/.test(obj.Homepage.value))error+=●网址格式不正确\n\n
    if(obj.QQ.value!=&&!/^[1-9]\d{4,8}$/.test(obj.QQ.value))error+=●QQ号码只能是5位到9位的数字\n\n
    if(obj.Content.value==)error+=●留言内容不能为空\n\n;
    else if(obj.Content.value.length>1000){error+=●留言字符长度超出1000;obj.Content.value=obj.Content.value.substring(0,1000)}
    if(error!=){alert(错误提示：\n\n+error);return false;}
    else return true;
    }
}
//-->
</script>

如果不需要表单项在鼠标事件发生时变换背景颜色，可以去掉函数①和②，如果嫌手写表单验证的代码太累，可以去掉函数④，然后到yaromat.com下载一个叫checkForm的插件，找不到的话就从这个地址下：http://vip.5d.cn/Xmercy/form/checkform.mxp。插件下载后双击自动安装，最后在行为面板上点+号，选择yaromat>>check form就可以用了，插件的使用很简单，这里就不多说了。
填写不正确时的警告

如果填写正确后提交是500错误，那就有可能是Everyone对数据库的操作权限太低，解决办法：
1)在数据库文件上右击，在快捷菜单中选择属性
2)切换到安全标签，作设置如下

如果还有错误，并且已经确认之前的所有操作都正确无误，请按Ctrl+`切换到源码视图，检查代码中是否出现一个<%@LANGUAGE=VBSCRIPT CODEPAGE=936%>和一个<%@LANGUAGE=VBSCRIPT%>，有的话删掉<%@LANGUAGE=VBSCRIPT%>。

用Dreamweaver MX 2004设计属于你自己的留言本（四）留言板各页设计⑥管理页面(admin.asp)

⑥管理页面(admin.asp)

管理页admin.asp其实跟留言板首页index.asp功能差不多，所以可以直接把index.asp另存为admin.asp，然后加上管理功能：删除，编辑，回复，显IP：

对于删除、编辑和回复的数据绑定很简单，主要是在链接的参数中传递当前留言的ID号，参考QQ的绑定方式，完成后的链接地址分别为：
删除:delete.asp?id=<%=(rs.Fields.Item(ID).Value)%>
编辑:edit.asp?id=<%=(rs.Fields.Item(ID).Value)%>
回复:reply.asp?id=<%=(rs.Fields.Item(ID).Value)%>
需要注意的是，由于admin.asp页是由index.asp页另存来的，而index.asp页所建的记录集里没有选择到ID字段，所以在这里必须把ID字段选进来，方法：
1)在服务器行为面板中双击Recordset(rs)，重新选择字段
2)也可以直接在源码中找到
rs.Source = SELECT Content, Date, Email, Homepage, ICON, IP, Name, QQ, RDate, Reply FROM main ORDER BY Date DESC
这行，改为
rs.Source = SELECT ID, Content, Date, Email, Homepage, ICON, IP, Name, QQ, RDate, Reply FROM main ORDER BY Date DESC

对于IP的相关绑定，完成后代码为：
来自：<%=ip(rs.Fields.Item(IP).Value)%>[IP:<%=(rs.Fields.Item(IP).Value)%>]

这里用到一个叫ip的Function过程来查询访客IP在数据库表address中对应的国家和城市，代码如下：

<%
Function ip(sip)
Dim iparr,iprs,country,city
IP为127.0.0.1时相当于192.168.0.1
If sip=127.0.0.1 then sip= 192.168.0.1    
‘以点.为界切割字符串sip，如果sip为“192.168.0.1”，则切割后得到的数组iparr(0)=192,iparr(1)=168,iparr(2)=0,iparr(3)=1
iparr=split(sip,.)
通过计算转换，使IP地址跟数据库中的数据联系起来
sip=cint(iparr(0))*256*256*256+cint(iparr(1))*256*256+cint(iparr(2))*256+cint(iparr(3))-1

连接数据库，查询数据库字段ip1和ip2满足关系ip1<=sip<=ip2的记录
Set iprs = Server.CreateObject(ADODB.Recordset)
iprs.ActiveConnection = MM_conn_STRING
iprs.Source = SELECT Top 1 city, country FROM address WHERE ip1 <= & sip & and & sip & <=ip2
iprs.CursorType = 0
iprs.CursorLocation = 2
iprs.LockType = 1
iprs.Open()

判断数据库中有无记录即无相应IP地址的信息时的处理
If iprs.bof and iprs.eof then
    country=未知地区
    city=
Else
    country=iprs.Fields.Item(country).Value
    city=iprs.Fields.Item(city).Value
End If
ip=country&city

iprs.Close()
Set iprs = Nothing
End Function
%>

参考DW自动生成的代码，把这段代码加到HTML代码开始之前

用Dreamweaver MX 2004设计属于你自己的留言本（四）留言板各页设计⑦登陆页(login.asp)

⑦登陆页(login.asp)

有管理页，当然就有登陆页，只有验证通过后才能进入到管理页进行管理。还是用老方法，随便用一个之前做好的页面(比如insert.asp)另存为login.asp，然后删除有服务器行为和一些不必要的表格：

光标定位到第三行的单元格，然后通过“Forms工具组的按钮和表格完成如下表单的制作：

用户输入框代码：<input name=Username type=text>
密码输入框代码：<input name=Password type=password>

表单制作完成后应用服务器行为面板上的Log In User命令：

在弹出的Log in User对话框里设置如下：

保存后在IE里测试，不过别忘了先在数据库中添加管理员帐号：

这样只有当输入用户名admin和密码admin后才跳转到admin.asp页，否则一直在login.asp页，不过，现在直接输入admin.asp看看，是不是不登陆也可以直接进入管理页？这就对了，因为我们没有对admin.asp添加页面保护，重新打开admin.asp，在服务器行为面板上给页面应用Restrict Access To Page命令：

有登陆当然就有退出登陆，所以选中admin.asp里的管理修改为退出，并应用服务器行为Log Out User

用Dreamweaver MX 2004设计属于你自己的留言本（四）留言板各页设计⑧删除记录页(delete.asp)

⑧删除记录页(delete.asp)

参照图70的做法，另存出一页delete.asp，并修改如下：

再单击HTML工具组中的Refresh项(图80)，弹出Refresh对话框，设置如下：

点击服务器行为面板上的Command命令，在弹出的对话中设置如下：

参照75、76的方法，给delete.asp页也添加页面保护

用Dreamweaver MX 2004设计属于你自己的留言本（四）留言板各页设计⑨回复页(reply.asp)

⑨回复页(reply.asp)

先做好一个这样的回复页：

然后建立记录集：

再在Application工具组里找到Record Update Form Wizard(如图85)，弹出跟Record Insertion Form Wizard类似Record Update Form Wizard对话框：

在Form fields中删掉ID和Date，修改其余的Label为中文，Content、Reply“的Display as为Text area，参考图51、52所示的方法给Content和Reply加上Encode - Server.HTMLEncode格式化，RDate的Display as为Hidden field，Default value为<%=Date%>，调整下界面后的效果：

最后不要忘了也给回复页加上页面保护：

用Dreamweaver MX 2004设计属于你自己的留言本（四）留言板各页设计⑩编辑页(edit.asp)

⑩编辑页(edit.asp)

最后一个页了，其实编辑页的功能跟回复页reply.asp差不多，甚至功能比回复页还弱，做法也是一样的，只不过是少了对回复字段Reply和回复的时间字段RDate的更新，所以，很容易就能把编辑页做出来：

页面都做完了，赶快输入http://localhost/guestbook/测试一下：

怎么显示“尚无留言记录”？呵呵~~这就对了，我们自己填写第一条留言，点击留言进入填写留言页，输入：

提交后转到了留言板首页，看看辛苦这么久的劳动成果：

发现问题了吧？
1)页面被叹号撑大了
2)多个连续空格只显示一个
3)回车换行无效
4)HTML竟然直接解释显示
5)最可怕的是，在地址栏输入数据库的路径:http://localhost/guestbook/data.mdb可以直接下载数据库
幸好问题发现得早，既然发现问题，那就逐个解决：

1)修改css.css文件中的：
.thin {
    border-collapse: collapse;
}
改为：
.thin {
    border-collapse: collapse;
    table-layout:fixed;
    word-wrap:break-word;
    word-break:break-all;
}

补充：因为IE6以下的浏览器对CSS的继承性支持不好，所以还需要修改 CSS 文件第一行的规则：

body,td,input,button,textarea{
font-family: Verdana, "宋体";
font-size: 11px;
color: #707070;
background-color: #F3F3F3;
}

这样页面结构就不会被恶意留言破坏了

2)在index.asp的HTML代码开始之前加上：
<%
Function HTMLEncode(Str)
Str=Replace(Str,<,&lt;)        把Str中的<替换成&lt;
Str=Replace(Str,>,&gt;)        把Str中的>替换成&gt;，跟上面这行一起是屏蔽HTML代码的
Str=Replace(Str, ,&nbsp;)        把Str中的 替换成&nbsp;，解决多个连续空格只显示一个的问题
Str=Replace(Str,Chr(10),<br>)    把Str中的回车符替换成<br>，解决回车换行无效的问题
HTMLEncode=Str            返回经过上面字符替换后的Str
End Function
%>

然后修改绑定留言内容的那段代码为：

<%=HTMLEncode(rs.Fields.Item(Content).Value)%>

同理修改绑定回复内容的代码，还有管理页admin.asp的相应部分代码

3)因为数据库里明文保存着管理密码，所以对数据库的保护尤为重要。通常的做法是把数据库data.mdb的扩展名改为.asp(data.asp)或.asa(data.asa)，再修改数据库连接字符串的代码(Connections/conn.asp)：
MM_conn_STRING = Provider=Microsoft.Jet.OLEDB.4.0;Data Source=&Server.MapPath(/guestbook/data.mdb)
为
MM_conn_STRING = Provider=Microsoft.Jet.OLEDB.4.0;Data Source=&Server.MapPath(/guestbook/data.asp)
或
MM_conn_STRING = Provider=Microsoft.Jet.OLEDB.4.0;Data Source=&Server.MapPath(/guestbook/data.asa)

不过需要注意的是这样还不安全，因为有些服务器配置不当，即使改了数据库文件的扩展名，但是知道具体路径的话用链接另存为的方法一样可以下载，所以最好的保护方法还是给数据库文件起一个长度适当且毫无规律复杂难记的名字。

还有一个不知道是谁想出来的怪招，就是在数据库名字中加上一个#符号，例如改成dat#a.asp(数据库连接字符串也作相应改动)，地址栏中输入http://localhost/guestbook/dat#a.asp看看，是不是显示“无法找到该页”的404错误？因为浏览器把#后的字符解释成锚点，所以文件名就变成了dat，而这个文件是不存在的，所以就显示404错误(文件或目录未找到)

Dreamweaver MX 2004打造留言板的教程到这里全部结束了，所有代码及资源可以在这里下载：
http://x-lover.com/temp/guestbook.rar
留言板演示：
http://x-lover.com/guestbook/

闪吧 我佛山人版权所有，网络媒体转载请注明出处，严禁传统媒体以任何形式的转载、摘抄或引用！