1
第 6章
网页制作技术
2
本章内容
6.1 网页的基本概念
6.2 HTML语言简介
6.3 使用 FrontPage 制作网页
6.4 Flash简介
3
6.1.1 网页的三种基本形式
HTML
文档
请求
Web服
务器
WWW客
户端
Internet
?静态网页
6.1 网页的基本概念
静态网页的内容和格式由网页的设计者在制作时
决定，不会有所变化，只有重新修改网页文件，
静态网页的内容才会更新
4
?静态网页的特点
?简单可靠。不需要编程经验
?访问速度比较快,Web服务器直接把静态网
页传给浏览器，并且浏览器可以使用本地磁
盘上的网页副本，加快了访问速度
?静态网页的测试比较简单
?静态网页缺乏灵活性，只有重新设计和修改
网页文件，才能使新的信息反映在更新后的
网页上
5
?动态网页
HTML
文档
请求
中间件 数据库
服务器
Web
服务器
WWW
客户端
数据库
Internet
动态网页的网页内容事先不确定，在用户访问
Web服务器时动态生成，是不断变化的
6
?动态网页的特点
?可以反映在浏览器访问 Web服务器时的最
新信息
?制作复杂。需要一定的程序设计基础知识
和编程经验，测试工作也比较复杂
?动态网页生成后，就成为与静态网页一样
的文档，不再具有动态更新的功能
?响应的时间比较长，通常比访问一个静态网
页的时间要长
7
在网页中嵌入了可以在客户端执行的小程序，随
网页文件一起被浏览器下载，并在客户端运行，
产生动态效果
Internet
Web
服务器
WWW
客户端
数据库
服务器
数据库
请求 活动
网页
客户端应用程序
(例如 Java Applet)
?活动网页
8
?活动网页的特点
?可以持续更改网页内容，保证了信息的时效性
?增加了对客户端计算机的要求。浏览器必须支
持活动网页中运行的应用程序，客户计算机要
提供这些应用程序所必须的运行环境
?活动网页的设计制作需要更多的程序设计知识
和技巧，测试也比较困难
?对客户端计算机会带来更大的安全隐患
?活动网页要在客户计算机上运行程序，所以必
须解决客户端计算机的兼容性问题
9
? CGI(公共网关接口 )
是一种被广泛使用的建立动态网页的技术
6.1.2 网页制作的工具
? HTML语言
是用来描述超媒体结构的一个命令集，广泛用于
网页设计中
?ASP(动态服务器网页 )
是一个 Web服务器端开发环境，利用 ASP可以产
生和执行动态的、交互的 Web应用程序
ASP文件的扩展名是,asp,运行在服务器端
10
?脚本语言
脚本是一种能够完成指定功能的短小程序段，其语
句和命令的集合为脚本语言
用脚本语言编写的程序采用解释执行的方式
不能独立运行，而要作为 HTML文档的一部分在支
持脚本语言的浏览器中运行
既适用于客户端也适用于服务器端应用
常用的脚本语言
JavaScript
VBScript
11
? Java语言
Java程序分为两种
? Java应用程序
Java应用程序的运行不需要浏览器，程序中要有
一个主程序，程序的设计相对复杂。
? Java Applet
主要用在网页制作中； Java Applet没有主程序，
而是嵌入在 Web网页中，与 Web页面一起被浏览
器下载； Java Applet程序不能存取本地文件
? JSP(Java服务器网页 )
是一种跨平台、跨 Web服务器的动态网页技术，
与 ASP类似
12
? XML
是一种可以用来设计标记的语言
? XML的特点
?实现了不同数据源之间的数据转换
XML具有良好的跨平台性，为不同数据源交换数据
提供了公共标准
?数据与显示格式分离，同一数据可多种显示
可为一个 XML文档指定多个样式文件，使其能有多
种显示效果
?实现了数据的分布式处理
客户端收到 XML文档后，既可以显示它承载的数据，
也可利用应用程序在客户端对 XML格式的数据进行
处理，降低了服务器的负担
13
?标记
HTML文档的每个元素由“标记”和标记所说明的
内容组成。
标记的一般格式为（外壳标记）
<标记 >文本 </标记 >
标记中可以含有属性，标记及属性中的字母大小写不限。
6.2 HTML语言简介
标记 属性名 属性值 标记说明的内容 结束标记
例如,<p align=left> 文本左对齐 </p>
6.2.1 HTML的基本语法
14
?注释
注释的格式
<! 注释内容 >
或 <! —— 注释内容
注释内容
—— !>
? HTML文档结构
网页的内容网页的内容
要放在 <html>和 </html>
之间。网页内容可以分
为两部分：网页头部和网页主体
<html>
<head>
…
</head>
<body>
…
</body>
</html>
网页头部
网页体
15
标记 意 义
Title 设置网页标题
Base 设置基准 URL。 HTML文件中的标记在确定
链接地址时，会将自己的地址、文件名与这
个基准地址合并
Link 用于指定当前网页与前页、后页的跳转关系
Meta 用于记录 HTML文件的相关信息
?常用于头部的标记
16
? <body>中的属性
background 背景图案的图像文
bgcolor 背景颜色
leftmargin 左边距
link 作为超链接载体的文字颜色
text 网页中文本的颜色
topmargin 上边距
vlink 已点击过的超链接载体文字的颜色
17
?网页文件的编辑
可以用任何文本编辑软件来编辑，在存盘时，扩展
名应该是,.htm”或,html”
?标题及属性
共有 6种标题标记，其中 <h1>说明的标题最大
<h1>,<h2>,…, <h6>
align属性，用来指定标题的位置，值可以是,left、
right,bottom,top,center，分别表示标题处在网
页的左边、右边、底部、顶部和中间
例如,<h2 align=”left”>公司简介 </h2>
6.2.2 编写简单的网页文件
18
?文本的修饰
? 字号属性，例,<font size=n> 其中 n — 字号
? 颜色属性，例,<body text=“red”>
? 字体属性，例,<font face=“隶书” >
?设置文本外观的标记
标记 含义 示例 显示的结果
<B> </B> 加粗 <b>网页制作 </b> 网页制作
<I> </I> 斜体 <i>网页制作 </i> 网页制作
<U> </U> 加下划线 <u>网页制作 </u> 网页制作
<S> </S> 加删除线 <s>网页制作 </s> 网页制作
<SUB> </SUB> 下标 <font size=5>A<sub>5</sub> A5
<SUP> </SUP> 上标 <font size=5>A<sup>5</sup> A5
19
?文本段落划分
?换行标记,<br>
?分段标记,<p> 文字 </p>
?插入水平线标记
<hr>表示一条水平线，有多个属性
width=x 水平线长度为 x个像素
width=x% 水平线长度为浏览器窗口的 x%
align=left,right或 center 水平线对齐方式
size=x 水平线的粗细为 x个像素
20
?插入图形
<img src=”图形文件名”或” URL”>
例如：
<img src=”c:\picture\008.jpg”>
<img src=”http://pp.picture.com/picture/001.jpg”>
?预格式化文本
<pre> </pre>
当一段文本放入 <pre>和 </pre>之间，浏览器会保
留该文本原有的格式，而不需加入 <p>,<br>等
标记
21
?使用列表 ?编号列表的格式
<ol>
<li>第 1项列表说明
<li>第 2项列表说明
…
</ol>
在 <ol>和 <li>中可以
使用 type属性
Type属性值 适用范围 编号显示方式
A 编号列表 大写英文字母,A,B,C,…
a 编号列表 小写英文字母,a,b,c,…
I 编号列表 大写罗马数字,Ⅰ, Ⅱ, Ⅲ, …
i 编号列表 小写罗马数字,ⅰ, ⅱ, ⅲ, …
1 编号列表 阿拉伯数字,1,2,3,…
Disc 符号列表 项目符号为实心圆点
Circle 符号列表 项目符号为空心圆圈
Square 符号列表 项目符号为实心方块
22
<html>
<head>
<title>例 6-1</title>
</head>
<body>
<ol>
<li>家用电器
<li>电动工具
<li>电动模型
<li>电动玩具
</ol>
</body>
</html>
23
?符号列表的格式
<ul>
<li>第 1项列表说明
<li>第 2项列表说明
…
</ul>
<html>
<head>
<title>例 6-3</title>
</head>
<body>
<ul type=circle>
<li>家用电器
<li>电动工具
<li>电动模型
<li>电动玩具
</ul>
</body>
</html>
24
?定义列表的格式
<dl>
<dt>第 1个术语 <dd>说明文字
<dt>第 2个术语 <dd>说明文字
…
</dl>
<html>
<head>
<title>例 6-4</title>
</head>
<body>
<dl>
<dt>局域网, <dd>局域网是传输距离比较小的计算机网络。
<dt>城域网, <dd>城域网的传输距离介于局域网和广域网之间。
<dt>广域网, <dd>广域网是传输距离很远的计算机网络。
</dl>
</body>
</html>
25
?使用超链接
?文字超链接的格式
<a href=”链接目标” >链接载体 </a>
例如
<a href=”http://www.sohu.com”>搜狐 </a>
?文字超链接的颜色
?Link 未点击过的超链接载体文字的颜色
?Vlink 已经点击过的超链接载体文字的颜色
?Alink 具有焦点的超链接载体文字的颜色
?它们可以放在 <bosy>中
26
?链接目标的类型
?其他站点或网页的 URL
<a href=”http://www.tsinghua.edu.cn”>清华大学 </a>
?本计算机上的一个文件
a href=”c:\index.htm”>返回主页 </a>
?电子邮件链接
<a href=”mailto:zhang@hotmail.com”>我的邮件 </a>
?本网页中的书签
?定义书签链接
<a href=”#书签名” >链接载体 </a>
?定义书签的名字和位置
<a name=”书签名” >书签的显示文字 </a>
27
例
…
<a href=”#s1”>第 1节 </a>
<a href=”#s2”>第 2节 </a>
…
<a name=”s1”>第 1节 HTML基本语法 </a>
…
<a name=”s2”>第 2节 编写简单网页 </a>
…
28
?使用图像作为链接载体
<a href=”目标的 URL”> <img src=”图像文件名” > </a>
例如
<a href=”http://www.tsinghua.edu.cn”> <img src=,c:\picture\001.jpg” > </a>
?使用表格
表格内容在 <table> 和 </table>标记中，若要显示表
格边框，则用 border属性，例如,<table border>
表格的表示以行为单位，在行中包含列
其中：一个 <tr> </tr>标记表示一行
一个 <td> </td>标记表示一列
29
<html>
<head>
<title>例 6-6</title>
<body>
<table border>
<tr>
<td>品种 </td>
<td>价格 </td>
<td>净重 </td>
<td>厂家 </td>
</tr>
<tr>
<td>方便面 </td>
<td>2.50元 </td>
<td>100g</td>
<td>第 3食品厂 </td>
</tr>
<tr>
<td>饼干 </td>
<td>5.5元 </td>
<td>80g</td>
<td>第 1食品厂 </td>
</tr>
</table>
</body>
</html>
例：
左边代码产生如图所示的结果
30
6.3 使用 FrontPage制作网页
?制作和发布站点的步骤
① 创建一个 Web站点，即在本地计算机上用
FrontPage 2000建立一个存放所有相关网页
的文件夹
② 建立和编辑网页
③ 建立网页间的链接
④ 在本组织的 Web服务器上或选择一个提供自
由空间的 ISP的 Web服务器上发布这些网页
6.3.1 FrontPage 2000 简介
31
? FrontPage 2000的界面
视图栏
状态栏
格式工具栏常用工具栏
主窗口
文件夹列
表窗口
32
? FrontPage 2000中的视图
? 网页视图
可以进行网页的建立、编辑、预览等基本操作
? 文件夹视图
其作用相当于资源管理器
? 报表视图
可以了解本站点文件增加、更新、各类文件的
数量、大小等情况
? 导航视图
可从整体的角度了解各网页之间的链接结构，
并以组织结构图的形式显示
? 超链接视图
可从某个网页文件的角度来显示它与其他网页
之间的链接关系
? 任务视图
用来记录与创建、维护 Web站点有关的所有细
节，对大型 Web站点的建立、管理很有用途
33
6.2.2 建立和编辑网页
?建立站点
从,文件”菜单中依次选“新建”、“站点”
命令 文件夹的位
置和名称
34
?建立网页
从“文件”菜单中依次选“新建”、“网页”
命令
35
?编辑网页
使用“编辑”菜单或格式工具栏可以对网页中的文
字进行编辑和修改
输入和编辑中文的方法与 Word基本相同
?插入图片
?插入文件中的图片
在弹出的对话框
中输入文件的路
径和文件名，单
击“确定”按钮
36
选一个，单击
选一个，单击
单击
插入在光
标位置
?插入剪贴画
37
?使用项目符号或编号
?添加项目符号或编号
38
?用图片作为项目符号
可输入指
定图片文
件
单击选择
图片文件
从网
上找
图片
使用图片项目
符号的例子
39
?设置多级列表 降一
级
升一
级
?修改网页属性
鼠标右键单击网页任意点
40
?查看 HTML文本
?预览网页
41
6.3.3 建立超链接
?链接的载体和链接目标
?链接的载体
网页中超链接位置上显示的内容。可以是文字或
图片
?链接的目标
是要切换的显示内容所在的位置
?本站点上另一个网页
?本计算机上的一个文件
?其他站点上的某个网页
?某个电子邮件地址
?本网页上另一个位置 (书签 )
42
?建立与本站点其他网页的超链接
?建立文字链接
选中作为链接
载体的文字
单击链接目标
可在其他文
件夹中选择
链接目标
（建立图片链接步骤此类似）
43
?建立到其他站点的超链接
输入其他网
页的 URL
在 Internet上
搜索
44
?使用书签
?建立书签
光标放在要建立
书签的位置上
输入书签
名称
书签
45
?建立指向书签的超链接
选中链接载体后打开“创建超链接”对话框
46
?电子邮件链接
选中链接载体后打开“创建超链接”对话框
输入邮件
地址
47
?修改、删除超链接
只需在“创建超链接”对话框，修改,URL”
输入框中的链接目标，就可修改超链接
删除,URL”输入框里的内容，则删除了超链
接
删除超链接的操作并不删除超链接的载体
48
?超链接视图
当前网页
49
6.3.4 使用表格
表格的操作与 Word中的操作很相似
有 3种方法可以创建表格
?使用常用工具栏上的 按钮
?“表格”菜单，选“插入”、“表格”命令，
在弹
出的“插入表格”对话框中设定表格的参数
?从“表格”菜单中选“手绘表格”命令
手绘表格 清除
50
6.3.5 使用导航栏
导航栏可统一管理与其他网页的超链接，当修改网
页之间的结构时，可以根据网页间的层次关系自动
调整导航栏中出现的超链接，为设计者提供了极大
的方便
浏览网页时，导航栏的作用类似于一个网页索引，
可以按照网页的层次关系，快速切换到感兴趣的网
页上去
在建立网页的导航栏之前，最好先确定网页之间的
层次关系，这一工作可以在导航视图下完成
51
?利用导航视图组织网页结构
导航视图按钮
已展开 子层
未展开 子层
导航工 具栏
当前网页
52
?在网页中插入导航栏
?插入导航栏
光标放在要插入
导航栏的位置 导航栏
53
?删除导航栏
?修改导航栏
单击要删除的导航栏，使其被选中，再按 Delete键
单击要修改的导航栏，使其被选
中，从快捷菜单中选“导航栏属
性”命令，可以弹出“导航栏属
性”对话框，进行修改
在导航视图中修改网页之间的层
次关系，则所有网页的导航栏会
自动调整
在导航视图中增加或删除网页，则所有网页中与该网
页相关层的导航栏中也会自动增加或删除指向该网页
的链接
54
6.3.6 建立表单网页
表单是一个可以容纳元素的“容器”，其中可放
置多个元素，例如文本框、单选钮、复选框等，
它们被称为表单域，用于反馈用户的意见
用户在浏览器中向表单输入信息或选择上面的选
项，并按了“提交”按钮后，输入的内容和选择
的结果将记录在设计表单时所指定的文件中
含有表单网页的站点应放在安装了 FrontPage服务
器扩展的服务器上
55
?显示表单工具栏 拖拽
“表单”工具栏
56
?插入表单
先在网页中插入表单，再把表单域放在表单的区
域内
光标放在
要插入表
单的位置 单击
57
?使用文本框
单击
光标 文本框
右键单击
58
?使用单选钮
表单中可有多组单
选钮，同名的单选
钮为同组，每组可
有一个被选中
在表单中插入单选钮的方法与插入文本框类似，单
选钮后面的说明性文字不属于表单域，可以直接在
网页中输入
?使用复选框
建立复选框的方法与单选钮类似，属性对话框也一样
每个复选框都有选中或未选中两种状态，因此，每个
复选框的名称必须是不同的
59
?使用下拉菜单
单击可在光
标处插入下
拉菜单
编辑项
目内容
60
?使用按钮
有 3种按钮：“提交”、“全部重写”和“普通”，
插入表单时自动插入,提交”和“全部重写”按钮，
普通按钮的行为可用插入脚本的方法来定义
单击可在
光标处插
入下按钮
61
?使用表单的例子
62
?保存表单结果
可在“表单属性”对话框中指定存放结果的文件以
及存放的格式
鼠标右键单击表单区域中的任意位置
63
6.4 Flash简介
6.4.1 Flash的操作界面
控制栏
时间线控制区
工具箱 浮动面板主要工具栏
时间线窗口
舞台
图层控制区
64
?时间线窗口
图层 代表帧的单元格播放指针 帧序号
图层控制区
时间线状态栏
时间线控制区
在图层控制区可以增加、删除图层，编辑图层的名
称、类型、状态等内容
时间线控制区中的每个单元格对应舞台上的一幅画
面，一行单元格，表示一个图层中帧的顺序，播放
时，将按照这个顺序切换帧
65
?舞台
?浮动面板
?工具箱
舞台是进行动画创作的主
要工作区域，图形的制作
编辑、动画的制作展示都
在舞台中进行
浮动面板是窗口，有多个
选项卡，几乎包括了 Flash
中元素的所有属性
线条颜色
工具参数
区
线条工具
钢笔工具
椭圆工具
铅笔工具
墨水瓶工具
吸管工具
箭头工具
索套工具
文本工具
矩形工具
画笔工具
油漆桶工具
橡皮工具
选取工具
手形工具 放大镜
填充颜色
工具箱中集中了在动画设计时可以
使用的各种工具
66
6.4.2 图形和文字的创建与编辑
?基本图形的绘制
?绘制图形
使用线条工具、椭圆工具、矩形工具可画几何图形
铅笔工具可画出任意形状的线条
“描绘”浮动面板，可设置线条和椭圆、矩形边框
的类型、粗细和颜色
画笔工具，可画出很粗的线
画笔光标
的大小
画笔的
形状
线的类型
线的颜色
线的粗细
67
?擦除图形
使用橡皮工具，可以擦除图形
水龙头
橡皮形状
和大小
?设置颜色
线条色
“调色板”浮动面板
填充色
68
?填充颜色
单击工具箱中的油漆桶工具按钮，然后用鼠标单击
封闭图形的中间，图形中的颜色就变为填充色
?添加文字
单击工具箱中的文字工具，
可在舞台上拖出一个区域，
在区域中可以输入文字
使用,字符”浮动面板
可以设置字符的字号、字
体、颜色，还可以修饰文
字使用“段落”浮动面板可以设置段落的对齐方式
69
?编辑对象
?对象的概念
对象是指在 Flash窗口中的元素
?选择对象
单击箭头工具，再单击某个对象，该对象就处于选中状态，
如果用鼠标画一个矩形区域，则区域中的多个对象都被选中
?修改对象形状
单击工具箱上的选取工具，用鼠标单击一个几何图形的边框
单击边框 放开鼠标键拖拽控点
70
?移动和复制对象
选中对象用鼠标拖拽，则所有被选中的内容一起
被移动
用剪贴板功能可以复制选中区域中的内容
?删除对象
选中一个或多个对象，然后按 Delete键
?改变对象的大小
鼠标右键单击选中的对象，在弹出的菜单中选择
“比例”命令，用鼠标拖拽对象周围的某一个控
点
71
?图符与实例
图符是一个可以重复使用的图形,Flash带了很多
图符，放在共享图库中
一个图符可以在动画中多次使用，出现在动画中
的图符对象称为实例
?使用 Flash提供的图符
“窗口”菜单
中选“共享图
库”命令，在
子菜单中其中
一个 类型的所有
图符名称
选中的一个图符
鼠标拖拽到舞
台上，就产生
一个实例
72
?制作新图符
从“插入”菜单中选“新建组件”命令
输入组件名称
选中
单击，进
入图符编
辑模式
画图
单击工作区右上角的编辑场景按钮
切换到动画编辑模式即可
再用同样的方式把图形
创建为名称为“组件 2”
的图符
73
?查看制作的图符
修改图符名称
74
6.4.3 制作动画
?帧的基本概念和操作
?关键帧
关键帧是动画中发生变化的帧，是由动画的制作者制作
的；如果所有关键帧之间没有其他帧，就构成了逐帧动
画，即制作者设计并制作每一帧画面及帧的顺序
时间线窗口中有一个小黑点的单元格表示一个关键帧
?过度帧
过度帧是两个关键帧之间的帧，其画面是从前一个关键
帧到后一个关键帧画面移动或变化过程中的过度画面，
构成的动画称为过度动画；过度帧不可编辑
过度帧由 Flash自动产生，当进行了必要的设置后,Flash
根据两个关键帧的画面，在两个关键帧之间的帧中自动
产生逐渐过度的画面
75
?运动过度动画（运动渐变动画 ）
两个关键帧画面中的图形相同但位置不同，或大小不同，
或位置和大小都不同，则产生的过度帧中的画面，其图形
相同，但位置或大小则从第一个关键帧中图形的位置或大
小逐渐变化到第二个关键帧中图形的位置或大小，从而产
生逐渐变化的效果
?变化过度动画（形状渐变动画 ）
两个关键帧画面中的图形不同，位置可以相同也可以
不同，产生的过度帧中的画面，将从前一个关键帧中
的图形和位置，逐渐变化到后一个关键帧中的图形和
位置，从而产生图形逐渐变化的效果
76
?创建关键帧
?清除关键帧
选中要删除的关键帧单元格，从“插入”菜单中
选“清除关键帧”命令
?创建空白关键帧
选中一个单元格，从“插入”菜单中选“空白关
键帧”命令
在时间线窗口中选中一个单元格，然后从“插入”
菜单中选“关键帧”命令，或直接按 F6键即可
系统默认第一个图层上的第一个帧为关键帧
当第一个关键帧中已经绘制了图形，再创建后面
的关键帧时，会自动复制已有关键帧中的图形
77
?建立第 1个关键帧
?创建逐帧动画
每一帧都是关键帧，适合于复杂动画；逐帧动画的文件更大
单击
拖拽到第 1帧
的左上角
单击
78
?建立第 2个关键帧
单击
F6键
删除
拖拽到第 2帧
79
?预览
?建立后面的关键帧
在后面的关键帧中交叉放置“组件 1”和“组件 2”图符，但
位置依次向右错开一定距离
80
显示在此范围
内的所有帧
81
?动画的测试与播放
从播放指针开始播放
播放按钮
打开新窗
口播放
82
?制作运动渐变动画 拖拽到帧中
在下拉列表
中选“动作”
F6键
拖到其
他位置
83
?制作形状渐变动画
与运动渐变动画类似，但两个关键帧中图形的形
状不同，位置也可以不同
对每个关键帧，在“帧数”面板中，“变化”一
栏中应选择“图形”，其他操作与运动渐变动画
的制作相同
84
6.4.4 发布为网页
从“文件”菜单中选“发布设置”命令
第 6章
网页制作技术
2
本章内容
6.1 网页的基本概念
6.2 HTML语言简介
6.3 使用 FrontPage 制作网页
6.4 Flash简介
3
6.1.1 网页的三种基本形式
HTML
文档
请求
Web服
务器
WWW客
户端
Internet
?静态网页
6.1 网页的基本概念
静态网页的内容和格式由网页的设计者在制作时
决定，不会有所变化，只有重新修改网页文件，
静态网页的内容才会更新
4
?静态网页的特点
?简单可靠。不需要编程经验
?访问速度比较快,Web服务器直接把静态网
页传给浏览器，并且浏览器可以使用本地磁
盘上的网页副本，加快了访问速度
?静态网页的测试比较简单
?静态网页缺乏灵活性，只有重新设计和修改
网页文件，才能使新的信息反映在更新后的
网页上
5
?动态网页
HTML
文档
请求
中间件 数据库
服务器
Web
服务器
WWW
客户端
数据库
Internet
动态网页的网页内容事先不确定，在用户访问
Web服务器时动态生成，是不断变化的
6
?动态网页的特点
?可以反映在浏览器访问 Web服务器时的最
新信息
?制作复杂。需要一定的程序设计基础知识
和编程经验，测试工作也比较复杂
?动态网页生成后，就成为与静态网页一样
的文档，不再具有动态更新的功能
?响应的时间比较长，通常比访问一个静态网
页的时间要长
7
在网页中嵌入了可以在客户端执行的小程序，随
网页文件一起被浏览器下载，并在客户端运行，
产生动态效果
Internet
Web
服务器
WWW
客户端
数据库
服务器
数据库
请求 活动
网页
客户端应用程序
(例如 Java Applet)
?活动网页
8
?活动网页的特点
?可以持续更改网页内容，保证了信息的时效性
?增加了对客户端计算机的要求。浏览器必须支
持活动网页中运行的应用程序，客户计算机要
提供这些应用程序所必须的运行环境
?活动网页的设计制作需要更多的程序设计知识
和技巧，测试也比较困难
?对客户端计算机会带来更大的安全隐患
?活动网页要在客户计算机上运行程序，所以必
须解决客户端计算机的兼容性问题
9
? CGI(公共网关接口 )
是一种被广泛使用的建立动态网页的技术
6.1.2 网页制作的工具
? HTML语言
是用来描述超媒体结构的一个命令集，广泛用于
网页设计中
?ASP(动态服务器网页 )
是一个 Web服务器端开发环境，利用 ASP可以产
生和执行动态的、交互的 Web应用程序
ASP文件的扩展名是,asp,运行在服务器端
10
?脚本语言
脚本是一种能够完成指定功能的短小程序段，其语
句和命令的集合为脚本语言
用脚本语言编写的程序采用解释执行的方式
不能独立运行，而要作为 HTML文档的一部分在支
持脚本语言的浏览器中运行
既适用于客户端也适用于服务器端应用
常用的脚本语言
JavaScript
VBScript
11
? Java语言
Java程序分为两种
? Java应用程序
Java应用程序的运行不需要浏览器，程序中要有
一个主程序，程序的设计相对复杂。
? Java Applet
主要用在网页制作中； Java Applet没有主程序，
而是嵌入在 Web网页中，与 Web页面一起被浏览
器下载； Java Applet程序不能存取本地文件
? JSP(Java服务器网页 )
是一种跨平台、跨 Web服务器的动态网页技术，
与 ASP类似
12
? XML
是一种可以用来设计标记的语言
? XML的特点
?实现了不同数据源之间的数据转换
XML具有良好的跨平台性，为不同数据源交换数据
提供了公共标准
?数据与显示格式分离，同一数据可多种显示
可为一个 XML文档指定多个样式文件，使其能有多
种显示效果
?实现了数据的分布式处理
客户端收到 XML文档后，既可以显示它承载的数据，
也可利用应用程序在客户端对 XML格式的数据进行
处理，降低了服务器的负担
13
?标记
HTML文档的每个元素由“标记”和标记所说明的
内容组成。
标记的一般格式为（外壳标记）
<标记 >文本 </标记 >
标记中可以含有属性，标记及属性中的字母大小写不限。
6.2 HTML语言简介
标记 属性名 属性值 标记说明的内容 结束标记
例如,<p align=left> 文本左对齐 </p>
6.2.1 HTML的基本语法
14
?注释
注释的格式
<! 注释内容 >
或 <! —— 注释内容
注释内容
—— !>
? HTML文档结构
网页的内容网页的内容
要放在 <html>和 </html>
之间。网页内容可以分
为两部分：网页头部和网页主体
<html>
<head>
…
</head>
<body>
…
</body>
</html>
网页头部
网页体
15
标记 意 义
Title 设置网页标题
Base 设置基准 URL。 HTML文件中的标记在确定
链接地址时，会将自己的地址、文件名与这
个基准地址合并
Link 用于指定当前网页与前页、后页的跳转关系
Meta 用于记录 HTML文件的相关信息
?常用于头部的标记
16
? <body>中的属性
background 背景图案的图像文
bgcolor 背景颜色
leftmargin 左边距
link 作为超链接载体的文字颜色
text 网页中文本的颜色
topmargin 上边距
vlink 已点击过的超链接载体文字的颜色
17
?网页文件的编辑
可以用任何文本编辑软件来编辑，在存盘时，扩展
名应该是,.htm”或,html”
?标题及属性
共有 6种标题标记，其中 <h1>说明的标题最大
<h1>,<h2>,…, <h6>
align属性，用来指定标题的位置，值可以是,left、
right,bottom,top,center，分别表示标题处在网
页的左边、右边、底部、顶部和中间
例如,<h2 align=”left”>公司简介 </h2>
6.2.2 编写简单的网页文件
18
?文本的修饰
? 字号属性，例,<font size=n> 其中 n — 字号
? 颜色属性，例,<body text=“red”>
? 字体属性，例,<font face=“隶书” >
?设置文本外观的标记
标记 含义 示例 显示的结果
<B> </B> 加粗 <b>网页制作 </b> 网页制作
<I> </I> 斜体 <i>网页制作 </i> 网页制作
<U> </U> 加下划线 <u>网页制作 </u> 网页制作
<S> </S> 加删除线 <s>网页制作 </s> 网页制作
<SUB> </SUB> 下标 <font size=5>A<sub>5</sub> A5
<SUP> </SUP> 上标 <font size=5>A<sup>5</sup> A5
19
?文本段落划分
?换行标记,<br>
?分段标记,<p> 文字 </p>
?插入水平线标记
<hr>表示一条水平线，有多个属性
width=x 水平线长度为 x个像素
width=x% 水平线长度为浏览器窗口的 x%
align=left,right或 center 水平线对齐方式
size=x 水平线的粗细为 x个像素
20
?插入图形
<img src=”图形文件名”或” URL”>
例如：
<img src=”c:\picture\008.jpg”>
<img src=”http://pp.picture.com/picture/001.jpg”>
?预格式化文本
<pre> </pre>
当一段文本放入 <pre>和 </pre>之间，浏览器会保
留该文本原有的格式，而不需加入 <p>,<br>等
标记
21
?使用列表 ?编号列表的格式
<ol>
<li>第 1项列表说明
<li>第 2项列表说明
…
</ol>
在 <ol>和 <li>中可以
使用 type属性
Type属性值 适用范围 编号显示方式
A 编号列表 大写英文字母,A,B,C,…
a 编号列表 小写英文字母,a,b,c,…
I 编号列表 大写罗马数字,Ⅰ, Ⅱ, Ⅲ, …
i 编号列表 小写罗马数字,ⅰ, ⅱ, ⅲ, …
1 编号列表 阿拉伯数字,1,2,3,…
Disc 符号列表 项目符号为实心圆点
Circle 符号列表 项目符号为空心圆圈
Square 符号列表 项目符号为实心方块
22
<html>
<head>
<title>例 6-1</title>
</head>
<body>
<ol>
<li>家用电器
<li>电动工具
<li>电动模型
<li>电动玩具
</ol>
</body>
</html>
23
?符号列表的格式
<ul>
<li>第 1项列表说明
<li>第 2项列表说明
…
</ul>
<html>
<head>
<title>例 6-3</title>
</head>
<body>
<ul type=circle>
<li>家用电器
<li>电动工具
<li>电动模型
<li>电动玩具
</ul>
</body>
</html>
24
?定义列表的格式
<dl>
<dt>第 1个术语 <dd>说明文字
<dt>第 2个术语 <dd>说明文字
…
</dl>
<html>
<head>
<title>例 6-4</title>
</head>
<body>
<dl>
<dt>局域网, <dd>局域网是传输距离比较小的计算机网络。
<dt>城域网, <dd>城域网的传输距离介于局域网和广域网之间。
<dt>广域网, <dd>广域网是传输距离很远的计算机网络。
</dl>
</body>
</html>
25
?使用超链接
?文字超链接的格式
<a href=”链接目标” >链接载体 </a>
例如
<a href=”http://www.sohu.com”>搜狐 </a>
?文字超链接的颜色
?Link 未点击过的超链接载体文字的颜色
?Vlink 已经点击过的超链接载体文字的颜色
?Alink 具有焦点的超链接载体文字的颜色
?它们可以放在 <bosy>中
26
?链接目标的类型
?其他站点或网页的 URL
<a href=”http://www.tsinghua.edu.cn”>清华大学 </a>
?本计算机上的一个文件
a href=”c:\index.htm”>返回主页 </a>
?电子邮件链接
<a href=”mailto:zhang@hotmail.com”>我的邮件 </a>
?本网页中的书签
?定义书签链接
<a href=”#书签名” >链接载体 </a>
?定义书签的名字和位置
<a name=”书签名” >书签的显示文字 </a>
27
例
…
<a href=”#s1”>第 1节 </a>
<a href=”#s2”>第 2节 </a>
…
<a name=”s1”>第 1节 HTML基本语法 </a>
…
<a name=”s2”>第 2节 编写简单网页 </a>
…
28
?使用图像作为链接载体
<a href=”目标的 URL”> <img src=”图像文件名” > </a>
例如
<a href=”http://www.tsinghua.edu.cn”> <img src=,c:\picture\001.jpg” > </a>
?使用表格
表格内容在 <table> 和 </table>标记中，若要显示表
格边框，则用 border属性，例如,<table border>
表格的表示以行为单位，在行中包含列
其中：一个 <tr> </tr>标记表示一行
一个 <td> </td>标记表示一列
29
<html>
<head>
<title>例 6-6</title>
<body>
<table border>
<tr>
<td>品种 </td>
<td>价格 </td>
<td>净重 </td>
<td>厂家 </td>
</tr>
<tr>
<td>方便面 </td>
<td>2.50元 </td>
<td>100g</td>
<td>第 3食品厂 </td>
</tr>
<tr>
<td>饼干 </td>
<td>5.5元 </td>
<td>80g</td>
<td>第 1食品厂 </td>
</tr>
</table>
</body>
</html>
例：
左边代码产生如图所示的结果
30
6.3 使用 FrontPage制作网页
?制作和发布站点的步骤
① 创建一个 Web站点，即在本地计算机上用
FrontPage 2000建立一个存放所有相关网页
的文件夹
② 建立和编辑网页
③ 建立网页间的链接
④ 在本组织的 Web服务器上或选择一个提供自
由空间的 ISP的 Web服务器上发布这些网页
6.3.1 FrontPage 2000 简介
31
? FrontPage 2000的界面
视图栏
状态栏
格式工具栏常用工具栏
主窗口
文件夹列
表窗口
32
? FrontPage 2000中的视图
? 网页视图
可以进行网页的建立、编辑、预览等基本操作
? 文件夹视图
其作用相当于资源管理器
? 报表视图
可以了解本站点文件增加、更新、各类文件的
数量、大小等情况
? 导航视图
可从整体的角度了解各网页之间的链接结构，
并以组织结构图的形式显示
? 超链接视图
可从某个网页文件的角度来显示它与其他网页
之间的链接关系
? 任务视图
用来记录与创建、维护 Web站点有关的所有细
节，对大型 Web站点的建立、管理很有用途
33
6.2.2 建立和编辑网页
?建立站点
从,文件”菜单中依次选“新建”、“站点”
命令 文件夹的位
置和名称
34
?建立网页
从“文件”菜单中依次选“新建”、“网页”
命令
35
?编辑网页
使用“编辑”菜单或格式工具栏可以对网页中的文
字进行编辑和修改
输入和编辑中文的方法与 Word基本相同
?插入图片
?插入文件中的图片
在弹出的对话框
中输入文件的路
径和文件名，单
击“确定”按钮
36
选一个，单击
选一个，单击
单击
插入在光
标位置
?插入剪贴画
37
?使用项目符号或编号
?添加项目符号或编号
38
?用图片作为项目符号
可输入指
定图片文
件
单击选择
图片文件
从网
上找
图片
使用图片项目
符号的例子
39
?设置多级列表 降一
级
升一
级
?修改网页属性
鼠标右键单击网页任意点
40
?查看 HTML文本
?预览网页
41
6.3.3 建立超链接
?链接的载体和链接目标
?链接的载体
网页中超链接位置上显示的内容。可以是文字或
图片
?链接的目标
是要切换的显示内容所在的位置
?本站点上另一个网页
?本计算机上的一个文件
?其他站点上的某个网页
?某个电子邮件地址
?本网页上另一个位置 (书签 )
42
?建立与本站点其他网页的超链接
?建立文字链接
选中作为链接
载体的文字
单击链接目标
可在其他文
件夹中选择
链接目标
（建立图片链接步骤此类似）
43
?建立到其他站点的超链接
输入其他网
页的 URL
在 Internet上
搜索
44
?使用书签
?建立书签
光标放在要建立
书签的位置上
输入书签
名称
书签
45
?建立指向书签的超链接
选中链接载体后打开“创建超链接”对话框
46
?电子邮件链接
选中链接载体后打开“创建超链接”对话框
输入邮件
地址
47
?修改、删除超链接
只需在“创建超链接”对话框，修改,URL”
输入框中的链接目标，就可修改超链接
删除,URL”输入框里的内容，则删除了超链
接
删除超链接的操作并不删除超链接的载体
48
?超链接视图
当前网页
49
6.3.4 使用表格
表格的操作与 Word中的操作很相似
有 3种方法可以创建表格
?使用常用工具栏上的 按钮
?“表格”菜单，选“插入”、“表格”命令，
在弹
出的“插入表格”对话框中设定表格的参数
?从“表格”菜单中选“手绘表格”命令
手绘表格 清除
50
6.3.5 使用导航栏
导航栏可统一管理与其他网页的超链接，当修改网
页之间的结构时，可以根据网页间的层次关系自动
调整导航栏中出现的超链接，为设计者提供了极大
的方便
浏览网页时，导航栏的作用类似于一个网页索引，
可以按照网页的层次关系，快速切换到感兴趣的网
页上去
在建立网页的导航栏之前，最好先确定网页之间的
层次关系，这一工作可以在导航视图下完成
51
?利用导航视图组织网页结构
导航视图按钮
已展开 子层
未展开 子层
导航工 具栏
当前网页
52
?在网页中插入导航栏
?插入导航栏
光标放在要插入
导航栏的位置 导航栏
53
?删除导航栏
?修改导航栏
单击要删除的导航栏，使其被选中，再按 Delete键
单击要修改的导航栏，使其被选
中，从快捷菜单中选“导航栏属
性”命令，可以弹出“导航栏属
性”对话框，进行修改
在导航视图中修改网页之间的层
次关系，则所有网页的导航栏会
自动调整
在导航视图中增加或删除网页，则所有网页中与该网
页相关层的导航栏中也会自动增加或删除指向该网页
的链接
54
6.3.6 建立表单网页
表单是一个可以容纳元素的“容器”，其中可放
置多个元素，例如文本框、单选钮、复选框等，
它们被称为表单域，用于反馈用户的意见
用户在浏览器中向表单输入信息或选择上面的选
项，并按了“提交”按钮后，输入的内容和选择
的结果将记录在设计表单时所指定的文件中
含有表单网页的站点应放在安装了 FrontPage服务
器扩展的服务器上
55
?显示表单工具栏 拖拽
“表单”工具栏
56
?插入表单
先在网页中插入表单，再把表单域放在表单的区
域内
光标放在
要插入表
单的位置 单击
57
?使用文本框
单击
光标 文本框
右键单击
58
?使用单选钮
表单中可有多组单
选钮，同名的单选
钮为同组，每组可
有一个被选中
在表单中插入单选钮的方法与插入文本框类似，单
选钮后面的说明性文字不属于表单域，可以直接在
网页中输入
?使用复选框
建立复选框的方法与单选钮类似，属性对话框也一样
每个复选框都有选中或未选中两种状态，因此，每个
复选框的名称必须是不同的
59
?使用下拉菜单
单击可在光
标处插入下
拉菜单
编辑项
目内容
60
?使用按钮
有 3种按钮：“提交”、“全部重写”和“普通”，
插入表单时自动插入,提交”和“全部重写”按钮，
普通按钮的行为可用插入脚本的方法来定义
单击可在
光标处插
入下按钮
61
?使用表单的例子
62
?保存表单结果
可在“表单属性”对话框中指定存放结果的文件以
及存放的格式
鼠标右键单击表单区域中的任意位置
63
6.4 Flash简介
6.4.1 Flash的操作界面
控制栏
时间线控制区
工具箱 浮动面板主要工具栏
时间线窗口
舞台
图层控制区
64
?时间线窗口
图层 代表帧的单元格播放指针 帧序号
图层控制区
时间线状态栏
时间线控制区
在图层控制区可以增加、删除图层，编辑图层的名
称、类型、状态等内容
时间线控制区中的每个单元格对应舞台上的一幅画
面，一行单元格，表示一个图层中帧的顺序，播放
时，将按照这个顺序切换帧
65
?舞台
?浮动面板
?工具箱
舞台是进行动画创作的主
要工作区域，图形的制作
编辑、动画的制作展示都
在舞台中进行
浮动面板是窗口，有多个
选项卡，几乎包括了 Flash
中元素的所有属性
线条颜色
工具参数
区
线条工具
钢笔工具
椭圆工具
铅笔工具
墨水瓶工具
吸管工具
箭头工具
索套工具
文本工具
矩形工具
画笔工具
油漆桶工具
橡皮工具
选取工具
手形工具 放大镜
填充颜色
工具箱中集中了在动画设计时可以
使用的各种工具
66
6.4.2 图形和文字的创建与编辑
?基本图形的绘制
?绘制图形
使用线条工具、椭圆工具、矩形工具可画几何图形
铅笔工具可画出任意形状的线条
“描绘”浮动面板，可设置线条和椭圆、矩形边框
的类型、粗细和颜色
画笔工具，可画出很粗的线
画笔光标
的大小
画笔的
形状
线的类型
线的颜色
线的粗细
67
?擦除图形
使用橡皮工具，可以擦除图形
水龙头
橡皮形状
和大小
?设置颜色
线条色
“调色板”浮动面板
填充色
68
?填充颜色
单击工具箱中的油漆桶工具按钮，然后用鼠标单击
封闭图形的中间，图形中的颜色就变为填充色
?添加文字
单击工具箱中的文字工具，
可在舞台上拖出一个区域，
在区域中可以输入文字
使用,字符”浮动面板
可以设置字符的字号、字
体、颜色，还可以修饰文
字使用“段落”浮动面板可以设置段落的对齐方式
69
?编辑对象
?对象的概念
对象是指在 Flash窗口中的元素
?选择对象
单击箭头工具，再单击某个对象，该对象就处于选中状态，
如果用鼠标画一个矩形区域，则区域中的多个对象都被选中
?修改对象形状
单击工具箱上的选取工具，用鼠标单击一个几何图形的边框
单击边框 放开鼠标键拖拽控点
70
?移动和复制对象
选中对象用鼠标拖拽，则所有被选中的内容一起
被移动
用剪贴板功能可以复制选中区域中的内容
?删除对象
选中一个或多个对象，然后按 Delete键
?改变对象的大小
鼠标右键单击选中的对象，在弹出的菜单中选择
“比例”命令，用鼠标拖拽对象周围的某一个控
点
71
?图符与实例
图符是一个可以重复使用的图形,Flash带了很多
图符，放在共享图库中
一个图符可以在动画中多次使用，出现在动画中
的图符对象称为实例
?使用 Flash提供的图符
“窗口”菜单
中选“共享图
库”命令，在
子菜单中其中
一个 类型的所有
图符名称
选中的一个图符
鼠标拖拽到舞
台上，就产生
一个实例
72
?制作新图符
从“插入”菜单中选“新建组件”命令
输入组件名称
选中
单击，进
入图符编
辑模式
画图
单击工作区右上角的编辑场景按钮
切换到动画编辑模式即可
再用同样的方式把图形
创建为名称为“组件 2”
的图符
73
?查看制作的图符
修改图符名称
74
6.4.3 制作动画
?帧的基本概念和操作
?关键帧
关键帧是动画中发生变化的帧，是由动画的制作者制作
的；如果所有关键帧之间没有其他帧，就构成了逐帧动
画，即制作者设计并制作每一帧画面及帧的顺序
时间线窗口中有一个小黑点的单元格表示一个关键帧
?过度帧
过度帧是两个关键帧之间的帧，其画面是从前一个关键
帧到后一个关键帧画面移动或变化过程中的过度画面，
构成的动画称为过度动画；过度帧不可编辑
过度帧由 Flash自动产生，当进行了必要的设置后,Flash
根据两个关键帧的画面，在两个关键帧之间的帧中自动
产生逐渐过度的画面
75
?运动过度动画（运动渐变动画 ）
两个关键帧画面中的图形相同但位置不同，或大小不同，
或位置和大小都不同，则产生的过度帧中的画面，其图形
相同，但位置或大小则从第一个关键帧中图形的位置或大
小逐渐变化到第二个关键帧中图形的位置或大小，从而产
生逐渐变化的效果
?变化过度动画（形状渐变动画 ）
两个关键帧画面中的图形不同，位置可以相同也可以
不同，产生的过度帧中的画面，将从前一个关键帧中
的图形和位置，逐渐变化到后一个关键帧中的图形和
位置，从而产生图形逐渐变化的效果
76
?创建关键帧
?清除关键帧
选中要删除的关键帧单元格，从“插入”菜单中
选“清除关键帧”命令
?创建空白关键帧
选中一个单元格，从“插入”菜单中选“空白关
键帧”命令
在时间线窗口中选中一个单元格，然后从“插入”
菜单中选“关键帧”命令，或直接按 F6键即可
系统默认第一个图层上的第一个帧为关键帧
当第一个关键帧中已经绘制了图形，再创建后面
的关键帧时，会自动复制已有关键帧中的图形
77
?建立第 1个关键帧
?创建逐帧动画
每一帧都是关键帧，适合于复杂动画；逐帧动画的文件更大
单击
拖拽到第 1帧
的左上角
单击
78
?建立第 2个关键帧
单击
F6键
删除
拖拽到第 2帧
79
?预览
?建立后面的关键帧
在后面的关键帧中交叉放置“组件 1”和“组件 2”图符，但
位置依次向右错开一定距离
80
显示在此范围
内的所有帧
81
?动画的测试与播放
从播放指针开始播放
播放按钮
打开新窗
口播放
82
?制作运动渐变动画 拖拽到帧中
在下拉列表
中选“动作”
F6键
拖到其
他位置
83
?制作形状渐变动画
与运动渐变动画类似，但两个关键帧中图形的形
状不同，位置也可以不同
对每个关键帧，在“帧数”面板中，“变化”一
栏中应选择“图形”，其他操作与运动渐变动画
的制作相同
84
6.4.4 发布为网页
从“文件”菜单中选“发布设置”命令
