Dreamweaver MX 2004设计留言本实战(3)

没有公告

	加入收藏
	设为首页
	在线投稿


	您现在的位置： IT知识网 >> IT知识 >> 网页设计 >> Dreamweaver >> 文章正文

　　[组图]Dreamweaver MX 2004设计留言本实战(3)

Dreamweaver MX 2004设计留言本实战(3)

作者：佚名文章来源：不详点击数：更新时间：2006-12-3 13:28:16

按Ctrl+F9展开服务器行为面板，看那四项中的前三项前是否有勾号，如果没有就是相应项在定义站点是没设置好，重做DW的站点定义那一步，然后开始创建记录集，有三种方法：

　　1)在服务器行为面板上单击+号

　　2)在插入菜单上Insert>>Application Objects>>Recordset

　　3)在Application工具组里单击第一个图标：

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

　　现在是最关键的一步，在Custom Connection String对话框中填写自定义字符串：

　　Connection name一项填：conn

　　Connectionstring一项填(注意要带双引号)：Provider=Microsoft.Jet.OLEDB.4.0;DataSource=&Server.MapPath(/guestbook/data.mdb)

　　再选中Using driver on testing server

　　:1

　　之后一路点OK或Done，回到图44所示的Recordset对话框，填写如下：

　　Name(记录集名称)：rs

　　Connection(连接)：conn

　　Table(表)：main

　　Columns(字段)：先选中Selected再按住Shift或Ctrl选择除ID以外的所有字段

　　Sort(排序)：选择以Data字段内容的Descending(倒序)方式排序

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

　　我们把头像地址跟数据库中的数据关联想来，也就是绑定ICON字段的数据到图片地址：

　　1)选中那个头像图片，单击属性面板中如图48所示的图标

　　2)在弹出的Select Image Source对话框中的Select file namefrom项选Datasources切换到从数据源选择图片源模式(图49)

　　3)先把URL那一栏的内容剪切，然后单击ICON字段，再把刚才的内容粘贴回来，修改成如图50所示

　　:2

　　这样就完成了头像的绑定，自己对照一下绑定前后图片的路径。是不是开始觉得有点意思了？OK，不要停，继续绑定Name字段到头像下面的访客昵称：

　　1)选中访客昵称四字后按Ctrl+F10展开Bindings(绑定)面板

　　2)从中选择Name字段后单击下面的Insert按钮(图51)

　　3)这时在Name字段右方出现格式化的倒三角形，点击之后选择Encode - Server.HTMLEncode

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

　　仔细看看，好象还有主页、信箱和QQ未绑定数据。按照我们的计划，这三组文字应该都是带链接的，而链接地址跟访客输入的相关资料绑定，其实这个跟绑定头像的方法有点相似：

　　1)选中主页，并单击属性面板中的Browse forFile按钮,在弹出的SelectFile对话框中作如图54的设置后点OK，最后回到属性面板中把Target的值选为_blank，以在新窗口中打开访客主页

　　2)同理缩写信箱的链接，稍有不同的是信箱的链接前面需要加上mailto:，如图55

　　3)做QQ的链接又跟前面的稍有不同，因为我们查看QQ用户的资料地址是http://search.tencent.com/cgi-bin/friend/user_show_info?ln=******，所以我们要做的是把星号换成QQ字段的数据，如图56

　　现在所有的数据都绑定完了，但是不要高兴得太早，这样的留言板永远只会显示一条留言记录，所以我们还需要设定重复域和翻页

　　1)光标定位到头像所在单元格内，然后点选表格二中的，如图57所示

　　2)按Ctrl+F9展开服务器行为面板，点击+”按钮，在出现的下拉菜单中选择RepeatRegion，或者在Application工具组中点左起第四个图标，然后弹出RepeatRegion对话框，这里都用默认设置，所以直接点“OK”

　　3)选中表格二，然后应用服务器行为Show Region If Recordset Is Not Empty，如图58

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

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

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

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

　　光标定位到第三行的单元格里后点Application工具组里的Record InsertionFormWizard图标(图63)，弹出RecordInsertionForm对话框，删掉一些项，并作设置如下(没写的属性项均用默认值)：

　　Connection:connInsert into table:mainAfterinserting,goto:index.aspNameLabel:昵称:EmailLabel:信箱:HomepageLabel:主页:Defaultvalue:http://QQSubmitas:NumericContentLabel:内容:Display as:TextareaICONDisplay as:HiddenfieldDefault value:01IPDisplay as:HiddenfieldDefaultvalue:<%= Request.ServerVariables(REMOTE_ADDR) %>:5

　　除了上面提到的，其它项按上面的-号删除，并通过上三角和下调整各项的顺序，填好后如图所示

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

　　把头像图片所在的单元格的id设为icon(在单元格td标签内加上id=icon)，并添加下面的代码到css.css文件中：

　　input,textareafont-family: Verdana,宋体;font-size:12px;background-color: #DDDDDD;border=1 Height:18px;width: 150px;border:1px solid#333333;extareaborder=1Height:120px;width:98%;overflow:hidden;#iconimgmargin:2px;cursor:hand;:6

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

　　填写不正确时的警告

　　:7

　　如果填写正确后提交是500错误，那就有可能是Everyone对数据库的操作权限太低，解决办法：

　　1)在数据库文件上右击，在快捷菜单中选择属性

　　2)切换到安全标签，作设置如下

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

文章录入：bolang 责任编辑：bolang

上一篇文章： Dreamweaver构建Blog全程实录(1)

下一篇文章： Dreamweaver实现网页随浏览器伸展

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】