《ASP动态网页设计与应用（第2版）》第1章 ASP基础

第?1 章? ASP?网站开发基础?1.1 动态网页概述?1.1.1 静态网页与动态网页现在是信息化的时代，网络的影响已深入人们生活的方方面
面，在所有网络中，对人们影响最大的就是互联网（Internet）。互联网起源于上世纪? 60? 年代末的美国的? ARPA? 网（
ARPANET），后来，逐渐发展成为连接全球的信息网络。在近年来，互联网已经成为人们交流、学习和商业往来的一个重要工具。使用浏览器
浏览网络信息和收发电子邮件已经和写字一样成为人们工作、生活的重要技能。互联网能够风靡世界，除了它拥有快捷的全球通信功能外，还在于它
具有巨大的网络信息资源和各种人们所需的服务。万维网（WWW，World Wide Web）浏览、电子邮件（E-mail）、网络论坛
（电子公告牌，BBS）、新闻组（NewsGroup）、文件传输（FTP）和电子商务等都是互联网中最常用的基本服务内容。万维网 WW
W?又称为?3W，是网络中的基本服务内容。网络中有着数以亿计的网络信息，这些信息大多以网页形式存在。万维网浏览就是通过用户计算机中
的浏览器（如?IE，?NetScape）去浏览网页中所提供的信息。基本上来说，万维网中可以找到用户所需消息中的绝大多数：想看新闻，
可以在网上看到当天最新的新闻，而不需要去买报纸；想出门旅游，可以在网上找到旅游景点的介绍，气象信息、住宿情况、餐饮服务等内容；做科
研搞论文，可以在网上找到该研究方向的闻新动态，发展进度等等。有了万维网浏览，就真的可以做到古人常说的“秀才不出门，能知天下事”了。
早期的万维网网页都是静态网页。所谓静态，是指网页的内容都是事先预备好的——就好像报纸一样，用户只能在网络上浏览信息，而不能将用户的
信息传到网络上。静态网页不能进行信息的交互，这就大大的制约了万维网的应用。随着网络技术的发展，后来又出现了动态网页。所谓动态，是指
网页上显示的内容是可以变化、可以交互的。可以改变是指随着条件的不同，同一网页可以出现不同内容；可以交互是指网站与用户间的信息可以互
通，用户的信息可以传送到网络上，供网站收集、分析，网站可也可以根据用户的信息来发给用户相应的信息。动态网页的出现，使网络的应用得到
了极大的扩展，用户可以在网络上发布自己的信息，网站也能以此来收集用户信息，进行分析，电子邮件、网络论坛、电子商务等，都得益于动态网
页的发展。?1.? 静态网页与?HTML?静态网页由单纯的超文本标记语言（HTML，Hypertext?Markup?Langua
ge）进行编辑，在存储时以 HTML 方式（文件扩展名为.htm/.html）存储。网络中浏览的静态网页都是一个个的?HTML?文
件，这些网页中可以包含有文字、图片、动画和声音，以及能够跳转到其它文件的超链接。这些所有的东西都是以超文本标记语言方1?式进行编辑
。一个?HTML?文件包含了一些特殊的命令来告诉用户的浏览器应该如何显示文本、图像以及网页的背景。这些命令加入到文本文件中，被称为
?HTML?标记。如果在浏览器显示网页时查看网页的文本，可以看见在尖括号中的?HTML 标记。下面是的例子说明了一个简单的静态 H
TML 网页的是如何实现的。打开?windows?中的记事本，把下面的内容输入到记事本中，将文件以名称?test.htm 进行存储
。注意，在存储时要选择“文件类型”为“所有文件”。??? olor="red">这是一个测试。? ?

?

测试?OK。 I>?

???在“资源管理器”中双击打开?test.htm 文件，可以看到如图?1
-1?所示的内容。图 1-1 HTML 网页上面这段内容就是一个使用 HTML 编辑的简单网页。静态网页中的内容在显示时都是不会改
变的，设计时是什么样，显示时就是什么样。对于上面的网页，在显示网页的?IE?浏览器“查看”菜单下单击“源文件”命令，可以在打开的记
事本中看到网页的源文件，如图?1-2?所示。图 1-2 网页源文件可以看到，这里的源文件代码与设计时的代码完全相同。下面对这个使用
超文本标记语言编辑的简单静态网页进行简单说明。HTML? 网页文件都2?是以标记开始，以标记结束。标记<
body>和中放置的是文件中要显示出来 的内容 。其中 的 与

为一对 标签， 表示其 中的内 容居中显 示 。?与也是一对标签，表示其中的文字字
体颜色（fontcolor）为红色（red）。?与则表示其中的文字为斜体。了解了标签的用途后，可以很容易地理解在浏览
器中所显示出来的内容。超文本标记语言就是这样一种语言，它用简单的标记来声明所包含的内容。在下一章中将学习更多的超文本标记语言知识。
早期的?HTML?设计都是使用记事本之类的文本编辑软件来设计，设计者需要能够灵活地运行这些?HTML?标签来创建网页，而且网页的效
果都只能在完成后运行时才能看出来，因此开发网页也是专业人士才能干的活。现在，能进行网页编辑的软件已是遍地开花，像? Dreamwe
aver、Frontpage? 这样所见即所得的网站开发软件大行其道，使得不懂 HTML 语言的普通用户也可以过一把网页编辑的瘾。
?2.? 动态网页动态网页与静态网页从设计到实现都有所不同，动态网页是在?HTML?的基础上嵌入特殊的程序化的编码来设计，编码可以
使用编程语言，如 C、Java、Visual?Basic 等，也可以使用专门的脚本（Script）语言，如?VBScript、Ja
vaScript、PHP?等。同时，在存储时也需要使用不同的文件扩展名，如.asp、.jsp、.php? 等。在浏览时，除了需要有
浏览器的支持外，还需要有支持相应的系统环境如?ASP、JSP?或?PHP?对其中的编码进行编译、解释，在经编译、解释后才能在浏览器
中显示出正确的内容。下面用一个例子来对动态网页进行进一步说明。在记事本中输入下面的内容，文件保存时取名为?test.asp。? tml>?欢迎学习?A
SP?动态网页技术!

?<%?t=time()?h=hour(t)?if?h>12?then?clr="blu
e"?else?clr="green"?end?if?%>?"?>
现在时间是：<%=t%>???由于文件扩展名为.asp，因此，在浏览时需要有? ASP?
运行环境的支持（在下一节将学习3?JSP? 环境的搭建），否则不能浏览到正确内容。浏览的结果按系统时间的不同会有所改变，当时间为
?12?点以前时，显示的时间文字为绿色，12?点以后显示的时间文字为蓝色，如图?1-3?所示。图 1-3 动态网页在显示网页的?I
E?浏览器“查看”菜单下单击“源文件”命令，可以在打开的记事本中看到所示网页的?HTML 编码内容，如图?1-4 所示。图 1-4
浏览动态网页中的 HTML 编码可以看到，这里的内容与上面编写网页文件时的内容并不完全相同，这是由于动态网页必须经由系统环境进行
编译、解释，这里看到的只是网页内容经编译、解释后得到的? HTML?文本。上面的代码中，使用“<%”与“%>”括起来的部分是动态部
分，这些内容在浏览时是经服务器端编译后，再将执行得到的结果与原文件中其他的?HTML?内容一起发送到客户浏览器中显示出来，在浏览器
的得到的?HTML?编码只是动态网页在服务器端执行的结果，而不是全部的动态网页内容。其中，在?HTML 中嵌入的动态内容使用了两种
方式，?ASP?的脚本代码段和?ASP?的表达式。如下所示的是?ASP?代码段：?<%?t=time()?h=hour(t)?if
?h>12?then?clr="blue"?else?clr="green"4?end?if?%>?ASP?的脚本代码段都是包括在
“<%”和“%>”之间，在这里可以写入大量的脚本代码，可以是上面所示的若干行脚本程序代码，也可以是函数等内容。上面的代码中，“t=
time()”表示获取系统当前时间，并将其赋值给变量?t。“h=hour(t)”表示获取变量?t 中的小时数，接下来的“if …e
lse …end?if”是一个判断语句，它对?h 进行判断，当?h>12?时，将变量?clr 赋值为?blue，否则赋值为?gre
en。除了脚本代码段外，网页中还使用了形如“<%=clr%>”这样的?ASP?动态表达式，它的含义是将等号（=）后面部分的内容直接
显示出来。例如：?"?>现在时间是：<%=t%>?在
图中可以看到，时间?t?的值为?14:07:49，在执行前面的“if …else …end?if”后，clr?的内容为?blue。
因此，上面的表达式<%=clr%>和<%=t%>在显示其内容后，得到下面的?html?语句：? or?=?"blue"?>现在时间是：14:07:49?最后，在客户端浏览器中显示出蓝色文字：“现在时间是：14:0
7:49”。?<%=clr%>这种表达方式实际上是一个简化的?response.write 方法，用于在当前位置显示变量?clr?
的值，在后面的章节中学习 response.write 方法将进一步进行介绍。从这个例子可以知道，动态网页是由?HTML?内容与动
态网页的编程语言相结合，一起来完成动态内容的，在浏览时，动态网页先经服务器端的系统环境（这个例子中是?ASP?环境）编译、解释，得
到的内容再由客户浏览器显示出来。?1.1.2 ASP、JSP 与? CGI?从上面的学习知道，动态网页的实现需要有相应的系统环境，
例如，上例中使用的?ASP。除?ASP?外，还有?ASP.NET、JSP、CGI、PHP?等等，相应的动态网页扩展名为? asp、
aspx、jsp、?cgi、php 等等。目前，在国内的动态网站开发中，ASP? 应用最为广泛，而? JSP? 由于是一种较新的技
术，国内采用的较少。但在国外，JSP?已经是比较流行的一种技术，尤其是电子商务类的网站，多采用?JSP。对于初学者来说，学习?AS
P?的基础比?JSP?要求低，易于入门，ASP?中的脚本语言?VBScript?和?JScript?比?JSP?中的?JAVA 语
言学习起来也更容易一些。?1.2 ASP 服务器的安装与配置?1.2.1?ASP 服务器的组成在上一节的学习中，知道了?ASP?动
态网页的执行分为客户端的请求和服务器端对动态网页的解释执行。ASP?动态网页的执行过程如图?1-5 所示。5?图 1-5 ASP
的执行过程当用户从浏览器输入了要访问?ASP?动态网页文件的?URL?地址后，浏览器就将这个?URL?请求发给?Web?服务器，如
果服务器上装了?ASP?服务系统，当检查到是.asp 后缀名时，就调用?ASP? 服务程序。ASP? 服务程序读出相应.asp?
文件，对其进行解释执行，如果其中含有对数据库的操作，则通过数据库驱动程序来访问数据库。ASP? 解释并执行命令后，将结果（此时已是
?HTML 格式的静态网页）回传给 Web?服务器。然后，Web?服务器再把结果发给客户端浏览器，在浏览器看到的只是执行的最终结果
。因此，在学习?ASP?之前，除了有一个可能浏览网页的客户端浏览器外，还需要搭建一个可以运行?ASP?的服务器环境。在学习中，为了
测试的方便，服务器和客户端可以都运行在同一台计算机中，只是在浏览器中所访问的?URL 地址格式如下：?http://localho
st:端口号/路径/网页文件名其中，localhost? 表示本地主机，端口号表示运行? Web? 服务的端口。端口号可省略，此时
为默认值?80。例如：?http://localhost/test.asp?上面?URL 表示通过默认端口?80?访问本地主机当前
网站根目录下的?test.asp 文件。?http://localhost:8080/aspteach/index.asp?上面?
URL? 表示通过端口? 8080? 访问本地主机当前网站根目录下的? aspteach? 目录中的?index.asp? 文件
。这里的? aspteach? 目录可以是网站根目录下的一个实际的物理目录，也可以是一个虚拟目录（既该目录真实路径并不在网站根目录
下，只是通过?IIS?中的设置使其在应用中就像是在网站根目录下一样）。客户端浏览器可以使用常用的网页浏览器，如?IE、FireFo
x（火狐）、chrome（谷歌）等都可以。服务器端则需要专门的服务器软件，包括：操作系统、ASP? 服务程序、Web? 应用程序服
务器、后台数据库等等。本书所用到的?ASP?服务器中，操作系统使用的是?Windows?2003?Server，Web?服务和?A
SP?服务是使用的?Windows? 2003? Server?所带的?IIS6.0，后台数据库使用了?Microsoft? SQ
LServer?2005?和?MS?Access2003?（Microsoft?Office 2003?组件之一）下面，。将学习?
IIS6.0?与?Microsoft?SQL?Server?2005?的安装。6?1.2.2? IIS?的安装与网站的设置?IIS
?（?Internet? Information? Server?， 互 联 网 信 息 服 务 ） 是? Windows? 20
00/XP/2003?/Vista/Windows7?的组件之一，如果安装的是?Windows?2000?Server?或?Win
dows?2003?Server?以上操作系统，则在安装时会提示安装相应版本的?IIS。如果安装的是?Windows? 2000?
Professional?等操作系统，默认情况下不会安装?IIS，需要进行手工安装。下面以?Windows?2003?Serve
r?为例，来说明?IIS?的安装过程。?1.2.3 SQL?Server2005?数据库的安装作为电子商务中的必须部分，一个有用的
动态网站是离不开数据库的支持的，ASP? 可以通过?ODBC（Open Database?Connectivity，开放数据库连接
）来实现对后台数据库的访问。?ASP?可以访问的数据库有很多，包括 Microsoft? SQL? Server、Microsof
t? Access、Oracle 和?DB2? 等。为了便于学习，本书中案例的数据部分采用使用较多的? Microsoft? SQ
L? Server? 和?Microsoft? Access? 数据库，其中，Microsoft? Access? 是解决桌面应用
的小型数据库，它包含在?Microsoft?Office 套件中，在安装?Office 时一起安装。?Microsoft? SQL
? Server? 是面向企业级应用的大型数据库，在商务网站应用中非常广泛。?Microsoft?SQL?Server?需要单独进
行安装，下面将学习安装的?Microsoft?SQL?Server2005。?1.2.5? 网站开发工具?Adobe?Dreamw
eaver CS5?在上面的程序案例中，使用了记事本来编辑网页，在一些比较小的，内容不太复杂的网页中使用这种方法是可行的，但是对于
大型网站，内容复杂的网页，再使用记事本来进行 JSP?开发就显得效率低下，力不从心。面对网络的开发应用，很多公司都推出了自己的网站
开发工具，本书中采用的是? Adobe?公司的?Adobe Dreamweaver?CS5。Dreamweaver? 原为?Mac
romedia?公司所有，后来?Macromedia?公司被?Adobe 公司收购，所以称为?Adobe?Dreamweaver。
当前最新的 Dreamweaver?为?Adobe Dreamweaver? CS5，它是?Adobe?CS5?套件中的一个部分。
Adobe?CS5?分为大师典藏版、设计高级版、设计标准版、网络高级版、产品高级版五大版本，各自包含不同的组件，总共有? 15?
个独立程序和相关技术，具体包括? Photoshop? CS5、?Dreamweaver?CS5、Fireworks?CS5、Il
lustrator?CS5、InDesign?CS5?等等。?Adobe?CS5?在?Windows?2003?中的安装比较简单，
这里就不再详述。?1．Adobe?Dreamweaver?CS5 开发环境安装好?Dreamweaver?CS5?后，运行程序，打
开?Dreamweaver?CS5?开发环境，如图?1-34?所示。7?图 1-34 Dreamweaver CS5 开发环境 1
在设计状态下，Dreamweaver?CS5?设计环境如图?1-35 所示。图 1-35 Dreamweaver CS5 开发环境
2由图?1-35 中可以看出，Dreamweaver? CS5?开发环境主要由“菜单”栏、各种工具栏、“文档窗口”“属性”栏（也
叫“属性”面板或“属性”检查器）和右侧可折叠的“浮动面板”、等组成。单击“查看”→“工具栏”→“×××”菜单命令，可打开或关闭“文
档工具栏”等各8?个工具栏。单击“窗口”→“×××”菜单命令，可打开或关闭“属性”栏和右侧的各种浮动面板。单击“浮动面板组”右上角
的图标状态。按钮，即可将“浮动面板”在面板状态和图标状态间进行切换，如图?1-36?所示。在设计时，为使文档得到最大可视化效果，通
常将浮动面板切换到图 1-36 浮动面板的面板状态与标签状态关于各个工具栏和浮动面板的具体功能，将在后面的学习中进行详细介绍，在此
略过。?2．在?Adobe?Dreamweaver?CS5 中创建网站在网站的开发中，首要的第一步就是创建网站，接下来，将学习如何
在?Dreamweaver?CS5?中创建网站。（1）设置站点根目录单击“站点”菜单下的“新建站点”菜单命令，打开“站点设置对象”
对话框。如图?1-37?所示。图 1-37 设置站点9?在“站点设置对象”对话框左侧单击选中“站点”项，再在右面的“站点名称”文本
框中输入?aspteach，在“本地站点文件夹”框中输入“C:\aspteach\”，即以前面所创建的?IIS?网站目录为?Dre
amweaver?中站点的根目录。（2）服务器设置单击左侧的“服务器”项，再单击右面服务器列表下方的“添加新服务器”按钮（如图?1
-38?所示），此时将弹出新服务器属性设置对话框，如图?1-39 所示。图 1-38 添加新服务器图 1-39 新服务器属性设置设
置“服务器名称”为?aspteach。单击“连接方法”右边的下拉选项按钮，在弹出的选项中选择“本地/网络”项，再设置“服务器文件夹
”为“C:\aspteach”，设置“Web? URL”为“http://localhost/”。如图?1-40?所示。单击顶端的
“高级”按钮，切换到高级设置，在“测试服务器”下拉列表中选择“ASP?VBScript”项，如图?1-41?所示。图 1-40 服
务器基本设置图 1-41 服务器高级设置完成服务器设置后，单击“保存”按钮，保存设置并返回“站点设置对象”对话框。此时的服务器列表
框中将出现新添加的 aspteach 服务器，选中该服务器右侧的“测试”复选框，如图?1-42 所示。至此，新站点创建完成。单击“
保存”按钮，保存设置并返回?Dreamweaver? CS5?开发环境。此时可以在?Dreamweaver? CS5?开发环境右侧
下方的“文件”面板中看到新建的站点，如图?1-43?所示。10?图 1-42 选中“测试”复选框图 1-43 完成网站创建后的“文
件”面板到这里，?Dreamweaver?CS5?中的站点创建完成，以后，就可以在网站内加入所需要的网页，并对网页进行设计。对于静
态的?HTML?网页，Dreamweaver? CS5?支持“所见即所得”的功能，可以在设计视图中直接进行文字、图像、表格、链接等
?HTML?元素的设计。此外，Dreamweaver? CS5?也具有良好的动态网页设计功能，还可以方便地在网页中进行数据库信息查
询设计，不过这些动态功能都需要在连接上服务器，在浏览器中浏览时才能看到效果。（关于 Dreamweaver?CS5?的具体使用不在
本书的学习范围之内，本书仅对学习所需要的相关内容进行介绍，其他内容请参考相关资料进行学习。）?3．测试?Dreamweaver?
站点现在，将用一个实例演示如何在?Dreamweaver?CS5?中进行?ASP?动态网页设计。在这个案例中，将创建一个显示时间的
动态网页，其中的时间可以按照上、下午的不同，变成绿色或红色。如图?1-44?所示。图 1-44 变色的时间“变色的时间”网页的创建
步骤如下。（1）新建网页在?Dreamweaver? CS5?的“文件”面板中的“站点”文件夹图标上单击右键，在弹出菜单中选择“新
建文件”菜单命令，此时在网站中将创建一个新的空白网页文件，默认文件名为?untitled.asp，先选中该文件项，再在文件名上单击
（或按?F2?键），此时文件名为可改状态，现在可以为文件重命名，将该文件取名为?ChangeTime.asp。11?在“文件”面板
中双击?ChangeTiem.asp 文件图标，打开文件，如图?1-45 所示。图 1-45 新建 ASP 文件如果打开时是空白的
，表示网页是在“设计视图” 这是因为?Dreamweaver?CS5?对于?HTML?。网页的编辑支持“所见即所得”的功能，对于?
HTML?网页，在设计视图中所见的样子基本上就是在浏览器中的效果。但对动态产生的?ASP?网页，则是不合适的。单击左上角“文档”工
具栏中的“代码”按钮切换到“代码视图”即可。从图中可以看到，Dreamweaver?CS5?已经把网页的代码框架搭好了，要做的工作
是对框架进行修改，添加所需的代码。（2）代码编辑在“代码”窗口中按下面的代码进行编辑。?<%@LANGUAGE="VBSCRIPT
"?CODEPAGE="65001"%>? ?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi
tional.dtd">???<
meta?http-equiv="Content-Type"?content="text/html??charset=utf-8"
?/>??? ze="5"?color?=?"red"?>变色的时间

12?<%?t=time()?h=hour(t)?if
?h>12?then?%>?现在时间是：<%=t%>
?<%?else?''否则，显示绿色时间文字?%>?现在时间是：
<%=t%>?<%?end?if?%>??? 编辑完成后，保存文件，再单击“文档”工具
栏中的图标或直接按?F12?键就可以在浏览器中进行预览，效果如图?1-44?所示，则表示站点设置正确。如果不能得到正确结果，请按前
面所述的站点设置步骤进行检查。这个案例中，将网页中的?HTML 语句放在了?ASP?编码中进行动态的输出，if 语句对当前小时数进
行判断后，将符合条件的?HTML 语句输出到文档中，再将得到的 HTML 文档在发送到浏览器中显示出来。在浏览器中单击“查看”菜单
下的“源文件”命令，可以看到?ASP?网页所输出的?HTML?文档，对于图?1-44 的左图，得到的 HTML 文档源文件如图?1
-46?所示。''获取系统时间?''获取小时数?''小时数是否大于?12?''如果?h>12，显示蓝色时间文字?图 1-46 动态生成的
HTML 编码13?1.3 网站开发规划?1.3.1? 网站开发规划的基本概念?1.? 网站开发规划网页的设计与网站的设计是不一样
的，学会了简单网页的设计并不表示就能设计完成一个网站。设计一个网站通常需要有一个完整的系统规划，网站不完全是网页的堆积，网站的功能
也并不是越多、越全面越好，网站的设计要考虑客户的需求，在达到客户需求的基础上，还要考虑方便用户的使用，并具有特色。在做网站之前给要
做的网站一定准确的定位，给网站定位，明确建站目地是最重要的。在明确建站目的和网站定位以后，需要收集相关的客户意见，对其进行整理，找
出重点，根据业务的侧重点，结合网站定位来决定网站的栏目需要有哪几项，可能开始时会因为栏目较多进而难以确定最终需要哪几项，需要反复进
行分析、归纳，将定下来的内容进行归类，形成网站栏目的树状列表用来清晰地表达网站结构。然后用同样的方法，来讨论二级栏目下的子栏目，对它进行归类，并逐一确定每个二级栏目的主页面需要有哪些具体的东西，二级栏目下面的每个小栏目需要放哪些内容。?2.? 栏目策划书对网站的规划有了基本概念后，接下来需要将上面的内容写成栏目策划书，栏目策划书要求写得详细，具体，并有统一的格式，以备网站留档。策划书通常要求有电子版和书面版两份。下面，简单介绍一下策划书涉及到的具体内容。（1）栏目概述其中包括栏目定位，栏目目的，服务对像，子栏目设置，首页内空，分页内容。这一部分起到一个索引的作用，能对栏目有一个大概的整体把握和了解。（2）栏目详情栏目详情就是把每一个子栏目的具体情况描述一下，其中包括到各个子栏目的名称，栏目目的，把子栏目的目的写清楚。栏目详情的内容包括：服务对像（用以明确该栏目的用途及针对的对象）、内容介绍（详细说明该栏目的具体内容）、资料来源（说明该栏目的内容来源）、实现方法（讲述实现该栏目的具体方法）等。（3）相关栏目这一项是用以说明本栏目和其它栏目之间的结合、沟通，通过各个栏目之间的联系，加强网站的整体性。最后，是网站的具体设计制作（包括页面设计，制作，编程），这一步将让页面设计人员根据每个栏目的规划书来设计页面，由制作人员负责实现网页，并制作成模板，由栏目负责人往每个栏目里面添加具体内容。网站的建设应该是同时进行的，在上面所讲述的过程进行的同时，网站的程序人员应该正是处于开发程序的阶段，如果实现的这个过程中出现什么问题编程人员应和制作人员及时结合，以免程序开发完成后再发现问题，而进行大规模的反工。本书中，将以北京教育考试培训中心助学科网站的开发为例，进行?ASP?动态网站开发的14?系统学习。15?