Transcript Visual Basic 6.0 程序设计教程

Web体系结构与开发技术
软件学院 崔波
 邮箱：[email protected]
 教材：网站规划与网页设计 张兵义 电子工
业出版社
 学分：2+1

课程内容
 网络基础与Web体系结构
 网站的规划与设计
 网站建设与网页制作的基本知识
 网页规划、设计和制作的技能
 网页三剑客：Dreamweaver
MX ,
Flash MX, Fireworks MX 的应用方法
及技巧。
 javascript
 Jsp
第1章 网络与Web基础知识
1.1 Internet概述
1.2 浏览器-服务器模式
1.3 Web标准
1.1 Internet概述
1.1.6 万维网WWW
1．WWW和浏览器的基本概念
 WWW：World Wide Web，称3W或
Web，“万维网”。
 作为Internet上的新一代用户界面，摒弃
了以往纯文本方式的信息交互手段，采用超
文本（Hypertext）方式工作。
 浏览器：用于网上浏览的应用程序，主要
作用是显示网页和解释脚本。
标记语言家族
GML(1969)
SGML(1985)
HTML(1993)
XML(1998)
XHTML
MathML
WML
SVG
....
CML
WEB服务器

1.
2.
3.
WEB服务器也称为WWW(World Wide Web)服
务器，主要功能是提供网上信息浏览服务。
应用层使用HTTP协议。
HTML文档格式。
浏览器统一资源定位器(URL)。
WWW的基本结构
浏览器
HTTP
WWW服务器 CGI
LAN/WAN
中间件
HTML
WWW服务器
SQL
LAN/WAN
数据库
服务器
1.1 Internet概述
1.1.6 万维网WWW
1．WWW和浏览器的基本概念
浏览器种类很多，目前常用的有Internet Explorer
（简称IE）和Netscape两种。如图1-2所示的是IE浏览器的
工作界面。
图1-2 IE浏览器的工作界面
网络基础知识
为用户提供图形化用户界面－web页，以
查阅web上的文档。
 www就是以web页及他们之间的链接为基
础，构成的庞大的信息网。
 www-web站点－web页的关系

1.1 Internet概述
1.1.6 万维网WWW
2．统一资源定位器（URL）
URL（Universal Resource Locator）是“统一资源
定位器”的英文缩写。每个站点及站点上的每个网页都有一
个惟一的地址，这个地址被称为统一资源定位地址。向浏览
器输入URL地址，可以访问其指向的网页，指定网页中的超
文本时也要用到URL地址。
URL的基本结构为：
通信协议：//服务器名称[:通信端口编号]/文件夹1[/文件夹2…]/文件名
相关知识
URL(Uniform Resource Locator)统一
资源定位器。URL是帮助在网络上找到
所需资源的“路径”，
如
 http://www.swjtu.edu.cn/www2003/jd
sq/home.htm

传输协
议
主机名
路径和文
件名
超文本置标语言HTML
1.1 Internet概述
1.1.6 万维网WWW
5．HTTP
HTTP（HyperText Transfer Protocol，超文本传输
协议）
使浏览器更加高效，使网络传输量减小。
服务器除了包括供用户访问的HTML文件以外，还有一个
HTTP驻留程序，用于响应用户的请求。简单地说，HTTP就
是专门为WWW设计的协议。
客
HTTP
户
服务器
建立通信
发出请求
给出响应
结束通信
打开一个网页时，浏览器是HTTP客户，向服务器发
送请求。
当浏览器中输入一个HTTP的URL地址或单击一个超
链接时，浏览器就向服务器发送一个HTTP请求，此请
求被送往由IP地址指定的URL。
服务器驻留程序接收到请求，在进行必要的操作后回
送所要求的HTML源文件，
客户端浏览器将HTML源文件“翻译”成Web页面。
1.1 Internet概述
1.1.6 万维网WWW
6．主页
通常作为一个站点中的目录或索引，就像一份报纸的头版
一样，把最热门、最重要的消息写在上面，然后再注明“详
见第X版”，让读者能快速找到自己感兴趣的新闻。。
7．常用搜索引擎
 搜索引擎本身是一个网络站点；
能够在WWW上主动搜索其他Web站点中的信息并记录下
各个网页的Internet地址（也称URL地址），并按要求进行
排列，存放在可供查询的大型数据库中。
用户可以通过访问搜索引擎网络站点对所需信息进行查询。
查询结果是一系列指向包含用户所需信息的网页的网络地址，
通过单击超链接，就可以查看需要的信息了。
搜索引擎常用技巧

在检索的关键字中，可以使用这样一些描述符
号对检索进行限制：
“”（双引号）用来查询完全区配关键字串的网站，
例如“杀毒软件”；
 +（加号）用来限制该关键字必须出现在检索结果
中；—（减号）用来限制该关键字不能出现在检索
结果中 。 例:“盐城＋信息＋网络”；要查找“电
脑”，但必须没有“技术”字样，可用“电脑－技
术”来表示。
 使用逻辑词辅助查找： AND（和）、OR（ 或）、
NOT 。

1.2 浏览器-服务器模式
应用程序的设计：由传统的C/S（Client/Server，客户-服
务器）模式逐渐向B/S（Browser/Server，浏览器-服务器）
模式过渡。
C/S模式：将任务合理分配到Client端和Server端，降低了
系统的通信开销，可以充分利用两端硬件环境的优势。
B/S模式：随着Internet技术的兴起，对C/S模式的一种变
化或者改进的模式。用户界面完全通过WWW浏览器实现，一部
分事务逻辑在前端实现，但是主要事务逻辑在服务器端实现。
B/S模式利用不断成熟和普及的浏览器技术实现原来需要复杂
专用软件才能实现的强大功能，并节约了开发成本，是一种
全新的软件系统构造技术。
1.2 浏览器-服务器模式
B/S模式的工作原理如图1-8所示。
图1-8 B/S模式的工作原理
1.3 Web标准
每次主流浏览器版本的升级，都会使用户建
立的网站变得过时，此时就需要升级或者重新建
网站。
 每当新的网络技术和交互设备出现时，设计
人员也需要制作一个新版本来支持这种新技术或
新设备，
 在W3C（W3C.org）的组织下，Web标准开始
被建立（以2000年10月6日发布XML 1.0为标志），
并在网站标准组织（WebStandards.org）的督促
下推广执行。

1.3 Web标准
1.3.1 Web标准的概念
1. 结构标准语言
(1) XML
XML（Extensible Markup Language，可扩展标识语
言）目前推荐遵循的是W3C于2000年10月6日发布的
XML1.0。XML最初设计的目的是弥补HTML的不足，以强大
的扩展性满足网络信息发布的需要，后来逐渐用于网络
数据的转换和描述。
(2) XHTML
XHTML（Extensible HyperText Markup Language，
可扩展超文本标识语言）是HTML向XML过渡的一个桥梁。
是一个引导人们逐步走向规范、走向XML的过渡方案。
XHTML虽然有“X”但它并不能扩展，只是在HTML的基础
上严格遵循XML规范。
1.3 Web标准
2. 表现标准语言
Web标准的结构和表现分离的重要性。
 结构是文档中的主体部分，由语义化、结构化的标记组
成。表现是赋予内容的一种样式
 表现是文档看起来的样子。
 尽可能地把结构和表现相分离，这样当表现变化时，不
用去更改结构。
CSS（Cascading Style Sheets，层叠样式表）目前推
荐遵循的是W3C于1998年5月12日推荐的CSS2。创建CSS标准
的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。
纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结
构，使站点的访问及维护更加容易。
1.3 Web标准
3. 行为标准
(1) DOM
根据W3C DOM规范（http://www.w3.org/DOM/），
DOM（Document Object Model，文档对象模型）是一种
与浏览器、平台、语言的接口，使得用户可以访问页面
其他的标准组件。简单理解，DOM解决了Netscaped的
JavaScript和Microsoft的JScript之间的冲突，给予Web
设计师和开发者一个标准的方法，让他们来访问站点中
的数据、脚本和表现层对象。
(2) ECMAScript
ECMAScript是ECMA（European Computer
Manufacturers Association，欧洲计算机制造协会）制
定的标准脚本语言。目前推荐遵循的是ECMAScript 262。
1.3 Web标准
1.3.2 建立Web标准的目的
• 提供最大利益给最多的网站用户；
• 确保任何网站文档都能够长期有效；
• 简化代码，降低建设成本；
• 让网站更容易使用，能适应更多不同用户和更多网络设
备；
• 当浏览器版本更新或者出现新的网络交互设备时，确保
所有应用能够继续正确执行。
1.3 Web标准
1.3.3
•
•
•
•
•
•
•
•
•
•
采用Web标准的优点
1．客户端的优点
采用Web标准后，客户端带来的好处主要体现在以下5个方面：
文件下载与页面显示速度更快；
内容能被更多的用户所访问（包括失明、弱视、色盲等残障人士）；
内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索
机器人等）；
用户能够通过样式选择定制自己的表现界面；
所有页面都能提供适于打印的版本。
2．服务器端的优点
采用Web标准后，服务器端带来的好处主要体现在以下5个方面：
更少的代码和组件，容易维护；
带宽要求降低（代码更简洁），成本降低；
更容易被搜寻引擎搜索到；
改版方便，不需要变动页面内容；
提供打印版本而不需要复制内容。
网页

通过浏览器看到的画面就是网页，图标为

网页是后缀名为html或htm的文件，称为
html文档

html文档是用html语言编写的文档，我们常
见的是html文档的外观，并非html代码

网页浏览器是用来解读html文件，常见的浏
览器有微软的探索者IE(Internet Explorer),
网景公司的航海者（Netscape）等
网页的基本要素-文字
文字是网页发布信息所用的主要形式，由文字
制作出的网页占用空间小
文字性网页还可以利用浏览器中“文件”菜单
下的“另存为”功能将其下载，便于以后长期
阅读，
可以进行编辑打印
要注意编排，包括标题的字型字号，内容的层
次样式，是否需要变换颜色进行点缀等等。
文字的编排
1．标题
网页通常都有一个标题，表明本网页的主要内容。
2．字号
统筹规划，大小搭配适当，给人以生动活泼之感
觉。
3．字型
不同的字体字型，使网页产生吸引人的效果。
当文本内容较多时。可以利用表格形式来实现。
网页的要素-图形
图形：包括普通的绘制图形、图像，动画。
网页上的图形格式：一般使用JPEG和GIF，这
两种格式具有跨平台的特性，可在在不同操
作系统支持的浏览器上显示。
图形应用：
1．菜单按钮
2．背景图形
网页的要素－超链接
链接可以从一个网页转到另一个网页，也
可以从一个网站转到另一个网站。
 链接的标志有文字和图形两种。
 超链接：文本与文本之间的连接关系
 可以把internet不同地区的服务器上的信息
连接起来。

Html文档
多平台兼容，任何一台具有阅读、浏览
html文件的浏览器的机器能够在任何平
台上阅读网络文件。
 HTML编辑器是创建和修改HTML文档的
软件。如frontpage，dreamweaver等
编辑工具。
 HTML文档由文本、格式化代码和导向其
他文档的超链接组成。

网站

网站是由网页组成的，若干个html文件
通过“超链接”连接在一起。

一个网站都有一个主页（Homepage)页
面，引导访问者浏览网站的作用。

如搜狐、网易、新浪、交大网站等
网页代码实例
<HTML>
 <HEAD>
 <TITLE>网页标题</TITLE>
 </HEAD>
 <BODY BGCOLOR="#FFFFFF">
 <P>这里是HTML文件的正文</P>
 </BODY>
 </HTML>

简单网页的生成
<HTML>
 <BODY>
 测试页面
 </BODY>
 </HTML>

Html文档
扩展名为htm或者html
 多平台兼容，任何一台具有阅读、浏览
html文件的浏览器的机器能够在任何平
台上阅读网络文件。
 HTML文档由文本、格式化代码和导向其
他文档的超链接组成。

HTML语言
HTML (Hypertext Markup language)超
文本标记语言，是一种专门用于Web页制
作的编程语言
 描述超文本各部分内容，告诉浏览器如
何显示文本，生成与别的文本或图像的
链接点
 HTML可插入图形、音频、视频等对象
 用户在下载文件时，把标识解释成应有
的格式，显示出来。

网页代码实例
<HTML>
 <HEAD>
 <TITLE>网页标题</TITLE>
 </HEAD>
 <BODY BGCOLOR="#FF0FFF">
 <P>这里是HTML文件的正文</P>
 </BODY>
 </HTML>

简单网页的生成
<HTML>
 <BODY>
 测试页面
 </BODY>
 </HTML>

html标签
控制html文档外观的是html标签，用尖
括号括起来，
 在浏览器中标签被解释成具体的内容，
如超级链接、标题、段落等


不同的标签决定了不同的web页面外观
html标签
有的标识链接文件，有的形成表格，有的
接受用户输入，形成了五彩缤纷的画面。
 可以把声音、图像、视频连接起来，也可
连接数据库
 标签一般有二种状态：起始标签和结束标
签

常用标签
典型的HTML文本的基本结构形式：
<HTML>
HTML标
<HEAD>
记符
<TITLE>
文本标题
文件头标记符，描述HTML首部
<／TITLE>
文档的标的内容，说明文档的整体信息
<／HEAD>
题
<BODY>
文本内容
<／BODY>
<／HTML>
体部标记符，
其它标记
设置文档的可
见部分 。
属性

属性是用来描述对象特征的特性。
 属性放置在开始标记符的尖括号里
 属性与标记符之间用空格分隔
 属性的值放在相应属性之后，用等号
分隔
 不同的属性之间用空格分隔。
属性的例子
格式为：
<标记符 属性1=属性值1 属性2=属性值2 …> 受
影响的内容 <／标记符>
<table
width="400"
height="52"
border="1"
bordercolor="#000000"
bgcolor="#FF0000">
 <tr><td height="46"></td><td ></td>
 </tr>
 </table>
（1）HTML标记符
<HTML><／HTML>这两个标记符是
HTML文档的标记符。<HTML>处于文档的最
前端，表示文档的开始，即浏览器从<HTML>
开始解释。而<／HTML>则位于文件的最后一
行，这样的结果表示这一整份的文档都是
HTML语法的文档。
（2）HEAD标记符
<HEAD><／HEAD>是HTML文件头标
记符，用来描述HTML首部的内容，说明文档
的整体信息。所有首部信息并不会出现在利用
WWW浏览器所看到的窗体中。<HEAD><／
HEAD>通常与某些标记符一起使用，如
<TITLE><／TITLE>标记符。
（3）TITLE标记符
<TITLE><／TITLE>指的是一份文档的标
题。通常来说，每一份文档都应该有一个标题来
简述这一份文档的特色或是主题。对于WWW浏
览器而言，标题所在的位置虽然依照浏览器的不
同而不同，但是大部分都位于浏览器的最上方。
（4）BODY标记符
<BODY><／BODY>指的是定义出一个
HTML文档的体部，位于首部下面。在<BODY>
标记符内的文字，所有使用标记符的地方都可以
经浏览器正确地显示在浏览器窗体中。
标题处理








在HTML中，用户可以通过Hn标记符来标识文档中的标题和副标
题，其中n是1到6的数字。<H1>表示最大的标题，<H6>表示最
小的标题。使用标题样式时，必须使用结束标记符。
标题格式：<Hn align="对齐方式" > 标题文字 </Hn>
属性align用来设置标题在页面中的对齐方式：left（左对齐）、
center（居中）或right（右对齐）。
如:
<H4 align="left" face=" 楷 体 _GB2312" size="4"
color="#0000FF">计算机系</H4>
<Hn>…</Hn>标记符默认显示宋体。<Hn>…</Hn>标记符会自
动插入一个空行，不必再用空行标记符。
在一个标题行下无法使用不同大小的字体。
标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。
段落处理
在HTML中段落处理是通过段落标记来完成的，常用的段落标
记符有：
1．注释标记符
HTML的注释标记符的格式为：<!--注释内容-->
2．强制换行标记符
强制换行标记符为<BR>，放在一行的末尾，可以使后面的文字、
图片、表格等显示于下一行，而又不会在行与行之间留下空行，
即强制文本换行。
3．强制换段标记符
在HTML文档中，无法用多个回车、空格、Tab键来调整文档
段落的格式。要用HTML的标记符来强制换行、分段。
（1）强制换段标记符
强制换段标记符的格式为：
文字<P>
（2）设置段落标记符
设置段落标记符的格式为：
<P align="对齐方式"> 文字 <／P>
4．显示预排格式标记符
当用其他编辑工具编排好了一段文字后，其中很可能有一些
HTML文件不支持的控制符号，如同车、多个空格、Tab键等。
如果希望在浏览网页时仍保留在编辑工具中已经排好的段落格式，
可以使用<PRE>标记符将预先排好的格式保留下来。
显示预排格式标记符的格式为：
<PRE>预先排好的格式<／PRE>
5．分区显示标记符
分区显示标记符的格式为：
<DIV align="对齐方式"> 文本或图像 <／DIV >
6．水平线
在页面中插入一条水平标尺线（Horizontal Rules），可以
使不同功能的文字分隔开，看起来整齐、明了。
水平线标记符的格式为：
<HR align=" 对 齐 方 式 " size=" 横 线 粗 细 " width=" 横 线 长 度 "
color="横线颜色" noshade>
文本格式处理
文本格式处理包括文字设置和格式处理。
1．文字设置
在网页中为了增强页面的层次，其中的文字可以用
不同的大小、字体、字型和颜色，通常用FONT标记
符来完成。
FONT标记符设置格式为：
<FONT size="数字" face="字体名" color="颜色"> 被
设置的文字 <／FONT>
size属性是字号属性，用于控制文字的大小，它
的取值既可以是绝对值，也可以是相对值。
face属性是字体标记符，用来指定字体样式。
color属性可用来控制文字的颜色，属性值可以
是颜色名称或十六进制值。
2．格式处理
HTML中的格式标记符有：
 <BLOCKQUOTE>< ／ BLOCKQUOTE>
标记符之间加入的文本将会在浏览器中
按两边缩进的方式显示出来。
 <DL>< ／ DL> 标 记 符 是 指 Directory
List ， 用 来 创 建 一 个 普 通 的 列 表 ， ;
<DT><／DT>用来创建列表中的上层项
目；<DD><／DD>用来创建列表中最下
层项目；<DT><／DT>和<DD><／DD>
都必须放在<DL><／DL>标志对之间。

<OL><／OL>标记符指Ordered List，它
是用来创建一个标有数字的列表；
 <UL><／UL>标记符用来创建一个标有圆
点的列表；
 <LI><／LI>标记符只能在<OL><／OL>或
<UL><／UL>标记符内使用，此标记符用
来创建一个列表项。

3．设置页面属性
（1）设置页面背景颜色
<BODY>标记符中使用bgcolor属性可以为网
页设置背景颜色。
（2）设置页面背景图像
单纯使用一种颜色作为背景显然有些单调，
网页设计者也可选择特定图案作为页面的背景，
使用BODY标记符的background属性即可。
HTML语句为：
<BODY background=“ 网 页 背 景 图 案 的 地
址”>
（3）设置超链接
<a href=“”></a>
Web 服务器基础

Web 服务器是响应来自 Web 浏览器的请求以
提供 Web 页的软件,也称为 HTTP 服务器

常用的web服务器：
Windows 98 用户： Microsoft Personal
Web Server (PWS)：
Windows NT 或Windows 2000 用户：
Internet Information Server (IIS)互联网信息
服务



其它： Apache Web 服务器、Netscape
Enterprise Server 和 Sun ONE Web Server。
PWS
PWS（Personal Web Server）个人网
页服务器。
 Windows 98 应用的web服务器


微软公司为解决个人信息共享和Web开
发需要而设计开发的软件。

加速和简化Web站点设置的桌面Web服
务器。
Apache

Apache是最流行的Web服务器端软件，是世
界排名第一的WEB服务器。

完全免费，完全源代码开放。

可以在所有计算机平台上运行；如我们常用
的Windows和Linux下运行
Apache特征












支持最新的HTTP 1.1协议；
简单而强有力的基于文件的配置；
支持通用网关接口CGI；
支持虚拟主机；
支持HTTP认证；
集成Perl脚本编程语言；
集成的代理服务器；
具有可定制的服务器日志；
支持服务器端包含命令（SSI）
支持安全Socket层（SSL）
用户会话过程的跟踪能力；
支持FastCGI； 支持Java Servlets。
IIS
IIS（Internet Information Server） 互
联网信息服务，是一种Web服务组件
包括Web服务器、FTP服务器、NNTP服
务器和SMTP服务器，分别用于网页浏
览、文件传输、新闻服务和邮件发送等
通过使用超文本传输协议(HTTP)传输信息。
安装 IIS
已经安装IIS的文件夹结构中包含一个
C:\Inetpub 或 D:\Inetpub 文件夹。
 如果没有安装：
1.进入“控制面板”;
2.依次选“添加/删除程序→添加/删除
Windows组件”;
3.选中“Internet信息服务（IIS）” ，按
提示操作即可完成IIS组件的添加。
4添加的IIS组件后包括Web、FTP、
NNTP和SMTP等全部四项服务。

IIS的添加和运行

当IIS添加成功之后，再进入“开始→程序
→管理工具→Internet服务管理器”以打开
IIS管理器，对于有“已停止”字样的服务，
均在其上单击右键，选“启动”来开启。
测试 IIS web服务器

任意创建一个HTML 页，将网页保存Web 服务器
的Inetpub\wwwroot 文件夹中。

IIS 运行在本地计算机，则在 Web 浏览器中输入
以下 URL：
http://localhost/文件名.html




IIS 运行在联网的计算机上，则将联网计算机名作
域名。
例：如果运行 IIS 的计算机名是“rockford-pc”，
则在浏览器中输入以下 URL：
http://rockford-pc/myTestFile.html
Web 服务器基础








Web 服务器的默认名称是计算机的名称;
可通过子文件夹来打开存储在根文件夹的任何子
文件夹中的 Web 页。
例: soleil.html 文件存储在 “gamelan”的子文
件夹中，如下所示：
C:\Inetpub\wwwroot\gamelan\soleil.html
http://mer_noire/gamelan/soleil.html
如果 Web 服务器运行在本地计算机上，可用
“localhost”或“127.0.0.1”来代替服务器名称。
http://mer_noire/gamelan/soleil.html
http://localhost/gamelan/soleil.html
http://127.0.0.1/gamelan/soleil.html
习题1
1．举例说明Internet提供的主要服务。
2．TCP/IP在互联网中起什么样的作用？IP地址分为哪几
类，是如何分类的？IP地址210.43.96.201是哪类地址，
其网络ID号是多少？
3．简述域名系统结构，举例说明什么是顶层域名、二级域
名和三级域名。
4．什么是WWW浏览？WWW浏览常用的浏览器是什么
浏览器？URL的含义和功能是什么？HTTP的含义和功
能是什么？
5．简答超文本和超文本置标语言的特点。
6．Web标准的3个重要标准是什么？
7．举例说明常用的搜索引擎及使用搜索引擎查找信息的方
法。
3．创建和测试Web页
由于HTML文件的实质就是文本文件，因此可以用任何文本编
辑器编辑HTML文件，通常可以使用Windows系统中的“记事本”
程序。另外，由于Windows98／Me／2000系统中捆绑了IE5或
IE5.5（Internet Explorer 5.0或5.5），因此用户在Windows中
可以方便地对Web页进行简单的测试。
（1）创建Web页
保存了Web页之后，在所选择的文件夹中将包含所创建的Web
页，可以由IE将其打开。
（2）发布Web页
用户创建了Web页之后，通常可以直接将其保存在硬盘、软
盘或光盘上，作为一种电子文档，也可以将其发布到Internet上，
以便让全世界的浏览者都能够进行浏览。发布Web页时应按以下
步骤进行。
① 创建本地站点
② 申请网页空间
③ 用FTP上传网页