《DreamweaverCS3动态网页设计与制作教程》课件第14章

14.1配置Web服务器

14.2制作用户注册表单14.3Spry验证表单控件14.4用Access创建网站数据库14.5建立数据库连接14.6建立记录集并显示数据库记录14.7课堂综合训练14.8小结习题

第14章表单和动态网站若要开发和测试动态Web页，需要一个正常工作的Web服务器。Web服务器响应来自Web浏览器的请求并提供Web页。

鉴于动态网页的ASP脚本语言是在Web服务器端的IIS或PWS中解释和执行的，并且动态产生内容都是纯HTML的网页，然后再传送给客户端浏览这一特点，要求先在本地计算机上安装和使用IIS或PWS，使本地计算机具有服务器功能。14.1配置Web服务器

IIS(InternetInformationServer)是微软公司主推的Web服务器，是专为计算机网络服务而设计的一套网络套件，它不但有WWW、FTP、SMTP和NMTP等服务，同时支持ASP、TransactionServer和IndexServer等功能强大的服务器端软件的开发，应用比较广泛。PWS(PersonalWebServer)是基于Windows98系统的Web服务器，现已被IIS所取代。

由于目前大多数用户使用Windows2000或WindowsXP操作系统，下面就以在WindowsXP系统下安装IIS为例来讲解IIS的配置方法。

1.操作步骤

配置Web服务器的具体操作步骤如下：

(1)执行【开始】→【控制面板】命令，打开【控制面板】窗口，如图14.1所示。

(2)在【控制面板】窗口中双击【添加或删除程序】图标，打开【添加或删除程序】窗口，如图14.2所示。图14.1【控制面板】窗口图14.2【添加或删除程序】窗口

(3)单击图标后稍等片刻，出现【Windows组件向导】窗口，在其中的【组件】选项中选择【Internet信息服务(IIS)】复选框，如图14.3所示。

(4)单击【下一步】按钮，开始安装配置IIS，如图14.4所示。

(5)点击【完成】按钮结束组件向导，如图14.5所示。图14.3【Windows组件向导】窗口图14.4安装配置组件视图图14.5完成配置组件视图

(6) IIS安装完成后，应测试是否安装成功。在浏览器IE的“地址栏”中输入“http://localhost/”并回车，若显示如图14.6所示的页面，则表示安装成功，Web服务器可正常工作。图14.6测试成功页面

(7) IIS服务器安装成功后，需要对其进行相关配置后才可以应用。首先我们建立一个文件名为“zhuce”的文件夹，后面所讲的“制作动态用户注册系统”的所有文件均放在该文件中。

(8)打开【控制面板】窗口，双击其中的【管理工具】，在出现的【管理工具】窗口中选中【Internet信息服务快捷方式】，如图14.7所示。图14.7【管理工具】窗口

(9)双击图标，打开【Internet信息服务】窗口，展开【网站】文件夹，在【默认网站】上单击鼠标右键，在快捷菜单中选择【新建】→【虚拟目录】，如图14.8所示。

(10)单击【虚拟目录】后，打开【虚拟目录创建向导】窗口，如图14.9所示。图14.8【Internet信息服务】窗口图14.9【虚拟目录创建向导】窗口

(11)单击【下一步】按钮，在打开的【虚拟目录别名】窗口的【别名】文本框中输入“zhuce”，如图14.10所示。

(12)单击【下一步】按钮，打开【网站内容目录】窗口，在【目录】下面的文本框中输入“zhuce”文件夹所在的目录，如图14.11所示。

(13)单击【下一步】按钮，打开【访问权限】窗口，保持默认设置不变，如图14.12所示。图14.10【虚拟目录别名】窗口图14.11【网站内容目录】窗口图14.12【访问权限】窗口

(14)单击【下一步】按钮，以完成虚拟目录的创建。

(15)打开【Internet信息服务】窗口，右击【默认网站】项，在弹出的快捷菜单中选中【属性】项，如图14.13所示。图14.13默认网站属性的设置

(16)单击【属性】项，打开【默认网站属性】窗口，切换到【主目录】选项卡，在【本地路径】右边的文本框中重新选中“zhuce”所在的根目录，如图14.14所示。

(17)再切换到【文档】选项卡，通过【添加】按钮，设置用户访问网站时的默认启动文档(见图14.15)。至此，IIS的设置已经完成，接下来就可以使用ASP技术来开发动态网站了。图14.14【主目录】选项卡图14.15【文档】选项卡2.相关知识点

Web服务器的工作原理；

Internet信息服务(IIS)的安装；

Internet信息服务(IIS)的配置；

虚拟目录的创建方法。

IIS服务器配置好之后，还必须建立一个包含ASP脚本的动态站点。建立好站点后，动态网页的所有文件都放在该站点下，这样方便编辑和调试。

1.操作步骤

制作用户注册表单的具体操作步骤如下：

(1)启动DreamweaverCS，执行【站点】→【管理站点】命令，打开【管理站点】窗口，如图14.16所示。

(2)单击【新建】→【站点】命令，打开【站点定义】窗口，给站点起名为“zhuce”，如图14.17所示。14.2制作用户注册表单图14.16【管理站点】窗口图14.17站点命名

(3)单击【下一步】按钮，在打开的窗口中进行服务器脚本的设置，在下拉列表中选择“ASPVBScript”，如图14.18所示。

(4)单击【下一步】按钮，在打开的窗口中设置站点存放的文件夹，因是本地测试且站点存放在“zhuce”文件夹下，故设置如图14.19所示。图14.18服务器技术类型设置图14.19站点存储位置设置

(5)单击【下一步】按钮，设置测试URL，由于在本机测试，故保持默认设置，如图14.20所示。

(6)单击【下一步】按钮，设置共享文件，由于是在本机测试，并不需要远程服务器参与，所以选择【否】，如图14.21所示。图14.20本机URL测试图14.21文件共享设置

(7)单击【下一步】按钮，窗口显示了前面设置的全部信息，目的是再次确认所填的信息是否正确，若发现错误，可单击【上一步】按钮返回修改设置。确认无误后，单击【完成】按钮即完成动态站点的定义。

(8)现在可以在DreamweaverCS3中制作动态网页了。首先开始制作用户注册表单，创建一个ASP动态页面，命名为“zhuce”。执行【文件】→【新建】命令，弹出【新建文档】窗口，在【页面类型】项中选择【ASPVBScript】，如图14.22所示。图14.22【新建文档】窗口

(9)布局注册表单。执行【插入】→【表单】命令插入表单。将光标置于表单中，执行【插入】→【常用】→【表格】命令，弹出【表格】对话框，设置表格的【行】为“6”，【列】为“2”，【表格宽度】为“600像素”，【边框粗细】为“1”，【单元格边距】和【单元格间距】都为“0”，在【标题】文本框中输入“新用户注册”，如图14.23所示。图14.23【表格】对话框

(10)单击【确定】按钮，创建一个表格，在【属性】面板中将【对齐】设置为“居中对齐”，【填充】设置为“5”，标题(caption)字体设置为“粗体”，【背景颜色】设置为“#99FFCC”，如图14.24所示。

(11)在表格第1行第1列单元格中输入文本“用户名：”，在第1行第2列单元格中执行【插入】→【表单】→【文本字段】命令，在【属性】面板中将【文本域】名称设置为“name”，【最多字符数】设置为“20”，如图14.25所示。图14.24表格属性设置图14.25用户名设置

(12)在表格第2行第1列单元格中输入文本“性别：”，在第2行第2列单元格中执行【插入】→【表单】→【单选按钮】命令，在【属性】面板中保持【单选按钮】名称不变，设置选定值为“男”的【初始状态】为“已勾选”，如图14.26所示。图14.26用户性别设置

(13)在表格第3行第1列单元格中输入文本“密码：”，在第3行第2列单元格中执行【插入】→【表单】→【文本字段】，在【属性】面板中将【文本域】设置为“password1”，【最多字符数】设置为“15”，【类型】设置为“密码”，如图14.27所示。图14.27用户密码初次设置

(14)在表格第4行第1列单元格中输入文本“再次输入密码：”，在第4行第2列单元格中执行【插入】→【表单】→【文本字段】命令，在【属性】面板中将【文本域】设置为“password2”，【最多字符数】设置为“15”，【类型】设置为“密码”，如图14.28所示。图14.28用户密码再次设置

(15)在表格第5行第1列单元格中输入文本“E-Mail：”，在第5行第2列单元格中执行【插入】→【表单】→【文本字段】命令，在【属性】面板中将【文本域】名称设为“E-Mail”，如图14.29所示。

(16)将光标置于第6行第2列单元格中，执行【插入】→【表单】→【按钮】命令，在【属性】面板中将【动作】设置为“提交表单”，如图14.30所示。图14.29E-Mail设置图14.30提交按钮设置

(17)将光标置于“提交”按钮的右边，执行【插入】→【表单】→【按钮】命令，在【属性】面板中将【动作】设置为“重设表单”，如图14.31所示。

(18)至此，用户注册表单界面的制作完成。图14.31重置按钮设置2.相关知识点

定义站点；

新建ASP页面；

表格参数设置；

插入表单元素及其属性设置。

1.操作步骤

Spry验证表单控件的具体操作步骤如下：

(1)验证“用户名”文本域。将光标置于“用户名”对应的文本字段，执行【插入】→【Spry】→【Spry验证文本域】命令，插入【Spry文本域】，设置其【预览状态】为“必填”，【最小字符数】为“2”，【最大字符数】为“20”，如图14.32所示。14.3Spry验证表单控件图14.32用户名文本域验证

(2)验证“密码”和“再次输入密码”文本域。分别执行【插入】→【Spry】→【Spry验证文本域】命令，设置其【预览状态】为“初始”，【最小字符数】为“2”，【最大字符数】为“20”，如图14.33所示。

(3)验证“E-Mail”文本域。执行【插入】→【Spry】→【Spry验证文本域】命令，设置其【预览状态】为“初始”，【类型】为“电子邮件地址”，如图14.34所示。

(4)至此，表单控件均已验证。图14.33密码文本域验证图14.34E-Mail地址验证2.相关知识点

插入Spry验证文本域；

指定Spry验证的类型和格式；

指定Spry验证发生的时间；

指定Spry验证的最小字符数和最大字符数。数据库就是计算机中用于存储、处理大量数据的软件。常用的数据库有3种：MicrosoftAccess、MicrosoftSQLServer、Oracle。小型网站多使用MicrosoftAccess数据库，只有大型网站才使用MicrosoftSQLServer和Oracle数据库。MicrosoftAccess2003是一种简单易用的小型数据库设计系统，利用它能够快速创建具有专业特色的数据库，而不需要用户掌握高深的数据库理论知识。本节就利用MicrosoftAccess2003设计用户注册站点中的数据库。14.4用Access创建网站数据库

1.操作步骤

用Access创建网站数据库的具体操作步骤如下：

(1)运行ccess2003，在右侧的【开始工作】面板中单击【新建文件】按钮，如图14.35所示。图14.35【新建文件】按钮

(2)单击【新建文件】按钮以后，转到【新建文件】面板，在其中单击【空数据库】按钮，如图14.36所示。图14.36【新建空数据库】窗口

(3)单击【空数据库】以后，弹出【文件新建数据库】对话框，在其中查找用户注册站点文件夹(zhuce)，在其中新建一个名为data的文件夹，然后将空数据库文件保存在data文件夹下，并命名为zhuce.mdb，如图14.37所示。

(4)单击【创建】按钮就创建了一个名为“zhuce”的数据库文件，此时弹出一个相应的数据库设计窗口，我们将在此窗口中完成数据库的设计，如图14.38所示。图14.37【文件新建数据库】对话框图14.38数据库设计窗口

(5)双击【使用设计器创建表】命令，弹出一个表设计器窗口，我们要在其中完成表的结构设计，如图14.39所示。

(6)从该步骤开始创建“用户注册信息表”。将光标置于表设计器第1行的【字段名称】下并输入“yh_id”，在【数据类型】的下拉列表中选择“自动编号”，在【说明】中输入对该字段的文字说明，如图14.40所示。图14.39表设计器窗口图14.40字段yh_id设置

(7)按照上一步的方法继续在表中添加字段，最后的结果如图14.41所示。

(8)设置数据表的主键。右击yh_id字段，在弹出的快捷菜单中执行【主键】命令，此时在yh_id字段前出现一个小钥匙图标，表明yh_id字段已经被设置成数据表的主键了，如图14.42所示。图14.41数据表设计结果图14.42数据表主键设置

(9)执行【文件】→【保存】命令，在弹出的【另存为】对话框中将数据表保存为“yhzcb”表，然后单击【确定】按钮，如图14.43所示。

(10)当按照以上步骤将用户注册信息表设计完成后，就可以关闭表设计器窗口。这时可以看到数据库设计窗口中多了一个名为“yhzcb”的数据表，如图14.44所示。图14.43【另存为】对话框图14.44完成yhzcb数据表创建2.相关知识点

使用设计器创建表；

创建数据表字段；

创建数据表主键。在前一节已经创建了用户注册站点的数据库文件，下面就该创建动态脚本程序了。在创建动态脚本程序之前，将数据库和用户注册站点连接在一起是最基本的要求。原因很简单：动态脚本程序为了完成预定的任务，必定要操作数据，而数据被部署在数据库中，那么首先要将数据库和站点连接起来，使动态脚本程序能够很方便地操作数据库中的数据。

实现数据库和站点的连接方法有多种，现将在DreamweaverCS3中实现的两种方法介绍如下。14.5建立数据库连接

1.操作步骤

方法一：通过DSN(数据源名称)实现连接。

(1)在Dreamweaver中打开“zhuce.asp”页面，在右侧【应用程序】面板中的【数据库】面板下单击【】按钮，在弹出的下拉菜单中单击【数据源名称(DSN)】(见图14.45)。图14.45【数据源名称(DSN)】选择

(2)在弹出的【数据源名称(DSN)】窗口的【连接名称】文本框中输入数据源连接名称“zhuceb”，单击【数据源名称(DSN)】下拉列表后的【定义】按钮，如图14.46所示。

(3)单击【定义】按钮后，弹出【ODBC数据源管理器】窗口，切换到【系统DSN】选项卡，如图14.47所示。图14.46【数据源名称(DSN)】定义窗口图14.47【系统DSN】选项卡

(4)单击【添加】按钮，弹出【创建新数据源】窗口，在其中选择“DriverdoMicrosoftAccess(*.mdb)”项，如图14.48所示。

(5)单击【完成】按钮，弹出【ODBCMicrosoftAccess安装】窗口，在【数据源名】文本框中输入“zhuce”，【说明】文本框中输入一些说明性文字，如图14.49所示。图14.48【创建新数据源】窗口图14.49数据源命名

(6)单击【选择】按钮，弹出【选择数据库】窗口，在其中搜索用户注册站点的数据库文件，如图14.50所示。

(7)单击【确定】按钮，完成数据库的选择，如图14.51所示。

(8)单击【确定】按钮，返回到【ODBC数据源管理器】窗口，此时的下拉列表中多了一项名为“zhuce”的系统DSN，如图14.52所示。图14.50【选择数据库】窗口图14.51数据库的选择图14.52【ODBC数据源管理器】窗口

(9)单击【确定】按钮后，返回到【数据源名称(DSN)】窗口，在【数据源名称】的下拉列表中选中刚新建的DSN:zhuce，如图14.53所示。

(10)单击【确定】按钮，【数据库】面板就会出现新定义的连接名称，依次展开各加号，可以看到数据库中的数据表信息及其他已定义的信息，如图14.54所示。图14.53【DSN：zhuce】定义窗口图14.54数据库面板以上通过定义DSN完成了数据库与站点的连接，该方法的特点是：

①对数据库的管理方便，不需涉及到脚本程序；

②用户必须能够控制站点服务器的DSN定义。

方法二：通过自定义连接字符串实现连接。

(1)删除前面通过DSN定义的连接，如图14.55所示。图14.55【删除连接】命令

(2)在【数据库】面板下单击【

】图标，在弹出的下拉菜单中单击【自定义连接字符串】命令，如图14.56所示。图14.56【自定义连接字符串】命令

(3)在弹出【自定义连接字符串】窗口中的【连接名称】文本框中输入“zhuceb”，【连接字符串】文本框中输入“Driver={MicrosoftAccessDriver(*.mdb)};DBQ=E:\第十四章表单和开发动态网站\所有案例\zhuce\zhuceb\data\zhuce.mdb”。其中“E:\第十四章表单和开发动态网站\所有案例\zhuce\zhuceb\data\zhuce.mdb”是连接的数据库的绝对路径，如图14.57所示。图14.57【自定义连接字符串】窗口

(4)单击【确定】按钮，完成数据库与站点的连接。

通过自定义连接字符串创建的数据库连接，其最大的特点是使租用服务器空间的用户并不需要ISP服务商的帮助，即可完成数据库和动态脚本程序在Web站点服务器上的部署。2.相关知识点

自定义连接字符串来实现连接；

数据源名称实现连接；

系统DSN的定义；

数据库连接的删除。

1.操作步骤

建立记录集并显示数据库记录的具体操作步骤如下：

(1)打开Dreamweaver中的用户注册页面“zhuce”。打开【应用程序】面板，切换到【绑定】选项卡，单击【】按钮，在弹出的下拉菜单中执行【记录集(查询)】命令，如图14.58所示。14.6建立记录集并显示数据库记录图14.58【记录集(查询)】命令

(2)在弹出的【记录集】对话框中，定义记录集【名称】为“zhucebrec”，选择数据库【连接】为“zhuceb”，选择【表格】为“yhzcb”，选择数据库中的字段，定义记录排序的方法等，如图14.59所示。

(3)单击【确定】按钮，数据集定义完成，此时【绑定】面板中就会出现新定义的记录集，如图14.60所示。图14.59【记录集】对话框图14.60定义后的记录集

(4)定义记录集后可以将其绑定到相应的单元格中。方法是用鼠标将记录集中的yh_name字段拖到“zhuce”页面的用户名字段中。用同样的方法将其他数据域字段也拖到相应的单元格中，如图14.61所示。

(5)通过上面的步骤已经将记录集中的字段绑定到页面中的单元格，单元格中的内容实际上就是数据库中的动态文本，现打开Access中的数据表“zhuce”，向其中添加记录，如图14.62所示。图14.61将记录集绑定到单元格图14.62数据表记录添加

(6)返回到网页“zhuce.asp”，选定整个表格，执行【窗口】→【服务器行为】命令，打开【服务器行为】面板，单击【

】按钮，在弹出的下拉菜单中执行【重复区域】命令，接着弹出【重复区域】窗口，设置其显示记录数为“2”，如图14.63所示。图14.63重复区