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

dreamweaver|设计

按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

  :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%>。

时间: 2024-10-18 10:35:18

Dreamweaver MX 2004设计留言本实战(3)的相关文章

Dreamweaver MX 2004设计留言本实战

dreamweaver|设计 9月份设计界最热的消息莫过于Macromedia公司的Studio MX 2004了,朋友们都很关心新版软件的新特性,那么就让我通过这个留言本的教程跟大家一起体验Studio MX 2004中的Dreamweaver MX 2004(以下简称DW2004)吧. 一.IIS(Internet 信息服务)安装配置 这里以Windows Server 2003(以下简称Win2003)为例.因为Win2003是服务器级的操作系统,所以自带有IIS6.0,其它版本的系统可以

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

dreamweaver|设计 9月份设计界最热的消息莫过于Macromedia公司的StudioMX2004了,朋友们都很关心新版软件的新特性,那么就让我通过这个留言本的教程跟大家一起体验StudioMX2004中的Dreamweaver MX 2004(以下简称DW2004)吧. 一.IIS(Internet 信息服务)安装配置 这里以WindowsServer2003(以下简称Win2003)为例.因为Win2003是服务器级的操作系统,所以自带有IIS6.0,其它版本的系统可以在添加或删除

用Dreamweaver MX 2004设计超简留言本(二)

dreamweaver|设计 相关文章:用Dreamweaver MX 2004设计超简留言本 接着昨天晚上的教程继续给大家讲解,前面做的留言本只能显示数据,让我们赋于它生命吧,让这个留言板把网友们互动起来,大家可以积极发言,讨论侃山.首先要做一个写留言的网页,为了简单化,我们把写入留言的网页和提交保存留言的网页分成两个,这样容易看懂,方便学员分析. 我们先做写入留言的网页,静态或动态网页均可,不需要任何ASP代码,最好建个静态文件,这样浏览速度快,不增加服务器负担,也不是说全是ASP网页就好哦

用Dreamweaver MX 2004设计超简留言本

dreamweaver|设计 初学者在学ASP的时候往往是无从学起,学理论的时候又太抽象不好懂,实践的时候又找不到合适的例子来分析练习,有时候找到一个源程序学习的时候,功能太繁杂,涉及到的ASP模块太多,也附带了不少的函数,这样使初学者一头雾水,知难而退,实际上ASP是比较容易掌握的,今天就是为了这个目的,剥茧抽丝做了一个非常简单的留言板,只有留言,删除和回复的功能,没有管理权限功能(站长登录,修改密码等).判断功能(表单验证等)及分页功能,简洁干炼,主要是为了初学者掌握最重要的知识,就是如何抓

Dreamweaver MX 2004打造留言本详解

dreamweaver|详解 一.IIS(Internet 信息服务)安装配置 这里以Windows Server 2003(以下简称Win2003)为例.因为Win2003是服务器级的操作系统,所以自带有IIS6.0,其它版本的系统可以在"添加或删除程序>>添加/删除Windows组件"对话框中把"Internet 信息服务(IIS)"前的勾选中,点"下一步"进行安装就行了(注:在这之前应把系统安装盘放到光驱). IIS装好之后再作

Dreamweaver MX 2004打造留言本

dreamweaver 9月份设计界最热的消息莫过于Macromedia公司的StudioMX2004了,朋友们都很关心新版软件的新特性,那么就让我通过这个留言本的教程跟大家一起体验StudioMX2004中的Dreamweaver MX2004(以下简称DW2004)吧.一.IIS(Internet信息服务)安装配置这里以WindowsServer2003(以下简称Win2003)为例.因为Win2003是服务器级的操作系统,所以自带有IIS6.0,其它版本的系统可以在添加或删除程序>>添加

DreamWeaver MX 2004专题

dreamweaver Dreamweaver MX 2004 CSS使用教程 [2005-03-06] 菜鸟学用Dreamweaver MX 2004行为教程 [2005-03-09] Dreamweaver MX 2004入门教程 [2005-03-11] Dreamweaver MX 2004从零开始教程 [2005-03-11] Dreamweaver MX 2004打造留言本详解 [2005-03-13] DreamweaverMX2004站点远程连接设置 [2005-02-25] 用

Dreamweaver MX 2004视频宝典教程(19)

dreamweaver|教程 第 19 集:Dreamweaver设计面板组 课程目标:学会Dreamweaver设计面板组的使用. 课程要点:Dreamweaver MX 2004设计面板组包括CSS样式面板和层面板.本节将简要介绍两个面板的使用方法. [全屏观看] | [下载视频] |

Dreamweaver MX 2004 表格设计

dreamweaver|设计 Dreamweaver MX 2004的强大功能以及更加完善的人性化设置已经深受大家喜爱.在此笔者就谈谈该软件新版本中的表格设计. 表格在网页中的重要性不言而喻:网页的框架.结构都要通过合理的表格布局来完成和实现. 在Dreamweaver MX2004中(以下简称DW MX 2004),插入表格的界面和以前的对话框已经起了很大的变化(图1). 其中的Table Size虽然变化不大,但是下边新增加的功能着实方便了不少:例如新增加的表格标题.布局功能以及附加信息显示