相关文章
表单Form撑开网页的解决方法
网站设计自定义标签Flash幻灯新闻
网站设计网页设计中HTML常范的五个错误
北京网页设计给网页文字加上即时提示
北京网站设计网页制作之常用CSS缩写语法总结
北京网站制作在线播放器代码大全
北京网站制作抗日Flash集之:三一八惨案
网页设计flash制作过程中避免占用CPU资源过度的几种方法
网站制作DW2004 中文乱码解决方案 [2]
北京网站制作CSS 标签属性/属性参考
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置:首页 >> 网站制作 >> 企通互联Dreamweaver MX 2004设计留言本实战(3)
企通互联Dreamweaver MX 2004设计留言本实战(3)
作者: 北京网站建设 日期:2008-03-27 06:03:35 来源: http://www.qitongnet.com
按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 www.qitongnet.com的设置后点OK,最后回到属性面板中把Target的值选为_blank,以在新窗口中打开访客主页北京网站制作
北京网页设计
2)同理缩写信箱的链接,稍有不同的是信箱的链接前面需要加上mailto:,如图55网站制作
北京网页设计
3)做QQ的链接又跟前面的稍有不同,因为我们查看QQ用户的资料地址是http://search.tencent.com/cgi-bin/friend/user_show_info?ln=******,所以我们要做的是把星号换成QQ字段的数据,如图56网站制作
北京网站建设
:3网站建设
网站建设
网页设计
北京网站建设
现在所有的数据都绑定完了,但是不要高兴得太早,这样的留言板永远只会显示一条留言记录,所以我们还需要设定重复域和翻页北京网页设计
网站建设
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命令,没有记录的话翻页就用不着了。企通互联
北京网页设计
:4北京网页设计
网页设计
网站制作
网页设计
做到这里,我们的留言板首页终于完成了,可以稍息一下,在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%>。北京网站制作
网页设计
北京网站建设
1)在服务器行为面板上单击+号企通互联
北京网站建设
2)在插入菜单上Insert>>Application Objects>>Recordset北京网页设计
网站制作
网站设计
3)在Application工具组里单击第一个图标:北京网站设计
网站制作
因为我们还没连接过数据库,所以现在还需要定义连接数据库字符串。在弹出的Recordset对话框中单击如图45所标的Define...按钮,再单击ConnectionsforSite guestbook对话框中的New按钮,在出现的下拉选项中选CustomConnectionString企通互联
北京网站建设
![]() |
![]() |
网页设计
Connection name一项填:conn北京网站设计
网站建设
Connectionstring一项填(注意要带双引号):Provider=Microsoft.Jet.OLEDB.4.0;DataSource=&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(倒序)方式排序企通互联
网站建设
![]() |
北京网站制作
我们把头像地址跟数据库中的数据关联想来,也就是绑定ICON字段的数据到图片地址:北京网页设计
企通互联
1)选中那个头像图片,单击属性面板中如图48所示的图标北京网站制作
网页设计
2)在弹出的Select Image Source对话框中的Select file namefrom项选Datasources切换到从数据源选择图片源模式(图49)企通互联
网站设计
3)先把URL那一栏的内容剪切,然后单击ICON字段,再把刚才的内容粘贴回来,修改成如图50所示网站制作
企通互联
![]() |
![]() |
![]() |
北京网站设计
这样就完成了头像的绑定,自己对照一下绑定前后图片的路径。是不是开始觉得有点意思了?OK,不要停,继续绑定Name字段到头像下面的访客昵称:北京网站制作
网站建设
1)选中访客昵称四字后按Ctrl+F10展开Bindings(绑定)面板网站制作
企通互联
2)从中选择Name字段后单击下面的Insert按钮(图51)北京网页设计
北京网页设计
3)这时在Name字段右方出现格式化的倒三角形,点击之后选择Encode - Server.HTMLEncode北京网站制作
网站制作
![]() |
![]() |
北京网页设计
![]() |
北京网站制作
1)选中主页,并单击属性面板中的Browse forFile按钮,在弹出的SelectFile对话框中作如图54 www.qitongnet.com的设置后点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网站建设
网站设计
![]() |
![]() |
北京网页设计
![]() |
网页设计
网站制作
网页设计
![]() |
网站设计
![]() |
网页设计
把index.asp另存为insert.asp,修改页面标题留言板首页为填写留言,删除一些表格,并在服务器面板中把除第一条Recordset(rs)以外的行为都选中后按上面的-号删除,完成后大概是这样:网站建设
北京网站设计
![]() |
![]() |
北京网站建设
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北京网站建设
网页设计
网页设计 除了上面提到的,其它项按上面的-号删除,并通过上三角和下调整各项的顺序,填好后如图所示网页设计
网站设计
![]() |
![]() |
网站设计
![]() |
企通互联
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就可以用了,插件的使用很简单,这里就不多说了。北京网页设计
企通互联
填写不正确时的警告网页设计
企通互联
![]() |
北京网站设计
如果填写正确后提交是500错误,那就有可能是Everyone对数据库的操作权限太低,解决办法:网页设计
北京网站建设
1)在数据库文件上右击,在快捷菜单中选择属性网站建设
北京网站设计
2)切换到安全标签,作设置如下北京网站设计
网站建设
![]() |
上一篇:北京网页设计Dreamweaver MX 2004 打造细线表格
下一篇:北京网站建设用Dreamweaver MX建立一个简单的图书查询系统
























