ASP动态网站设计入门.docx
- 文档编号:3894341
- 上传时间:2022-11-26
- 格式:DOCX
- 页数:66
- 大小:1.70MB
ASP动态网站设计入门.docx
《ASP动态网站设计入门.docx》由会员分享,可在线阅读,更多相关《ASP动态网站设计入门.docx(66页珍藏版)》请在冰豆网上搜索。
ASP动态网站设计入门
第0章ASP动态网站设计入门
本章将介绍ASP动态网站开发之前应适当了解的一些入门知识。
对这些知识的学习,建议使用如下方法。
首先,大概看一遍本章的内容,对其有个基本的认识(如提到了哪些知识点)就可以了。
接着,开始学习本书的-个实例,在学习技术的过程中不断来这里看看相关的理论知识。
这样,既有助于实例部分的内容理解,还可以起到深入掌握本章理论知识的效果。
0.1网站的组成
在学习动态网站开发技术之前,我们应该清楚一个网站需要具备什么样的结构,因为网站的架设也是围绕这些来进行的。
1.网站名称
网站的名称就好比我们的名字,知道了网站名称才好称呼,如一个网站的名称为“中国红十字会”。
网站的名称会在用户的浏览器窗口的标题栏中显示出来。
2.网站网址
网站的网址就好比家庭住址,有了这个地址才能方便地邀请别人来做客。
网站网址既可以是购买的顶级域名,也可以是购买空间时赠送的二级或三级域名,还可以是网站所在服务器的IP地址。
那么,为什么会出现IP地址和域名两种网址呢?
这是因为计算机是个数字的世界,任何信息在计算机中都会被表示成数字的形式。
在网络世界中,为了准确地找到目标计算机,每一台计算机都必须具有唯一的IP地址——这就和打电话必须知道对方全球唯一的电话号码一样。
TCP/IPv4中的IP地址是由32位二进制数字组成,每8位被分成一组,一共4组。
组与组之间由半角句号(俗称“点”)分开,这种书写方法叫做“点分表示法”。
为了便于人们记忆,每组数字一般都是以十进制数字标识,如202.102.48.141。
例如,在WindowsXP的“命令提示符”窗口中输入IPconfig命令并按下“Enter”键后,就会得到如图0-1所示的当前计算机使用的IP地址——202.102.13.141。
对于大多数人来说,用数字表示的计算机网址难以记忆。
为了解决这个问题,互联网管理机构决定采用便于识别和记忆的英文或中文名来表示计算机(服务器)。
为了确保网上计算机标识的唯一性,互联网管理机构制定了一套命名机制,这就是域名系统。
对于没有购买域名的服务器来说,可以使用IP地址来直接访问它。
通常,我们把采用域名系统命名的网址称为“域名”或“网址”(网站的IP地址也可以称为“网址”),域名地址以层次化表示。
图0-1查看IP地址
(1)后缀
最右边的后缀用于标识域名的性质,如cn表示中国、edu表示教育单位。
实际上,由于域名申请的开放性,大多数后缀已放宽了申请限制。
我们可以根据自己的喜好来注册.net或是.com。
这就好比我们可以随意到某个城市(随便使用.com还是.net)居住,但城市名称(.com这样的后缀)却不能由我们来定义。
(2)名称
是域名中间的网站名称,如,这个域名的网站名称就是duze。
这是在注册域名时需要自定义的部分,它在同一种域名后缀中只能是唯一的。
也就是说,可以有和,但不能有两个。
(3)前缀
最左侧的前缀用于标识网站的类别,如:
www表示网络服务。
由于申请的域名是,所以www和ftp这样的前缀可以自由设置(不设置前缀也可以),如等。
其中,要注意www和ftp这样的前缀名,已经约定俗成地供web服务和FTP服务使用了。
通常,我们可以根据前缀看出网址对应的是什么内容,如下所示。
•www:
网站服务,如。
•ftp:
数据上传下载服务,如。
•bbs:
论坛服务,如。
•mail:
邮局服务,如。
•down:
下载服务,如。
•news:
新闻服务,如。
•movie:
电影服务,如movie.。
•music:
音乐服务,如。
除了这些约定俗成的名称外,通常我们都会以常用的英文单词或拼音等来作为前缀,如XX的图片搜索就是
在购买域名时,我们只会得到这样的域名,而不会得到这样的域名。
再次提示,前缀可以自行设置。
(4)协议
在网址的左侧会有HTTP(也可以使用小写http,其全称是HyperTextTransferProtocol,中文含义是“超文本传输协议”)的协议标识,这表示IE浏览器的请求会由HTTP负责传送到服务器,服务器中存储的网页内容也会由HTTP负责传送到用户的浏览器窗口中。
此外,还有FTP和MMS等协议。
需要注意的是,协议与域名前缀是不一样的。
前者决定了数据传输的方式,后者只是起到提示网站作用的效果罢了。
最后,需要提醒读者们的是,购买顶级域名虽然很容易,但它有几点仍需注意。
一是域名的名称要反复斟酌,因为一旦购买了就无法变更了,除非再购买新的域名。
二是域名一旦使用了,就不能随便进行变更,因为变更会对网民的访问产生很大的影响。
三是尽量不要选择管理面板不完善、售后服务质量差的域名服务商,否则后期的域名管理可能会比较麻烦。
3.存储空间
通常,我们将存放网站内容的计算机称为“服务器”,因为这样的计算机提供了网站访问等服务。
服务器使用的操作系统通常是UNIX、Linux和Windows中的任一种。
本书中的服务器环境均指Windows。
Windows又分为桌面级(如WindowsXP)和服务器级操作系统(如Windows2000AdvancedServer和WindowsServer2003EnterpriseEdition等)。
网站存储空间是指服务器中划分给网站的存储容量,比如说服务器划分了100MB的网站存储容量,那么网站内容的总大小就不能超过100MB这个容量的限制,常见的空间价格如图0-2所示。
图0-2常见的空间价格
如果存储网站的空间是购买的,那么通常需要以50MB或100MB为单位进行付费。
如果存储网站的空间是自己的服务器,那么空间容量通常是服务器中默认网站指向的文件夹所在分区(如D:
\web目录)的可用容量大小。
在准备网站的存储空间时,要注意空间必须支持网站中网页的编写语言(请见本章的“建站技术”部分)。
总的来说,网页根据其编写语言可以分为两大类,即静态网页技术和动态网页技术,这两种技术都有其自身的特点。
也就是说,如果设计的是ASP动态网站,那么购买的空间就要支持ASP才行;如果设计的是PHP网站,那么购买的空间就要支持PHP;如果设计的是HTML纯静态网站,那么无论购买什么网站空间都可以,因为都支持HTML。
4.网页
网页(WebPages或WebDocuments)就是可以通过IE等浏览器看到的网站文件,网页是网站的基本组成单元,它是网站具体内容(如文字、图片、视频等)的载体,需要通过不同的网页存储各种各样的内容。
网页既可以直接存储在网站的根目录下,也可以存储在单独的子文件夹中。
网页同样也有网址,如果网页是存储在网站的根目录下,那么它的网址格式为“网站网址(如
其中,首页(也称主页,即HomePage)是最重要的页面。
它的名字根据实际需求和使用的网页语言不同,文件名和后缀名往往也会有所不同,如:
index.asp、default.asp、index.php、default.cgi、index.htm、index.html、default.htm和default.html。
首页作为一个单独的网页,它相当于网站的入口。
作为网站的起始点,首页汇总了网站主要栏目的链接,通过这些链接可以访问网站的方方面面。
所以,网站必须设计一个首页,并且必须在因特网信息服务(InternetInformationServer,IIS)或购买的网站空间管理面板中进行指定,如图0-3所示。
图0-3首页的设置
简单地说一下网站、网址和网页的关系。
一个网站如同一个家庭,网址如同家庭地址,而网页则如同家庭成员。
网民需要通过网址找到网站,找到网站才能浏览其中的网页内容。
所以,网站不能等同于网页或网址来理解。
5.超链接
在网站中,超链接(也称“链接”)是不可或缺的组成部分,通过链接可以实现网站中栏目与内容、页面与页面,以及文字/图片与电子邮件、程序、图片、音乐和视频网址等方面的关联。
比如说,在新闻网站中单击一个标题后,马上会打开一个存储新闻标题对应的新闻内容的网页。
这一系列的操作就是由链接来完成的。
使用超链接,通常可以执行下列操作。
•定位到网络、Intranet或Internet上的文件或网页;
•定位到将来要创建的文件或网页;
•发送电子邮件消息;
•启动文件传送,如下载或上传。
当鼠标箭头指向含有超链接的文本或图片时,鼠标的指针将变成一个手的形状,这表示用户可以通过单击它来访问对应的内容。
0.2建站技术
目前,流行的建站技术多种多样。
但总的来说,可以分为两大类,即静态网页技术和动态网页技术,这两种技术都有其自身的特点。
0.2.1静态网页技术
静态网页是指使用(超文本置标语言,或超文本标记语言HypertextMarkupLanguage,HTML)编写的各种各样的Web文档,这些网页除非使用Dreamweaver等工具去修改它,否则总是一成不变的。
当客户端通过IE等浏览器发送URL浏览请求给服务器时,服务器在查找到对应的网页文件时,会直接返回给客户端,如图0-4所示。
图0-4静态页面的浏览过程
在客户端的浏览器中显示的页面内容,和存放在服务器上的网页内容完全相同。
静态网页的后缀名通常为.htm或.html。
0.2.2动态网页技术
随着交互性网站的发展需要,HTML已经满足不了网站发展的技术需求了,动态技术随之应运而生。
当静态网页中有了JavaScript和VBScript语言编写的脚本后,客户端在打开网页时,将会先执行这些脚本语言,进而实现很多动态的页面效果,如动态显示时间和文本等。
动态网页技术不仅可以为服务器、客户端和网站之间提供极好的互动功能,还可以充分发挥出网站数据库的效能。
当用户通过浏览器发出页面请求后,服务器可以根据页面请求产生结果页面,并将它返回给客户端。
动态网页技术已被广泛应用到聊天室、论坛、网上购物和信息管理等交互性网站上。
典型的动态网页技术有ASP、ASP.NET、PHP、JSP和CGI等,本书以活动服务页面(ActiveServerPages,ASP)技术为主线,讲解在Dreamweaver中进行ASP动态网页设计的方法(详细介绍请见本章0.4节)。
ASP文件的默认后缀名为.asp,如果要在IIS中运行使用其他后缀名保存的文件,只需在IIS网站属性的应用程序映射中添加一种后缀名,并指定可执行文件为asp.dll即可。
实际上,如果去掉网页中包含的、用于实现动态功能的VBScript、JavaScript或ASP内置的对象等语句,那么它和标准的HTML文件并没有任何区别。
0.2.3网页设计工具
无论是静态网页还是动态网页,都需要使用工具来编写,这就好比我们需要使用Word编写DOC文件一样。
由于网页文件就是一个后缀名不同的文本文件,所以我们可以使用任意一种文本编辑器(如记事本)来进行网页的开发。
但是,设计网页时由于必须输入大量代码,所以往往会发现容易因代码输入有误而出错。
所以,使用无需输入代码、“所见即所得”式的网页编辑工具,是网站入门的首选。
通常,在网站设计过程中,会使用如下几种常用的编辑工具。
1.FrontPage
FrontPage是微软开发的网页编辑工具,也是最常用的一款编辑工具,一般来说,只要能熟练掌握Word的用法就能快速掌握该软件,它特别适合入门级网页爱好者,如图0-5所示。
图0-5FrontPage窗口
2.DreamweaverCS3
Dreamweaver是本书使用的网页设计工具,它是由Adobe公司开发的一款专业的网页制作程序。
CS3是Dreamweaver的最新版本,其全称是“CreativeSuite3”。
Dreamweaver具有强大的网页编辑功能和插件功能,非常适合进阶级网页设计人员或专业人士使用,如图0-6所示。
图0-6Dreamweaver窗口
Dreamweaver支持以下3种编辑模式。
•设计模式:
无需编写源代码,即可完成网页的设计,源代码会自动生成。
•代码模式:
主要用于对网站进行优化与维护。
比如,在调试ASP代码的过程中,如果浏览器窗口中出现错误提示的话,在错误提示中一般都会给出页面错误代码的行号,如图0-7所示。
此时就可以在Dreamweaver的“代码”视图中,通过行号快速定位并修改出错的语句了。
图0-7错误提示
•拆分模式:
这种模式下会同时提供两个窗格,上窗格为“代码”编辑环境,下窗格为“设计”编辑环境,如图0-8所示。
图0-8拆分模式
在使用Dreamweaver进行设计之前,先对几个知识点进行介绍。
(1)行为
许多优秀的网页不只包含文本和图像,还有许多其他交互式效果。
例如,一个网页在打开的同时会响起优美的背景音乐(详见本书的第10章“新闻/文章系统”一例中的相关内容),这些都是使用Dreamweaver中的行为功能实现的。
什么是行为?
Dreamweaver中的“行为”是一种运行在浏览器中的JavaScript代码,设计者可以将其放置在网页中,以允许浏览者与网页本身进行交互——JavaScript代码只运行在客户端浏览器中,而不会在服务器上运行。
行为由“事件”和该事件触发的“动作”组成。
“事件”是指浏览器生成的消息,它指定了该页访问者需要执行的某种操作。
例如,当访问者将鼠标指针移到某个链接上时,浏览器将为该链接生成一个onMouseOver事件,页面被打开时生成onLoad事件,页面被关闭时生成onUnload事件,等等“动作”是指一段预先编写的JavaScript代码,可用于执行诸如打开浏览器窗口、显示或隐藏AP元素、播放声音或停止播放AdobeShockwave影片的任务。
例如,将“弹出消息”动作附加到一个链接上后,指定它将由onMouseOver事件触发,那么只要用户将鼠标指针停留在该链接的上方,就会弹出消息。
添加行为时,需要遵循3个步骤:
选择对象→添加动作→调整事件。
也就是说,先在页面中选择一个对象(如一个链接),接着在“行为”浮动面板中指定一个动作,然后指定触发该动作的事件,即可将行为添加到当前页面中(详见本书第2章“留言系统”2.4节中的相关内容)。
在Dreamweaver中支持下载(
下面将介绍Dreamweaver中一些主要事件的含义。
•onAbort:
在载入一幅图片失败时激发此事件。
如,在生成图片时单击浏览器的“停止”按钮。
•onAfter:
当页面中捆绑的数据元素完成了数据源更新后触发该事件。
•onBefore:
当页面中的捆绑数据元素被修改并已经失去焦点时触发该事件。
•onFoucs:
当指定元素成为焦点时将触发该事件。
例如,单击表单中的文本编辑将触发该事件。
•onBlur:
与onFocus相反。
当特定元素停止作为用户交互的焦点时触发该事件。
•Bounce:
元素的内容到达其边界时将触发该事件。
•onChange:
改变页面中的数值时将触发该事件。
例如,当用户在菜单中选择了一个项目,或者修改了文本区中的数值时。
•onKeyUp:
按下按键后释放该键时触发该事件。
•onLoad:
当图片或页面完成载入后触发该事件。
•onMouseDown:
当用户按下鼠标按键(不释放鼠标按键)时触发该事件。
•onMouseMove:
当鼠标指针停留在对象边界内时触发该事件。
•onMouseOut:
当鼠标指针离开对象边界时触发该事件。
•onMouseOove:
当鼠标指向特定对象时触发该事件,该事件通常用于链接。
•onMouseUp:
当按下的鼠标按键被释放时触发该事件。
•onMove:
移动窗口或框架时将触发该事件。
•onClick:
单击元素(如超级链接、图片、图片影像、按钮)时将触发该事件。
•onDblClick:
双击选定元素将触发该事件。
•onError:
在页面或图片发生装载错误时将触发该事件。
•onFinish:
当选取框内容已经成了一个循环后将触发该事件。
•onHelp:
当用户单击浏览器的“帮助”按钮,或从菜单中选择“帮助”命令时将触发该事件。
•onKeyDown:
当用户按下任意键时触发该事件。
•onKeyPress:
当用户按下并释放任意键时触发该事件。
它相当于onKeyDown或onKeyUp事件的联合。
•onReset:
当表单被复位到其默认值时触发该事件。
•onResize:
当用户调整浏览器窗口或框架尺寸时触发该事件。
•onRowEnter:
当捆绑数据源的当前记录指针改变时触发该事件。
•onRowExit:
当捆绑数据源的当前记录指针改变后触发该事件。
•onScroll:
当上下滚动时触发该事件。
•onselect:
在文本区域选定文本时触发该事件。
•onStart:
当编辑框中的内容开始循环时触发该事件。
•onSubmit:
确认表单时触发该事件。
•onUnload:
离开页面时触发该事件。
(2)表单
表单是Internet用户和服务器之间进行信息交流的一种重要工具。
读者可以使用Dreamweaver创建带有文本域、密码域、单选按钮、复选框、弹出菜单和按钮等对象(也称为元素)的表单。
表单可以分为两个部分,即表单对象部分和应用程序部分。
也就是说,首先要添加一个表单域,然后在表单域中添加各种对象(详见本书第2章“留言系统”2.4节中的相关内容)。
此时的表单只是一个外壳而已,不具有真正工作的能力,它还需要后台程序的支持。
因此,在完成这些基本内容的输入后,还需要进行表单对应程序的设计。
在Dreamweaver中有一个“表单”工具条,如图0-9所示。
图0-9表单工具条
其中,常用的对象有如下。
•表单:
在文档中创建一个表单域,其形状为一个红色的线框。
•文本字段:
即文本框,它可以支持输入任意文本,包括字母、数字及其他字符。
该类型又分为单行文本框、多行文本框和密码文本框(可在属性面板中设置)。
•隐藏域:
用于传递某些在网页中不需要被用户干预的信息。
•文本区域:
可以任意输入多行文本,包括字母、数字及其他字符。
•复选框:
提供多个选项,即在一组选项中可同时选择多个项。
•单选按钮:
提供单项选择,即在一组选项中只能选择其中的一个。
•单选按钮组:
一次可以创建一组(多个)单选按钮。
•列表/菜单:
“列表”是普通列表框,供用户在列表框中选择一项或多项;“菜单”为菜单式列表框,如果用户希望选择其中一项后能够打开指定的网页,则必须与跳转菜单结合使用。
•跳转菜单:
可以实现在页面中插入一个菜单列表框,并将菜单中的每一项链接到指定的网页。
当选择某项后,浏览器即打开该项链接的网页。
•图像域:
可以使用图片替代提交按钮。
•文件域:
上载文件时使用。
•按钮:
接受鼠标单击并执行指定的任务。
该类型又分为提交表单、无(普通按钮)和重置表单(复位按钮)。
在本章0.3节的第3部分中,对表单标识也进行了简单介绍。
(3)CSS
CSS是“CascadingStyleSheet”的缩写,即“层叠样式表”。
在页面制作中采用CSS技术,可以有效地对页面的布局、字体、颜色、背景、鼠标指针和其他效果实现更加精确的控制。
通过CSS可以将HTML中的格式代码从HTML中分离出来,并允许在多个文件中共享。
在同一个页面中,可以有多个样式表存在,在多个页面中可以调用同一个样式表。
因此,使用CSS不仅能够简化网页的格式代码,保持网站页面风格的一致性,还可以大大减少重复劳动的工作量。
在Dreamweaver中可以定义如图0-10所示的3种规则类型。
图0-10三种规则
•类:
即自定义CSS规则。
用户可以在文档的任何区域或文本中应用自定义的CSS,如果将自定义CSS应用于一整段文字,那么会在相应的标签中出现“Class”属性,该属性值即为自定义CSS名称。
例如下面的代码:
.bg{background-image:
url(bg.gif);}
•标签:
可以针对某一个标签定义CSS,也就是说定义的CSS将只应用于选择的标签。
例如为
…标签定义了CSS,那么所有包含在…标签中的内容都将遵循定义的CSS。•高级:
CSS选择器规则(高级样式)用于定义特定元素组的格式,如超链接的样式分别为:
a:
link、a:
active、a:
visited或a:
bover。
其中,a:
link用于设置正常状态下链接的样式;a:
active用于设定鼠标单击链接时的样式;a:
visited用于设定访问过的链接样式;a:
bover用于设定鼠标放置在链接上时的样式(详见本书第13章“购物商城”实例中的相关内容)。
CSS的基本写法有3种。
第一种是在HEAD内实现。
CSS一般位于HTML文件的头部,即
…标签内,并且以结束,如:H1{font-size:
x-large;color:
red}
H2{font-size:
large;color:
blue}
其中之间的是样式的内容。
Type的意思是使用Text中的CSS书写的代码。
{}前面是样式的类型和名称,{}中是样式的属性。
上述代码定义了
和标记使用的字号和颜色。
第二种是在文件外的调用。
CSS的定义既可以在HTML文档内部,也可以单独成立文件(详见本书“购物商城”实例中的相关内容)。
它的调用语法为:
第三种是在BODY内的实现。
在BODY中的实现主要是在标记中引用,比如要让H3标记的字体大小为10pt,可以使用下面的语法:
10pt”> 这样的写法虽然直观,但是无法体现出层叠样式表的优势,因此并不推荐使用。 (4)定义脚本语言和代码页 ASP文件中可以使用的脚本语言有多种,如JavaScript、VBScript和PerlScript等。 在Dreamweaver中编写ASP网页时,第一句就是要在<%…%>代码块中说明使用的是什么脚本语言和代码页,如图0-11所示。 图0-11第一行代码非常重要 常见的定义代码有以下两种。 •指定使用JavaScript: <%@LANGUAGE="JavaScript"CODEPAGE="936"%>。 •指定使用VBScript: <%@LANGUAGE="VBSCRIPT"CODEPAGE="936"%> <%@LA
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ASP 动态 网站 设计 入门