Dreamweaver MX 打造留言本.docx
- 文档编号:29328109
- 上传时间:2023-07-22
- 格式:DOCX
- 页数:50
- 大小:732.33KB
Dreamweaver MX 打造留言本.docx
《Dreamweaver MX 打造留言本.docx》由会员分享,可在线阅读,更多相关《Dreamweaver MX 打造留言本.docx(50页珍藏版)》请在冰豆网上搜索。
DreamweaverMX打造留言本
一、IIS(Internet信息服务)安装配置
这里以WindowsServer2003(以下简称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对应地址的表,点这里下载,然后打开数据库data.mdb,在"文件"菜单下选择"获取外部数据>>导入",再在弹出的对话框里选择刚才下载的数据库,导入,选择address表,确定,现在数据库data.mdb中应该有这样的三个表:
至此,准备工作全部完成。
程序运行配置完了,废话不多说,直接开始我们的DWMX2004的体验之旅吧
上一节我们在IIS里把站点根目录定义在E:
\Work,现在进到这个目录下新建一文件夹并命名为geustbook。
打开DW,在"Site"菜单下找到"ManageSites..."项单击,见下图:
打开"ManageSite"对话框,点"New...",在出来的下拉菜单里选"Site"定义新站点:
跟着新站点定义向导一步一步来定义我们的留言板站点。
在站点名称上填上geustbook:
点"Next>"继续下一步的后台技术选择,这里我们选择用VBScript作脚本的ASP:
点"Next>"继续下一步的站点文件夹设置,因为我们现在是在本地测试,而且gustbook文件夹在E:
\Work\guestbook,所以设置如下:
点"Next>"继续下一步的设置DW的测试URL:
点"Next>"继续下一步,因为我们在本机测试,不需要远程服务器参与,所以选择"No":
点"Next>"继续下一步,这里显示的是我们刚才所填的信息,目的是要我们确认一下,如果发现有错,可以点" 细心一点的朋友也许会发现,在站点定义对话框上有两个标签: "Base"和"Advanced",其实用途是一样的,只不过"Base"是一步一步的向导模式,而"Advanced"是给对DW有一定了解的朋友用的高级模式,有兴趣的朋友可以自行切换到"Advanced"模式看看 在DW中新建一页(在"NewDocument"新文档对话框中选"ASPVBScript"类型的文档)(图16),存为index.asp,并修改页面标题为"留言板首页"(图17) 点击"Common"工具组里的表格图标(图18)(或者按Ctrl+Alt+T),插入一个5行1列的表格(记为表格1),设置如下: 选中表格,然后在属性面板中把它设置为居中对齐: 把光标定位到第一行的单元格后在属性面板中把它的高设为35: 同理把第二、四、五行单元格的高都设为20,再如法炮制,在属性面板里把第一行和第五行的单元格设置为水平居中对齐,第二行和第行的单元格为水平居右对齐: 然后在各单元格里写上文字,完成后如图: 可能会有朋友找不到那个版权符号的插入方法,顺便说一说。 有三种方法可以插入版权符号: 1)"Insert>>HTML>>SpecialCharacters>>Copyright" 2)在Text工具组里最右边的下拉选项里: 3)在源码状态下输入© 光标定位到第三行的单元格里,插入一个一行两列的表格(记为表格二),宽度设为100%,边框宽为1;左边单元格的宽度设为70,垂直居顶对齐,并插入一个两行一列的表格(记为表格三),完成后效果如图: 在新插入的表格 的第一个单元格里在按"Ctrl+Alt+I"插入一个头像(头像路径在留言板目录下images/icon里,在网上找的几个图片稍微加工了一下),并在第二个单元格里写上"访客昵称",之后设置两个单元格的水平对齐方式均为居中: 现在只剩下一个很大的空白单元格了,这个就是我们用来显示访客留言及访客资料的区域,在这个单元格里插入一个三行一列的表格(记为表格四),写上文字、设置水平对齐方式、单元格高度后如图所示: 再插入一个显示留言内容和回复内容的两行两列的表格(记为表格五)到唯一空白的单元格里,写上文字并设置后效果如下: 最后是给"留言"、"查看"、"管理"这几个字分别加上链接(方法: 选中文字后在属性面板的Link输入框中输入链接地址)insert.asp、index.asp、login.asp 保存所有修改,在IE中输入http: //localhost/guestbook/index.asp(或者http: //localhost/guestbook/)看看你的成果: 是不是觉得很难看? 没关系,现在我们用CSS和图片简单修饰一下。 按"Shift+F11"展开CSS面板,点击图30中的加号按钮 在弹出的"NewCSSStyle"对话框中作如图31设置后单击"OK",出现一个让你选择可在CSS文件的对话框,这里我们就保存为css.css(图32) 之后在弹出的"CSSStyleDefinitionforbodyincss.css"对话框中作如下两步设置: 保存css.css,可以明显的看到现在的index.asp好看多了,不过我们的美化页面工作还没完成,继续定义链接的CSS----单击图30中的加号按钮,在弹出的"NewCSSStyle"对话框中作如图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>>ApplicationObjects>>Recordset" 3)在Application工具组里单击第一个图标: 因为我们还没连接过数据库,所以现在还需要定义连接数据库字符串。 在弹出的Recordset对话框中单击如图45所标的"Define..."按钮,再单击"ConnectionsforSite'guestbook'"对话框中的"New"按钮,在出现的下拉选项中选"CustomConnectionString" 现在是最关键的一步,在"CustomConnectionString"对话框中填写自定义字符串: Connectionname一项填: conn Connectionstring一项填(注意要带双引号): "Provider=Microsoft.Jet.OLEDB.4.0;DataSource="&Server.MapPath("/guestbook/data.mdb") 再选中"Usingdriverontestingserver" 之后一路点"OK"或"Done",回到图44所示的"Recordset"对话框,填写如下: Name(记录集名称): rs Connection(连接): conn Table(表): main Columns(字段): 先选中"Selected"再按住Shift或Ctrl选择除ID以外的所有字段 Sort(排序): 选择以"Data"字段内容的"Descending"(倒序)方式排序 确定后出现一个提示窗口,大概意思是"记录集已添加到该页,在绑定面板中可以访问该记录集的各字段",选中"Don'tshowmeagain"后按"OK" 我们把头像地址跟数据库中的数据关联想来,也就是绑定ICON字段的数据到图片地址: 1)选中那个头像图片,单击属性面板中如图48所示的图标 2)在弹出的"SelectImageSource"对话框中的"Selectfilenamefrom"项选"Datasources"切换到从数据源选择图片源模式(图49) 3)先把URL那一栏的内容剪切,然后单击ICON字段,再把刚才的内容粘贴回来,修改成如图50所示 这样就完成了头像的绑定,自己对照一下绑定前后图片的路径。 是不是开始觉得有点意思了? 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)选中"主页",并单击属性面板中的"BrowseforFile"按钮,在弹出的"SelectFile"对话框中作如图54的设置后点"OK",最后回到属性面板中把Target的值选为"_blank",以在新窗口中打开访客主页 2)同理缩写"信箱"的链接,稍有不同的是信箱的链接前面需要加上"mailto: ",如图55 3)做"QQ"的链接又跟前面的稍有不同,因为我们查看QQ用户的资料地址是 现在所有的数据都绑定完了,但是不要高兴得太早,这样的留言板永远只会显示一条留言记录,所以我们还需要设定重复域和翻页 1)光标定位到头像所在单元格内,然后点选表格二中的 2)按Ctrl+F9展开服务器行为面板,点击"+”按钮,在出现的下拉菜单中选择"RepeatRegion",或者在"Application"工具组中点左起第四个图标,然后弹出"RepeatRegion"对话框,这里都用默认设置,所以直接点“OK” 3)选中表格二,然后应用服务器行为"ShowRegionIfRecordsetIsNotEmpty",如图58 这是为了在数据库没有记录时不会出错的,相信在图58中大家也注意到了第一项的"ShowRegionIfRecordsetIsEmpty",这个可以设置当数据库无记录时显示的内容。 数据记录多了之后肯定不能都让它们在一页里显示,所以我们还需要给显示留言加上翻页功能。 选择"首页",按"Ctrl+F9"展开服务器行为面板, 单击上面的"+"号,在下拉菜单中选择"RecordsetPaging>>MoveToFirstRecordset"(图59),同理给"上页"、"下页"和"尾页"加上翻页功能,分别对应的服务器行为为"MoveToPreviousRecordset"、"MoveToNextRecordset"和"MoveToLastRecordset",顺便说一下,这些服务器行为也可以在"Application"工具组里找到,而且还有一个直接插入"RecordsetNavigationBar"(导航栏),可以自己试试看跟我们刚才所做的有什么区别。 最后记住也给导航条应用"ShowRegionIfRecordsetIsNotEmpty"命令,没有记录的话翻页就用不着了。 做到这里,我们的留言板首页终于完成了,可以稍息一下,在IE中输入"http: //localhost/guestbook"看看劳动成果......什么? 什么也没有? 当然了,因我们的数据库中还没记录,如果急着想看效果的话可以用ACCESS打开数据库直接添加记录 把index.asp另存为insert.asp,修改页面标题"留言板首页"为"填写留言",删除一些表格,并在服务器面板中把除第一条Recordset(rs)以外的行为都选中后按上面的"-"号删除,完成后大概是这样: 光标定位到第三行的单元格里后点"Application"工具组里的"RecordInsertionFormWizard"图标(图63),弹出"RecordInsertionForm"对话框,删掉一些项,并作设置如下(没写的属性项均用默认值): Connection: conn Insertintotable: main Afterinserting,goto: index.asp Name{ Label: 昵称: } Email{ Label: 信箱: } Homepage{ Label: 主页: Defaultvalue: http: // } QQ{ Submitas: Numeric } Content{ Label: 内容: Displayas: Textarea } ICON{ Displayas: Hiddenfield Defaultvalue: 01 } IP{ Displayas: Hiddenfield Defaultvalue: <%=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: 1pxsolid#333333; } textarea{ height: 120px; width: 98%; overflow: hidden; } #iconimg{ margin: 2px; cursor: hand; } 还有下面的脚本代码添加到insert.asp的head部分: -- window.onload=function(){//页面加载完毕时执行 varobj=document.form1; obj.onmouseover=function(){//表单项(文本框、多行文本框)在鼠标移上时变换背景颜色的函数(函数①) if(event.srcElement.tagName=="INPUT"||event.srcElement.tagName=="TEXTAREA")//判断当对象标签为input或textarea时执行 event.srcElement.style.backgroundColor="#EEEEEE";//对象背景颜色变换#EEEEEE } obj.onmouseout=function(){//表单项(文本框、多行文本框)在鼠标移出时变换背景颜色的函数(函数②) if(event.srcElement.tagName=="INPUT"||event.srcElement.tagName=="TEXTAREA")//判断当对象标签为input或textarea时执行 event.srcElement.style.backgroundColor="#DDDDDD";//对象背景颜色变换#DDDDDD } icon.onclick=function(){//单击头像图片时把图片名中的数字传递到隐藏域ICON的函数(函数③) if(event.srcElement.tagName=="IMG") obj.ICON.value=event.srcElement.src.match(/(0[1-6])(? =\.jpg)/g)[0];//将所点击的图片路径地址中的01-06赋值给隐藏域ICON } obj.onsubmit=function(){//验证表单的函数(函数④) varerror="" if(obj.Name.value=="")error+="●昵称项不能为空\n\n"; if(obj.Email.value=="")error+="●信箱项不能为空\n\n"; elseif(! /^\w(\w*\.*)*@(\w+\.)+\w{2,4}$/.test(obj.Email.value))error+="●信箱格式不正确\n\n"; if(obj.Homepage.value! =obj.Homepage.defaultValue&&! /^(http: \/\/[A-Za-z0-9\./=\? %\-&_~`@[\]\': +! ]+)$/.test(obj.Homepage.value))error+="●网址格式不正确\n\n" if(obj.QQ.value! =""&&! /^[1-9]\d{4,8}$/.test(obj.QQ.value))error+="●QQ号码只能是5位到9位的数字\n\n" if(obj.Content.value=="")error+="●留言内容不能为空\n\n"; elseif(obj.Content.value.length>1000){error+="●留言字符长度超出1000";obj.Content.value=obj.Content.value.substring(0,1000)} if(error! =""){alert("错误提示: \n\n"+error);returnfalse;} elsereturntrue; } } //--> 如果不需要表单项在鼠标事件发生时变换背景颜色,可以去掉函数①和②,如果嫌手写表单验证的代码太累,可以去掉函数④,然后到下载一个叫checkForm的插件,找不到的话就从这个地址下: 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。 copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1,如图57所示