1、用Dreamweaver MX设计超简留言本用Dreamweaver MX设计超简留言本 作者：大飞猪时间： 2004-01-18文档类型：原创来自： 第 1 页 建立数据库的准备工作 1第 2 页 建立显示留言页 2第 3 页 建立发表提交留言页 3第 4 页 删除页和回复页 4首先我们先做准备工作，先做一下策划，看看我们可能要做哪些页面，所谓说好的开始就是成功的一半，所以大家不要急着做，听我慢慢讲来。为了让大家都能制作出自己的留言板，尽量实现一个网页一个功能模块，我们就做以下五个网页：一、index.asp-首页即显示留言页二、conn.asp-公共网页，每个网页都要包含它，是连接打开数据
2、库的操作。三、write.asp和save.asp-分别是发表留言的表单网页和保存留言页。四、del.asp-删除留言页五、reply.asp-回复当前留言页 做好的留言板效果图如下： 好了，说到这里我们可以动工了，首先做一个最重要的工作，就是建立起一个数据库，将来存放网友的留言所用。1、数据库名：db1.mdb2、数据库表：只有一个表：book3、数据表book里增设以下字段，见图1说明：任一字段的数据类型中的“常归”项中的“允许空字符串”最好填“是” 日期/时间的“常归”项中默认值为Now()；站长回复里的“常归”项中的默认值为“暂没有回复”，注意此处要加双引号，是半角而不是全角。 数据库
3、建好后开始做公共网页，用来打开数据库，打开Dreamweaver MX，按如下方法新建动态ASP网页：并保存为CONN.ASP,在编辑区里切换到显示代码视图里，注意把第一行自动生成的代码删掉。这次主要是写连接数据库和参数设置的ASP代码，不用输出什么HTML标签，所以把代码全部删掉，用DREAWMEAVER插入栏自带的ASP对象写入以下代码，ASP栏里没有的代码只能自己手写输入了。注意要把所有要编译的ASP代码放在之间，这样才能正常运行，否则会出错！这是基本常识哦。让我解释以上代码的意思吧：代码第一行: 用来建立connection对象，connection对象扮演着十分重要的前期连接工作，连
4、接成功数据库才会有以后的数据操作功能。代码第二行：设置数据库连接参数。包括有数据库驱动程序和数据库文件名。代码第三行：用conn连接对象打开数据库。现在我们继续前面的内容。新建动态网页index.asp：先在设计视图里排版好一个留言板的界面，设计好的页面效果图如下：下面表格规划和显示都很清楚，一目了然，什么排版的我就不说了吧：），这可是基本功啊，如果不行的话可先学好Dreamweaver，再来学ASP哦！稳打稳进，至理名言_.如果想偷懒的话，可以直接下载源代码，学习研究ASP代码也可以啊，我不反对哦，至少我也是这么懒的，理解万岁！：）排好版后再进入代码视图里，在不同的位置插入以下ASP代码：如
5、下图：在网页代码的最上面第一行，点击用红线圈起来的标志可以插入第一行的代码，并可以浏览到具体文件上，比较方便，注意选择file文件类型的，不是virtual虚拟类型的。这样就插入了conn.asp数据库连接代码页，此代码被包含在当前网页位置中进行正常编译，不用重复写数据库连接代码，它的好处很大哦，使页面结构化，容易修改和维护，如果数据库连接错误，或数据库文件变动，只需更改conn.asp即可，不必要修改每一页的代码。要善于用这个方法啊，会使你的程序简单化，清晰化，这是常用的编程方法。然后再输入以上第二行到第六行的划红线的代码块，此代码块的意义让我一一讲来：第三行代码：既然网页和数据库用conn
6、ection建立连接打开关系了，之后最重要的工作就是读取数据了。建立rs对象变量为recordset对象，这样以后可以用rs对象变量来存取数据库操作。第四行代码：把从数据表book里查询的结果放到sql变量上。它的意思是把book里所有的数据都取出来，并按id从大到小排序。desc表示从大到小排序，如果不加的话，最新的留言可是在最后面哦，不方便了。第五行代码：表示用rs对象变量open方法来打开数据表book，取出结果按sql的查询方法。以上是通用的读取记录的方法，到其它地方都可以举一反三，要熟悉使用！接着我们要做无留言记录的判断显示代码出来，我们要定位到“暂无留言”这个表格标签代码的开头，加
7、上第29行如下划红线的代码即可，此代码表示判断语句：如果RS记录指针的EOF结尾和BOF开头都为空，就返回真，执行以下标签，即输入暂无留言这个表格，而不输出下面的其它标签了。再定位到“暂无留言”表格标签的结尾，输入以下37、38行划红线的代码完成判断条件，Response.end表示输出结束，不再输出以下的代码。其次再做如果记录不为空的情况下输入留言的表格出来，分别定位在输出留言表格标签的前面和后面，插入ASP代码块如下图输入：此代码块的意思为：将RS记录指针指向第一个记录，然后开始判断移动记录时，记录结尾是否为空，如果不为空接着移动指针，把所有数据都读取出来。直到结尾为空时，退出循环。然后我
8、们做最重要的也是最频繁使用的工作了，就是把数据表里各字段的记录分别读取出来放在表格的不两路位置上，例姓名，QQ，邮箱及留言等。先转换到设计视图和代码视图的环境下，如下图：我们发现上图多了很多标记，这就是刚才在代码视图中输入的ASP代码，方便我们在设计视图中进行修改，输出预览是不影响排版的。我们把光标定位在姓名旁边的表格里，点击插入栏ASP里的，自动插入代码区里指定位置，比较方便，不容易搞错，如下图：然后选中姓名旁边的标记，点属性栏里的Edit编辑按钮，输入rs(name)即可。表示输出变量值，相当于response.write的简化版。rs是上次已建过的recordset对象，可以直接读取字段
9、里的内容，name是数据表里book里的姓名字段。同理按以上方法再插入ASP代码留言内容、发表者、发表时间及回复内容在不同位置，分别是：留言内容：发表者：发表时间：站长回复：大家可能发现了，留言内容插入的代码和别的稍微不一样，多了server.htmlencode这个对象，这是为了安全问题设置的，是编码对象，可以使带有标签的文本不被解释为标记，这样可以防止被恶意者来写入特殊执行代码，造成不必要的损失。这样就写好了，如下图所示：接着再做OICQ,EMAIL,HOMEPAGE的链接设置，这个和上述不太一样，它不是直接显示出记录即可，而是将鼠标移到QICQ上浮现留言者的QQ号码，点击EMAIL自动给
10、留言者发信，点击HOMEPAGE直接到达留言者的网站。选中OICQ，加上“#”空链接，同样的也给EMAIL和HOMEPAGE加上“#”空链接。如下图所示：大家都知道给图片加提示比较简单，直接在里设置文字说明就可以了，但文字却没有，没关系，我们的Dreamweaver早就想到了，很强大哦！在代码区里OICQ的空链接#后，按空格（注意是英文输入法才有效）会出现智能提示参数出来，我们选择“title”，然后接着打上即可！如下图所示：同样的方法给EMAIL和HOMEPAGE加上啊，方法如下图划红线所示：一切了！发现设计视图里的OICQ,EMAIL和HOMEPAGE的背景变成了浅蓝色,这说明我们在链接上
11、给它们加了ASP代码， 我们先做写入留言的网页，静态或动态网页均可，不需要任何代码，最好建个静态文件，这样浏览速度快，不增加服务器负担，也不是说全是网页就好哦，有必要的时候该出手就出手！：）只需提供写留言的界面让网友填均可，新建write.htm，排版如下图：注意给各个文本域命名，最好和数据表里的各个字段相同，这样赋值的时候容易对应，不会出错。然后选中红色虚线的表单，在属性栏里action栏里填入save.asp，这是将来接收网友的留言并保存到数据库里，我们后面会接着做这个网页。如下图：写留言的表单页很简单，就这样制作完了，大家不要以为有多麻烦啊：）下一步我们开始制作接收网友留言并处理的网页，
12、新建save.asp网页，将上次做的表单提交的网页名称要一致啊，不能随便命名了。在网页HTML标签的最上面加入以下红线框起来的代码,如下图:以上代码分几个段落，并说明了每一块代码的意思，都是通用的基本操作，比较简单，如果有点困难的话，先放一放，先学好基础再说哦注意在划红线的地方我们增加了两个函数使用.一个是Trim函数，是用来帮助我们除去不必要的空格符，有很多人习惯多打几个空格出来，我们用这个函数来去掉空格就行了。还有一个是Replace函数，我们在留言内容写了很多字，它到了边上会自动换行，或生成段落会生成回车符，这在提交前表单文本区域是正常的，但提交后数据库不能正常识别这两个特殊符号，在显示
13、留言页只会生成一行，这可不得了啊，把表格撑得宽宽的，很不舒服。而Replace帮助我们来解决这个问题，它可以把文字段落里所有的自动换行符和回车符找出来（vbCrLf是自动换行符和回车符的代码），并自动转换为字符串，这样HTML就可以正常解释了。提交保存留言页基本上就完成了，为了更加友好一点，表示提交成功，我们再多做一点工作，一切为了网友方便嘛！我们回到设计视图环境中，插入大表格在正中央，写入“留言成功！2秒后自动返回首页”，在返回首页加入链接到index.asp网页里。如下图：提交成功后2秒钟后自动返回首页，是不是很难啊？其实一点都不难！用Dreamweaver自带的功能就轻松解决这个问题，我
14、们操作如下图：插入栏中切换到head栏里，点击Refresh按钮，会弹出对话框，如下图：我们开始建删除页，命名为del.asp。切换到代码视图中，把所有的标签全部删掉，加入如下代码，见下图：写完这些代码即完成了删除页的制作。让我们分析一下上面代码块的意思：代码第三行：是删除语句，WHERE后面跟的是条件语句，只删除接受传递过来ID值的数据，这个很关键，一定要设好，否则会把数据表里的全部字段全部清空了，这也太恐怖了吧。代码第四行：CONN对象执行DELESQL删除语句结果。代码第五行和第六行：关闭CONN对象并设为空释放资源。代码第七行：response.redirect是输出转向对象，表示删除
15、后自动转向到首页去。接着我们还要再做回复页，总得有来有回嘛，否则别人再大的热情你不回复，也会冷却下来的。所以很有必要哦：），新建reply.asp网页，在设计视图里先排好版，如下图：注意红线的地方要加隐藏域,这样的目的是为了防止表单未提交但页面刷新却执行代码的错误,设置如上图.排好后再切换到代码视图里，定位到HTML标签的最上面，加入如下红线框起来的代码，见下图：以上代码块的意思有部分我已经在上面反复讲过了，不在重复了，如有不懂请在论谈提出来，我会补充的。这里我再说明一下回复的模块代码：代码第四行：定位回复的位置，WHERE后面跟的是回复条件，只接受我们传递过来的留言ID值，并赋值到当前的ID
16、变量上，这样我们只会对当前回复的留言页来回复，这个很关键，不然都乱套了。代码第六行：用来判断是表单提交还是刷新页面，如果是提交表单，那么隐藏域的值肯定被提交，这样Request.Form(active)不为空，就执行以下回复语句如果没提交表单，而是刷新页面，那么那么隐藏域的值没有提交，Request.Form(active)肯定为空，就跳过不执行代码第八行：注意此代码前没有加rsedit.addnew，因为这是更新原有的记录，在原有的留言中在追加回复内容，而不是再添加一条新记录。回复的代码设置好，我们再回到设计视图环境中，先定位到要回复的留言旁边的单元格里，点击后再点属性栏里的edit编辑按钮，弹出编辑框后填写代码“rsedit(content)”确定即可。如下图：选中红色虚线表单，在action栏里填写如下：“reply.asp?id=”，如下图：回复页我们也做好了，是不是完事了？先别激动，还有一件事呢，忘了给首页index.asp的删除和回复还有发表新主题这三个加链接了，那不是空谈嘛，赶紧补上吧！链接设置见下图：到此结束。
