ASP动态网站设计入门

第 0章 ASP 动态网站设计入门本章将介绍ASP 动态网站开发之前应适当了解的一些入门知识。对这些知识的学习，建议使用如下方法。首先，大概看一遍本章的内容，对其有个基本的认识（如提到了哪些知识点）

第 0章 ASP 动态网站设计入门

本章将介绍ASP 动态网站开发之前应适当了解的一些入门知识。对这些知识的学习，建议使用如下方法。

首先，大概看一遍本章的内容，对其有个基本的认识（如提到了哪些知识点）就可以了。 接着，开始学习本书的-个实例，在学习技术的过程中不断来这里看看相关的理论知识。这样，既有助于实例部分的内容理解，还可以起到深入掌握本章理论知识的效果。 0.1

网站的组成

在学习动态网站开发技术之前，我们应该清楚一个网站需要具备什么样的结构，因为网站的架设也是围绕这些来进行的。

1．网站名称

网站的名称就好比我们的名字，知道了网站名称才好称呼，如一个网站的名称为“中国红十字会”。网站的名称会在用户的浏览器窗口的标题栏中显示出来。

2．网站网址

网站的网址就好比家庭住址，有了这个地址才能方便地邀请别人来做客。网站网址既可以是购买的顶级域名，也可以是购买空间时赠送的二级或三级域名，还可以是网站所在服务器的IP 地址。

那么，为什么会出现IP 地址和域名两种网址呢？这是因为计算机是个数字的世界，任何信息在计算机中都会被表示成数字的形式。在网络世界中，为了准确地找到目标计算机，每一台计算机都必须具有唯一的IP 地址——这就和打电话必须知道对方全球唯一的电话号码一样。TCP/IPv4中的IP 地址是由32位二进制数字组成，每8位被分成一组，一共4组。组与组之间由半角句号（俗称“点”）分开，这种书写方法叫做“点分表示法”。为了便于人们记忆，每组数字一般都是以十进制数字标识，如202.102.48.141。例如，在Windows XP的“命令提示符”窗口中输入IPconfig 命令并按下“Enter ”键后，就会得到如图0-1所示的当前计算机使用的IP 地址——202.102.13.141。

对于大多数人来说，用数字表示的计算机网址难以记忆。为了解决这个问题，互联网管理机构决定采用便于识别和记忆的英文或中文名来表示计算机（服务器）。为了确保网上计算机标识的唯一性，互联网管理机构制定了一套命名机制，这就是域名系统。对于没有购买域名的服务器来说，可以使用IP 地址来直接访问它。

通常，我们把采用域名系统命名的网址称为“域名”或“网址”（网站的IP 地址也可以称为“网址”），域名地址以层次化表示。

ASP 动态网站设计入门

图0-1 查看IP 地址

（1）后缀

最右边的后缀用于标识域名的性质，如cn 表示中国、edu 表示教育单位。实际上，由于域名申请的开放性，大多数后缀已放宽了申请限制。我们可以根据自己的喜好来注册.net 或是.com 。这就好比我们可以随意到某个城市（随便使用.com 还是.net ）居住，但城市名称（.com 这样的后缀）却不能由我们来定义。

（2）名称

是域名中间的网站名称，如www.duze.cn ，这个域名的网站名称就是duze 。这是在注册域名时需要自定义的部分，它在同一种域名后缀中只能是唯一的。也就是说，可以有duze.net 和duze.cn ，但不能有两个duze.net 。

（3）前缀

最左侧的前缀用于标识网站的类别，如：www 表示网络服务。由于申请的域名是duze.net ，所以www 和ftp 这样的前缀可以自由设置（不设置前缀也可以），如zhiguo.duze.net 等。其中，要注意www 和ftp 这样的前缀名，已经约定俗成地供web 服务和FTP 服务使用了。

通常，我们可以根据前缀看出网址对应的是什么内容，如下所示。

www ：网站服务，如www.duze.net 。

ftp ：数据上传下载服务，如ftp.duze.net 。

bbs ：论坛服务，如bbs.duze.net 。

mail ：邮局服务，如mail.duze.net 。

down ：下载服务，如down.duze.net 。

news ：新闻服务，如news.duze.net 。

movie ：电影服务，如movie. duze.net。

music ：音乐服务，如music.duze.net 。

除了这些约定俗成的名称外，通常我们都会以常用的英文单词或拼音等来作为前缀，如百度的图片搜索就是http://image.baidu.com/。

注

意

2 在购买域名时，我们只会得到duze.net 这样的域名，而不会得到www.duze.net 这样的域名。再次提示，前缀可以自行设置。

第0

章 ASP 动态网站设计入门

（4）协议

在网址的左侧会有HTTP （也可以使用小写http ，其全称是Hyper Text Transfer Protocol，中文含义是“超文本传输协议”）的协议标识，这表示IE 浏览器的请求会由HTTP 负责传送到服务器，服务器中存储的网页内容也会由HTTP 负责传送到用户的浏览器窗口中。

此外，还有FTP 和MMS 等协议。需要注意的是，协议与域名前缀是不一样的。前者决定了数据传输的方式，后者只是起到提示网站作用的效果罢了。

最后，需要提醒读者们的是，购买顶级域名虽然很容易，但它有几点仍需注意。一是域名的名称要反复斟酌，因为一旦购买了就无法变更了，除非再购买新的域名。二是域名一旦使用了，就不能随便进行变更，因为变更会对网民的访问产生很大的影响。三是尽量不要选择管理面板不完善、售后服务质量差的域名服务商，否则后期的域名管理可能会比较麻烦。

3．存储空间

通常，我们将存放网站内容的计算机称为“服务器”，因为这样的计算机提供了网站访问等服务。服务器使用的操作系统通常是UNIX 、Linux 和Windows 中的任一种。本书中的服务器环境均指Windows 。Windows 又分为桌面级（如Windows XP ）和服务器级操作系统（如Windows 2000 Advanced Server和

Windows Server 2003 Enterprise Edition等）。

网站存储空间是指服务器中划分给网站的存储容量，比如说服务器划分了100MB 的网站存储容量，那么网站内容的总大小就不能超过100MB 这个容量的限制，常见的空间价格如图0-2所示。

图0-2 常见的空间价格

如果存储网站的空间是购买的，那么通常需要以50MB 或100MB 为单位进行付费。如果存储网站的空间是自己的服务器，那么空间容量通常是服务器中默认网站指向的文件夹所在分区（如D:web目录）的可用容量大小。

在准备网站的存储空间时，要注意空间必须支持网站中网页的编写语言（请见本章的“建站技术”部分）。总的来说，网页根据其编写语言可以分为两大类，即静态网页技术和动态网页技术，这两种技术都有其自身的特点。也就是说，如果设计的是ASP 动态网站，那么购买

3

ASP 动态网站设计入门

的空间就要支持ASP 才行；如果设计的是PHP 网站，那么购买的空间就要支持PHP ；如果设计的是HTML 纯静态网站，那么无论购买什么网站空间都可以，因为都支持HTML 。

4．网页

网页（Web Pages 或Web Documents ）就是可以通过IE 等浏览器看到的网站文件，网页是网站的基本组成单元，它是网站具体内容（如文字、图片、视频等）的载体，需要通过不同的网页存储各种各样的内容。

网页既可以直接存储在网站的根目录下，也可以存储在单独的子文件夹中。网页同样也有网址，如果网页是存储在网站的根目录下，那么它的网址格式为“网站网址（如http://bbs.duze.net/） 网页网址（如index.asp ）”，即“http://bbs.duze.net/index.asp”。如果网页是存储在网站的某个子文件夹中，那么它的访问格式为“网站网址 文件夹名 网页网址”，如“http://bbs.duze.net/news/index.asp”。

其中，首页（也称主页，即Home Page ）是最重要的页面。它的名字根据实际需求和使用的网页语言不同，文件名和后缀名往往也会有所不同，如：index.asp 、default.asp 、index.php 、default.cgi 、index.htm 、index.html 、default.htm 和default.html 。

首页作为一个单独的网页，它相当于网站的入口。作为网站的起始点，首页汇总了网站主要栏目的链接，通过这些链接可以访问网站的方方面面。所以，网站必须设计一个首页，并且必须在因特网信息服务（Internet Information Server, IIS）或购买的网站空间管理面板中进行指定，如图0-3所示。

图0-3 首页的设置 提

示 简单地说一下网站、网址和网页的关系。一个网站如同一个家庭，网址如同家庭地址，而网页则如同家庭成员。网民需要通过网址找到网站，找到网站才能浏览其中的网页内容。

所以，网站不能等同于网页或网址来理解。

5．超链接

在网站中，超链接（也称“链接”）是不可或缺的组成部分，通过链接可以实现网站中栏目与内容、页面与页面，以及文字/图片与电子邮件、程序、图片、音乐和视频网址等方面的4

第0

章 ASP 动态网站设计入门

关联。比如说，在新闻网站中单击一个标题后，马上会打开一个存储新闻标题对应的新闻内容的网页。这一系列的操作就是由链接来完成的。

使用超链接，通常可以执行下列操作。

定位到网络、Intranet 或Internet 上的文件或网页；

定位到将来要创建的文件或网页；

发送电子邮件消息；

启动文件传送，如下载或上传。

当鼠标箭头指向含有超链接的文本或图片时，鼠标的指针将变成一个手的形状，这表示用户可以通过单击它来访问对应的内容。

0.2

建站技术 目前，流行的建站技术多种多样。但总的来说，可以分为两大类，即静态网页技术和动态网页技术，这两种技术都有其自身的特点。

静态网页是指使用（超文本置标语言，或超文本标记语言Hypertext Markup Language, HTML ）编写的各种各样的Web 文档，这些网页除非使用Dreamweaver 等工具去修改它，否则总是一成不变的。

当客户端通过IE 等浏览器发送URL 浏览请求给服务器时，服务器在查找到对应的网页文件时，会直接返回给客户端，如图0-4所示。

图0-4 静态页面的浏览过程

在客户端的浏览器中显示的页面内容，和存放在服务器上的网页内容完全相同。静态网页的后缀名通常为.htm 或.html 。

随着交互性网站的发展需要，HTML 已经满足不了网站发展的技术需求了，动态技术随之应运而生。

当静态网页中有了JavaScript 和VBScript 语言编写的脚本后，客户端在打开网页时，将

5

ASP 动态网站设计入门

会先执行这些脚本语言，进而实现很多动态的页面效果，如动态显示时间和文本等。

动态网页技术不仅可以为服务器、客户端和网站之间提供极好的互动功能，还可以充分发挥出网站数据库的效能。当用户通过浏览器发出页面请求后，服务器可以根据页面请求产生结果页面，并将它返回给客户端。动态网页技术已被广泛应用到聊天室、论坛、网上购物和信息管理等交互性网站上。

典型的动态网页技术有ASP 、ASP.NET 、PHP 、JSP 和CGI 等，本书以活动服务页面（Active Server Pages，ASP ）技术为主线，讲解在Dreamweaver 中进行ASP 动态网页设计的方法（详细介绍请见本章0.4节）。

ASP 文件的默认后缀名为.asp ，如果要在IIS 中运行使用其他后缀名保存的文件，只需在IIS 网站属性的应用程序映射中添加一种后缀名，并指定可执行文件为asp.dll 即可。实际上，如果去掉网页中包含的、用于实现动态功能的VBScript 、JavaScript 或ASP 内置的对象等语句，那么它和标准的HTML 文件并没有任何区别。

无论是静态网页还是动态网页，都需要使用工具来编写，这就好比我们需要使用Word 编写DOC 文件一样。由于网页文件就是一个后缀名不同的文本文件，所以我们可以使用任意一种文本编辑器（如记事本）来进行网页的开发。但是，设计网页时由于必须输入大量代码，所以往往会发现容易因代码输入有误而出错。所以，使用无需输入代码、“所见即所得”式的网页编辑工具，是网站入门的首选。通常，在网站设计过程中，会使用如下几种常用的编辑工具。

1．FrontPage

FrontPage 是微软开发的网页编辑工具，也是最常用的一款编辑工具，一般来说，只要能熟练掌握Word 的用法就能快速掌握该软件，它特别适合入门级网页爱好者，如图0-5所示。

6

第0

章 ASP 动态网站设计入门

图0-5 FrontPage 窗口

2．Dreamweaver CS3

Dreamweaver 是本书使用的网页设计工具，它是由Adobe

公司开发的一款专业的网页制作程序。CS3是Dreamweaver 的最新版本，其全称是“Creative Suite 3”。

Dreamweaver 具有强大的网页编辑功能和插件功能，非常适合进阶级网页设计人员或专业人士使用，如图0-6所示。

图0-6 Dreamweaver 窗口

Dreamweaver 支持以下3种编辑模式。

设计模式：无需编写源代码，即可完成网页的设计，源代码会自动生成。

代码模式：主要用于对网站进行优化与维护。比如，在调试ASP 代码的过程中，如果浏览器窗口中出现错误提示的话，在错误提示中一般都会给出页面错误代码的行号，如图0-7所示。此时就可以在Dreamweaver 的“代码”视图中，通过行号快速定位并修改出错的语句了。

图0-7 错误提示

拆分模式：这种模式下会同时提供两个窗格，上窗格为“代码”编辑环境，下窗格为 7

ASP 动态网站设计入门

“设计”编辑环境，如图0-8所示。

图0-8 拆分模式

在使用Dreamweaver 进行设计之前，先对几个知识点进行介绍。

（1）行为

许多优秀的网页不只包含文本和图像，还有许多其他交互式效果。例如，一个网页在打开的同时会响起优美的背景音乐（详见本书的第10章“新闻/文章系统”一例中的相关内容），这些都是使用Dreamweaver 中的行为功能实现的。

什么是行为？Dreamweaver 中的“行为”是一种运行在浏览器中的JavaScript 代码，设计者可以将其放置在网页中，以允许浏览者与网页本身进行交互——JavaScript 代码只运行在客户端浏览器中，而不会在服务器上运行。

行为由“事件”和该事件触发的“动作”组成。“事件”是指浏览器生成的消息，它指定了该页访问者需要执行的某种操作。例如，当访问者将鼠标指针移到某个链接上时，浏览器将为该链接生成一个onMouseOver 事件，页面被打开时生成onLoad 事件，页面被关闭时生成onUnload 事件，等等“动作”是指一段预先编写的JavaScript 代码，可用于执行诸如打开浏览器窗口、显示或隐藏AP 元素、播放声音或停止播放Adobe Shockwave 影片的任务。例如，将“弹出消息”动作附加到一个链接上后，指定它将由onMouseOver 事件触发，那么只要用户将鼠标指针停留在该链接的上方，就会弹出消息。

添加行为时，需要遵循3个步骤：选择对象→添加动作→调整事件。也就是说，先在页面中选择一个对象（如一个链接），接着在“行为”浮动面板中指定一个动作，然后指定触发该动作的事件，即可将行为添加到当前页面中（详见本书第2章“留言系统”2.4节中的相关内容）。

提

示

8 在Dreamweaver 中支持下载（www.adobe.com/go/dreamweaver_exchange_cn）和安装第三

第0章 ASP 动态网站设计入门

方的行为。

下面将介绍Dreamweaver 中一些主要事件的含义。

onAbort ：在载入一幅图片失败时激发此事件。如，在生成图片时单击浏览器的“停止”按钮。

onAfter ：当页面中捆绑的数据元素完成了数据源更新后触发该事件。

onBefore ：当页面中的捆绑数据元素被修改并已经失去焦点时触发该事件。

onFoucs ：当指定元素成为焦点时将触发该事件。例如，单击表单中的文本编辑将触发该事件。

onBlur ：与onFocus 相反。当特定元素停止作为用户交互的焦点时触发该事件。 Bounce ：元素的内容到达其边界时将触发该事件。

onChange ：改变页面中的数值时将触发该事件。例如，当用户在菜单中选择了一个项目，或者修改了文本区中的数值时。

onKeyUp ：按下按键后释放该键时触发该事件。

onLoad ：当图片或页面完成载入后触发该事件。

onMouse Down：当用户按下鼠标按键（不释放鼠标按键）时触发该事件。 onMouse Move：当鼠标指针停留在对象边界内时触发该事件。

onMouse Out：当鼠标指针离开对象边界时触发该事件。

onMouse Oove：当鼠标指向特定对象时触发该事件，该事件通常用于链接。 onMouse Up：当按下的鼠标按键被释放时触发该事件。

on Move：移动窗口或框架时将触发该事件。

onClick ：单击元素（如超级链接、图片、图片影像、按钮）时将触发该事件。 onDblClick ：双击选定元素将触发该事件。

onError ：在页面或图片发生装载错误时将触发该事件。

onFinish ：当选取框内容已经成了一个循环后将触发该事件。

onHelp ：当用户单击浏览器的“帮助”按钮，或从菜单中选择“帮助”命令时将触发该事件。

onKeyDown ：当用户按下任意键时触发该事件。

onKeyPress ：当用户按下并释放任意键时触发该事件。它相当于onKeyDown 或onKeyUp 事件的联合。

onReset ：当表单被复位到其默认值时触发该事件。

onResize ：当用户调整浏览器窗口或框架尺寸时触发该事件。

onRowEnter ：当捆绑数据源的当前记录指针改变时触发该事件。

onRowExit ：当捆绑数据源的当前记录指针改变后触发该事件。

onScroll ：当上下滚动时触发该事件。

onselect ：在文本区域选定文本时触发该事件。

onStart ：当编辑框中的内容开始循环时触发该事件。

9

ASP 动态网站设计入门

onSubmit ：确认表单时触发该事件。

onUnload ：离开页面时触发该事件。

（2）表单

表单是Internet 用户和服务器之间进行信息交流的一种重要工具。读者可以使用Dreamweaver 创建带有文本域、密码域、单选按钮、复选框、弹出菜单和按钮等对象（也称为元素）的表单。

表单可以分为两个部分，即表单对象部分和应用程序部分。也就是说，首先要添加一个表单域，然后在表单域中添加各种对象（详见本书第2章“留言系统”2.4节中的相关内容）。此时的表单只是一个外壳而已，不具有真正工作的能力，它还需要后台程序的支持。因此，在完成这些基本内容的输入后，还需要进行表单对应程序的设计。

在Dreamweaver 中有一个“表单”工具条，如图0-9所示。

图0-9 表单工具条

其中，常用的对象有如下。

表单：在文档中创建一个表单域，其形状为一个红色的线框。

文本字段：即文本框，它可以支持输入任意文本，包括字母、数字及其他字符。该类型又分为单行文本框、多行文本框和密码文本框（可在属性面板中设置）。

隐藏域：用于传递某些在网页中不需要被用户干预的信息。

文本区域：可以任意输入多行文本，包括字母、数字及其他字符。

复选框：提供多个选项，即在一组选项中可同时选择多个项。

单选按钮：提供单项选择，即在一组选项中只能选择其中的一个。

单选按钮组：一次可以创建一组（多个）单选按钮。

列表/菜单：“列表”是普通列表框，供用户在列表框中选择一项或多项；“菜单”为菜单式列表框，如果用户希望选择其中一项后能够打开指定的网页，则必须与跳转菜单结合使用。

跳转菜单：可以实现在页面中插入一个菜单列表框，并将菜单中的每一项链接到指定的网页。当选择某项后，浏览器即打开该项链接的网页。

图像域：可以使用图片替代提交按钮。

文件域：上载文件时使用。

按钮：接受鼠标单击并执行指定的任务。该类型又分为提交表单、无（普通按钮）和重置表单（复位按钮）。

提

示 在本章0.3节的第3部分中，对表单标识也进行了简单介绍。

（3）CSS

10