Dreamweaver UltraDev 4.0快速上手（下）

韩星 
2001年 60期

#1    制作留言簿实例
　　    留言簿是大家在设计网站过程中经常用到的。通过它，浏览者和网站主人之间可以实现互动交流，以提高网站的吸引力。一般情况，大家都是去申请免费的留言簿来使用，但是它的设计并不能完全满足我们的需要。我们想按自己的要求设计一个个性化十足的留言簿，这该怎么办呢？下面我们就学习用UltraDev来创建一个非常实用的留言簿，通过它，你不用写一句代码就可以设计出一个功能齐全、界面美观的留言簿。
　　    1．系统设计规划
　　    在开始设计留言簿之前，我们首先要对它的功能以及实现这些功能需要做的准备工作有一个大致的了解，也就是要有一个明确的设计规划。
　　    一个最简单的留言簿包括两部分，一部分用来显示留言的内容，另一部分用来添加新的留言。在显示留言内容的页面上，为了帮助用户查看众多的留言，应当设计有翻页功能，同时还要有一个指向添新留言页面的链接，在添加新的留言页面中包含有需要用户填写个人信息和留言的栏目，同时还要设计有提交和重置按钮，以便用户向数据库提交填写的信息内容。
　　    下面我们就要考虑留言数据库中需要保存的内容了，也就是数据库需要包含哪些字段，这可以根据我们的个人爱好灵活设置。在本例中，留言数据库包括留言者名字、电子邮件地址、主页地址、ICQ号码、OICQ号码、留言时间、留言主题和留言内容几个字段。
　　    2．制作静态网页
　　　　根据上面的设计规划，我们知道该留言簿包括两个页面，一个是填写留言页面，一个是浏览留言页面，这两个页面可以用网页编辑软件如FrontPage、Dreamweaver或者直接在UltraDev中进行制作。它的设计也比较简单，主要是按照设计规划放置相关的内容，并进行修饰美化即可。
　　　　由于它没有添加动态内容，所以属于静态网页，可以用前面介绍的网页编辑软件来完成设计。但是要注意一点，不论使用什么编辑软件，在最后保存文件时，一定要把文件的扩展名改为.asp。在本例中，我们设计的浏览留言网页（index.asp）和填写留言网页（add.asp）页面分别如图（^60090403a^）、图（^60090403b^）所示。
　　    3．创建数据库
　　    网页准备完毕，下面我们就要设计一个储存留言内容的数据库。我们以目前使用最广泛、最简单的Access 2000，来建立一个数据库。
　　    （1）启动Access 2000，在新建数据库窗口中选择“空Access数据库”选项，然后单击“确定”按钮。
　　    （2）在“文件新建数据库”窗口中将数据库保存到留言簿网站的根目录下，文件名称为guest.mdb，单击“创建”按钮。
　　    （3）在guest数据库窗口中，双击“使用设计器创建表”选项，出现数据库表设计窗口，在第一行的“字段名称”中输入“ID”、“数据类型”选择“自动编号”。然后在这一行上单击鼠标右键，在弹出的菜单中选择“主键”命令。然后在第二行的“字段名称”中输入“name”、“数据类型”选择“文本”，在下面的“常规”字段属性区域中，“字段大小”中输入“20”，对于“必填字段”选择“是”。这一字段用来保存留言者的名字。
　　　　（4）然后采用同样的方法，可以把其他字段都建立起来，见下表。
　　    （^60090403d^）
　　    输入完成后，关闭设计窗口，将数据库表保存为“guesttable”，完成了数据库的创建工作。
　　    4．设定DSN
　　    建立好数据库之后，我们还必须系统的DSN，这样才能让网页知道数据库保存的位置，以及数据库相关的属性。
　　    （1）在Windows 98中，单击“开始→设置→控制面板”选项，然后双击“ODBC 数据源”图标，打开“ODBC数据源管理器”，选择“系统DSN”选项卡，然后单击“添加”按钮。
　　    （2）在“创建新数据源”窗口中选择“Microsoft access driver（*.mdb）”，单击“完成”按钮。
　　    （3）出现“ODBC Microsoft Access安装”对话框，在“数据源名”中输入“guestbook”。然后单击“选取”按钮，选择我们刚才建立的guest.mdb数据库，单击“确定”按钮，这时你会发现系统DSN中已经多了一个guestbook，这就是我们下面将要使用的数据库。
　　    5.定义站点
　　    定义好站点之后，我们才能够使用UltraDev来管理网站，使用它的各种功能。
　　    （1）打开UltraDev，单击“Site→New sites”菜单命令打开“Site definition”窗口。在“Category”列表中选择“Local info”选项，然后在“Site name”中输入“视点工作室留言薄”，在“Local root”中输入本地站点的根目录C:\shidian，或者单击右边的文件夹按钮进行选择。
　　    （2）在“Category”列表中选择“Remote info”选项，在“Access”下拉列表中选择“Local/Network”，在“Remote folder”框中输入“C:\inetpub\www root\shidian”，或单击右边的文件夹按钮选择目录。
　　    （3）选择“Application server”选项，在“Server model”中选择ASP 2.0，在“Page extension”中选择“.asp”，在“Scripting”中选择“Vbscript”或“Javascript”，在“URL  prefix”中输入“http://localhost/gust/”，其他选项使用系统默认值即可。
　　    （4）单击“OK”按钮，完成站点的定义工作。
　　    6．创建数据库链接
　　    前面我们已经设定好了系统DSN，并且定义了站点，下面我们就需要建立这个网站的数据库链接，这样一来这个网站中的网页才能够存取库中的数据。建立链接的方法很简单，只要将数据库链接指定为前面设定的系统DSN即可。
　　    （1）打开UltraDev，单击“Modify→Connection”菜单命令，打开“Connections”对话窗。单击“New”按钮，在弹出的菜单中选择“Data source name（DSN）”命令。
　　    （2）在打开的“Data source name（DSN）”对话框中，在“Connection name”中输入“guestbook”，单击“Data source Name（DSN）”下拉列表选中前面要建立的“guestbook”， “Username”和“Password”可以不填，选中“Using local DSN”选项。单击“Test”按钮测试连接，如果连接成功，会弹出一个“Connection was made successfully”的提示窗口。
　　    （3）单击“OK”按钮，就可以在“Conneetion”窗口中显示出创建的“guestbook”数据库链接。
　　    （4）单击“Done”按钮，关闭“Connection”窗口，一个数据库链接就建立好了。
　　    7．设计填写留言网页
　　    前面我们虽然建立了数据库，但它只是一个空的数据库，里面并没有任何数据内容，我们如何才能向数据库中添加数据呢？这就要用到填写留言网页了，这个页面设计好之后，我们就可以通过它把留言保存到数据库中，然后在浏览留言页面中显示出来。
　　    （1）在UltraDev中打开填写留言页面add.asp，单击“Windows→Server behaviors”菜单命令，打开服务器行为面板，单击面板中的“+”号按钮，在出现的菜单中选择“Insert record”命令。
　　    （2）在打开的“Insert record”对话框中，在“Connection”下拉列表中选择“guestbook”项，在“Insert into table”（需要插入的数据库表）下拉列表中选择“guesttable”项。
　　    单击“After insertiog go to”右边的“Browser”按钮来设置该框中的值，我们在打开的选择文件窗口中选择index.asp文件。 这样当我们在填写留言网页中填好内容，单击“提交”按钮时，页面就会定向到浏览留言网页index.asp，我们就可以马上看到新增加的留言了。
　　    在“Get valae from”中，系统自动选择了“Forml表单，这也是该页面中唯一的一个HTML表单，它包含了往数据库中添加新记录所需要的所有表单元素。如果页面中各表单元素的名称与数据库中的对应字段名称一致，在“Form elements”列表中，程序会自动将表单中的每一个元素同数据库中的相应字段进行匹配。如果没有的话，就需要自己手工进行调整，调整的方法是：先从“Form elements”列表中选择一个元素，再从“Column”下拉列表中选择数据库中对应的字段。在提交表单时，该表单元素中的数据将被插入到所选择的数据字段中。
　　    （3）单击“OK”按钮，结束操作。
　　    下面我们就可以对上面的设置进行测试了。在文档编辑窗口中单击工具栏上的“Preview in browser”按钮，在浏览器中打开填写留言网页。输入留言信息，然后单击“submit”按钮提交表单，页面就会自动切换到index.asp页面， 这就表示留言信息已经成功保存到数据库中了。由于我们还没有完成浏览留言页面的设计工作，所以我们现在index.asp页面中还看不到插入的留言内容。
　　    8．设计浏览留言网页
　　    为了让浏览留言页面按我们的要求显示留言的内容，我们需要添加许多服务器认为，还要定义留言记录集，这样才能让留言簿的功能完善，使用方便。
　　    （1）建立留言记录集：在设计浏览留言页面之前，我们首先要建立一个记录集，它包含了所有的留言记录，用来供网页调用。
　　    具体的操作是：在UltraDev中打开index.asp页面，单击“Window→Data bindings”菜单命令，打开数据绑定面板。单击面板中的“+”号按钮，在出现的菜单中选择“Recordset（Qatry）”命令，打开“Recordset”设置窗口。在“Name”框中输入“all_Message”，在“Connection”下拉列表中选择“guestbook”项，在“table”下拉列表中显示出了数据库中的所有表名，从中选择“guesttable”项，在“Columns”中单击“all”，选中所有字段，这样就可以在下面的列表框中显示所有的字段。
　　    如果我们希望以留言时间的先后顺序来显示留言内容，就需要在“Sort”域的第一个下拉列表中选中“Date”项，它记录的是留言时间，然后在第二个下拉列表中选择“Descending”（降序）项。
　　    然后，单击“Test”按钮，可以测试设置正确与否。连续两次单击“OK”按钮，结束操作。
　　    （2）制作浏览页面：网页中第一个人头图像的是留言者的名字，我们用鼠标在它的右面单击，将插入点移到人头图像的右边，我们要在这里显示留言者的名字。打开数据绑定面板，单击记录集展开它的所有字段，选中“Name”字段，然后单击面板下部的“Insert”按钮，就可以在当前位置插入占位符“all_Message.name”。
　　    同样的方法，分别选定数据绑定面板中的“Icq”和“Oicq”字段，可以在页面中的“Icq”和“Oicq”图标右边插入相应的占位符。
　　    对于留言时间、留言标题和留言内容三项，我们需要先在编辑窗口中选定相应的文字，然后在数据绑定面板中分别选择date、subject和content字段，对于date字段，单击“Date”字段右边的下拉箭头， 在打开的菜单中选择“date/time/general format”来定义时间格式。单击“Insert”按钮，相应的文字就会被占位符代替。
　　    个人主页图标是一个超链接，浏览时单击它就可以打开相应的主页，它的设置方法是：选中个人主页图标，在属性面板的“Link”框中随便输入一个网址，然后在状态栏中单击“<a>”标签，选中这个超链接。这时我们可以在数据绑定面板下方的“Bind to”框中看到“a.href”，这就是超链接的“href”属性，我们选中记录集中的“homepage”字段，然后单击“Bind”按钮将个人主页图标的超链接绑定到“hanepage”字段中。
　　    使用同样的方法，在数据绑定面板中选中“email”字段，就可以将电子邮件地址图标绑定到“email”字段中。但是，“email”链接与网页链接格式是不一样的，我们需要在电子邮件地址前面加上“mailto:”标志，这样才能够被系统识别。修改的方法是：选中电子邮件地址图标，然后在属性面板的“Link”框中所有文字的最前面加上“mailto:”即可。
　　    全部设置完毕，保存网页，然后在浏览器中预览，就可以看到实际的留言内容了。
　　    （3）显示多余留言记录：我们在浏览刚才制作的浏览页面时，发现其中只能显示一条留言记录，这与我们平时见到的留言簿是不一样的，平时见到的留言簿可以显示多条留言记录，那么如何让这个留言簿也能显示多条记录呢？
　　    在编辑窗口中单击任何一个占位符，然后单击“Modify→Table→Select table”命令选取整个表格。单击“Window→Server behaviors”命令，打开服务器行为面板。在面板中单击“+”号按钮，在出现的菜单选择“Repeat region”命令。在打开的“Repeat region”对话框中，在“Recordset”中选择“All_Message”记录集， 选中“Show”后面带文本框的显示选项，然后在文本框中输入要显示的记录个数，例如5，系统默认的是10条记录。
　　　　单击“OK”按钮结束操作。然后在浏览器浏览，就可以看到页面中显示出了5条留言记录（图^60090403c^）。
　　    （4）添加浏览链接：如果留言记录较多，我们就需要在页面中加入翻页功能，以便能够方便地查看所有的留言，这一般是通过在页面中添加“上一页”、“下一页”浏览链接来实现的。方法是：
　　    在编辑窗口中选中“上一页”文字，打开服务器行为面板，单击其中的“+”号按钮，在弹出的菜单中选择“Move to record→Move to previons record”命令。在打开的对话框中，在“Link”下拉列表中选择“上一页”选项。在“Recordset”下拉列表中选择“All_message”项。最后，单击“OK”按钮，链接建立完毕。
　　    用同样的方法，我们可以为“下一页”文字增加浏览链接，不同的是在服务器行为面板中我们需要选择“Move to record→Move to next record”命令。
　　    （5）增强浏览链接功能：在浏览留言页面时，我们还会发现一个问题，那就是当我们翻到最后一页时，“下一页”链接仍然显示，再单击它已经没有意义，因此我们希望浏览到最后一页时，“下一页”链接能够隐藏起来。同样，“上一页”链接也存在这样一个问题，下面我们就解决它。
　　    在编辑窗口中选中“下一页”文字，然后在服务器行为面板中单击“+”号按钮，在弹出的菜单中选择“Show region→Show region if not last record”命令，出现一个对话框，直接单击“OK”按钮即可，这样当翻到最后一页时，“下一页”链接就会隐藏起来，不再显示了。
　　    同样的方法，选中“上一页”文字，在服务器行为面板中选择“Show region→Show region if not first record”命令，就可以把“上一页”链接在翻到第一页时给隐藏起来。
　　    至此，我们的留言薄就算全部完成了。它虽然简单，但很实用，如果你想把它变得更加美观、更复杂些，可以按照我们上面介绍的方法进一步完善。只要你掌握了UltraDev的用法，你会发现开发Web应用程序其实很简单。