动态网页基础.doc

《动态网页基础.doc》由会员分享，可在线阅读，更多相关《动态网页基础.doc（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、【精品文档】如有侵权，请联系网站删除，仅供学习与交流动态网页基础.精品文档.第9章 动态网站设计基础Dreamweaver CS5对动态网页设计提供了非常出色的支持，无论是网页的创建还是数据库程序的编写，均能通过可视化的方式完成，动态网页开发人员甚至不用编写任何程序代码，就可以使用Dreamweaver CS5快速创建具有各种功能的应用程序。9.1动态网页概述9.1.1动态网页的概念和特点所谓动态网页，就是该网页文件不仅含有HTML标记，而且含有程序代码，这种网页的扩展名一般会根据不同的程序设计语言来确定，如ASP文件的扩展名为.asp。动态网页能够根据不同的时间、不同的来访者显示不同的内容，

2、也可以根据浏览者的即时操作和请求，使其内容发生相应变化。如常见的新闻发布系统、留言系统、购物系统就是用动态网页来实现的。动态网页具有以下特点：(1)动态网页一般以数据库技术为基础，可以大大降低网站维护的工作量；(2)采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等；(3)动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时，服务器才返回一个完整的网页；(4)动态网页对搜索引擎检索存在着一定的问题。搜索引擎一般不可能从一个网站的数据库中访问全部网页，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

3、动态网页，并不是动态视觉特效。在一些网页上经常看到的滚动字幕、flash动画特效等，只是网页具体内容的各种表现形式。在很多时候，网页设计师都会采用静动结合的模式。在同一个站点内，根据功能模块进行划分，发挥两者各自的优势，取长补短。9.1.2 ASP语言简介ASP（Active Server Pages）是一个Web服务器端的脚本编写环境。借助它可以创建具有交互性的Web服务应用程序，例如用户管理、站内搜索等。ASP使用的ActiveX技术基于开放设计环境，把对象进行封装，通过程序来调用。ASP本身封装了一些基本组件，高级程序员也自己开发了更多的实用组件，这使得动态网页有了无限的扩展潜力。ASP

4、具有如下几个特点：1. 无需进行编译，直接解释执行。2. 无需用户端的浏览器支持，运行在服务器端。3. 面向对象，组件引用很方便，也可任意定制服务器组件进行扩充。4. 兼容性好，能使用任何ActiveX scripting 语言。使用ASP的一个最大好处在于可以借助ADO（Active Data Object）这种新型的数据访问模型极为方便地访问数据库，从而也成就了基于交互性的网站系统开发。网页浏览者可以通过浏览器来输入、更新和删除站点数据库服务器中的数据。通过使用ASP内置的File Access组件，可以读写站点服务器上的文件，来实现访客计数器、在线提醒等功能。甚至可以实现多个主页间共享信

5、息，来开发复杂的商务站点应用程序。ASP的工作原理很简单。当浏览器打开ASP网页时，Web服务器就会根据请求生成相应的HTML代码，再返还给客户端浏览器。如此，网页浏览者就看到了动态生成的网页，如图9-1所示。HTTP请求HTTP应答浏览器WEB服务器图9-1 ASP的工作原理借助于ASP，服务端可接收网页浏览者提交的信息并做出及时的反应，网页设计师不必再去花费过多的精力去对网页文件进行更新。当用户填写好表单数据并提交HTTP请求时，可以要求站点服务器去执行一个特意为表单所设定的应用程序，该程序会分析表单的输入数据，根据不同的数据内容，将相应的执行结果以HTML格式传送给浏览器。在处理数据库数

6、据时，Web服务器接收浏览器的请求，使用ODBC把对数据库的命令请求通过网络传送到数据库服务器，然后再从数据库服务器接收数据，并把产生的反馈数据反馈给浏览器，如图9-2所示。HTTP请求HTTP应答浏览器WEB服务器数据请求数据反馈数据库服务器图9-2 处理数据库数据的工作原理9.2 表单及其应用表单在生活中的应用随处可见，我们在商店填写购物单、在邮局填写包裹单、在银行填写存款单等等。表单在互联网上的应用更为普遍，注册邮箱，登陆论坛、博客，通过Web页收发邮件都需要填写表单。互联网中表单的作用可以概括为：为了实现浏览网页的用户同Internet服务器之间的交互，通过表单将用户的信息发送到Int

7、ernet服务器上，以供处理。9.2.1 表单简介表单是Internet上用户同服务器进行信息交互的主要工具。利用表单，Internet服务器可以从用户处搜集信息，例如收集用户资料、问卷调查等；利用表单，用户可以向服务器提交申请，挖掘有用信息，例如Web页邮箱登陆、Web页搜索等，图9-3和图9-4分别了Internet中表单的一些具体应用。图9-3 问卷调查表单图9-4 邮箱登陆表单实现用户与服务器的交互，一方面客户端需要搜集用户信息的表单对象；另一方面需要有处理这些信息的服务器端应用程序，服务器应用程序通常是指服务器端的脚本程序。表单中包含多种表单对象，也可以称作控件。例如文本框用于输入文

8、字，复选框用于在多个选项中选择多项，单选按钮用于在多个选项中选择其一，列表框用于显示选项列表，按钮用于发送命令等等。在Dreamweaver CS5中，表单对象位于“插入”工具栏的“表单”类别中，如图9-5所示。图9-5 表单对象9.2.2 创建HTML表单创建HTML表单的主要步骤如下。1打开一个页面，将插入点放在希望表单出现的位置。2选择“插入”“表单”，或选择“插入”面板中的“表单”类别，然后单击“表单” 图标。在“设计”视图中，表单以红色的虚轮廓线显示。如果看不到这个轮廓线，可选择“查看”“可视化助理”“不可见元素”。3在属性检查器（“窗口”“属性”）中设置HTML表单的属性，如图9-

9、6所示。图9-6 表单的属性1）在“文档”窗口中，单击表单轮廓以将其选定。2）在“表单名称”框中，键入标识该表单的唯一名称。此后，就可以使用脚本语言（如JavaScript或VBScript）引用或控制该表单了。3）在“动作”框中，键入路径或者单击文件夹图标导航到将要处理表单数据的页面或脚本。4）在“方法”弹出菜单中，指定将表单数据传输到服务器的方法。设置以下任一选项：默认值：使用浏览器的默认设置将表单数据发送到服务器。通常，默认值为GET方法。GET：将值附加到请求该页面的URL中。建议不要使用GET方法发送长表单，因为URL的长度限制在8192个字符以内。如果发送的数据量太大，数据将被截断

10、，从而会导致意外的或失败的处理结果。POST：在HTTP请求中嵌入表单数据。如果要收集机密用户名和密码、信用卡号或其它机密信息，POST方法可能比GET方法更安全。但是，由POST方法发送的信息是未经加密的，容易被黑客获取。若要确保安全性，可通过安全的连接与安全的服务器相连。5）在“MIME 类型” 弹出菜单中，指定对提交给服务器进行处理的数据使用 MIME 编码类型，（可选）。默认设置application/x-www-form-urlencode，的通常与POST方法一起使用。如果要创建文件上传域，需指定multipart/form-data MIME类型。6）在“目标”弹出菜单中，指定一

11、个窗口来显示被调用程序返回的数据，（可选）。_blank 在未命名的新窗口中打开目标文档。_parent 在显示当前文档的窗口的父窗口中打开目标文档。_self 在提交表单时所在的同一窗口中打开目标文档。_top 在当前窗口的窗体内打开目标文档。此值可用于确保目标文档占用整个窗口，即使原始文档显示在框架中时也是如此。4在页面中插入表单对象：1）将插入点置于表单中显示表单对象的位置。2）在“插入”“表单” 菜单中或者在“插入”面板的“表单”类别中选择表单对象。3）填写“输入标签辅助功能属性”对话框。该操作可以使表单对象具有辅助功能，并可以在以后更改辅助功能属性。4）设置对象的属性。5）在属性检查

12、器中为该对象输入名称。每个文本域、隐藏域、复选框和列表、菜单对象必须具有可在表单中标识其自身的唯一名称。表单对象名称不能包含空格或特殊字符，可以使用字母数字字符和下划线“_”的任意组合。6） 若要为页面中的文本域、复选框或单选按钮对象添加标签，可在相应对象旁边单击，然后键入标签文字。为文本域指定的标签是用于存储该域值（输入的数据）的变量名，这是发送给服务器进行处理的值。5调整表单的布局。可以使用换行符、段落标记、预格式化的文本或表格来设置表单的格式。不能将一个表单插入另一个表单中（即标签不能交迭），但是可以在一个页面中包含多个表单。设计表单时，记住要用描述性文本来标记表单域，以使用户知道他们要

13、回答哪些内容。例如，“键入您的名字”表示请求输入名字信息。表单的基本语法及格式为： 表单的HTML标记为，其主要属性的含义如下：name属性：表单的名字，在一个网页中用于唯一识别一个表单。action属性：用于定义将表单数据发送到什么地方，相当于属性面板中的“动作”。method属性：用于定义编译和发送表单数据的方法，属性值可以为get|post，相当于属性面板中的“方法”。9.2.3 常用表单对象1. 文本域文本域接受任何类型的字母、数字、文本等输入内容。文本可以单行或多行显示，也可以以密码域的方式显示。选中文本域，其“属性”面板如图9-7所示。图9-7 文本域属性面板字符宽度：指定域中最多

14、可显示的字符数。此数字可以小于“最多字符数”。例如，如果“字符宽度”设置为20（默认值），而用户输入了100个字符，则在该文本域中只能看到其中的20个字符。虽然在该域中无法看到剩余的字符，但域对象可以识别它们，而且它们会被发送到服务器进行处理。最多字符数：指定用户在单行文本域中最多可输入的字符数。可以使用“最多字符数”将邮政编码的输入限制为5位数字，将密码限制为10个字符等等。如果将“最多字符数”框保留为空白，则用户可以输入任意数量的文本。如果文本超过域的字符宽度，文本将滚动显示。如果用户的输入超过了最多字符数，则表单会发出警告声。行数：设置多行文本域的域高度（在选中了“多行”选项时可用）。禁

15、用：禁用文本区域。只读：使文本区域成为只读文本区域。初始值：指定在首次加载表单时域中显示的值。例如，可以通过在域中包含说明或示例值的形式，指示用户在域中输入信息。类：可以将CSS规则应用于对象。类型：指定域为单行、多行还是密码域。1）单行：生成一个input标签且其type属性设置为text。“字符宽度”设置映射为size属性，“最多字符数”设置映射为maxlength属性。代码格式为：2）多行：生成一个textarea标签。“字符宽度”设置映射为cols属性，“行数”设置映射为rows属性。代码格式为： 3）密码：生成一个input标签且其type属性设置为password。“字符宽度”和“

16、最多字符数”设置与单行文本域中的属性相同。当用户在密码文本域中键入时，输入内容显示为项目符号或星号，以保护它不被其他人看到。代码格式为：2. 复选框复选框允许在一组选项中选择多个选项。其属性面板如图9-8所示。图9-8 复选框属性面板选定值：设置在该复选框被选中时发送给服务器的值。例如，在一项调查中，可以将值 4设置为表示非常同意，将值1设置为表示强烈反对。初始状态：确定在浏览器中加载表单时，该复选框是否处于选中状态。类：为对象应用CSS规则。代码格式为：3. 单选按钮单选按钮代表互相排斥的选择。单选按钮通常以组为单位使用的，在同一组中的单选按钮必须使用相同的名称。在某单选按钮组（由两个或多个

17、共享同一名称的按钮组成）中选择一个按钮，就会取消选择该组中的其它所有按钮。其属性面板如图9-9所示。图9-9 单选按钮属性面板选定值：设置在该单选按钮被选中时发送给服务器的值。初始状态：确定在浏览器中加载表单时，该单选按钮是否处于选中状态。类：将CSS规则应用于对象。代码格式为：4. 列表/菜单（选择）列表/菜单（选择）在一个滚动列表中显示选项值，用户可以从该滚动列表中选择多个选项。“列表”选项在一个菜单中显示选项值，用户只能从中选择单个选项。在下列情况下使用菜单：只有有限的空间但必须显示多个内容项，或者要控制返回给服务器的值。对于菜单而言，用户可以具体设置某个菜单返回的确切值。列表/菜单属性

18、面板如图9-10所示。图9-10 列表/菜单属性面板选择：为该菜单或列表指定一个名称，该名称必须是唯一的。类型：指定该对象被单击时是显示菜单选项，还是显示列表选项。如果希望表单在浏览器中显示时仅有一个选项可见，则选择“菜单”选项。若要显示其它选项，用户必须单击向下箭头。选择“列表”选项可以在浏览器显示表单时列出一些或所有选项，以便用户可以选择多个项。高度：设置菜单中显示的项数（仅“列表”类型）。选定范围：指定用户是否可以从列表中选择多个项（仅“列表”类型）。类：使您可以将CSS规则应用于对象。初始化：时选定设置列表中默认选定的菜单项。列表值：打开一个对话框，可通过它向表单菜单添加项,如图9-1

19、1所示：图9-11 列表值对话框l 使用加号（+）和减号（）按钮添加和删除列表中的项。l 输入每个菜单项的标签文本和可选值。列表中的每项都有一个标签（在列表中显示的文本）和一个值（选中该项时，发送给处理应用程序的值）。如果没有指定值，则改为将标签文字发送给处理应用程序。l 使用向上和向下箭头按钮重新排列列表中的项。菜单项在菜单中出现的顺序与在“列表值”对话框中出现的顺序相同。在浏览器中加载页面时，列表中的第一个项是选中的项。代码格式为： 选项显示内容 选项显示内容列表与菜单方式的主要区别在于，前者在中的size属性取大于1的值，此值表示在选择栏中不拖动滚动条便可以显示选项的数目。5. 文件域文

20、件域使用户可以浏览到其计算机上的某个文件并将该文件作为表单数据上传。文件域的外观与其它文本域类似，只不过，文件域还包含一个“浏览”按钮。用户可以手动输入要上传的文件的路径，也可以使用“浏览”按钮定位并选择该文件。其属性面板如图9-12所示。图9-12 文件域属性面板文件域名称：指定该文件域对象的名称。字符宽度：指定域中最多可显示的字符数。最多字符数：指定域中最多可容纳的字符数。如果用户通过浏览来定位文件，则文件名和路径可超过指定的“最多字符数”的值。但是，如果用户尝试键入文件名和路径，则文件域最多仅允许键入“最多字符数”值所指定的字符数。【注意】表单标签中必须设置ENCTYPE=multipa

21、rt/form-data来保证文件被正确编码。另外，表单的传送方式必须设置为POST。6. 按钮使用按钮可将表单数据提交到服务器，或者重置表单。还可以指定其它已在脚本中定义的处理任务。例如，可使用按钮根据指定的值计算所选商品的总价。其属性面板如图9-13所示。图9-13 按钮属性面板按钮名称：为该按钮指定一个名称，“提交”和“重置”是两个保留名称。值：确定按钮上显示的文本。动作：确定单击该按钮时发生的动作。提交表单，在用户单击该按钮时提交表单数据以进行处理，该数据将被提交到在表单的“动作”属性中指定的页面或脚本。重置表单，在单击该按钮时清除表单内容。无，指定单击该按钮时要执行的动作。例如，可以

22、添加一个JavaScript脚本，使得当用户单击该按钮时，打开另一个页面。类：将CSS规则应用于对象。“提交”按钮代码格式为：9.3搭建Web服务器Web服务器并不特指某一台具体的物理计算机，从概念上讲，Web服务器是一种软件，它能够管理各种Web文件，并对向Web服务器提出HTTP请求的客户端进行HTTP响应，将响应的结果在客户端的浏览器中进行显示。大多数情况下，Web服务器和浏览器位于不同的机器上，但它们也可以在同一台计算机上并存。比较常见的Web服务器有Apache、TomCat和IIS。作为同是微软产品的IIS和ASP，两者的结合能够发挥较好的效能，因此，我们在此以IIS作为要使用的W

23、eb服务器。9.3.1安装IISIIS（Internet Information Services，互联网信息服务），是由微软公司提供的基于运行Microsoft Windows的互联网基本服务。IIS的核心功能包括：创建和维护HTTP连接、读取HTTP请求和写HTTP响应、编辑HTTP头信息、获取客户端认证信息、管理异步的连接、映射URL到物理地址、管理和运行应用程序、传输文件。其中ASP扩展了IIS的基本功能，能够创建更丰富的Web应用程序开发环境。在Windows 2000 Server和Windows 2000 Advanced Server以及Windows 2003等版本的操作系统

24、中，IIS组件是随着操作系统的安装一起安装完成的。但在Windows 2000 Professional和Windows XP Professional 版本的操作系统中，默认安装是不带IIS组件的。因此，在没有安装IIS组件的Windows操作系统中，必须在Windows操作系统安装完成以后，通过添加Windows组件的方式重新安装IIS组件。其中，Windows 2000 Professional中安装的IIS版本是IIS5.0，Windows XP Professional中安装的IIS版本是IIS5.1，Windows 2003 Server中安装的IIS版本是IIS6.0。下面，我们

25、以Windows XP Professional为例，说明IIS5.1的安装过程。从“开始”菜单执行“设置”中的“控制面板”，在打开的“控制面板”对话框中双击“添加或删除程序”，打开“添加或删除程序”对话框，如图9-14所示。图9-14 添加或删除程序对话框在“添加或删除程序”对话框中，单击“添加/删除Windows组件”选项，打开“Windows组件向导”对话框，如图9-15所示。选中“Internet信息服务（IIS）”，如要查看IIS组件包含的子组件内容，可单击右下角的“详细信息”按钮，打开如图9-16所示的“Internet信息服务（IIS）”对话框，可选择是否安装其中的Interne

26、t信息服务组件的子组件。完成后，单击图9-16中的“确定”按钮，将返回到图9-15所示的对话框，然后按照Windows组件安装向导的提示，完成IIS组件的安装。【注意】在安装IIS的过程中，需要Windows XP Professional操作系统安装系统盘才能完成安装。 图9-15 Windows组件向导对话框 图9-16 Internet信息服务（IIS）对话框9.3.2配置Web服务器IIS5.1一旦安装成功，在启动Windows XP操作系统时，默认状态下，IIS也随之启动。要查看IIS的服务内容，配置相应的管理选项，并进行相关的操作，可通过Internet信息服务管理单元来完成。In

27、ternet信息服务管理单元提供了一些服务器管理选项，用于控制网站或FTP站点的内容以及对这些站点的访问。例如，在将站点上载到Intranet或Internet之前要对站点进行测试，则可以使用此工具测试设置并查看设置在最终服务器上的精确效果。要打开Internet信息服务管理单元，主要有两种方法：1从“开始”菜单中打开“控制面板”，在“控制面板”窗口中打开“管理工具”，如图9-17所示，然后在“管理工具”窗口中打开“Internet信息服务”管理单元，如图9-18所示。2. 从“开始”菜单的“运行”对话框中执行命令Inetmgr，同样可打开“Internet信息服务”管理单元。图9-17 Wi

28、ndows XP的“管理工具”窗口 图9-18 Internet信息服务管理单元在此，我们主要关心ASP应用程序的运行环境和其他与ASP应用程序相关的问题，所以下面就Web服务器的配置步骤做出说明。IIS安装完成后，包含一个默认站点，支持ASP开发技术。无论站点位于Intranet还是Internet，提供内容的原理是相同的。首先必须将Web文件（如.asp文件）放入服务器的目录中，这样用户就可以建立HTTP连接，并使用Web浏览器查看文件。但是，除了仅仅在服务器上存储文件之外，还必须管理站点的部署方法，合理计划站点的发展。要配置站点的相关内容，必须使用Internet信息管理单元。打开Int

29、ernet信息管理单元，如图9-18所示，选中“默认站点”，从“操作”菜单中执行“属性”，打开如图9-19所示的默认站点属性对话框，并进行相关设置。图9-19 默认站点属性对话框-网站要正确地在该对话框中完成相关设置，首先需要我们了解一下“网站”、“主目录”选项卡中的有关内容。1. 网站IP地址：计算机的主IP地址，系统自动设置一个缺省的Web站点并绑定在该地址上。如果未指定特定的IP地址，此站点将响应所有分配给此计算机且没有分配给其他站点的IP地址，这将使此网站成为默认网站。TCP端口：确定正在运行服务的端口。端口号是必需的，此文本框不能为空，默认为80。可以将此端口更改为任意唯一的TCP端

30、口号；但是，客户端必须事先知道“应请求此端口号”，否则，请求将不能连接到服务器。连接超时：设置服务器断开非活动用户之前应保持连接的时间长度（以秒为单位）。这确保了在 HTTP 协议无法关闭某个连接时，能够关闭所有的连接。保持HTTP连接：允许客户端与服务器保持打开的连接，而不是根据每个新请求重新打开客户端连接。该选项默认为启用，禁用它，可能会降低服务器性能。2. 主目录每个网站必须有一个主目录。主目录是发布网页的中心位置，默认位置为“c:inetpubwwwroot”，它包含带有欢迎内容的主页或索引文件，并且包含与所在站点其他网页的链接。对主目录内容的访问权限，一般包含“读取”、“记录访问”、

31、“索引资源”三项是可用的，其他的权限一般设置为不可用。要设置主目录的相关内容，可在图9-19中单击“主目录”选项卡，显示结果如图9-20所示。图9-20 默认网站属性对话框-主目录在上述对话框中完成相关设置后，单击“确定”按钮关闭该对话框，然后在浏览器的地址栏中输入127.0.0.1或http:/localhost/localstart.asp，若出现IIS欢迎内容的主页，就说明IIS服务器安装成功了。其次，值得注意的是应用程序的设置问题。要使用ASP技术开发Web应用程序，设置其中使用的主脚本语言，需在图9-20中单击“配置”按钮，打开“应用程序配置”对话框，并单击其中的“选项”，在图9-2

32、1中可看到这里默认的ASP语言为VBScript。图9-21 应用程序配置对话框在设置了网站的IP地址和TCP端口号，并将网页文件上传或复制到设定的主目录以后，就可以通过浏览器访问Web站点了。如果Web站点和浏览器在同一台计算机上，假设在站点的主目录下有名为index.asp的文件，则可通过在Internet Explorer浏览器的地址栏，使用如下形式的URL访问：http:/127.0.0.1/index.asp 或 http:/localhost/index.asp如果要通过Internet或Intranet访问网站，假设您申请到的IP地址为192.168.10.1，且具有Web访问的

33、权限，被分配的域名为，则可以在浏览器地址栏中通过使用如下形式的URL访问该Web站点：http:/192.168.10.1/index.asp 或 【注意】 IIS 5.1不仅仅是一个通过HTTP提供WWW服务的Web服务器，还能够提供服务支持FTP（File Transfer Protocol, 文件传输协议）和SMTP（Simple MailTransfer Protocol，简单邮件传输协议）。9.3.3 创建和运行第一个ASP网页在安装和配置好Web服务器，并对ASP的工作原理和工作方式有了基本了解之后，我们使用Dreamweaver来创建第一个ASP网页。启动Dreamweaver

34、CS5，在“起始页”中选择“ASP VBScript”，如图9-22所示；或者选择“文件”菜单中的“新建”命令，弹出“新建文档”对话框，然后在“类别”栏选择“动态页”，进而选择“ASP VBScript”，如图9-23所示，单击“创建”按钮。应用这两种方法都可创建ASP文档。图9-22 在“起始页”中新建ASP网页 图9-23 “新建文档”对话框进入Dreamweaver“文档”窗口后，在其代码窗口和中键入如下代码， Dim dtmHour dtmHour = Hour(Now() If dtmHour 12 Then strGreeting = 早上好！ Else strGreeting =

35、 您好！ End If 将该代码段保存到文件名为welcome.asp的网页文件中，保存的位置为Web服务器的主目录，如图9-24所示。然后按F12进行预览，便可以看到在您的浏览器中显示的结果如图9-25所示。如果现在的时间为下午13点，则在浏览器窗口中显示“您好！”。图9-24 第一个ASP程序代码 9-25 浏览器显示结果在浏览器窗口中，选择“查看”菜单中的“源文件”命令，在标记之间只看到“您好！”，说明ASP在服务器端执行包含在“”中的命令，将执行结果输出到客户端浏览器。9.4 创建数据库连接 动态页面设计最能发挥其优势的领域是存取数据库中的数据。制作数据库应用程序时，首先建立数据库连接

36、，然后通过这个数据库连接建立记录集，最后对记录集进行查询、读取或者写入，以实现对数据库的访问。建立数据库的连接方式有多种，这里介绍一下通过DSN方式建立数据库连接。9.4.1 创建ODBC连接设置DSN最常用的方法是在Windows操作系统的控制面板中进行设置。进入控制面板，双击“管理工具”图标，出现“管理工具”窗口，该窗口中有一个“数据源（ODBC）”图标，如图9-26所示。图9-26 “管理工具”窗口双击“ODBC数据源”，打开“ODBC数据源管理器”对话框，选择“系统DSN”选项卡，如图9-27所示。图9-27 “ODBC数据源管理器”对话框 图9-28 “创建新数据源”对话框在图9-2

37、7中单击“添加”按钮，出现“创建新数据源”对话框，如图9-28所示。选择某种数据库，这里选择Driver do Microsoft Access（*.MDB），单击“完成”按钮，弹出“ODBC Microsoft Access安装”对话框，如图9-29所示。在“数据源名”文本框中输入“myfirstdsn”，然后单击“选择”按钮，系统弹出“选择数据库”对话框，如图9-30所示。图9-29 “ODBC Microsoft Access安装” 图9-30 “选择数据库”对话框在图9-30中，选择数据库的存放位置，并选择数据库，这里选择myfirstdb.mdb。选定数据库后，单击“确定”按钮，回到

38、“ODBC Microsoft Access安装”对话框，如图9-31所示，此时会看到添加后的DSN。图9-31 添加DSN后的对话框单击“确定”按钮，这样就建立好了系统DSN，建好的DSN名为“myfirstdsn”。以后如果需要使用建立的数据库，就可以直接引用“myfirstdsn”，而不必考虑它的实际物理路径了。9.4.2 在Dreamweaver中建立数据库连接启动Dreamweaver CS5，创建ASP文档，将该文档保存为myfirstdb.asp。1. 添加连接在“数据库”面板中单击“添加连接”按钮，显示菜单选项，如图9-32所示。（注意：若“数据库”面板没显示，选择“窗口”菜单

39、中的“数据库”命令）。图9-32 选择数据源名称从弹出的菜单中选择“数据源名称（DSN）”，弹出“数据源名称（DSN）”对话框，在“连接名称”文本框中输入“myfirstdata”，在“数据源名称（DSN）”文本框中选择“myfirstdsn”，如图9-33所示。图9-33 “数据源名称（DSN）”对话框单击“测试”按钮，若测试通过，则提示如图9-34所示对话框。单击两次“确定”，连接添加成功，此时“数据库”面板就会显示新定义的连接“myfirstdata”，单击它前面的加号，就会看到数据库myfirstdb.mdb中的maintable表，如图9-35所示。图9-34 通过测试提示 图9-3

40、5 成功添加连接9.5 编辑数据表记录9.5.1 创建记录集记录集是通过Select命令从数据库中查询出来的数据集合的。在创建了数据库连接之后，就可以建立记录集，并对记录集进行查询、读取或者写入，以实现对数据库的访问了。这里介绍一下通过Dreamweaver CS5提供的图形方式建立记录集并动态显示记录集的方法。 1. 创建记录集（1）选择“插入”面板中的“数据”类别，如图9-36所示。图9-36“插入”面板“数据”类别（2）单击“记录集”按钮，弹出“记录集”对话框，如图9-37所示。在“名称”文本框中输入“myfirstRecordset”，在“连接”列表框中选择“myfirstdata”，

41、在“表格”列表框中选择“maintable”，在“列”选项组中选择“选定的”，然后按着Ctrl键不放依次选择username、userid、sex和age字段。最后单击“确定”，完成记录集的创建，此时“绑定”面板如图9-38所示。图9-37 “记录集”对话框 图9-38 “绑定”面板2.使用动态表格显示记录集1）插入动态表格单击“插入”面板“数据”类别中的“动态数据”按钮，弹出列表菜单，如图9-39所示。选择“动态表格”，弹出“动态表格”对话框，如图9-40所示。在“记录集”中选择“myfirstRecordset”，“显示”设置为“所有记录”。图9-39 动态数据菜单 图9-40 “动态表格

42、”对话框2）修改动态表格的外观在图9-40中单击“确定”按钮，就实现了动态表格和记录集“myfirstRecordset”的绑定，并完成了动态表格的插入，设计视图中会显示如图9-41所示动态表格的外观。图9-41 动态表格的外观动态表格的外观图中，第一行是静态文本，是表中的字段名，将会在网页中原样显示；第二行是动态文本，会根据数据库中的内容变化动态显示。为了显示更加直观，可将第一行中的静态文本username、userid、sex和age分别修改为姓名、学号、性别和年龄，如图9-42所示。图9-42 修改后的动态表格外观3）记录集在网页中显示保存文件，按F12，网页上显示了包含在表mainta

43、ble中的所有记录，显示结果如图9-43所示。图9-43 动态表格显示结果9.5.2 插入记录 通过记录集不但可以实现数据库中记录的显示，还可以向数据库是写入数据，下面介绍一下插入数据库记录的方法。1.建立数据采集表单创建一个ASP文档，将该文档保存为insertrecord.asp。在设计视图中插入一个7行2列的表格，然后设计如图9-44所示的表单网页，设置表单名称为“dataform”。网页中各元素设置如下：学号：文本字段、字符宽度10、最多字符数8、类型“单行”，命名为text_sid。姓名：文本字段、字符宽度20、最多字符数8、类型“单行”，命名为text_sname。性别：文本字段、

44、字符宽度4、最多字符数2、类型“单行”，命名为text_sex。出生日期：文本字段、字符宽度10、最多字符数8、类型“单行”，命名为text_birthday。学院：文本字段、字符宽度20、最多字符数18、类型“单行”，命名为text_dname。提交按钮：插入按钮、动作为“提交表单”。重置按钮：插入按钮、动作为“重置表单”。图9-44 表单网页另外，再建立一个名insertok.htm文件，内容如图9-45所示。图9-45 insertok.htm文件内容2.添加数据的服务器行为在“数据库”面板中单击“服务器行为”选项卡，然后单击“添加”按钮，显示菜单选项，如图9-46所示。（注意：若“数据

45、库”面板没显示，选择“窗口”菜单中的“数据库”命令）。从弹出的菜单中选择“插入记录”，弹出“插入记录”对话框，如图9-47所示。图9-46 服务器行为菜单 图9-47 “插入记录”对话框在“插入记录”对话框中，设置“连接”项为“myfirstdata”，“插入到表格”项为“maintable”，在“插入后，转到”项为刚建立的文件insertok.htm。设置完成后，“插入记录”对话框如图9-48所示。图9-48 设置“连接”、“插入到表格”和“插入后，转到”后的对话框在图9-48所示的对话框中，在“获取值自”下拉列表中选择dataform选项，然后通过“表单元素”和“列”建立表单上各元素与表中字段的一一对应关系。创建方法如下：选择“表单元素”中的“text_sid”，然后在“列”下拉列表框选择“use