第 9章 网络编程基础
9.1 网络编程概述
9.2 HTML编程基础
9.3 ASP编程技 术
9.1 网络编程概述
9.1 网络编程概述
1,HTML(Hyper Text Markup Language)超文本标记语言
HTML语言是 是一种专门用于 Web页制作的编程语言,
利用 HTML语言编写的 Web网页,属于纯文本文件,
可用任何文本编辑器阅读和编辑 。
HTML文档通过标记和属性对超文本的语义进行描述,标记用于描述网页内容在浏览器中的显示方式,生成与别的文本或图像的链接点,产生所需的各种效果 。
HTML作为一种标记语言,创建的文档与系统平台无关,即任何可以运行浏览器的计算机都能阅读并显示 HTML。
2,网页制作工具
1) FrontPage
FrontPage是由 Microsoft公司推出的新一代 Web
网页制作工具 。 FrontPage的特色如下:
( 1) 强大的网页设计功能
可智能地完成 HTML文本的编辑 ;完善了所见即所得的网页编辑操作 。
( 2)丰富的网页设计模板、设计向导和主题样式
提供了多种网页设计模板、网页设计向导和主题样式。使用这些模板、向导和样式,即使是初学者也可以设计出具有专业水准的网站。
9.1 网络编程概述
9.1 网络编程概述
2) Dreamweaver
Dreamweaver是由 美国 Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,用户不必编写复杂的 HTML源代码,可以轻而易举地制作出跨越平台限制和跨越浏览器限制的动态网页。所以,Dreamweaver一般作为网页设计者的首选工具。
Dreamweaver的基本功能如下:
( 1)可视化的专业网页编辑器和友好的工作界面
( 2)网站管理功能
( 3)强大的多媒体处理功能,在 Dreamweaver中可以插入 Flash动画和 Fireworks生成的图像。
9.1 网络编程概述
9.1 网络编程概述
( 4) Dreamweaver可以很好地控制 HTML源代码,而不会产生垃圾代码,
( 5) 提供行为等控件来进行动画处理和产生交互式响应 。 Dreamweaver提供一个工具 -层 。 层的嵌套,
层的可见性,层的重叠,与时间线相配合可以作出许多动态效果 。
( 6) Dreamweaver MX允许使用服务器语言 ( 例如
ASP,ASP.NET,ColdFusion 标记语言 (CFML)、
JSP和 PHP) 等服务器语言来生成支持动态数据库的 Web 应用程序 。
9.1 网络编程概述
9.1 网络编程概述
3,网页美化工具
为了使制作的网页更为美观,制作网页时,还需利用网页美化工具对网页进行美化。
1) Photoshop
Photoshop是由 Adobe公司开发的图形处理软件,
它是目前公认的 PC机上最好的通用平面美术设计软件,它功能完善、性能稳定、使用方便,所以在几乎所有的广告、出版、软件公司,Photoshop
都是首选的平面制作工具。
9.1 网络编程概述
9.1 网络编程概述
2) Fireworks
Fireworks是由 Macromedia公司开发的图形处理工具,是专业网页图形设计及制作的解决方案 。
作为为网络设计而开发的图像处理软件
Fireworks还能够自动切割图像,生成光标动态感应的 JavaScript程序等等,而且 Fireworks具有强大的动画功能和一个相当完美的网络图像生成器 。
Fireworks动态生成的网络图形,可以输出到
Dreamweaver及其他的 HTML代码编辑软件中 。
9.1 网络编程概述
9.1 网络编程概述
3) Flash
Flash是美国 Macromedia公司开发的矢量图形编辑和动画创作的专业软件,它是一种交互式动画设计工具,用它可以将音乐,声效,动画以及富有新意的界面融合在一起,以制作出高品质的网页动态效果 。
Flash是制作动画及矢量图形的工具软件 。 用它制作的动画是窄带动画,适合于网络传输的 Web
界面 。
9.1 网络编程概述
9.1 网络编程概述
FrontPage 和 Dreamweaver是使用最多的 HTML网页制作工具 。 通过 ActiveX定义接口,与脚本编程语言 JavaScript和 VBScript配合,创建动态交互的 Web。
Dreamweaver,Fireworks和 Flash一起被称作网页制作三剑客,是目前使用方便,功能强大的网站管理及 HTML页面制作工具 。
Fireworks设计图形并使网页图形最优化 。 通过在 Dreamweaver或 Flash中直接对 Fireworks进行调用,编辑图形来实现流畅的工作流程 。
9.1 网络编程概述
9.1 网络编程概述

主页页面 1 页面 2 页面 3
页面 4 页面 5 页面 6 页面 7
一级标题二级标题层状结构
4.网页的整体结构
1)层状结构
层状结构为树型结构,由网站文件的主页开始,
依次划分为一级标题、二级标题等等,逐级细化,
直至提供给浏览者具体信息
9.1 网络编程概述
9.1 网络编程概述

2) 线性结构
线性结构 ( 如图 1.9所示 ) 类似于数据结构中的线性表,用于组织本身的线性顺序形式存在的信息,
可以引导浏览者按部就班地浏览整个网站文件 。
这种结构一般都用在意义是平行的页面上 。
主页页面
1
页面
2
页面
3
线性结构
9.1 网络编程概述
9.1 网络编程概述
3) Web结构
Web结构类似于 Internet的组成结构,网站文件的结构是层状结构和线性结构的结合,各网页之间形成网状连接,允许用户随意浏览 。
页面 1 页面 2 页面 3
主页页面 4 页面 5 页面 7 页面 8
一级标题二级标题页面 6
9.1 网络编程概述
9.1 网络编程概述
9.1 网络编程概述
9.1 网络编程概述
5,ASP(Active Server Pages)技术
Microsoft公司的 ASP是服务器端的脚本编写环境,可以创建和运行动态的,可以交互的
Web服务器端应用程序,是实现网络数据库发布的,容易使用的开发工具 。
使用 ASP可以方便地使用 ADO对象,结合
ActiveX组件,脚本命令和 HTML语言,可以制作出交互式的网页和应用程序 。
9.1 网络编程概述
9.1 网络编程概述
6,JSP( Java Server Pages) 技术
Sun推出的 JSP是一种执行于服务器端的动态网页开 发 技 术,它基于 Java 技术 。 JSP 技 术 用
JavaScript作为脚本语言 。 在服务器端,Web
Sever会通过 Java虚拟机解释执行 。 由于 JSP是以
Java语言为基础的,具有较强的跨平台功能 。
1,HTML 语言基础
HTML文档是由标记和文件块组成的。
标记:该部分信息用来控制文档内部的显示方式,
并允许 WEB设计人员指定与其他文档的连接。
文件块:该部分信息就是浏览器显示的文本、图形和声音信息。
下面简单介绍 HTML的使用。
9.2 HTML编程基础
9.2 HTML编程基础
1) HTML元素
( 1) HTML元素的标记
HTML文件所有的控制语句称为标记 (TAG),典型的元素由三部分组成:
起始标记,文件块,结束标记 。 格式为:
<标记 > 受影响的文本 </标记 >
例如:
<head>HTML的基本语法 </head>
9.2 HTML编程基础
9.2 HTML编程基础
使用标记的约定:
① 双标记,由,起始标记,和,结束标记,两部分构成 。 例如:
<TR>和 </TR>为表的行标记,定义数据行 。
<TD>和 </TD>为表的数据标记,定义每行内单元格 。
② 单标记,仅有起始标记,无尾标记 。 最常见的单标签是 <BR>,表示强迫换行 。
③ 标记的字母不区分大小写
④ 标记可以联合使用,也可以嵌套 。
9.2 HTML编程基础
9.2 HTML编程基础
( 2) HTML元素的属性
元素属性的语法格式为:
<标记 属性 1 属性 2 属性 3 … > …… </标记 〉
例如,将 H1元素的 align属性设为 center:
<H1 align="center"></H1>
各属性之间无先后次序,属性名不区分大小写。
( 3) HTML文件的注释
HTML文件注释的基本格式如下:
<!--此处为 HTML文件的注释 -->
9.2 HTML编程基础
9.2 HTML编程基础
4) HTML文件的基本结构
HTML文件的结构分为两个基本部分:
文件头 <HEAD>和文件主体 <BODY>,它们由三对标记构成:
<HTML>
<HEAD>
头部信息
</HEAD>
<BODY>
文档主体,正文部分
</BODY>
</HTML>
9.2 HTML编程基础
9.2 HTML编程基础文挡标记,表示 HTML文档的开始,直到 </HTML>为止。 文件头标记其内容可以是标题,文本文件地址,
等网页信息说明文件主体标记
例 9.1,设计网页。标题为:E xample;网页显示文字内容为,没有使用 〈 head〉 标记,而单独使用 〈 title〉 标记仍起作用 。
<html>
<title>
E xample
</title>
<body>
没有使用 &lt;head&gt; 标记,而单独使用
&lt;title&gt; 标记仍起作用
</body>
</html> 例 9.1
9.2 HTML编程基础
9.2 HTML编程基础符号,&lt;”显示,〈,
符号,&gt;”显示,〉,
特殊符号 所替代的字符 说明
& 特殊字符的开始; 特殊组符的结束
Lt < 小于号
Gt > 大于号
Quot " 双引号表⒐ 1 特殊替换字符
9.2 HTML编程基础
9.2 HTML编程基础
2) 文件主体标记 <BODY>
主体元素可以包含各种参数部分 。 格式如下:
<BODY>BACKGROUND =“http:// www.microsoft.com
/ie/images/watermrk.gif "
BGCOLOR=#FFFFFF TEXT=#000000 LINK=#ff6600
VLINK=#330099>
<HTML><BODY>Here's a Web page!</BODY></HTML>
</BODY>
〈 BODY〉 的 属 性 定 义 为 BACKGROUND( 背 景 图 象 ),
BGCOLOR(背景颜色 ),TEXT前台文字颜色,LINK,VLINK和
ALINK,超文本连接颜色 。
9.2 HTML编程基础
9.2 HTML编程基础未阅读过的超文本连接颜色,缺省值蓝色阅读过的超文本连接颜色,缺省值紫色前景文字颜色表 9.2 颜色代码表颜色名 颜色英文名 十六进制代码 颜色名 颜色英文名 十六进制代码黑色 Black #000000 粉红色 Pink #FFC0CB
蓝色 Blue #0000FF 红色 Red #FF0000
棕色 Brown #A52A2A 白色 White #FFFFFF
青色 Cyan #00FFFF 黄绿色 Yellow #FFFF00
灰色 Gray #808080 深红色 Crimson #CD061F
绿色 Green #008000 黄绿色 Greenyellow #0B6FFF
乳白色 Ivory #FFFFF0 水蓝色 Dodgerblue #0B6EFF
桔黄色 Orange #FFA500 淡紫色 Lavender #DBDBF8
9.2 HTML编程基础
9.2 HTML编程基础
3)设置标题格式 <Hn>
可以设置字体大小不同的标题,标题格式显示在浏览器窗口内,而不是显示在浏览器的标题栏中。
格式为:
<Hn align=对齐方式 > 标题 </Hn>
属性 align用来设置文字的对齐方式,left(左对齐),center(居中),right(右对齐)。
例 9.1-1
9.2 HTML编程基础
9.2 HTML编程基础属性 n用来指定标题文字的大小 。 N= 1~ 6,
N= 1时文字最大,缺省时是 <H6>。
4) 设置文字格式
① 采用标记 <FONT>,格式为:
<font size=数字 face=字体名 color=颜色 >
被设置的文字 </font>
Size:设置文字的大小 。 数字的取值从1~7,
取 1时最小,取 7时最大 。
Face:设置文字的字体 。 字体名可以为:宋体,
楷体,黑体和 Time New Roman等约 50种字体 。
9.2 HTML编程基础
9.2 HTML编程基础
Color:设置文字的颜色,颜色的取值与 <BODY
text=颜色 >的取值方法相同。参见例 9.1-2
②设置字型:字型就是文字的风格,如加粗、斜体、
带下划线、上标、下标等。字型的控制标记见表 9.3所示。
9.2 HTML编程基础
9.2 HTML编程基础标记格式 字体结果 标记格式 字体结果
<B>文字 </B> 黑体 <I>文字 </I> 斜体
<u>文字 </u> 带下划线 < tt> 文字
</tt>
标准打印机字体
<strick>文字
</strick>
带删除线 <sub>文字
</sub>
下标
<sup>文字 </sup> 上标 < big> 文字
</big>
大字体文本
<small>文字
</small>
小 字 体 文本表 9.3 设置各种字型的标记
9.2 HTML编程基础
9.2 HTML编程基础例 9.2,在网页上设置文字格式
<html>
<head>
<title>设置文字格式 </title>
</head>
<body>
<h1>今天天气真好 </h1>
<font size=3 face=黑体 color=red>显示红色黑体 3号字 </font><br>
正常字显示 <u>带下划线显示 </u><br>
</body>
</html>
9.2 HTML编程基础
9.2 HTML编程基础
5) 排 版
排版标记 <P>和 </P>,格式:
<P>一段文字 </P>
参数 align,表示 整个 段 落的 对齐 方 式,
align可选参数有 left,center和 right,分别为左,中和右对齐 。 中间对齐也可用成对标记
<Center>完成 。
9.2 HTML编程基础
9.2 HTML编程基础
页面效果例 9.2-1
左对齐的段落
<P align=left> 左对齐的段落 </P>
右对齐的段落
<P align=right> 右对齐的段落 </P>
中间对齐的段落
<P align=center>中间对齐的段落 </P>
9.2 HTML编程基础
9.2 HTML编程基础
行缩进引用标记 <Blockquote> 来表示缩进。一对标记中的文字将向右缩进一段。
页面效果例 9.2-2
第一层 第一层
<blockquote>
第二层 第二层
<blockquote>
第三层 第三层
</blockquote>
第二层 第二层
</blockquote>
第一层 第一层
9.2 HTML编程基础
9.2 HTML编程基础
一个最简单的 Homepage文件
9.2 HTML编程基础
9.2 HTML编程基础例 9.3 <HTML>
<HEAD>
<TITLE>简单的主页实例 </TITLE>
</HEAD>
<!以上是文件头部 >
<BODY>
<H1>欢迎光临 HTML世界。 </H1>
html简单示例其乐无穷 ! <P>
欢迎学习使用 HTML编制编制出自己的主页。 <BR>
祝你成功!
</BODY>
<!以上是主体部分 >
</HTML>
<!这是文件的结束标签 > 网页效果
9.2 HTML编程基础
9.2 HTML编程基础图 9.1 HTML主页
9.2 HTML编程基础
9.2 HTML编程基础
6)加入超链接
在 Web页面中加入超链接的格式:
<A>要链接的目标文档名;要链接的文本(超文本) </A>。
创建完整的链接标记,必须在开始标记 <A>中设置超文本引用 (HREF)属性。 HREF描 述了点击该链结后文档跳转的目的地。
例如,创建一个指向文档间的链接,可以使用以下链接
<A HREF=,http://www.microsoft.com”>微软公司 </A> 例 9.2-3
9.2 HTML编程基础
9.2 HTML编程基础表 9.4 相对寻址和绝对寻址的不同点路径名 寻址方式和绝对寻址的不同点
index.html 相对寻址。该超连接目标文件与源
HTML文件在同一目录下
Temp\index.htm
l
相对寻址 。 该超连接目标文件放在当前目录的 temp子目录下
index.html 相对寻址。该超连接目标文件放在当前目录的上一级目录中
c:\temp\index.
html
绝对寻址。该超连接目标文件放在 c
盘驱动器的 temp目录下
9.2 HTML编程基础
9.2 HTML编程基础
在大多数情况下,应该使用相对寻址。
HTML允许定义文档内部的链接,例如定义
<A name=firstanchor></A> Anchor1
说明了在,Anchor 1” 前有一个跳转点。
用 <A href=“#firstanchor”> Goto Anchor1
</a>
则可跳转至 Anchor1处。
例 9.3-1
9.2 HTML编程基础
9.2 HTML编程基础
7)图象及动画的嵌入
( 1)图象的嵌入
图象嵌入的标记为 <Img>,其属性为 Src(图象文件名),Alt(替代文字),Align(对准),
Width,Height,Border(边框宽度),HSpace
(水平)和 VSpace(垂直)。
Src指定嵌入图象的图象文件名。
例如 src=" images/Red_flag.gif"
Alt指定图象文件尚未装入时,代替图象显示的文字。
9.2 HTML编程基础
9.2 HTML编程基础
例如
< img src=" images/ blue_arrow.gif" alt=" → "
>
Width和 Height分别指定图象的宽和高 。
Border指定图象边框的宽度 。
HSpace和 VSpace分别指定图象外水平和竖直留空的宽度 。
( 2) 动画的嵌入
浏览器支持 GIF 格式的动画文件 。 只需生成这种动画文件,和图象文件嵌入完全一样 。
例 9.3-2
9.2 HTML编程基础
9.2 HTML编程基础表示将在图象尚未装入时显示一个箭头
8) 列表
列表适合于罗列有关信息内容 。 列表项可以是段落,有格式文本或超媒体连接 。 列表可以嵌套,显示时按层次缩进 。 列表可分为三种,
枚举式,编号式,定义式 。
9.2 HTML编程基础
9.2 HTML编程基础
( 1)枚举式列表
使用成对标记 〈 UL〉 和一个以上的 〈 LI〉 语句来定义。
每个 〈 LI〉 标识一项列表项。
显示时,每个 〈 LI〉 定义的项目前均有 3个黑圆点作前导记号 。 例,
〈 UL〉
〈 LI〉,..first list item
〈 LI〉,..second list item
...
〈 /UL〉 例 9.4-1
9.2 HTML编程基础
9.2 HTML编程基础
( 2)编号式列表
使用成对标记 〈 OL〉 和一个以上的 〈 LI〉 语句来定义。
每个 〈 LI〉 标识一项列表项。
显示时每个 〈 LI〉 定义的项目前均自动加有序列编号。例如,
〈 OL〉
〈 LI〉,..first list item
〈 LI〉,..second list item
...
〈 /OL〉 例 9.4-2
9.2 HTML编程基础
9.2 HTML编程基础
( 3)定义式列表
定义式列表使用成对标记 〈 DL〉 来定义。
使用标记 <DT>和 〈 DD〉 来定义两个层次。
<DT>标记定义目的标题; 〈 DD〉 标记定义内容。
显示时每个 〈 DT〉 定义列表项的下面,产生一段由 〈 DD〉 定义的说明文字。例如,
〈 DL〉
〈 DT〉 term name
〈 DD〉 term definition
...
〈 /DL〉 例 9.4-3
9.2 HTML编程基础
9.2 HTML编程基础
9)表格
( 1)表格的属性
表格是由成对标记 <table>来标识的。
表格属性有
对齐方式 align,left,right和 center
表格宽度 width,n和 n%
表格边界宽度 border,n
9.2 HTML编程基础
9.2 HTML编程基础
( 2)建立表格
建立表格的标记为 <tr>,<th> 和 <td>。
单标记 <tr> 说明表格的一行;
双标记 <th> 说明表格的列标题;
双标记 <td>说明表格的元素。
<table>
<tr>
<th>学号 </th><th>姓名 </th> ><th>年龄 </th>
<tr>
<td>200601</td><td>成功 </td><td>21</td>
</table>
例 9.4-4
9.2 HTML编程基础
9.2 HTML编程基础
表格行 <tr>的属性有 align和 valign。
属性 valign:指定表格行中元素的垂直对齐情况。
参数,top(元素顶对齐); bottom(底对齐);
middle(中间对齐)和 baseline(底线对齐)。
<table border width=200 height=200>
<tr align=middle>
<th>学号 </th><th>姓名 </th><th>年龄 </th>
<tr>
<td valign=middle>200601</td>
<td valign=middle>王晓芳 </td>
<td valign=middle>20</td>
</table> 例 9.4-5
9.2 HTML编程基础
9.2 HTML编程基础
10)表单 (FORM)
( 1)表单的基本属性
表单使用成对标记 <FORM >和 </FORM>来定义。
① 动作属性 ACTION:递送信息表单指定的 URL地址
例如,<FORM NAME=“F1
ACTION"=http://www.pnp.edu.cn/asp/mm.asp>
9.2 HTML编程基础
9.2 HTML编程基础
②方式属性 METHOD:指定填表信息传输的方式,如何将表单提交给服务器( HTTP方式),有两种标准方式可选,GET(获得)和 POST(邮递 ),一般用 POST。
GET将输入的信息转至 ACTION所指定的 URL位置作进一步处理,将表单中的参数信息合成在 URL中,”?”
问号开头,使用,&”号分割参数。
POST可将信息 (无限制 )发往 ACTION所指定的,asp
文件。
POST方式将传递的参数信息放置在 http协议的
request部分,在地址栏看不到表单的信息。
9.2 HTML编程基础
9.2 HTML编程基础
例如,一个表单有一个 ACTION为,
http://www.pnp.edu.cn/asp/mm.asp
并有 NAME为 Userfirst Name的字段,在该字段中输入的文件名为 Wenjian,则该表单将链接到
http://www.pnp.edu.cn/asp/mm.asp?
Userfirst Name=Wenjian的位置上。
在服务器端的 mm.asp程序将截取问号之后的文本作为作为表单内容处理。
9.2 HTML编程基础
9.2 HTML编程基础
9.2 HTML编程基础文 本 输 入( text)
密 码 输 入( password)
多 选 框( checkbox)
单 选 框( radio)
提 交 按 钮( submit)
复 位 按 钮( resest)
普 通 按 钮( button)
图 画( image)
隐 藏 项( hidden)
属性 TYPE
( 2)输入控件 (表单 FORM的常用控件 )
text
******
Submit
Reset
例如:生成文本输入框,宽为 20个字符,最长 50
个字符。
<INPUT NAME=" a" TYPE=" text" SIZE=" 20"
MAXLENGTH=" 50" >
例 9.4-6
例 9.4-7
9.2 HTML编程基础
9.2 HTML编程基础
( 3)列表框
使用成对标记 <SELECT>定义列表框。
使用成对标记 <OPTION>定义列表框中的项,可以有多个。
例如
< OPTION VALUE=" PNP" > 学生成绩查询 </
OPTION >
例 9.4-8
9.2 HTML编程基础
9.2 HTML编程基础
2.DHTML语言基础
动态超文本标记语言( DHTML)将 HTML标志与脚本语言组合起来,进行定位、利用 CSS等操作文档的动态外观。其主要功能如下:
( 1)定义分层结构来显示 Web文档的所有部分;
( 2)通过增加和删除内容来修改结构
( 3)监视和管理网页目录特征的方法
( 4)提供网页上内容如何与用户互动以及相互影响的方法。
9.2 HTML编程基础
9.2 HTML编程基础
1) DHTML对象模块的基本组件
DHTML对象模块由对象、属性、事件和方法构成,
使开发人员能通过编程控制网页上所有情况。
( 1)对象
网页上 HTML中每个元素在动态对象模块中都表现为对象,例如图像、文本框等。对象模块是所有这些对象的分层表示,最高层是当前网页的框架或者浏览器窗口。对象命名后,通过脚本语言来引用它。
9.2 HTML编程基础
9.2 HTML编程基础
( 2)属性
属性描述一个对象的信息。
( 3)事件
网页上每一个发生的动作,例如鼠标双击,都称为事件。当网页事件发生时,接收事件的项会通知动态对象模块事件发生,如果编制的脚本程序规定对事件的触发做出响应,则执行该脚本。
( 4)方法
方法描述了对于对象所采取的措施。例如,使窗口对象能打开新的浏览器的方法。
9.2 HTML编程基础
9.2 HTML编程基础
( 5)对象及属性的实例
使用文字移动的方法和多媒体页面显示对象和属性。
移动文字使用双标记 <MARQUEE> </ MARQUEE >,
该标记的属性有 direction,behavior,loop,
scrolldelay,Align,bgcolor,height,width
和 Margins
9.2 HTML编程基础
9.2 HTML编程基础
方向属性 direction,可设置为 left,right;
格式为 <direction=#> #=left,right
方式属性 bihavior,可设置为 scroll,slide;
alternate
格式为 <bihavior=#> #=scroll,slide;
alternate
循环属性 loop设置循环次数,
格式为 <loop=#> #=次数;
若未指定则循环不止 (infinite)
9.2 HTML编程基础
9.2 HTML编程基础
速度属性 scrollamount设置文字移动的快慢,可设置为数字,
格式为 <scrollamount=#> #=速度单位值
延时属性 scrolldelay设置文字移动时停顿的间隔时间,可设置为数字。
格式为 <scrolldelay=#> #=延时单位值
外观设置 (Layout) 包括 Align,bgcolor,
height,width和 Margins
对齐方式属性 Align可设置为对齐上沿、中间、
下沿。
格式为 <align=#> #=top,middle,bottom
底色属性 bgcolor可设置为预定义色彩 Black,
Olive,Teal,Red,Blue,Maroon,Navy,Gray,
Lime,Fuchsia,White,Green,Purple,Silver,
Yellow,Aqua。 格式为
<bgcolor=#> #=rrggbb 16 进制数码,
或者是预定义色彩:
面积属性有 height和 width,格式为
<height=# width=#> #=面积单位值
空白 ( Margins) 属性有 hspace和 vspace,格式为
<hspace=# vspace=#> #=空白单位值例 9.5-1
9.2 HTML编程基础
9.2 HTML编程基础
多媒体页面 (Alternative Inline Elements)包括多媒体文本、背景音乐和视频播放。
嵌入多媒体文本 (EMBED),该标记可以用来在主页中嵌入多媒体文本,多媒体文本可以为电影
(movie),声音 (sound),等。
格式为 <embed src=#> #=URL
背景音乐 ( BGSOUND)
格式为
<bgsound src=#> #=音乐文件的 URL
<bgsound loop=#> #=循环数
例如,<bgsound src=" sound.wav" loop=3>
9.2 HTML编程基础
9.2 HTML编程基础
插入视频剪辑 ( DYNSRC),格式为
<dynsrc=#> #=视频文件例如,<img src=" Red.gif" dynsrc=" Red.avi" >
用 Red.gif 这一 GIF 图象作为视频的封面,即:
在浏览器尚未完全读入 avi文件时,先在 avi 播放区域显示 Red.gif图象 ;
Red.avi 为视频文件,
循环播放 <img loop=#> #=循环数
<loop=infinite> 将循环播放不止。
<img src=" Red.gif" dynsrc="Red.avi" loop=3>
9.2 HTML编程基础
9.2 HTML编程基础
2)脚本编辑
DHTML允许使用编程语言 C++操纵网页上的对象,
也可使用 Javascript,VBscript操纵网页上的对象。脚本嵌在 Web页中。
VBscript是在 Visual Basic基础上设计的,这一语言通过微软的信息服务器( IIS)和活动服务器网页( ASP)在 Web服务器方得到支持。采用
VBscript编写的脚本放在标记 <%,..,%>之间。
9.2 HTML编程基础
9.2 HTML编程基础
Java script使用了一些和 Java相同的结构和语法。采用 Java script编写的脚本,脚本必须写在一系列脚本标记中,格式如下:
<SCRIPT LANGUAGE=“JavaScript”>
<!
[The actual script commands]
>
</SCRIPT>
DHTML的可编程性,给 Web页带来了新的功能 。 例如,以前在改变 Web页的元素时,只能等待网页的重新下载,而使用 DHTML,可以单击屏幕上方的某个图像,就可以使屏幕下方的段落立刻发生变化,
而不必再访问服务器,这一改变是通过编辑脚本程序实现的 。 通过编辑脚本程序,所有的表格可变成活的数据库,用户可以动态和排序地筛选其中的数据 。 这样一来,就减少了对服务器的请求,
因此降低了服务器的负荷,提高了客户机和服务器的总体性能 。
9.2 HTML编程基础
9.2 HTML编程基础
3)使用样式表 CSS
DHTML的基础是层叠样式表 CSS(Cascading Style
Sheets),样式是指由 Web页作者定义的一组显示和定位属性。
CSS最大的特点是面向对象的网页设计,解决 Web页面的继承和显示问题。也就是说,把每一页、每一段落、每个图像和表格都看成是一个对象。然后声明该对象的每个实例。
每个实例都有一种样式 (Style),即一组属性或显示指令。只要声明一次,这些属性就会贯穿在整个网页甚至整个站点中。
9.2 HTML编程基础
9.2 HTML编程基础
CSS所能改变的属性包括:字体,文字间的间距,
列表,颜色,背景,页边距和位置 。
CSS的格式有两种,嵌入式格式和格式页 。
嵌入式格式:使用 STYLE属性将格式应用在单个元素上 。
格式页:将格式应用在网页或整个 Web站点上 。 格式页可以是链接到 HTML文档的一个外部文件,也可以包含在文档之中 。
9.2 HTML编程基础
9.2 HTML编程基础
① 嵌入式格式
使用 STYLE属性可以在网页的任何标记中,应用嵌入式格式
例如,<SPAN STYLE=“font-weight:bold”>This
text is in a SPAN,</SPAN>
成对标记 <SPAN>为不带任何格式的文本容器,
STYLE=“font-weight:bold”将文本改为粗体字。
9.2 HTML编程基础
9.2 HTML编程基础
② 格式页
采用 <STYLE>和 </STYLE>标记定义边界。
格式页包含一个或多个格式定义
一个格式定义格式如下,
Selectctor{property,Value; property:
Value; … }
selector表示要修改的元素,例如用 A,P等;
Property表示要修改的属性,例如,color(表示
property ):
(value表示 property的值 );例如,value的值设置为 blue。
9.2 HTML编程基础
9.2 HTML编程基础图 9.3 使用样式表 CSS
下面是一个应用 CSS的典型例子。
9.2 HTML编程基础
9.2 HTML编程基础例 9.6
<html>
<head>
<style>
A{color,blue }
P{background-color,red; color:yellow}
</style>
</head>
<body>
<A href="http://www.microsoft.com">您好 </A>
<P>请注意这一段文字的颜色和背景 </P>
</body>
</html> 参见效果
9.2 HTML编程基础
9.2 HTML编程基础例 9.7 使用样式和类设计网页,运行结果如下图所示
9.2 HTML编程基础
9.2 HTML编程基础
<HTML>
<HEAD><TITLE>Welcome</TITLE>
<STYLE>
H1{FONT-SIZE,10pt; COLOR,blue} /定义样式 H1/
B.type{FONT-SIZE,16pt; COLOR:red} /定义样式 B/
</STYLE>
</HEAD>
<BODY>
<B class="type" >THIS IS A PICTURE</B> <BR> /使用样式 B/
<TD valign="top"><IMG height=100 src="Do you like
this.files/1.jpg" width=200>
</TD><HR>
<H1>DO YOU LIKE THIS? </H> /使用样式 H1/
</BODY>
</HTML> 参见效果9.2 HTML编程基础使用样式以及类
前面的程序段中有两个样式,H1和 B.type。
H1是 一 个 有 效 的 DHTML元素,在 程 序 中 由
<H1></H1>标记的部分将继承样式 H1的全部属性 。
类定义格式是元素名后加上一个圆点和类名 。
本例用户创建的元素类 B.type,引用时要用
<class>来声明,<B></B>标记的部分将继承样式 B的全部属性 。
class定义的类,是从现有类派生出来的,标志
<B class="title">具有 <B>标志的所有属性。
9.2 HTML编程基础
9.2 HTML编程基础
1) ASP技术的工作原理
Microsoft Active Server Pages(ASP)是一个位于 Web服务器端的开发环境,属于 ActiveX技术中的 Server端技术。通过这种环境,用户可以创建和运行动态的交互式 Web服务器应用程序,如交互式的网页,包括使用 HTML表单收集和处理信息。
利用它可以产生和运行动态的、交互的、高性能的 Web服务应用程序。
一般的 HTML页面访问,首先根据 HTML文件的 URL
地址,用户通过浏览器将网页请求发送到服务器端,服 务器收 到请 求,根 据扩 展名,html或者,htm判断 HTML文件的请求,将相应的 HTML文件从磁盘中取出送回浏览器,经浏览器程序解释后在浏览器窗口显示结果 。 在请求 ASP程序的过程时,大部分过程与上面一样,ASP中的命令和
Script语句都是由服务器来解释执行的,执行结果动态生成 Web页面,回送到浏览器 。 具体说,
当判断出 ASP文件并从磁盘取出时,它是向特定的 ASP.dll程序发送该文件,从上向下处理,执行这个请求文件中的所有语句,然后生成一个
HTML文件,结果以纯 HTML代码形式发送到客户端浏览器,经过客户端浏览器解释后在浏览器中显示 。 9.2 HTML编程基础图 9.5 ASP运行原理图浏览器程序网页
URL,www.npu.edu
Active
Server
Pages
客户机 服务器
HTTP请求
HTTP应答
ASP文件的后缀名为,asp,相当于一个可执行文件,放在 Web服务器上有可执行权限的目录下 。
当浏览器向 Web Server请求调用 ASP文件时,就启动了 ASP。 Web Server开始调用 ASP,执行每一个命令,然后动态生成一个 HTML页面并送到浏览器 。
2) ASP运行环境和技术特点
( 1) 运行环境
Active Server Pages是由 Microsoft公司推出的 。
Microsoft 公 司 推 出 的 Internet 信 息 服 务 器
( Internet Information Server,IIS) 能实现
Acdve Server Pages的强大功能,还有一些其他的服务器在安装了 ASP组件后也能实现这个功能,
运行 ASP程序 。
安装 IIS步骤为:在控制面板下 → 选择添加或删除程序 → 选择添加 /删除 Windows组件 → 选择
Internet信息服务 (IIS)。 安装 IIS后,在 C盘会建立一个根目录 Inetpub,其子目录 wwwroot
则支 持信息发 布 。 如果 将 *.asp程 序置于
c:\Inetput\wwwroot目录下,在地址栏输入
http://localhost/*.asp则可发布信息 。
( 2)特点
由于 ASP是在服务器端执行的,则访问这些以,asp为后缀的文件时,不能用实际的物理路径,而只能用其虚拟路径。而服务器端程序执行完毕后,服务器仅将执行的结果返回给客户端浏览器,减轻了客户端浏览器的负担。 ASP有如下特点:
①无需编译,可直接在服务器端运行。
②可以使用了各种脚本语言,并使用普通的文本编辑器进行编辑。
③ ASP的运行与浏览器无关,用户端浏览器只解释和显示转换为 HTML代码的 Active Server Pages所设计的网页内容。
④由于 ASP程序的源代码不会被传到客户端,因而具有较高的安全性。
( 3) Web应用程序目录
Web应用程序的起始文件是使用者执行整个 Web应用程序的进入点,它的地位相当于 C程序的 main()
函数。必须将 Web应用程序起始文件 (默认的主文件名可以是 index或 default,文件扩展名可以是,htm,.html 或,asp)和 Global.asp等文件放在虚拟的根目录中。每当客户机连接服务器而不指定文档名时,自动打开一个 Default.htm文件。
由一个虚拟根目录之下的所有 ASP文件构成了一个 Web应用程序。默认的 Web程序存放的根目录为
\Inetpub\wwwroot,当,htm和,asp这一类的文件数量通常很多时,也可以在目录
\Inetpub\wwwroot下建立一些新的目录。
对于多媒体文件一般建一个新的目录专门存放 。
对于程序控件也应该建立一些专门存放的目录,
例如 \ActiveX 或 \Java 。 \ActiveX 专 门 存 放
ActiveX控制项,它们可能是,dll或,ocx等文件类型;而 \Java则专门存放 Javaapplet及其相关类文件 (可能是,class或,zip文件 )。 对于小规模的 Web应用程序也可以用一个 \Bin存放所有的控制文件 。 无论任何类型的数据文件,也应该适当分类,并且存放在各自的目录里面 。 例如,
可以为纯文本类型的数据文件建立一个 \Text目录,或者根据数据内容建立一个 \MailAddress的目录 。 如果数据文件不多,可以只建个 \Data目录集中存放 。
( 4) ASP与脚本语言的关系
由 HTML页、脚本命令以及 ActiveX组件构成的
ASP文档可以在 ASP环境下运行,脚本命令嵌在
HTML文档里,实现交互式的网页,所有的处理都在服务器端进行。 ASP作为服务器端的对象模型,
通过 ASP对象所提供的方法和属性,可以很容易的操作服务器端的数据。 ASP不是一种编程语言,
通过 JavaScript,VBScript和 Java,ActiveX
Server Component来实现 ASP页面 。
例 9.6 ASP与脚本语言的关系。
<%
if Session("UsrFName")="clound" then
result="he has login"
else
result="he has notlogin"
Endif
%>
在例 9.6中,if语句和赋值语句均为脚本语言 VBScript
的标准语法;而 Session("Name")则是 ASP中 Session对象的一个引用。
( 5)服务器组件
一个服务器组件提供属性和方法来使用服务器资源,
ASP提供了 5个服务器组件,其中最重要的两个是数据库访问构件 ADODB和文件访问构件 FileSystemObject。
调用服务器组件,先利用 Server对象中的方法 Create
Object产生服务器组件对象实例,如下所示:
Server.CreateObject(ProgID)
ProgID指定了构件标识,构件可以是各种形式的可执行程序 (如 DLL,EXE等 ),不必考虑它的位置只要在
WindowsNT/98中注册了这些程序,COM就会在系统资料库 (Registry)里维护这些资料,同时以 ProgID让程序员调用。登记用 regsvr32程序,可以用 RegEdit程序来看 ProgID。构件产生后,就可以使用它的方法和属性进行工作。
一般使用 Server构件的程序片段如下:
set obj=Server.CreateObject("ProgID") '产生构件
obj.Method
使用它的方法
3) ASP应用实例
例 9.7 编写客户端网页和服务器端的程序,实现留言板功能。客户端网页程序名为
MessageBoard.htm;服务器端的 ASP程序名为
MessageBoard.asp。运行结果参见图 9.6。
MessageBoard.htm
<HTML><HEAD><TITLE>填写留言 </TITLE>
</HEAD>
<BODY><TD valign="top" >
<P align=center size=6><IMG height=67
src="message board.files/Lunjilyb.gif" width=333></P><TR>
<FORM name=form1 action=message board.asp method=post>
<TABLE width=500 align=center border=0>
<TBODY>
<TR>
<TD width=100>姓名,</TD>
<TD><INPUT id=author name=author></TD></TR>
<TR>
<TD>EMAIL:</TD>
<TD><INPUT id=email name=email></TD></TR>
<TR>
<TD>留言,</TD>
<TD><TEXTAREA id=msg name=msg rows=4
cols=36></TEXTAREA></TD>
</TR></TBODY></TABLE>
<TABLE width=500 align=center border=0>
<TBODY>
<TR>
<TD align=middle><INPUT onclick="YY_checkform;return
document.MM_returnValue"
type=submit value=提交 name=Submit>
&nbsp; <INPUT type=reset value=重置 name=Submit2>
</TD></TR></TBODY></TABLE></TR></FORM>
</BODY>
</HTML> 参见效果
MessageBoard.asp
<%
author = request("author")
email = request("email")
qq = request("qq")
msg = request("msg")
post_time = now()
dim conn
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="
& Server.MapPath("data.mdb")
dim sql
sql =,insert into gbook
(author,email,qq,msg,post_time) values
('"&author&"','"&email&"','"&qq&"','"&msg&"','"&post_time&
"')“
conn.execute(sql)
response.redirect "Ack.htm"
%>
图 9.6 留言板主页
本例中用户将表格中的数据存入 Access数据库中,
库文件名为 DATA.mdb。 Ack.htm程序功能为将存入数据库中的数据显示出来,程序省略。