Dreamweaver MX 打造留言本.docx

1、Dreamweaver MX 打造留言本一、IIS(Internet 信息服务)安装配置这里以Windows Server 2003(以下简称Win2003)为例。因为Win2003是服务器级的操作系统，所以自带有IIS6.0，其它版本的系统可以在添加或删除程序添加/删除Windows组件对话框中把Internet 信息服务(IIS)前的勾选中，点下一步进行安装就行了(注：在这之前应把系统安装盘放到光驱)。 IIS装好之后再作一下简单的配置。定位到开始管理工具Internet 信息服务(IIS)管理器，打开IIS管理器。在本地计算机网站默认网站上右键单击，在快捷菜单里选属性(或者直接在操作菜单

2、下选属性)，弹出如下对话框: 切换到主目录标签(图2)，重新选择网站根目录(笔者选择的是E盘下的Work目录)，默认是系统盘:Inetpubwwwroot,因为系统盘不宜放太多的非系统文件，所以在这里重设默认网站要目录，如果嫌麻烦可以跳过这步。再切换到文档标签，通过添加、删除、上移、下移，把站点的默认文档设置如图所示： 可能有些朋友会疑惑，设置默认内容文档有什么作用？细心的朋友应该会发现，在浏览一些大网站的首页时用它的一级域名就行了，并不需要指定请求页的文件名，这就是设置了默认内容文档的缘故，它的作用就是在浏览器请求没有指定文档的名称时，将默认文档提供给浏览器。要得到更详尽的解释说明，可以点击

3、图3中的帮助。之所以有这步，是因为网站的默认内容页中没有index.asp，不大符合国人习惯先构想一下，一个功能齐全的留言本应该有哪些内容需要保存？访客名字(Name)、访客主页(Homepage)、访客QQ(QQ)、访客信箱(Email)、访客形象(ICON)、访客IP(IP)、留言内容(Content)、留言时间(Date)-这是访客的有关信息，如果主人要回复留言呢？好，再加上回复(Reply)和回复时间(RDate)，嗯.再想想有没有漏掉什么？对了，还有主人的管理帐号：用户名(Username)、密码(Password)。要保存这么多信息，数据库应该怎么设计？访客的留言是不断增加的，而主

4、人的管理帐号固定不变，所以应该分开两个表，一个保存所有访客的留言和访客的资料信息，另一个则保存主人的管理帐号。OK，现在可以开始设计数据库了。打开ACCESS(在微软的Office软件中有)软件，新建一空白数据库，ACCESS会提示先保存数据库，定位到你的留言本所在文件夹(笔者是在站点根目录下建了一个guestbook文件夹)，保存为data.mdb： 然后双击使用设计器创建表，完成后如图：为了优化数据库，有些字段需要作点设置：ID：设为主键，确定数据唯一性以保证在管理时能准确定位到相应记录Name:字段大小设为15(很少有人的名字有这么长的吧？)Email:字段大小为20(也很少有Email

5、地址的长度超过这个数字)ICON:字段大小为6(看完后面的教程就明白为什么设这么小了)IP:字段大小为15(可以算出来，四个三位长的数字再加三个小数点)Homepage：字段大小为30(很多朋友还在用二级甚至三级的域名，所以放宽一点)Date：默认值为Now ()(用Now()取得插入新记录时系统的时间) 关闭表窗口，会提示是否保存对表的修改，选是,然后把表名改为main，同理创建表admin，以保存管理帐号： 最后还需要一个记录IP对应地址的表，点这里下载，然后打开数据库data.mdb，在文件菜单下选择获取外部数据导入，再在弹出的对话框里选择刚才下载的数据库，导入，选择address表，确

6、定，现在数据库data.mdb中应该有这样的三个表： 至此，准备工作全部完成。 程序运行配置完了，废话不多说，直接开始我们的DW MX 2004的体验之旅吧上一节我们在IIS里把站点根目录定义在E:Work，现在进到这个目录下新建一文件夹并命名为geustbook。 打开DW，在Site菜单下找到Manage Sites.项单击，见下图： 打开Manage Site对话框，点New .，在出来的下拉菜单里选Site定义新站点： 跟着新站点定义向导一步一步来定义我们的留言板站点。在站点名称上填上geustbook： 点Next继续下一步的后台技术选择，这里我们选择用VBScript作脚本的ASP

7、： 点Next继续下一步的站点文件夹设置，因为我们现在是在本地测试，而且gustbook文件夹在E:Workguestbook，所以设置如下： 点Next继续下一步的设置DW的测试URL： 点Next继续下一步，因为我们在本机测试，不需要远程服务器参与，所以选择No： 点Next继续下一步，这里显示的是我们刚才所填的信息，目的是要我们确认一下，如果发现有错，可以点HTMLSpecial CharactersCopyright2)在Text工具组里最右边的下拉选项里： 3)在源码状态下输入© 光标定位到第三行的单元格里，插入一个一行两列的表格(记为表格二)，宽度设为100%，边框宽为1

8、；左边单元格的宽度设为70，垂直居顶对齐，并插入一个两行一列的表格(记为表格三)，完成后效果如图： 在新插入的表格的第一个单元格里在按Ctrl+Alt+I插入一个头像(头像路径在留言板目录下images/icon里,在网上找的几个图片稍微加工了一下)，并在第二个单元格里写上访客昵称，之后设置两个单元格的水平对齐方式均为居中： 现在只剩下一个很大的空白单元格了，这个就是我们用来显示访客留言及访客资料的区域，在这个单元格里插入一个三行一列的表格(记为表格四)，写上文字、设置水平对齐方式、单元格高度后如图所示： 再插入一个显示留言内容和回复内容的两行两列的表格(记为表格五)到唯一空白的单元格里，写上

9、文字并设置后效果如下： 最后是给留言、查看、管理这几个字分别加上链接(方法：选中文字后在属性面板的Link输入框中输入链接地址)insert.asp、index.asp、login.asp 保存所有修改，在IE中输入 http:/localhost/guestbook/index.asp (或者http:/localhost/guestbook/ )看看你的成果： 是不是觉得很难看？没关系，现在我们用CSS和图片简单修饰一下。 按Shift+F11展开CSS面板，点击图30中的加号按钮 在弹出的New CSS Style对话框中作如图31设置后单击OK，出现一个让你选择可在CSS文件的对话框，

10、这里我们就保存为css.css(图32) 之后在弹出的CSS Style Definition for body in css.css对话框中作如下两步设置： 保存css.css，可以明显的看到现在的index.asp好看多了，不过我们的美化页面工作还没完成，继续定义链接的CSS-单击图30中的加号按钮，在弹出的New CSS Style对话框中作如图35设置，单击OK按钮，再设置(图35) 刚才定义的是正常状态和点击之后的链接，现在再定义一下鼠标移上时的链接状态： 保存css.css，刷新浏览器中index.asp页，看看效果-好象还少点东西，表格线不是网上常见的那种细线，对不对？好，我们现

11、在就开始打造细线表格。用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+。最后是给几个单元

12、格加上背景图片和背景颜色，完成后在IE中的效果如图所示： 至此，显示留言页(index.asp)的前台部分全部完成按Ctrl+F9展开服务器行为面板，看那四项中的前三项前是否有勾号，如果没有就是相应项在定义站点是没设置好，重做DW的站点定义那一步，然后开始创建记录集，有三种方法：1)在服务器行为面板上单击+号2)在插入菜单上InsertApplication ObjectsRecordset3)在Application工具组里单击第一个图标：因为我们还没连接过数据库，所以现在还需要定义连接数据库字符串。在弹出的Recordset对话框中单击如图45所标的Define.按钮，再单击Connect

13、ions for Site guestbook对话框中的New按钮，在出现的下拉选项中选Custom Connection String 现在是最关键的一步，在Custom Connection String对话框中填写自定义字符串：Connection name一项填：connConnection string一项填(注意要带双引号)：Provider=Microsoft.Jet.OLEDB.4.0;Data Source=&Server.MapPath(/guestbook/data.mdb)再选中Using driver on testing server 之后一路点OK或Done，回到

14、图44所示的Recordset对话框，填写如下：Name(记录集名称)：rsConnection(连接)：connTable(表)：mainColumns(字段)：先选中Selected再按住Shift或Ctrl选择除ID以外的所有字段Sort(排序)：选择以Data字段内容的Descending(倒序)方式排序 确定后出现一个提示窗口，大概意思是记录集已添加到该页，在绑定面板中可以访问该记录集的各字段，选中Dont show me again后按OK我们把头像地址跟数据库中的数据关联想来，也就是绑定ICON字段的数据到图片地址：1)选中那个头像图片，单击属性面板中如图48所示的图标2)在弹出

15、的Select Image Source对话框中的Select file name from项选Data sources切换到从数据源选择图片源模式(图49)3)先把URL那一栏的内容剪切，然后单击ICON字段，再把刚才的内容粘贴回来，修改成如图50所示这样就完成了头像的绑定，自己对照一下绑定前后图片的路径。是不是开始觉得有点意思了？OK，不要停，继续绑定Name字段到头像下面的访客昵称：1)选中访客昵称四字后按Ctrl+F10展开Bindings(绑定)面板2)从中选择Name字段后单击下面的Insert按钮(图51)3)这时在Name字段右方出现格式化的倒三角形，点击之后选择Encode

16、- Server.HTMLEncode 同理把Name字段绑定到访客发表于2003-9-27 4:04:49中的访客上、Date字段绑定到访客发表于2003-9-27 4:04:49中的时间日期上、Content绑定到留言内容“、Reply绑定到回复内容，在回复内容后软回车再绑定RDate字段： 仔细看看，好象还有主页、信箱和QQ未绑定数据。按照我们的计划，这三组文字应该都是带链接的，而链接地址跟访客输入的相关资料绑定，其实这个跟绑定头像的方法有点相似：1)选中主页，并单击属性面板中的Browse for File按钮,在弹出的Select File对话框中作如图54的设置后点OK，最后回到属

17、性面板中把Target的值选为_blank，以在新窗口中打开访客主页2)同理缩写信箱的链接，稍有不同的是信箱的链接前面需要加上mailto:，如图553)做QQ的链接又跟前面的稍有不同，因为我们查看QQ用户的资料地址是 现在所有的数据都绑定完了，但是不要高兴得太早，这样的留言板永远只会显示一条留言记录，所以我们还需要设定重复域和翻页1)光标定位到头像所在单元格内，然后点选表格二中的，如图57所示2)按Ctrl+F9展开服务器行为面板，点击+”按钮，在出现的下拉菜单中选择Repeat Region，或者在Application工具组中点左起第四个图标，然后弹出Repeat Region对话框，这

18、里都用默认设置，所以直接点“OK”3)选中表格二，然后应用服务器行为Show Region If Recordset Is Not Empty，如图58 这是为了在数据库没有记录时不会出错的，相信在图58中大家也注意到了第一项的Show Region If Recordset Is Empty，这个可以设置当数据库无记录时显示的内容。数据记录多了之后肯定不能都让它们在一页里显示，所以我们还需要给显示留言加上翻页功能。选择首页，按Ctrl+F9展开服务器行为面板，单击上面的+号，在下拉菜单中选择Recordset PagingMove To First Recordset(图59)，同理给上页、

19、下页和尾页加上翻页功能，分别对应的服务器行为为Move To Previous Recordset、Move To Next Recordset和Move To Last Recordset，顺便说一下，这些服务器行为也可以在Application工具组里找到，而且还有一个直接插入Recordset Navigation Bar(导航栏)，可以自己试试看跟我们刚才所做的有什么区别。最后记住也给导航条应用Show Region If Recordset Is Not Empty命令，没有记录的话翻页就用不着了。 做到这里，我们的留言板首页终于完成了，可以稍息一下，在IE中输入http:/loca

20、lhost/guestbook看看劳动成果.什么？什么也没有？ 当然了，因我们的数据库中还没记录，如果急着想看效果的话可以用ACCESS打开数据库直接添加记录把index.asp另存为insert.asp，修改页面标题留言板首页为填写留言，删除一些表格，并在服务器面板中把除第一条Recordset(rs)以外的行为都选中后按上面的-号删除，完成后大概是这样： 光标定位到第三行的单元格里后点Application工具组里的Record Insertion Form Wizard图标(图63)，弹出Record Insertion Form对话框，删掉一些项，并作设置如下(没写的属性项均用默认值)

21、：Connection:connInsert into table:mainAfter inserting,go to:index.aspNameLabel:昵称:EmailLabel:信箱:HomepageLabel:主页:Default value:http:/QQSubmit as:NumericContentLabel:内容:Display as:Text areaICONDisplay as:Hidden fieldDefault value:01IPDisplay as:Hidden fieldDefault value:除了上面提到的，其它项按上面的-号删除，并通过上三角和下调整

22、各项的顺序，填好后如图所示 到这里添加留言的页面在功能上已经完成了，下面是我调整一下表单项的位置并用CSS对文本框作了美化后的效果： 把头像图片所在的单元格的id设为icon(在单元格td标签内加上id=icon)，并添加下面的代码到css.css文件中：input,textarea font-family: Verdana, 宋体;font-size: 12px;background-color: #DDDDDD;height: 18px;width: 150px;border: 1px solid #333333;textareaheight:120px;width:98%;overflo

23、w:hidden;#icon imgmargin:2px;cursor:hand;还有下面的脚本代码添加到insert.asp的head部分：1000)error+=留言字符长度超出1000;obj.Content.value=obj.Content.value.substring(0,1000)if(error!=)alert(错误提示：nn+error);return false;else return true;/- 如果不需要表单项在鼠标事件发生时变换背景颜色，可以去掉函数和，如果嫌手写表单验证的代码太累，可以去掉函数，然后到下载一个叫checkForm的插件，找不到的话就从这个地址下：