《WEB程序设计与应用》网络教学平台

如今Web不断地改变着信息处理的面貌，它已经成为一种广泛并有效的媒介。几乎所有的信息技术领域都受到Web的影响，从而使得Web技术越来越被人们所关注。各种新兴技术使动态网站变得功能非凡，越来越多的动态网站的出现，使Internet（因特网）显得更加光辉灿烂。本课程就是介绍Web程序设计与应用，首先让我们来了解学习Web程序设计必须掌握的相关基础知识。

内容：

互联网可以实现资源的共享和信息的交流，给我们提供了WWW、E-mail、FTP、BBS等多种方式的服务，应用最广泛、信息量最大的就是WWW服务。
本节将介绍Web的基本概念以及与Web相关的知识。
1.1.1 Web概述
⒈ 认识Web
Web(World Wide Web，简称WWW，又称万维网)是目前Internet上应用最广泛也是最重要的信息服务类型，它的影响已经进入了Internet上的广告、新闻、电子商务和展示信息等各个服务领域。
Web采用浏览器/服务器工作模式，如图所示。

Web以超文本标记语言HTML(Hyper Text Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础，通过浏览器为用户提供方便友好的信息浏览界面。
Web将位于全世界互联网上不同网址的相关信息有机地编织在一起。在Web服务方式中，信息以页面（或称Web页）的形式存储在Web服务器中，这些页面采用超文本的方式对信息进行组织，通过链接将一页信息链接到另一页信息。这些相互链接的页面既可以放置在同一台主机上，也可以放置在不同的主机上。页面到页面的链接信息由统一资源定位器URL(Uniform Resource Locator)维持。用户通过客户端应用程序（即浏览器）向Web服务器发出请求，服务器根据客户端的请求将保存在服务器中的某个页面返回给客户端，浏览器接收到页面后对其进行解释，最终将信息以图、文、声并茂的形式呈现给用户。
Web服务的特点在于高度的集成性，它能够实现不同类型的信息（如文本、图像、声音、动画和视频等）和服务（如New、FTP、Telnet、Gopher及Mail等）的无缝链接，特别适合于广域网中信息的组织、检索与显示。
⒉ Web技术综述
在信息技术领域中，Web技术几乎汇集了当前信息处理的所有技术手段，以求最大限度地满足人性化的特点。Web界面五颜六色，既有文字、彩图、动画、声音、视频和一些相关信息或目录摘要，还可根据需要进入你想去的任何地方。只要你愿意或是你能想到的服务，Web几乎都能实现。
Web技术涉及诸多技术领域：
（1）网络硬件技术
从两台或多台机器组成的对等网，到主机控制的以太网，再到生动活泼的因特网，每一处都需要有特定的硬件支持。1968年，当“LOGIN”的“LO”从美国加州洛杉矶分校的电脑屏幕跳到斯坦福大学的电脑屏幕上时，标志着人类首次组网的成功！组网技术经过几十年的锤炼，而今已经相当成熟了。
网络硬件技术包括很多方面，其主要的作用就是把网络中的各种资源通过相关网络连接设备连接起来，实施网络通信和达到共享网络资源的目的。
（2）Web管理技术
网络管理技术是一个永久的话题。网络管理的难点是安全性问题，涉及到防止来自内部和外部的攻击，这对管理员自身的技术是一个严峻的考验。一个合格的网管人员，除了管好网络，还得和黑客做技术上的较量。网络管理涉及的方面可谓种类繁多，简单地说，网络管理就是为保证网络系统能够持续、稳定、安全、可靠和高效地运行，不受外界干扰，而维持网络系统设施所采取的一系列方式和措施。网络管理由网管员通过驾驭网络操作系统和网络管理软件来实现。
Web管理则是在网络管理的基础上，针对网络建设和维护所进行的一系列管理。诸如架设Web服务器、文件传输服务器、邮件服务器、域名服务器、代理服务器以及用户管理和计费管理等等。
1.1.2 HTML语言
Web领域是目前二维多媒体应用最为广泛的领域，现在相当热门。步入这个领域，要求熟练掌握网页制作工具。从老牌的Hotdog 到轻松上手的FrontPage，再到专业级的Dreamweaver，每一款都是不错的选择。
但是你一定要先熟悉一下HTML 代码。因为HTML 语言是整个 Web 技术的基础，网页上的影像、声音、图片和文字，甚至后台程序都是通过HTML连接起来的。如果不懂 HTML 语言，在实际的Web 开发过程中会感到力不从心。
Intermet是一个互联的异构网络，运行在Internet上的计算机可谓五花八门，不仅硬件结构完全不同，使用的操作系统以及运行在操作系统上的软件也千差万别。Web的优越性之一就在于有良好的跨平台的能力，可以运行在不同的机器上，HTML的特性正是为了满足跨平台的需要，使Web页面在各种系统上都能浏览。
HTML是超文本标记语言（Hyper Text Markup Language）的缩写，下面通过一段简单的HTML代码了解一下HTML的结构。
范例1-1：sample1-1.htm，HTML的基本结构
<html>
<head>
<title>这是标题</title>
</head>
<body>
<p>你好，这是正文！</p>
</body>
</html>
说明：
这段代码的功能就是在IE浏览器标题栏显示：“这是标题”，在页面区显示：“你好，这是正文！”。
点击浏览sample1-1.htm效果页。
仔细阅读这些代码，HTML文件的开头和结尾分别由<html>和</html>来标记。标记（又称标签）是HTML的基本元素，可以说一个HTML文件大部分都是由字符信息加上一些标记呈现出来的。也就是说，只要在HTML文件中适当的位置加上所需要的标记，就可以依照各标记所代表的意义实现各种特殊的功效。所有HTML文件都可以分为两个部分：标题和正文。每一部分用特定的标记标出，在HTML语言中规定包含于<head>和</head>标记间的内容为标题部分，包含在<body>和</body>标记间的内容为正文部分。
下面给出了HTML文件的基本格式：
<html>
<head>
标题部分
</head>
<body>
正文部分
</body>
</html>
如果你使用过C/C++、Basic等高级语言，就可以注意到HTML语言与其他语言存在很大的区别，例如它不包含赋值语句和判断、循环等流程控制语句。正如HTML名称“超文本标记语言”所指出，HTML是一种标记语言，它定义了一系列的特殊标记，以便区分页面的不同部分。
从范例1-1中可以看出HTML描述的是文档内容的结构，而不是文档被查看时屏幕上的实际显示样式。文档的格式化是通过浏览器来完成的，当浏览器读入一个Web页面时，将分析HTML的标记，以决定文本和图像在屏幕中的显示形式，浏览器为标记的名称和它们在屏幕中的实际显示样式之间建立了映射。要注意的是，对某些标记部分，不同的浏览器会有不同的映射模式，也就是说用不同的浏览器查看一个Web文档，其看到的结果可能不同，这就是HTML的特性。
标记的特征如下：
▲ 标记一般用“<”和“>”括起，比如<title>。
▲ 标记一般成对出现，比如<title>…</title>，中间就是受标记影响的内容，当然也有单标记，比如<br>。
▲ 标记有属性，通过属性制作各种效果，其格式为：
<标记属性1=属性值属性2=属性值…>受影响的内容</标记>
▲ 标记与属性不分大小写。
常见的HTML标记见表1-1。

表1-1 常见的HTML标记
标记	所标记内容或功能
<html>…</html>	HTML文件
<head>…</head>	网页的标题部分，用于说明文件标题和与文件相关的信息
<body>…</body>	网页的正文部分，网页中要真正显示的内容都包含在本标记中
<title></title>	文件标题，显示在浏览器的标题栏上
<font>…</font>	字体标记，通过其属性可以设置文字的字体、字号和颜色
<!---注释内容--->	注释内容
<br>	强制文本换行，但不会在行与行之间留下空行
<p>	强制换段，可在段与段之间产生一个空行
<pre> …</pre>	预先排好的格式
<hn >…</hn>	标题文字，n=1~6，1号最大，6号最小
<b> …</b>	文本粗体字
<i>… </i>	文本斜体字
<u>…</u>	文本加下划线
<a>…</a>	超文本链接
<table>…</table>	表格
<tr>…</tr>	表格行
<td>…</td>	单元格
<form>…</form>	表单
<frameset>…</frameset>	框架集
<frame>	框架
<img>	图片
<hr>	水平线
<embed>	多媒体

1.1.3 超链接
我们在浏览网页时，当鼠标指针指向某段文本或是某个图像，鼠标指针变成小手状，单击鼠标可以打开其他的网页或是跳转到其他的网站，这就是超链接。采用超链接技术可以将不同的网站、网站中的不同网页、网页中的不同位置彼此串在一起，实现相互间的跳转，方便信息的浏览和查找。人们通过超链接可以很方便很迅速地访问分布于全球计算机上的海量资源，实现在互联网中的漫游。超链接能使Web服务存在广泛和持久的生命力，超链接可以说是Web的灵魂。
1.1.4 站点
所谓站点，就是将网页文件和素材文件，有条理地放置站点文件夹里，这些文件与文件夹就构成了网站的实质内容。站点文件夹里除了网页文件还有素材文件，所谓素材就是网页中所用到的图像、声音、视频等，这些内容是以单独文件的形式存在。
1.1.5 首页
首页是网站的门户。访问某个网站，首先打开的第一个网页就是首页。例如，要访问搜狐公司的网站，在IE地址栏中输入：www.sohu.com，打开的第一个页面就是www.sohu.com/index.html。首页是网站的入口网页，起网站索引的作用，通过首页的导航功能去访问网站中其他的网页。一般首页的取名为index.htm或default.htm，“index”的意思是“索引”，“default”的意思是“默认”。如果主页空间支持ASP技术，你的首页中又包含ASP程序，则首页的取名一般为index.asp或default.asp。首页的具体取名，一般由ISP来指定，例如，搜狐公司提供ASP 技术服务的高级型虚拟主机就要求包含ASP程序的首页取名为default.asp。
1.1.6 URL
URL（Uniform Resource Locator的缩写），统一资源定位器。互联网中某种信息资源以某种方式存储在网络中的某处，必须用一个惟一的URL来进行标识，这样才能方便查找。对于Web来说，可以简单并通俗把URL理解为网址。每个Web网页都有自己的网址，在浏览器地址栏里输入网页的URL，就可以访问这个网页。例如，http://www.sohu.com/index.html，其意思就是采用http超文本传输协议访问搜狐网的首页，由于网页均是通过http超文本传输协议进行访问，默认下，“http://”可以省略不输。
1.1.7 IP地址
为了使互联网上的电脑主机在通信时能够相互识别，每台主机都分配一个能表示其位置的IP（Internet Protocol）地址，这如同公用电话网中电话的号码一样。IP地址是由专门的互联网机构来分配。IP地址具有惟一性，是由32位二进制数组成，分为四组，每组8位，每组之间用小数点分隔，在实际之中常转换成十进制数表示。
1.1.8 静态和动态网页
网页按其表现形式有静态网页与动态网页之分。
⒈ 静态网页
所谓静态网页，就是该网页文件里没有程序代码，只有HTML标记，这种网页文件的后缀为.htm或.html。静态网页一经制成，内容就不会再变化，不管何时何人访问，显示的都是一样的内容，如果要修改有关内容，就必须修改源代码，然后重新上传到服务器上。
静态网页的工作原理如下：
当你在浏览器里输入一个网址回车后，就向服务器端提出了一个浏览网页的请求。服务器端接到请求后，就会找到你要浏览的静态网页文件，然后发送到你的浏览器上显示出来。其原理如图所示。

⒉ 动态网页
所谓动态网页，就是该网页文件不仅含有HTML标记，而且含有程序代码，这种网页的后缀一般根据不同的程序设计语言来定，如ASP文件的后缀为.asp。动态网页能够根据不同的时间、不同的来访者而显示不同的内容，还可以根据用户的即时操作和即时请求，动态网页的内容发生相应的变化。如常见的BBS、留言板、聊天室等就是用动态网页来实现的。
动态网页的工作原理与静态网页有很大的不同。当你在浏览器里输入一个动态网页网址回车后，就向服务器端提出了一个浏览网页的请求，服务器端接到请求后，首先会找到你要浏览的动态网页文件，然后就执行网页文件中的程序代码，将含有程序代码的动态网页转化为标准的静态网页，最后将静态网页发送给你，其原理如图所示。

1.1.9 脚本
脚本（Script）是网页制作中常见的动态网页制作技术。根据脚本语言所编写的代码可以直接插入到HTML中，利用脚本可以操纵网页上的元素去实现网页的交互功能，还可以制作特殊动态效果的网页，例如，注册时用户输入信息的有效性验证、弹出的信息框、鼠标指针的文字跟随、渐隐渐现的图片等都是脚本的实际运用。常用的脚本语言有JavaScript和VBScript，这两种脚本语言也是本书所介绍的ASP的语言基础。
1.1.10 FTP　
FTP是一种文件传输协议。通过FTP，用户与存有大量文件的远程计算机（称为FTP服务器）连接，查看远程计算机上的文件，然后把文件从远程计算机上复制到本地的计算机上（称为下载），或者把本地计算机上的文件传送到远程计算机上去（称为上传）。如果我们是在ISP处申请的主页空间，制作完成的网页文件一般采用FTP的形式上传到Web服务器上。
1.1.11 Web制作工具
在初期，主要网页制作工具是利用现成的文本编辑器来直接编写HTML代码，但是很快相继出现了非常多的各有特色的网页制作工具。对于网站开发人员来说，目前的问题是，在众多的工具中如何选择一种既能满足网页设计的要求，又能适合自己的具体情况的工具，而选择了一个适合的制作工具可以使我们的工作事半功倍。下面介绍几种常用的网页制作工具和网页图形设计工具以及网页上传工具。
⒈ FrontPage
FrontPage 是Microsoft公司的产品，包含在Office专业版的套装里，支持所见即所得的编辑方式，在站点的管理方面做得很出色。网页设计者不需要掌握很深的网页制作技术，甚至不需要了解HTML的基本语法，很适合新手使用。事实上，如果会使用Microsoft Word的话，很快就会学会使用FrontPage，因它的使用方法和Word十分相似。现在常用的FrontPage版本有FrontPage2000、FrontPage XP和FrontPage 2003。
⒉ Dreamweaver
Dreamweaver是Macromedia公司的产品，和FrontPage 的功能类似，也是所见即所得的网页制作工具，Dreamweaver功能非常强大，它支持层的操作，并且可以避免生成冗余代码。它是一款专业人士设计制作网页的工具。现在，不少网站在招聘网站设计人员时，都要求应聘该职位的人员能熟练地操作Dreamweaver，所以如果你将来立志于从事网站制作工作就一定要学好Dreamweaver。现在常用的Dreamweaver版本有Dreamweaver 4、Dreamweaver MX和Dreamweaver MX 2004。
3．图形设计工具Fireworks
图形设计工具比较多。
Fireworks是一款专业的网页图形图像设计与制作工具，它与Dreamweaver、Flash都是Macromedia公司的产品，合称网页制作三剑客。这三款软件协同作战，能帮助你设计制作出专业级的网站。
4．Photoshop
Photoshop 是Adobe公司的产品，是功能非常强大的专业图形软件，可以制作任何你所能设想到的平面效果。其中包含的ImageReady是用于网页图片制作的。缺点是体积庞大，操作比较复杂，非专业人士很难熟练地掌握。
5．网页动画开发工具Flash
Flash 可以非常方便地制作动画效果，并根据鼠标事件（Event）来引发一些特效，适合制作交互动画和小游戏。最吸引人的还是作品SWF体积出奇的小，并且可以以插件的形式加入到网页中。通常几分钟的复杂Flash动画才几百K，比起AVI格式真有天壤之别。很多在网上传播的流行音乐（MTV），如果做成Flash 动画，5分钟左右连图像带歌曲也只有200—300K，而以压缩比高著称的MP3格式光5分钟的歌曲就要4M。Flash在这几年来一直迅速发展，已成为网络上广为接受的标准格式。
6．网页上传工具CuteFTP
制作好的网页要上传到提供主页空间的服务器，才能让别人去访问。上传工具将影响到对站点更新维护的效率。CuteFTP是老牌的上传软件，功能强大，使用方便，支持拖放，大多数网页设计者是选用CuteFTP进行网站的上传与下载。
1.1.12 Web服务器
一种具有高性能的计算机。网站所包含的文件就是存储在里面。通过Web服务器软件，能有效地管理网站，并接受用户在客户端通过浏览器发出的浏览请求，然后发送请求浏览的网页到用户浏览器。
Web服务器的建立方法有多种，常见的有Windows系统中的PWS和IIS。下面第2节我们就专门介绍如何配置Web服务器。

你问我答简说ASP

什么是静态网页和动态网页?

网页按其表现形式有静态网页与动态网页之分。

静态网页：

所谓静态网页，就是该网页文件里没有程序代码，只有HTML标记(网页中的图片、表格、文字等页面内容是通过HTML代码来描述，打开一个网页，在页面点击鼠标右键，在快捷菜单中选择[查看源文件]，即可查阅此网页的HTML代码)，这种网页文件的后缀为.htm或.html。静态网页一经制成，内容就不会再变化，不管何时何人访问，显示的都是一样的内容，如果要修改有关内容，就必须修改网页，然后重新上传到服务器上。

静态网页的工作原理如下：

当你在浏览器里输入网址回车后，就向服务器端提出了浏览网页的请求。服务器端接到请求后，就会找到你要浏览的静态网页文件，服务器识别出是静态网页（查看后缀是.htm或.html），然后直接发送到你的浏览器上显示出来。

注意：

1．静态网页内容由HTML代码来描述，客户端浏览器负责解析HTML代码，显示页面内容。
2．静态网页响应速度快。
3．静态网页适合放置长久不变的信息，比如公司介绍。

动态网页：

所谓动态网页，就是该网页文件不仅含有HTML标记，而且含有程序代码，这种网页的后缀一般根据Web程序设计技术来定，如利用ASP技术培训开发的动态网页文件的后缀为.asp，jsp技术为.jsp,php技术为.php,.net技术为.aspx。动态网页能够根据不同的情况而动态显示相应的内容，还可以根据用户的即时操作和即时请求，内容发生相应的变化。如新闻发布系统、BBS、留言板、聊天室等就是用动态网页来实现的。
动态网页的工作原理与静态网页有很大的不同。当你在浏览器里输入动态网页网址回车后，向服务器端提出了浏览动态网页的请求，服务器端接到请求后，首先会找到你要浏览的动态网页文件，然后就执行网页文件中的程序代码，将程序代码所代表的动态内容转化为静态的标准HTML内容，最后全部以静态网页HTML形式发送到你的浏览器。

什么是静态网站和动态网站？

静态网站即网站内所有页面均为静态页面；动态网站即网站内存在动态网页，可以实现某些动态交互式功能。通常，一个动态网站，会把信息不经常变换的内容做成静态页面形式，而需要经常变换内容的页面做成动态网页形式。

为什么网站要做成动态网站？

互联网发展十多年来，最早的网站为静态网站，如果要更新网站内容，必须请网站制作者更新网页后，再上传至服务器将原网页覆盖后才能实现，显然这很不方便网站内容的及时更新。试想，一家贸易公司请一家网站设计工作室制作公司网站，如果是静态网站，发条公司动态或公司通告，还需要通知网站的制作者更新网页，再上传至服务器，这很麻烦。如果是动态网站，公司自己就可以随时通过浏览器进入管理系统发布或更新信息。

什么是脚本？

脚本（Script）是网页制作中常见的制作技术。根据脚本语言所编写的代码可以直接插入到HTML中，利用脚本可以操纵网页上的元素去实现网页的交互功能，还可以制作特殊动态效果的网页，例如，注册时用户输入信息的有效性验证、弹出的信息框、鼠标指针的文字跟随、渐隐渐现的图片等都是脚本的实际运用。

常用的脚本语言有JavaScript和VBScript，VBScript是ASP的语言基础。

注意：
1．JavaScript和VBScript脚本语言基本相同。
2．JavaScript脚本一般浏览器均支持，而VBScript脚本只有部分浏览器支持。故，静态网页使用的脚本一般是JavaScript脚本。
3．VB→VBScript→ASP，VB是VBScript的语言基础，VBScript是ASP的语言基础。
4．VBScript脚本分客户端运行和服务器端运行，如果是客户端运行即为普通脚本，就是大家通常所看到的一些网页特效；如果设定在服务器端运行，即为ASP程序。

FLASH版演示教案：

本节FLASH版演示教案

实训作业：

1.在学院网站寻找哪些页面是静态，哪些是动态？各举五例，给出URL

2.在本教学平台寻找，哪些地方使用脚本实现网页特效？举二例，给出URL

3.各寻找一例：学院网站中的信息发布页、注册页、网上调查页、查询页、留言页。

4.浏览以下网站，给出该网站采用的WEB动态网页制作技术

http://www.jxgj.com/	江西高教网的新闻列表功能
http://www.dangdang.com/	当当网，网上商店
搜狐社区
上海人才市场网
知网
学院教务管理系统
江西人事厅网
http://bjcgi.163.net/cgi-bin/tom_reg.cgi	TOM的电子邮箱注册，注意页面文件的后缀
http://bbs.tom.com/bbs.php	TOM的论坛，注意页面文件的后缀

在线测试：

在线测试

备注：

本次学习内容介绍了学习WEB程序设计必须了解的相关概念，其中一部份我们在以前的课程中有所了解，在此再进行温故。

~ 江西信息应用技术职业学院信息技术系制作 ~

E-Mail:lxlz2050@163.net Tel:0791-5275546