前言：本来这个教程在两个月前就应该跟大家见面了的(那时就已经写好了)，某些人的办事效率低下，导致一拖再拖，最后实在无法忍受那些人的办事效率，贴出来了。

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

用Dreamweaver MX 2004设计属于你自己的留言本

9月份设计界最热的消息莫过于Macromedia公司的Studio MX 2004了，朋友们都很关心新版软件的新特性，那么就让我通过这个留言本的教程跟大家一起体验Studio MX 2004中的Dreamweaver MX 2004(以下简称DW2004)吧。
一、IIS(Internet 信息服务)安装配置
这里以Windows Server 2003(以下简称Win2003)为例。因为Win2003是服务器级的操作系统，所以自带有IIS6.0，其它版本的系统可以在"添加或删除程序>>添加/删除Windows组件"对话框中把"Internet 信息服务(IIS)"前的勾选中，点"下一步"进行安装就行了(注：在这之前应把系统安装盘放到光驱)。


IIS装好之后再作一下简单的配置。定位到"开始>>管理工具>>Internet 信息服务(IIS)管理器"，打开IIS管理器。在"本地计算机>>网站>>默认网站"上右键单击，在快捷菜单里选"属性"(或者直接在操作菜单下选"属性")，弹出如下对话框:



切换到"主目录"标签(图2)，重新选择网站根目录(笔者选择的是E盘下的Work目录)，默认是"系统盘:\Inetpub\wwwroot",因为系统盘不宜放太多的非系统文件，所以在这里重设默认网站要目录，如果嫌麻烦可以跳过这步。再切换到"文档"标签，通过"添加"、"删除"、"上移"、"下移"，把站点的默认文档设置如图所示：


可能有些朋友会疑惑，设置默认内容文档有什么作用？细心的朋友应该会发现，在浏览一些大网站的首页时用它的一级域名就行了，并不需要指定请求页的文件名，这就是设置了默认内容文档的缘故，它的作用就是在浏览器请求没有指定文档的名称时，将默认文档提供给浏览器。要得到更详尽的解释说明，可以点击图3中的"帮助"。之所以有这步，是因为网站的默认内容页中没有index.asp，不大符合国人习惯。

二、数据库设计
先构想一下，一个功能齐全的留言本应该有哪些内容需要保存？访客名字(Name)、访客主页(Homepage)、访客QQ(QQ)、访客信箱(Email)、访客形象(ICON)、访客IP(IP)、留言内容(Content)、留言时间(Date)----这是访客的有关信息，如果主人要回复留言呢？好，再加上回复(Reply)和回复时间(RDate)，嗯......再想想有没有漏掉什么？对了，还有主人的管理帐号：用户名(Username)、密码(Password)。
要保存这么多信息，数据库应该怎么设计？访客的留言是不断增加的，而主人的管理帐号固定不变，所以应该分开两个表，一个保存所有访客的留言和访客的资料信息，另一个则保存主人的管理帐号。OK，现在可以开始设计数据库了。打开ACCESS(在微软的Office软件中有)软件，新建一空白数据库，ACCESS会提示先保存数据库，定位到你的留言本所在文件夹(笔者是在站点根目录下建了一个guestbook文件夹)，保存为data.mdb：


然后双击"使用设计器创建表"，完成后如图：


为了优化数据库，有些字段需要作点设置：
ID：设为主键，确定数据唯一性以保证在管理时能准确定位到相应记录
Name:字段大小设为15(很少有人的名字有这么长的吧？)
Email:字段大小为20(也很少有Email地址的长度超过这个数字)
ICON:字段大小为6(看完后面的教程就明白为什么设这么小了)
IP:字段大小为15(可以算出来，四个三位长的数字再加三个小数点)
Homepage：字段大小为30(很多朋友还在用二级甚至三级的域名，所以放宽一点)
Date：默认值为Now ()(用Now()取得插入新记录时系统的时间)

关闭表窗口，会提示是否保存对表的修改，选"是",然后把表名改为main，同理创建表admin，以保存管理帐号：



最后还需要一个记录IP对应地址的表，这个IP库可以在网上搜索一下，或者到http://x-lover.com/temp/ip.mdb下载，然后打开数据库data.mdb
，在"文件"菜单下选择"获取外部数据>>导入"，再在弹出的对话框里选择刚才下载的数据库，导入，选择address表，确定，现在数据库data.mdb中应该有这样的三个表：



至此，准备工作全部完成。

程序运行配置完了，废话不多说，直接开始我们的DW MX 2004的体验之旅吧。

三、DW的站点定义

上一节我们在IIS里把站点根目录定义在E:\Work，现在进到这个目录下新建一文件夹并命名为geustbook。

打开DW，在"Site"菜单下找到"Manage Sites..."项单击，见下图：



打开"Manage Site"对话框，点"New ..."，在出来的下拉菜单里选"Site"定义新站点：



跟着新站点定义向导一步一步来定义我们的留言板站点。在站点名称上填上geustbook：



点"Next>"继续下一步的后台技术选择，这里我们选择用VBScript作脚本的ASP：



点"Next>"继续下一步的站点文件夹设置，因为我们现在是在本地测试，而且gustbook文件夹在E:\Work\guestbook，所以设置如下：



点"Next>"继续下一步的设置DW的测试URL：



点"Next>"继续下一步，因为我们在本机测试，不需要远程服务器参与，所以选择"No"：



点"Next>"继续下一步，这里显示的是我们刚才所填的信息，目的是要我们确认一下，如果发现有错，可以点"<Back"返回修改设置，确认无误后就可以点"Done"，我们的站点定义就完成了。



细心一点的朋友也许会发现，在站点定义对话框上有两个标签："Base"和"Advanced"，其实用途是一样的，只不过"Base"是一步一步的向导模式，而"Advanced"是给对DW有一定了解的朋友用的高级模式，有兴趣的朋友可以自行切换到"Advanced"模式看看。

四、留言板各页设计

①显示留言

在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)在源码状态下输入&copy;

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



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



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



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



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

②用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)的前台部分全部完成

③连接数据库

按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"(倒序)方式排序



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

④数据绑定
我们把头像地址跟数据库中的数据关联想来，也就是绑定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打开数据库直接添加记录。

⑤添加留言页

把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.&#111nmouseover=function(){//表单项(文本框、多行文本框)在鼠标移上时变换背景颜色的函数(函数①)
        if(event.srcElement.tagName=="INPUT"||event.srcElement.tagName=="TEXTAREA")//判断当对象标签为input或textarea时执行
            event.srcElement.style.backgroundColor="#EEEEEE";//对象背景颜色变换#EEEEEE
    }
    obj.&#111nmouseout=function(){//表单项(文本框、多行文本框)在鼠标移出时变换背景颜色的函数(函数②)
        if(event.srcElement.tagName=="INPUT"||event.srcElement.tagName=="TEXTAREA")//判断当对象标签为input或textarea时执行
            event.srcElement.style.backgroundColor="#DDDDDD";//对象背景颜色变换#DDDDDD
    }
    icon.&#111nclick=function(){//单击头像图片时把图片名中的数字传递到隐藏域ICON的函数(函数③)
        obj.ICON.&#118alue=event.srcElement.src.match(/(0[1-6])(?=\.jpg)/g)[0];//将所点击的图片路径地址中的01-06赋值给隐藏域ICON
    }
    obj.onsubmit=function(){//验证表单的函数(函数④)
    var error=""
    if(obj.Name.&#118alue=="")error+="●昵称项不能为空\n\n";
    if(obj.Email.&#118alue=="")error+="●信箱项不能为空\n\n";
    else if(!/^\w(\w*\.*)*@(\w+\.)+\w{2,4}$/.test(obj.Email.&#118alue))error+="●信箱格式不正确\n\n";
    if(obj.Homepage.&#118alue!=obj.Homepage.default&#118alue&&!/^(http:\/\/[A-Za-z0-9\./=\?%\-&_~`@[\]\':+!]+)$/.test(obj.Homepage.&#118alue))error+="●网址格式不正确\n\n"
    if(obj.QQ.&#118alue!=""&&!/^[1-9]\d{4,8}$/.test(obj.QQ.&#118alue))error+="●QQ号码只能是5位到9位的数字\n\n"
    if(obj.Content.&#118alue=="")error+="●留言内容不能为空\n\n";
    else if(obj.Content.&#118alue.length>1000){error+="●留言字符长度超出1000";obj.Content.&#118alue=obj.Content.&#118alue.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"%>。

⑥管理页面(admin.asp)

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



对于"删除"、"编辑"和"回复"的数据绑定很简单，主要是在链接的参数中传递当前留言的ID号，参考"QQ"的绑定方式，完成后的链接地址分别为：
"删除":delete.asp?id=<%=(rs.Fields.Item("ID").&#118alue)%>
"编辑":edit.asp?id=<%=(rs.Fields.Item("ID").&#118alue)%>
"回复":reply.asp?id=<%=(rs.Fields.Item("ID").&#118alue)%>
需要注意的是，由于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").&#118alue)%>[IP:<%=(rs.Fields.Item("IP").&#118alue)%>]

这里用到一个叫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").&#118alue
    city=iprs.Fields.Item("city").&#118alue
End If
ip=country&city

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

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

⑦登陆页(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"





⑧删除记录页(delete.asp)

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





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





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



参照75、76的方法，给delete.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%>"，调整下界面后的效果：



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



⑩编辑页(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;
}

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

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),"
")    '把Str中的回车符替换成"
"，解决回车换行无效的问题
HTMLEncode=Str            '返回经过上面字符替换后的Str
End Function
%>



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

<%=HTMLEncode(rs.Fields.Item("Content").&#118alue)%>

同理修改绑定回复内容的代码，还有管理页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打造留言板的教程到这里全部结束了，所有代码及资源可以在这里下载：
x-lover.com/temp/guestbook.rar
留言板演示：
x-lover.com/guestbook/

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

下了不少辛苦，看的我都累。。。。支持。我也会好好学习。。。顶

经典，谢~

嗯，在 IE5.0x版中，td是不会继承body的font属性的，其他还有几个“异类”标签，我常用的写法是

[color=red]body,td,select,textarea[/color] {
    font-family: "宋体";
    font-size: 12px;
}

BTW:我学ASP也是从留言本开始的

我用Dreamweaver(以下称DW)做了个留言本,过程是这样的:
1,在控制面板建立ODBC>系统DSN.
2,在DW里面连了数据库并且帮定了记录集.
3,制作完了留言本.
4,使用本地IIS测试,留言本可以正常使用.
(1)然后,我上传到网上的服务器上,一打开index.asp时,却失败了,以下是信息:
------------
错误类型：
Microsoft OLE DB Provider for ODBC Drivers (0x80004005)
[Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序
/3/0.asp, 第 8 行
----------
我的index.第8行是
Recordset1.ActiveConnection=MM_dsffd_STRING
(2)我把系统上的系统对数据库的连接删除之后,发生了同上的问题...
请问怎么解决这样的连接问题呢?急切知道答案``

这个教程写得很详细，非常感谢！
但上传后就发现了如上的问题，怎么解决呢？
谢谢！

有ubb支持吗？

演示教程看不了，下载也下不了啊？！是不是我看得太晚了？