DreamWeaver2004造留言本

9月份设计界最热的消息莫过于Macromedia公司的 Studio MX 2004了，朋友们都很关心新版软件的新特性，那么就让我通过这个留言本的教程跟大家一起体验Studio MX 2004中的Dreamweaver MX 2004(以下简称DW2004)吧。

一、IIS(Internet 信息服务)安装配置

这里以Windows Server 2003(以下简称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中应该有这样的三个表：

至此，准备工作全部完成。

程序运行配置完了，废话不多说，直接开始我们的DW MX 2004的体验之旅吧。

 

上一节我们在IIS里把站点根目录定义在E:\Work，现在进到这个目录下新建一文件夹并命名为geustbook。

打开DW，在"Site"菜单下找到"Manage Sites..."项单击，见下图：

打开"Manage Site"对话框，点"New ..."，在出来的下拉菜单里选"Site"定义新站点：

跟着新站点定义向导一步一步来定义我们的留言板站点。在站点名称上填上geustbook：

点"Next>"继续下一步的后台技术选择，这里我们选择用VBScript作脚本的ASP：

点"Next>"继续下一步的站点文件夹设置，因为我们现在是在本地测试，而且gustbook文件夹在E:\Work\guestbook，所以设置如下：

点"Next>"继续下一步的设置DW的测试URL：

点"Next>"继续下一步，因为我们在本机测试，不需要远程服务器参与，所以选择"No"：

点"Next>"继续下一步，这里显示的是我们刚才所填的信息，目的是要我们确认一下，如果发现有错，可以点"

细心一点的朋友也许会发现，在站点定义对话框上有两个标签：

"Base"和"Advanced"，其实用途是一样的，只不过"Base"是一步一步的向导模式，而"Advanced"是给对DW有一定了解的朋友用的高级模式，有兴趣的朋友可以自行切换到"Advanced"模式看看。

在DW中新建一页(在"New Document"新文档对话框中选"ASP VBScript"类型的文档)(图16)，存为index.asp，并修改页面标题为"留言板首页"(图17)

点击"Common"工具组里的表格图标(图18)(或者按Ctrl+Alt+T)，插入一个5行1列的表格(记为表格1)，设置如下：

选中表格，然后在属性面板中把它设置为居中对齐：

把光标定位到第一行的单元格后在属性面板中把它的高设为35：

同理把第二、四、五行单元格的高都设为20，再如法炮制，在属性面板里把第一行和第五行的单元格设置为水平居中对齐，第二行和第行的单元格为水平居右对齐：

然后在各单元格里写上文字，完成后如图：

可能会有朋友找不到那个版权符号的插入方法，顺便说一说。有三种方法可以插入版权符号：

1)"Insert>>HTML>>Special Characters>>Copyright"

2)在Text工具组里最右边的下拉选项里：

3)在源码状态下输入??

光标定位到第三行的单元格里，插入一个一行两列的表格(记为表格二)，宽度设为100%，边框宽为1；左边单元格的宽度设为70，垂直居顶对齐，并插入一个两行一列的表格(记为表格三)，完成后效果如图：

在新插入的表格的第一个单元格里在按"Ctrl+Alt+I"插入一个头像(头像路径在留言板目录下images/icon里,在网上找的几个图片稍微加工了一下)，并在第二个单元格里写上"访客昵称"，之后设置两个单元格的水平对齐方式均为居中：

现在只剩下一个很大的空白单元格了，这个就是我们用来显示访客留言及访客资料的区域，在这个单元格里插入一个三行一列的表格(记为表格四)，写上文字、设置水平对齐方式、单元格高度后如图所示：

再插入一个显示留言内容和回复内容的两行两列的表格(记为表格五)到唯一空白的单元格里，写上文字并设置后效果如下：

最后是给"留言"、"查看"、"管理"这几个字分别加上链接(方法：选中文字后在属性面板的Link输入框中输入链接地址)insert.asp、index.asp、login.asp

 

保存所有修改，在IE中输入 [url]http://localhost/guestbook/index.asp[/url] (或者[url]http://localhost/guestbook/[/url] )看看你的成果：

是不是觉得很难看？没关系，现在我们用CSS和图片简单修饰一下。

按"Shift+F11"展开CSS面板，点击图30中的加号按钮

在弹出的"New CSS Style"对话框中作如图31设置后单击"OK"，出现一个让你选择可在CSS文件的对话框，这里我们就保存为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页，看看效果----好象还少点东西，表格线不是网上常见的那种细线，对不对？好，我们现在就开始打造细线表格。用DW打开css.css，在最后加上代码：

.thin {
border-collapse: collapse;
}
现在css.css里的文件代码如下：

[img]http://webdesign.chinaitlab.com/UploadFiles_8014/200606/20060602152851997.gif?http://www.xvna.com[/img]

然后给需要做细线的表格(表格一、表格二、表格四和表格五)的table标签里加上class="thin"，给表格二、表格四和表格五的table标签里加上frame="void"，完成后代码大概如图40，在IE中看的效果如图41所示：

注意，这种方法制作的细线表格，必须保证有class="thin"、border="1"和bordercolor="#666666"(边框颜色，可以选择自己喜欢的颜色)三个属性，并且只适用 于IE5.0+。
最后是给几个单元格加上背景图片和背景颜色，完成后在IE中的效果如图所示：

blueidea.com/articleimg/2003/11/1298/42.gif?http://www.xvna.com

至此，显示留言页(index.asp)的前台部分全部完成