PowerPoint 演示文稿

Download Report

Transcript PowerPoint 演示文稿 

第九章 网页制作
第九章 网页制作
目
录
上一页
9.1 HTML简介
下一页
9.2 FrontPage概述
退 出
9.3网页制作
9.4网页布局
9.5创建表单页面
9.6网页的发布
2015/7/21
第九章 网页制作
2
9.1 HTML简介
目
录
上一页
下一页
退 出
HTML即HyperText Markup Language 的缩写。它使用一些约定的
标记（Tag）对文本进行标注，定义网页的数据格式，描述Web页中
的信息，控制文本的显示。
我们把用HTML语言编写的文件称为HTML文件。它通常被存储在
Web服务器上，客户端通过浏览器向Web服务器发出请求，服务器响
应请求并将HTML文件发送给浏览器，然后由浏览器对文件中的标记
作出相应的解释，以页面的形式呈现在用户屏幕上。因此，我们又
把 HTML 文 档 在 Web 浏 览 器 中 的 这 种 表 现 形 式 称 为 Web 页 面 ( Web
Page)。
HTML语言是一种标记语言，简单易学。用HTML语言编写的网页
实际上是一种文本文件，它以.htm或.html为扩展名，我们可以使
用任何文本处理软件（例如：记事本）编写。
2015/7/21
第九章 网页制作
3
9.1 HTML简介
目
录
上一页
9.1.1 HTML语言概述
9.1.2 HTML语言的基本语法
下一页
退 出
2015/7/21
第九章 网页制作
4
9.1.1 HTML语言概述
目
录
HTML 语 言 是 由 世 界 性 的 标 准 化 组 织 W3C(Wortd Wide Web
Consortium)制定的。目前，其最新的标准版本是HTML 4.0。
上一页
下一页
退 出
1. HTML文件的基本构成

Internet中的每一个HTML文件都包括两部分：
（1）文本内容：含有需要展现的具体信息。
（2）HTML标记：负责控制文本显示的外观和版式。

多数HTML标记的书写格式如下：
＜标记名＞文本内容＜／标记名＞
 某些HTML标记还具有一些的属性（Attribute）。这些属性指
定文本的一些特性，如背景颜色、字体大小、对齐方式等。
标记属性的使用格式如下：
2015/7/21
＜标记名 属性1=值1 属性2=值2 …＞ 文本内容 ＜／标记名＞
第九章 网页制作
5
9.1.1 HTML语言概述
目
录  标记名通常写在“＜＞”内。一般的HTML标记都具有起始和结束标
上一页
下一页
退 出
记，并且成对出现，两者控制中间的文本，结束标记前要加“／”。
但并不是所有的HTML标记都具有起始和结束标记，有些则没有结束
标记。HTML标记不区分大小写。如：＜HTML＞、＜html＞或＜HtMl
＞，其结果都是一样的。
 标记名称和属性之间用空格分隔。如果标记有多种属性，属性之间
也要用空格分开。
2015/7/21
第九章 网页制作
6
9.1.1 HTML语言概述
目
录
上一页
下一页
退 出
2015/7/21
2. HTML网页的结构
HTML文件的层次结构：
一般HTML文件都是以<html>开头，又以</html>结束。其文件结构由
以下两部分组成：
（1）头部（Head）
HTML文件的头部由<head>和</head>标记定义。通常情况下，
文件的标题、搜索引擎所用的关键字以及语言字符集信息等都放在
头部信息中。
（2）正文主体（Body）
由<body>和</body>标记定义。<body>标记具有一些常用的属性，
格式为：
<body bgcolor=#n text=#n>…</body>
其中，bgcolor为背景颜色；text为文本颜色。n为六位十六进制数。
如果网页使用背景图像，格式为：
<body background=”图片文件名”>…</body>
第九章 网页制作
7
9.1.2 HTML语言的基本语法
目
录 1. 文本布局
上一页 (1)段落标记<P>
下一页
退 出
<p>…</p>标记指定文档中一个独立的段落。使用格式如下：
<p align=对齐方式> … </p>
<p>标记定义的两个段落之间留有一个空行。
(2) 换行标记<br>
<br>标记可以强制文本换行。该标记只有开始标记。
(3) 水平线标记<hr>
水平线标记<hr>用于在网页中插入一条水平线。使用格式如下：
<hr width=宽度 size=高度 align=对齐方式>
(4) 居中标记<center>
<center>…</center>标记中包含的内容显示在页面中央。
2015/7/21
第九章 网页制作
8
9.1.2 HTML语言的基本语法
目
录 例9-2 在网页中设置段落和页面格式。
上一页
下一页
退 出
2015/7/21
<html>
<head> <title>文本布局</title> </head>
<body >
<center>
<p>在这里我们首先向您介绍有关HTML语言的基本知识和基本语法。
<br>然后，讲授如何使用HTML语言编写您的Web页面。</p>
<hr width=80% size=1>
<p align=left >段落左对齐
<p align=center >段落居中
<p align=right >段落右对齐
</center>
</body>
</html>
第九章 网页制作
9
9.1.2 HTML语言的基本语法
目
录
2. 文字格式
HTML语言中用于文字格式化的标记有：
上一页
（1）标题标记<h>
下一页
<h>标记定义文字标题。标题文字将以指定大小，黑体居中显示。
退 出
格式：<hn> 标题文字 </hn>
其中，n为1到6的数字，表示字体大小。
（2）字体标记<font>
字体标记用来对文字格式进行设置，主要具有以下属性：
1) size属性用来控制文字的大小，其格式为：
2015/7/21
<font size=n>…</font>，n=1,2,3,4,5,6,7，默认值为3。
2) color属性用来控制文字的颜色，其格式为：
<font color=#n或英文表示的颜色>…</font>，n是一个十六进制的六位数。
3) face属性用来指明文字使用的字体，其格式为：
<font face=字体名>…</font>
第九章 网页制作
10
9.1.2 HTML语言的基本语法
目
录
上一页
（3）字形标记
设置文字的粗体、斜体、上标、下标、下划线等 。
下一页
退 出
2015/7/21
标记格式
字形结果
<B>…</B>
粗体
<I>…</I>
斜体
<U>…</U>
下划线
第九章 网页制作
11
9.1.2 HTML语言的基本语法
目
录
上一页
下一页
退 出
2015/7/21
3. 插入图片
<Img>标记将图片插入网页中。该标记具有以下属性：
(1) src属性：指明图片文件所在的位置。
格式：<img src =URL>
其中URL是指图片文件存放的位置。
(2) alt属性：图片的文字说明，当鼠标指针指向该图片时，该说明性文字
弹出。
格式：<img src =URL alt =说明文字>
(3) height和width属性：设置图片显示区域的高度和宽度。
格式：<img src =URL height =n1 width=n2>
其中height和width属性中n1、n2的取值为像素数，像素数越大，图片显示
越大 。
(4) border属性：设置图片文件的边框。
格式：<img src =URL border =n>：设置图片的边框。其中n为像素数。
(5) align属性：设置图片相对于文本的位置关系。
格式：<img src =URL align =top | middle |bottom| left | right>：顶边对齐/垂直居
中/底边对齐/左对齐/右对齐
第九章 网页制作
12
9.1.2 HTML语言的基本语法
目
录
上一页
下一页
退 出
4. 超级链接
在HTML语言中， <a>和</a>标记用于设置网页中的超链接，href属性
指明被超链接的文件地址。
格式：<a href=URL>超连接文本</a>
用于表示超链接的文本一般显示为蓝色并且加下划线。在浏览器中，
当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中
显示该链接的地址。
若使用图片做超链接，可使用如下格式完成：
<a href=URL1><img src=URL2></a>
2015/7/21
第九章 网页制作
13
9.1.2 HTML语言的基本语法
目
录 5.使用表格
上一页
下一页
退 出
2015/7/21
在网页中插入一个表格，需要用到一组HTML标记。定义表格的有
关标记如下：
<table> … </table> 定义表格。
<tr> … </tr> 定义表行。
<th> … </th> 定义表头。
<td> … </td> 定义表列。
常用的标记属性：
border属性用于设置表格边框的宽度；width、height属性设
定表格和表项的宽度、高度，取值可以是像素数或百分数；
cellspacing 和cellpadding属性分别用于设置单元格之间的间隙
和单元格内部空白；align属性设置表格和表项的对齐方
式;bgcolor和background属性设置表格背景的颜色和背景图像。
第九章 网页制作
14
9.1.2 HTML语言的基本语法
目
录
上一页
下一页
退 出
2015/7/21
例9-4 表格示例
<html>
<head><title>表格示例</title></head>
<body>
<table border=1 width=90% cellspacing=6 align=center>
<tr bgcolor=#dddddd>
<th>时间</th><th>星期一</th> <th>星期二</th> <th>星期三</th>
</tr>
<tr>
<td>1-2节</td><td>数学</td><td>语文</td><td>英语</td>
</tr>
<tr>
<td>3-4节</td>
<td>地理</td><td>历史</td><td>生物</td>
</tr>
</table>
</body>
第九章 网页制作
</html>
15
9.2 FrontPage概述
目
录
上一页
下一页
退 出
专门Web创作工具具有“所见即所得”功能,Web创作人员直接
对Web页面进行编辑修改，并且能立即看到Web页面的显示效果。
网页制作工具种类很多，最常用的是Macromedia公司的Dream
weaver和Microsoft公司的FrontPage。
Dream weaver能够快速高效地创建极具表现力和动感效果的网
页，同时又提供了完善的站点管理机制。它与动画制作软件Flash、
图像处理软件Firework结合，提供了一套完整的网站开发的方案。
FrontPage是微软公司开发的网页制作和网站管理工具。
FrontPage 2000是Microsoft Office 2000组件之一，与Office其
它组件高度融合。它界面友好，功能强大，易学易用，是目前使用
最为广泛的网页制作、站点管理的工具。
2015/7/21
第九章 网页制作
16
9.2 FrontPage概述
目
录
上一页
下一页
退 出
2015/7/21
9.2.1 FrontPage的启动与退出
9.2.2 FrontPage中的视图
9.2.3 FrontPage的编辑方式
9.2.4 FrontPage中的视图
9.2.5 FrontPage的编辑方式
第九章 网页制作
17
9.2.1 FrontPage的主要功能
目
录
上一页
下一页
退 出
2015/7/21
FrontPage 2000集成了两大功能模块——网页制作模块和网站
管理模块。
FrontPage 2000网页制作模块主要有以下一些功能：
（1）强大的编辑功能
（2）制作编辑表格功能
（3）图片处理功能
（4）超级链接自动修复功能
（5）制作表单
（6）使用网页框架
（7）提供丰富的组件
（8）插入外部程序。
（9）使用数据库
（10）支持动态HTML和CSS样式表
第九章 网页制作
18
9.2.1 FrontPage的主要功能
目
录
同时，FrontPage 2000具有强大的网站管理功能，
上一页
是一款方便而又实用的Web站点的发布与维护工具，主
下一页
要功能有：
退 出
（1）建立站点
（2）站点文件管理功能
（3）网页导航管理功能
（4）任务管理功能
（5）网站发布与维护功能
2015/7/21
第九章 网页制作
19
9.2.2 FrontPage的启动与退出
目
录 1．FrontPage的启动
上一页
下一页
退 出
2015/7/21
FrontPage 2000可以按下列步骤启动：
（1）单击“开始”按钮，在“开始”菜单中单击“程序”。
（2）在“程序”菜单中单击Microsoft FrontPage。
（3）打开的Microsoft FrontPage 2000窗口 。
另外，也可以在桌面上建立FrontPage 2000快捷方式，然后
在桌面上双击该图标，即可启动FrontPage 2000。
2. FrontPage的退出
FrontPage 2000的退出有以下三种方式：
(1)选取“文件”菜单中的“退出”。
(2)单击操作窗口中最右上角的关闭按钮
(3)通过快捷键Alt+F4退出。
第九章 网页制作
20
9.2.3 网页与网站
目
录
上一页
下一页
退 出
2015/7/21
用HTML语言编写的文件称之为HTML文件，该
文件需要通过Web浏览器解释并显示在屏幕上，所
以它又被称为网页 (Web Page)。一般而言，Web
站 点 的 第 一 个 网 页 被 称 为 主 页 或 者 首 页 ( Home
Page)。
其实站点就是一组相关网页和其他文件的集
合。
第九章 网页制作
21
9.2.4 FrontPage中的视图
目
录
上一页
下一页
退 出
FrontPage 2000提供了6种视图以方便用户对站点的管理，可以
在不同的视图中进行不同的操作。
1.“网页”视图
“网页”视图是FrontPage 2000中最常用的工作界面。网页的创
建、编辑、预览等基本操作都是在此视图中进行的。该视图窗口底部
有三个标签：“普通”、“HTML”和“预览”。它们控制网页以普通
方式、HTML方式进行编辑和对网页效果进行预览 。
2.“文件夹”视图
在“文件夹”视图中，站点显示为一组文件和文件夹。
在“文件夹”视图中可以创建、移动和删除文件或文件夹。
3．“报表”视图
使用“报表”视图可以方便了解当前站点的文件内容、
更新链接情况、组件错误、所有文件列表及变化情况等信息。
2015/7/21
第九章 网页制作
22
9.2.4 FrontPage中的视图
目
录
上一页
下一页
退 出
2015/7/21
4．“导航”视图
使用“导航”视图可方便地观察站点的链接结构。在该
视图中可以很直观地浏览网站内网页之间的链接关系，同时
也可以通过拖曳操作改变链接结构。
5．“超链接”视图
“超链接”视图将当前站点显示为链接文件的一个网
络，它们表示了站点中各个网页之间的相互链接关系。
6. “任务”视图
“任务”视图主要用来创建和管理任务。在视图中列
出了当前站点的“任务”，即当前站点中尚未完成的项目 。
第九章 网页制作
23
9.2.5 FrontPage的编辑方式
目
录
上一页
下一页
退 出
2015/7/21
FrontPage 2000的网页视图下有三种编辑方式：普通、HTML、
浏览，该视图窗口底部有三个标签：“普通”、“HTML”和“预
览”。它们分别控制网页以普通方式、HTML方式进行编辑或是预览
网页的效果，默认是普通方式。如果切换到HTML方式，用户就可以
看到FrontPage 2000自动生成的HTML代码。在HTML方式下，可以直
接键入HTML代码。浏览方式实际上是用Internet Explorer来显示
网页。
FrontPage 2000上的工具栏可以选择打开或隐藏。FrontPage
2000最多可显示9个工具栏，分别是常用、格式、DHTML、效果、报
表、表格、导航、定位、图片和样式。
FrontPage 2000上的工
具栏都是可以浮动的，用户可以用鼠标按住工具栏上空白的地方，
把工具栏拖动到任何位置或固定在FrontPage 2000窗口的四周。
FrontPage 2000的状态栏上有一个窗格，显示正在编辑的网页和下
载速度。
24
第九章 网页制作
9.3 网页制作
目
录
Web站点的开发，首先应当根据其用途规划站点，确定
上一页
站点的结构，并在本地磁盘上创建站点以存储制作完成的网
下一页
页及其其他相关文件。然后再发布到指定服务器上（远程站
退 出
点）。
9.3.1 创建站点
9.3.2 网页编辑
9.3.3 插入对象
9.3.4 创建超链接
2015/7/21
第九章 网页制作
25
9.3.1创建站点
目
录
上一页
FrontPage 2000 提供了多个模板和向导。下面以“只有一个
网页的站点”模版为例，介绍新建站点的方法：
下一页
（1）在FrontPage 2000窗口中，单击“文件“菜单上的“新
退 出
建”命令，再选择“站点”，FrontPage 2000将打开“新建”
对话框 。
（2）在“新建”对话框的“指定新站点的位置”文本框中，
输入存储站点的文件夹。
（3）双击“只有一个网页的站点”模版，新建站点 。
2015/7/21
第九章 网页制作
26
9.3.2网页编辑
目
录
1．新建网页
上一页
要创建一个新的网页，按下面的步骤操作。
下一页 （1）从“文件”菜单的“新建”子菜单中选择
“网页”命令。
退 出
（2）出现“新建”对话框，选中“常规”选项卡。
（3）选择所需的模板。
（4）单击“确定”按钮，系统新建一个基于所选
模板的网页。
（5）此时，新建的网页显示在窗口中，可以进行
编辑修改等。
（6）单击“文件”菜单，选择“保存文件”命令，
弹出对话框，设置完成后单击“保存”按钮。
（7）单击“视图”框中的“导航”图标，在“文
2015/7/21
27
第九章 网页制作
件夹列表”中拖动新建网页到站点的结构图，
9.3.2网页编辑
目
录
上一页
下一页
退 出
2．打开网页
打开网页的方法有多种，最常用的操作步骤如下：
（1）在FrontPage 2000窗口中，单击工具栏中“文件夹列表”按钮。
（2）在“文件夹列表”窗口中，找到要编辑的网页，然后双击网页
图标。
3．设置文字格式
文字格式包括字体、字型、大小、颜色和修饰效果等属性。
设置文字的格式操作如下：
（1）选中文字。
（2）单击“格式”菜单，选择“字体”命令，打开 “字体”对话
框。
（3）可在对话框中设置字体的各种属性。
2015/7/21
第九章 网页制作
28
9.3.2网页编辑
目
录
4．设置段落格式
上一页
文字段落的格式编排对于一个网页的外观是至关重要的 。
下一页
FrontPage 2000通过按“Enter”划分段落。值得注意的是，段落
退 出
之间插入了一个空行。如果只是需要换行，而不是另起一个段落，
按“Shift”+“Enter”键即可。实际上，按“Enter”在HTML代码中
插入的是<p>标记，而按“Shift”+“Enter”键则插入的是<br>标记。
段落格式主要包括对齐方式、文本缩进和段落间距属性。设
置方法如下：
（1）将插入点移动到要设置格式的段落中。
（2）单击“格式”菜单，选择“段落”命令，弹出对话框。
（3）在“段落”对话框中可以设置段落的各种格式。
2015/7/21
第九章 网页制作
29
9.3.2网页编辑
目
录
5．设置项目列表
上一页
为列表添加项目符号或编号的具体操作如下：
下一页
（1）选择要添加项目符号或编号的列表项。
退 出
（2）单击“格式”工具栏上的“项目符号”按钮，可为列表添
加项目符号。
（3）单击“格式”工具栏上的“编号”按钮，可为列表添加编
号。
2015/7/21
第九章 网页制作
30
9.3.2网页编辑
目
录
上一页
下一页
退 出
2015/7/21
6．设置网页属性
网页的属性包括网页的标题、位置、背景、页边距等信息。要
设置网页属性，可以使用“文件”菜单上的“属性”命令，或者在
网页的任意地方单击鼠标右键，在弹出的菜单中选择“属性”命令，
将显示“网页属性”对话框。
(1)“常规”属性
“位置”框用于指定网页的完整URL。
“标题”框用于给出网页的标题。
“背景音乐”框用于指定网页的背景声音。
(2)“背景”属性
要设置网页的背景颜色、背景图片以及超链接的颜色，单击
“网页属性”对话框的“背景”选项卡 。
(3)“边距”属性
在“边距”选项卡中可以设置页面的顶端页边距和左端页边距。
第九章 网页制作
31
9.3.2网页编辑
目
录
上一页
下一页
退 出
2015/7/21
7．预览网页
用户可以转换到预览视图方式预览网页，还可以使用“文件”
菜单上的“在浏览器中预览”命令，使用外部浏览器打开当前网页
进行预览。此时，将打开“在浏览器中预览”对话框 。
在“浏览器”框内选择一个web浏览器，在“窗口大小”框内
选辑窗口的尺寸，然后单击“预览”按钮。
用户还可以单击“添加”按钮，添加其他的预览浏览器。
第九章 网页制作
32
9.3.3插入对象
在FrontPage 2000中，可以方便的插入符号、
图片、水平线等对象。
上一页
下一页 1．插入特殊符号
操作步骤如下：
退 出
(1)在准备插入特殊符号的网页文本中设置插入
点。
(2)打开“插入”菜单，执行其中的“符号”命
令，打开“符号”对话框。
(3)在符号列表框中选择要插入的符号，此时在
“插入”按钮右侧的预览框中会出现选 择的符
号，单击“插入”按钮之后，即可将特殊符号
插入至网页的插入点处。
2015/7/21
33
第九章 网页制作
(4)单击“关闭”按钮。
目
录
9.3.3插入对象
目
录
上一页
下一页
退 出
2015/7/21
2． 插入水平线
操作步骤如下：
(1)在准备插入水平线的位置设置插入点。
(2)打开“插入”菜单，选择“水平线”命令，此时在网页
的插入点处插入一条水平线。如果插入点位于或接近行尾，则
水平线将插入到下一行。将光标移动至水平线上双击，打开
“水平线属性”对话框。在“宽度”栏中可设置水平线的宽度。
在“高度”栏中输入水平线的高度。在“对齐方式”栏中选择
水平线在网页内水平对齐的方式。在“颜色”列表框内设置水
平线的颜色，系统默认的颜色是黑色。选择“实线(无阴影)”
复选框时，水平线将被设置成实心线，并且在水平线的边缘上
没有阴影。
第九章 网页制作
34
9.3.3插入对象
目
录
上一页
下一页
退 出
2015/7/21
3． 插入图片
（1）图片文件的格式
在WWW上常用的图像文件格式是JPEG和GIF，它们
都是压缩的图像格式，文件的信息量小，适合于网络传输。
图形交换格式GIF是第一种被WWW支持的图像文件格式，
它采用无损压缩方式。其主要特征是支持动画、透明度、
图形渐进。但GIF格式只支持256种颜色。
联合照片专家组JPEG格式是专为有几百万种颜色的照
片和图形设计的，它采用有损压缩方式，以牺牲图片质量
换取大的压缩比例。但JPEG格式支持真彩色（24位色），
并且在压缩大的图像方面已被证明很有效。
第九章 网页制作
35
9.3.3插入对象
目
录
上一页
下一页
退 出
2015/7/21
（2）插入图片的步骤
第一步，移动光标至想要插入图像处。
第二步，单击菜单项中的“插入”，选择“图片”项，
再选取二级菜单中的“来自文件(E)…”，弹出对话框。
第三步，如果图片在该站点中，则选中图片文件并按
“确定”按钮；否则单击“从计算机上选择一个文件”按钮
或单击“使用web浏览器来选择网页或文件”按钮，从计算
机本地硬盘中或者Internet上选中图片并按“确定”，即可
将其插入网页中。
（3）设置图片属性
插入的图片可以设置图片属性来调整图片的大小、对齐
方式等。在选定的图片上单击鼠标右键，在快捷菜单中选择
“图片属性”命令，此时会出现“图片属性”对话框，选中
“外观”选项卡。
第九章 网页制作
36
9.3.3插入对象
目
录
在“大小”区域中调整图片的大小参数。
为了防止改变图片原来的长宽比例，可以选中
上一页
“保持纵横比”复选框，这样图片就会根据原
下一页
来的长宽比例来调整大小。
退 出
单击“对齐方式”列表框，选择对齐方式。
在“边框粗细”框中，输入图片边框的宽
度，“0”为无边框
（4）编辑图片
选中插入的图片，单击“查看”菜单中的
“工具栏”，选择“图片”命令，打开图片编
辑工具栏，可以对图片的亮度、对比度进行调
整，可以旋转、翻转图片，对图片进行剪裁等
2015/7/21
37
第九章 网页制作
操作。
9.3.3插入对象
目
录
上一页
下一页
退 出
2015/7/21
4．插入字幕
（1）将插入点设置在要插入移动字幕的位置或者选择作为移
动字幕的文本。
（2）单击“插入”菜单中的“组件”，选择“字幕”命令。
（3）出现“字幕属性”对话框，如果已经选择了作为移动字
幕的文本，此文本就会出现在“文本”框中。如果没有选择
文本，可在“文本”框中输入作为移动字幕的文本。
（4）在“方向”区域中选择文字的移动方向。在“速度”区
域中可以指定文字的移动速度，在“延迟”框中输入的数值
表示在每个连续运动之间暂停的毫秒数。“数量”框中输入
的数值表示文本每次移动的距离。在“表现方式”区域中可
以指定文字的运动方式。选中“重复”区域的“连续”复选
框，移动字幕连续不停循环，若要设置文本重复有限的次数，
则取消选中并输入字幕重复的次数。在“背景颜色” 列表
框中可以设置移动字幕的背景颜色。
（5）单击“确定”按钮。
第九章 网页制作
38
9.3.3插入对象
目
录
上一页
下一页
退 出
2015/7/21
5．插入悬停按钮
悬停按钮是一种动感按钮，当访问者将鼠标指
向该按钮时，按钮就会改变颜色或形状。
插入悬停按钮的基本步骤如下：
（1）将插入点设置在要插入悬停按钮的位置。
（2）单击“插入”菜单中的“组件”，选择“悬
停按钮”命令，弹出“悬停按钮属性”对话框。
第九章 网页制作
39
9.3.3插入对象
目
录
上一页
下一页
退 出
2015/7/21
（3）在“按钮文本”框中输入按钮上的文本。可单击
“字体”按钮，设置文本的字体、字型、大小和文本颜色
属性。“背景颜色”选项是指按钮的背景颜色，此选项一
般不起作用。
在“效果”列表框中选择当鼠标移到按钮上时出现的视
觉效果，包括“填充颜色”、 “颜色对比”、“发光”、
“反色发光”、“微微发光”、“凸出”和“凹进”效果。
可以在“效果颜色”列表框中指定当实现某—种效果时出
现的颜色。
（4）可以通过单击“自定义…”按钮，在弹出的“自定
义”对话框中进一步设置按钮的属性。
（5）设置完成，按“确定”按钮。
此时，设置的图片悬停按钮出现在插入点位置。
第九章 网页制作
40
9.3.3插入对象
目
录 6．站点计数器
上一页
下一页
退 出
使用“站点计数器”组件可以记录访问次数或者网页被选中的
次数。浏览者每次访问网页时，站点计数器中的数字就会随之增加。
FrontPage 2000 提供了美观的“站点计数器”组件。插入“站点
计数器”的步骤如下：
（1）将插入点设置在要插入站点计数器的位置。
（2）单击“插入”菜单中的“组件”，选择“站点计数器”命令，出
现“站点 计数器属性”对话框 。
（3）在“站点计数器属性”对话框中，选择所需的计数器样式。若要
使用自定义的计数器样式，需在“计数器样式”区中选择“自定义
图片”选项，然后在文本框中输入图片的路径及文件名。
2015/7/21
注意：如果要自定义样式，需要自行设计一个包含0到9数字的图片，
然后将该图片存成GIF图片文件格式。
第九章 网页制作
41
9.3.3插入对象
目
录
上一页
下一页
退 出
（4）选中“计数器重置为”复选框，在右侧的文本框中输入
计数器的起始数。
（5）选中“设定数字位数”复选框，然后在右侧的文本框中
输人数字作为计数器的位数。
（6）单击“确定”按钮。
此时，在网页中插入了一个站点计数器。值得注意的
是，此组件需要Web服务器的支持才能正确显示。
2015/7/21
第九章 网页制作
42
9.3.4创建超链接
目
录
上一页
下一页
退 出
1．创建超链接
在web网页中超链接一般有两种表现方式，即以文本方式标
注的超链接和以图片方式标注的超链接。下面介绍这两种方式超
链接的创建过程。
（1）链接到已有的页面
创建超链接的步骤如下：
第1步 选定要定义超链接的文本或图像。
第2步 单击“常用”工具栏上的“超链接”按钮，或者从
“插入”菜单中选择“超链接”命令。
第3步 出现“创建超链接”对话框，网站中的所有网页出
现在文件列表中，选择链接的目标网页。
第4步 单击“确定”按钮，超链接创建完成。
2015/7/21
第九章 网页制作
43
9.3.4创建超链接
目
录
（2）链接到一个新建页面
上一页
在创建超链接时，也可以链接到—个新创建的页面。
下一页
其创建步骤如下：
退 出
第1步 选定要定义超链接的文本或图像。
第2步 单击“常用”工具栏上的“超链接”按钮，或
者从“插入”菜单中选择“超链接”命令。
第3步 出现“创建超链接”对话框，单击“创建一网
页并链接到该网页”按钮。
第4步 出现“新建”对话框，在“常规”选项卡中选
择一种网页模板。单击“确定”按钮，链接到—个新的网页，
然后编辑此网页。
2015/7/21
第九章 网页制作
44
9.3.4创建超链接
目
录
上一页
下一页
退 出
2015/7/21
（3）链接到计算机中的文件
在FrontPage 2000中，可以创建链接到计算机中某文
件的超链接。
其创建步骤如下：
第1步 选定要定义超链接的文本或图像。
第2步 单击“常用”工具栏上的“超链接”按钮，或者
从“插入”菜单中选择“超链接”命令。
第3步 出现“创建超链接”对话框，单击“制作一个指
向您计算机上文件的超链接”按钮。
第4步 出现“选择文件”对话框，选择要链接的文件。
单击“确定”按钮，完成超链接的创建。
单击窗口底部的“预览”标签，切换至“预览”模式。
单击此链接，就会打开链接到计算机中的文件。
第九章 网页制作
45
9.3.4创建超链接
目
录
上一页
下一页
退 出
2015/7/21
（4）创建外部站点的超链接
在FrontPage 2000中，可以创建与WWW上其他站点的超链
接。其创建步骤如下：
第1步 选定要定义超链接的文本或图像。
第2步 单击“常用”工具栏上的“超链接”按钮，或者
从“插入”菜单中选择“超链接”命令。
第3步 出现“创建超链接”对话框，单击“使用Web浏览
器来选择网页或文件”按钮。
第4步 系统自动打开Web浏览器，在“地址”栏中输入一
个站点的地址，打开某个网页。切换到FrontPage窗口中，
这个地址就会出现在“创建超链接”对话框中的“URL”栏中。
单击“确定”按钮，完成超链接的创建。
单击窗口底部的“预览”标签，切换至“预览”模式。单
击此链接，就会打开链接对象的网页。
第九章 网页制作
46
9.3.4创建超链接
目
录
上一页
下一页
退 出
2015/7/21
（5）创建发送电子邮件的超链接
可以创建与电子邮件的超链接，以便反馈信息。
具体创建步骤如下：
第1步 选定要定义超链接的文本或图像。
第2步 单击“常用”工具栏上的“超链接”按钮，或者从
“插入”菜单中选择“超链接”命令。
第3步 出现“创建超链接”对话框，单击“制作发送电子邮件
的超链接”按钮。
第4步 出现“创建电子邮件超链接”对话框，输入一个电子邮
件地址。单击“确定”按钮返回到“创建超链接”对话框，
在“URL”栏中显示了你的电子邮件地址。
第5步 单击“确定”按钮，完成超链接的创建。
第九章 网页制作
47
9.3.4创建超链接
目
录
上一页
下一页
退 出
2015/7/21
2．使用书签
应用书签能够更严密地控制访问者到达网页内某个具体位
置。当访问者单击基于书签的超链接时，将直接跳转到这个书
签所在的位置。
（1）插入书签
在创建到书签的链接之前，必须要在网页中插入书签。
具体步骤：
第1步 将光标定位在要插入书签的位置。
第2步 从“插入“菜单中选择“书签”命令。
第3步 出现“书签”对话框，在“书签名称”框中键人书
签名称 。
第4步 单击“确定”按钮，出现书签标记。
（2） 创建到书签的超链接
步骤如下：
第九章 网页制作
48
9.3.4创建超链接
目
录 第1步 选定要定义超链接的文本或图像。
上一页 第2步 单击“常用”工具栏上的“超链接”按钮，
或者从“插入”菜单中选择“超链接”命
令。
退 出
第3步 出现“创建超链接”对话框，选定已经插
入书签的目标网页，在“可选”区域中单
击“书签”下拉按钮，在列表中选择链接
的书签名 。
第4步 单击“确定”按钮，完成超链接的制作。
下一页
2015/7/21
第九章 网页制作
49
9.3.4创建超链接
目
录
上一页
下一页
退 出
2015/7/21
3．使用导航栏
为了使浏览者能在站点中的各个网页之间的切换浏览，
FrontPage 2000提供了“导航栏”功能。
插入导航栏的具体步骤如下：
（1）将光标设置在要插入导航栏的位置。
（2）从“插入”菜单中选择“导航栏”命令。
（3）出现“导航栏属性”对话框，在“要添加到网页的超链接”
区域中设定所需的超链接选项。当选择了一个选项时，
相应的超链接就以蓝色出现在结构示意图中。
（4）在“方向和外观”区域中选择所需的方向和外观选项。
（5）单击“确定”按钮，导航栏出现在网页中的插入点位置 。
当网站中网页的链接结构发生改变时，导航栏将自动进
行调整， 保持与变化后的链接结构的一致性。
第九章 网页制作
50
9.4 网页布局
目
录
上一页
下一页
退 出
网页的布局设计，是将文字、图形图像等网
页元素，根据特定的内容和主题，在网页所限定
的范围中，进行视觉的关联与配置，从而将设计
意图以视觉形式表现出来。
网页的布局一般通过表格和框架的使用来实
现。
9.4.1
创建和使用表格
9.4.2
创建框架
9.4.3 创建框架超链接
2015/7/21
第九章 网页制作
51
9.4.1创建和使用表格
目
录
上一页
下一页
退 出
表格由行和列交叉所形成的单元格组成。在单
元格中可以放置任何对象，例如文本、图像、表单、
FrontPage组件等。利用表格可以有条理地排列数据
或者组织网页布局。表格可以将文本排列成并列的
段落，或模拟文本的分栏形式，也可以利用宽度固
定的表格在网页上为文本提供边界。
FrontPage 2000提供了与WORD字处理软件类似
的表格处理功能，在网页中可以轻松的创建和处理
表格。
2015/7/21
第九章 网页制作
52
9.4.1创建和使用表格
目
录
上一页
下一页
退 出
1．创建表格
创建表格有以下三种方法：
使用“常用”工具栏中的“插入表格”按钮，可以按默认方式
快速地插入表格。
(1) 将插入点定位在要插入表格的位置。
(2) 单击“常用”工具栏上的“插入表格”按钮，然后向右下
方拖动鼠标，在表格框中会显示表格的大小。此时在插入点位置就
会显示一张空的表格。
使用菜单命令可以对插入的表格进行精确的设置，包括行和列
的数目、边框尺寸以及单元格宽度等。
（1）将插入点定位在要插入表格的位置。
（2）从“表格”菜单的“插入”子菜单中选择“表格”命令。
2015/7/21
第九章 网页制作
53
9.4.1创建和使用表格
目
录
上一页
下一页
退 出
2015/7/21
（3）出现“插入表格”对话框。在“大小”区域中的“行”和“列”
栏中输入表格的行数和列数。
（4） 在“布局”区域中可以设置表格的布局方式，包括表格的对
齐方式、边框粗细等。
（5） 单击“确定”按钮，设置的表格出现在插入点位置。
可以手动绘制表格，步骤如下：
（1） 从“表格”菜单中选择“手绘表格”命令，显示“表格”工
具栏。在“表格”工具栏中单击“手绘表格”按钮，光标变为铅笔形
状。
（2）在要创建表格的位置按下鼠标左键的同时拖动光标。在表格大
小合适时松开鼠标，—个表格出现在网页中。
（3）在表格内将铅笔光标沿水平方向拖动增加一个新行。在表格内
将铅笔光标沿垂直方向拖动增加一个列行。重复该步骤可创建一个复
杂的表格。
（4）单击“表格”工具栏中的“清除” 按钮，光标变为橡皮形状，
54
第九章 网页制作
单击表格线可清除该表格线。
9.4.1创建和使用表格
目
录
2．设置表格属性
插入表格后，右单击表格，在快捷菜单中选择“表格属性”
上一页
命令，即可打开的“表格属性”对话框。
对表格属性的设置说明如下：
下一页
对齐方式：可以选择左对齐、右对齐、水平居中和两端对
退 出
齐。该属性决定表格在网页中的相对位置。
浮动：可以选择左对齐、右对齐。该属性决定表格与其他
网页元素的排列关系，即“文字环绕”效果。
指定宽度和高度：表格的大小。可以使用决对大小“像素”
或相对大小“百分比”。
单元格边距：设置表格线与表格内容的距离。
单元格间距：设置两个相邻单元格边框的距离 。
边框：粗细以像素为单位。可以选择和是的边框颜色
背景：可以指定背景颜色或背景图像。
2015/7/21
第九章 网页制作
55
9.4.1创建和使用表格
目
录
上一页
下一页
退 出
2015/7/21
3．调整表格
创建了表格之后，可以对各个表格单元格、行和列的布局和
结构进行调整。
（1） 插入行或列
在表格中插入行或列的步骤如下：
第1步 将插入点定位在单元格内。
第2步 从“表格”菜单的“插入”子菜单中选择“行或列”
命令。
第3步 出现“插入行或列”对话框，根据需要选中“行”或
“列”单选框。然后在“行数”或“列数”选项栏中键入插入
的行数或列数 。
第4步 在“位置”区域中选择相对于当前的插入位置。单击
“确定”按钮。
提示：使用“表格”工具栏上的“插入行”或“插入列”按
钮可以快速表格中插入的行或列。
第九章 网页制作
56
9.4.1创建和使用表格
目
录
上一页
下一页
退 出
2015/7/21
（2） 删除行、列或单元格
删除表格中的行或列的操作步骤入下：
第1步 选中要删除的行、列或单元格。
第2步 单击“表格”菜单中的“删除单元格”命令。或者
单击“表格”工具栏中的“删除单元格”按钮。
（3） 合并单元格
选中一个矩形区域内的多个连续的单元格，单击“表格”
菜单中的“合并单元格”命令。或者单击“表格”工具栏中
的“合并单元格”按钮。
（4） 拆分单元格
将插入点定位在要拆分的单元格中，单击“表格”菜单中
的“拆分单元格”命令。或者单击“表格”工具栏中的“拆
分单元格” 按钮。出现“拆分单元格”对话框，如果选择
“拆分为行”选项，可以水平地拆分单元格；如果选择“拆
分为列”选项，可以垂直地拆分单元格。然后在“行数”或
“列数”框中键人或选择拆分的数目。单击“确定”按钮。
第九章 网页制作
57
9.4.1创建和使用表格
目
录
上一页
下一页
退 出
（5） 设置单元格属性
将插入点定位在单元格中，单击“表格”菜单
中的“属性”，选择“单元格”命令，弹出“单元
格属性”对话框。
可以设置单元格中内容的布局，精确定义单元
格的宽度、高度，确定单元格的背景以及边框的颜
色等。
2015/7/21
第九章 网页制作
58
9.4.2创建框架
目
录
上一页
下一页
退 出
2015/7/21
框架的使用是进行网页布局设计的一种重要手段。
它将浏览器窗口划分为几个区域，称为框架，在每个
框架中都可以显示一个独立的网页。浏览器窗口中显
示的网页，实际是这些框架的集合，因此被称为框架
网页。框架网页并不包含显示内容，只是记录了该框
架网页包含几个框架、其拆分方式以及每个框架中显
示哪个网页（与其它网页的超链接）等。
第九章 网页制作
59
9.4.2创建框架
目
录 1．创建框架
FrontPage 2000提供了最流行的框架网页布局模板，可以
上一页
使用这些模板轻松地创建框架网页。具体步骤如下：
下一页 （1） 在“文件”菜单的“新建”子菜单中选择“网页”命令。
（2） 出现“新建”对话框，选中“框架网页”选项卡。
退 出
（3） 选择所需的模板，如“目录”模板。在“说明”区域中
显示所 选模板的描述，在“预览”区域中可以预览框架网
页的布局 。
（4） 单击“确定”按钮，完成框架网页的创建 。
在窗口的底部出现了两个新的标签，“无框架”视图为
不能支持框架 的浏览器创建替代网页。“框架网页HTML”视
图显示框架网页的HTML代码。
在每个框架中，单击“新建网页”按钮，可以建立显示
在该框架中的新网页。单击“设置初始网页”按钮，可以建
立与已经存在网页的超链接，从而在此框架中显示出来。
2015/7/21
60
第九章 网页制作
9.4.2创建框架
目
录
上一页
下一页
退 出
2015/7/21
2． 保存框架网页
保存框架网页的操作步骤如下：
（1） 单击“常用”工具栏中的“保存”按钮。
（2） 出现“另存为”对话框，在右边的框架网页预览图中，其中一
个框架高亮显示，表示正在保存的该网页 。
（3） 在“文件名”框中输入网页名称。
（4） 单击“更改”按钮，设置网页的标题。
（5） 单击“保存”按钮，该网页保存完毕，框架图中的另一个框架
处于高亮状态。
（6） 重复步骤（3）至步骤（5）的操作。
（7） 当对话框中的整个框架图处于高亮状态时，表示此时正在保存
框架网页本身。
（8） 输入框架网页的文件名称及标题。
（9） 单击“保存”按钮。
第九章 网页制作
61
9.4.2创建框架
目
录
上一页
3．拆分框架
当使用模板创建的框架结构不能满足需要时，可以通过拆
分框架，制作出更为复杂的框架网页。操作步骤如下：
下一页
（1）选择要拆分的框架。
退 出
（2）在“框架”菜单中选择“拆分框架”命令。
（3) 出现“拆分框架”对话框，根据需要选择“拆分为列”或
“拆分成行”选项。
（4）单击“确定”按钮完成拆分。
4．删除框架
可以从框架结构中删除指定的框架。此时，系统只是把框
架从框架网页中删去，而此框架中的网页文件仍然存在。
操作步骤是：选择要删除的框架，在“框架”菜单中选择
“删除框架”命令即可。
2015/7/21
第九章 网页制作
62
9.4.2创建框架
目
录 5．设置框架属性
通过对框架属性的设置，可以更改框架超链接的网页、
上一页
调整框架大小等。
下一页  基本操作如下：
选择目标框架，从“框架”菜单中选择“框架属性”命
退 出
令，出现“框架属性”对话框。
 下面对“框架属性”作如下说明：
 名称：为每个框架命名一个名称。
 初始网页：这里显示该框架超链接的网页。可以通过单击“浏
览”按钮选择一个网页，改变在该框架中显示的网页。
 框架大小：输入框架宽度和行高，确定框架的大小。
 边距：设置框架内显示的内容与框架之间的距离。
 显示滚动条：可以选择框架的滚动条显示状态。
2015/7/21
第九章 网页制作
63
9.4.3创建框架超链接
目
录
框架超链接的使用，使网页之间的组织更加灵活、有效。
上一页
1．创建框架超链接
下一页
若要设置框架超链接，执行下列操作：
退 出
（1） 选择要定义超链接的文字或图片。
（2） 单击“常用”工具栏上的“超链接” 按钮。
（3） 出现“创建超链接”对话框，在“URL”框中输入链接
的目
标网页。
（4） 单击“更改目标框架” 按钮，出现“目标框架”对话
框。
（5）在“当前框架网页”区域中单击要用作目标的框架 。
2015/7/21
第九章 网页制作
64
9.4 网页布局
目
录
上一页
下一页
退 出
（6） 单击“确定”按钮，返回到“创建超链接”对话框，在
“目标框架”栏中显示出设置的目标框架名称。
（7） 单击“确定”按钮。
2．使用特殊的目标框架
在指定目标框架时，除了当前的框架之外，还提供了一些特
殊的框架来创建不同效果的目标框架。这些特殊框架位于“目标
框架”对话框中的“公用的目标区”区域。
相同框架：将链接得网页显示在包含该超链接的同一个框架内。
整页：将框架展开为整个窗口后，显示链接网页。
新建窗口：打开另为一个新窗口，显示链接网页。
父框架：在当前框架的上层框架内显示链接网页。
2015/7/21
第九章 网页制作
65
9.5 创建表单页面
目
录
上一页
下一页
退 出
表单是Web服务器与客户交互的手段。表单
的作用就是收集浏览者的输入信息，从而实现网
站与浏览者的交互。例如，用户可以用表单收集
客户的个人资料，用户也可以用表单设计一个订
货单，让客户指定要购买的商品名称、型号、数
量等。
9.5.1 插入表单域
9.5.2 提交表单
2015/7/21
第九章 网页制作
66
9.5.1插入表单域
目
录
上一页
下一页
退 出
2015/7/21
表单是由表单域组成的，表单域是客户输入信息的区域。在
FrontPage 2000中，有6种表单域：单行文本框、滚动文本框、复选框、
单选按钮、下拉菜单、普通按钮。
1．单行文本框
单行文本输入框用于让客户输入一行文字。要插入一个单行文本输
入框，使用“插入”菜单上的“表单”命令，再选择“单行文本框”。
要设置单行文本框的属性，可以右单击单行文本框，在弹出的快捷
菜单中选择“表单属性”命令，也可以直接双击单行文本框，FrontPage
2000将打开“文本框属性”对话框。
首先，要为单行文本框命名。当客户提交表单时，单行文本框的名
称和内容被配对发送给Web服务器端的表单处理程序。在“初始值”框内
可以键入默认内容。宽度框设置单行文本框的显示宽度。如果该单行文
本框用于输入口令，则选择密码域为“是”，在浏览器中，用户输入时，
内容显示为“*”号。
单击“验证有效姓”按钮，设置限制用户输入的规则。
第九章 网页制作
67
9.5.1插入表单域
目
录
上一页
下一页
退 出
2015/7/21
2．滚动文本框
滚动文本框允许客户输入多行文本。
要插人滚动文本框，使用“插入”菜单上的“表单”命令，再选
择“滚动文本框”
与单行文本框一样，设置滚动文本框的属性，可以右单击滚动文
本框，在弹出的快捷菜单中选择“表单域属性”命令，或直接双击滚
动文本框，FrontPage 2000将打开“滚动文本框属性”对话框 。
3．复选框
复选框是提供给客户的一个选项，一般彼此独立的多个复选框组
成一组，客户可以同时选中所有选项，也可以一个都不选。
要插入一个复选框，使用“插入”菜单上的“表单”命令，再选
择“复选框”。
要修设置选框的属性，右单击复选框，在弹出的菜单中选择“表
单属性”命令，或直接双击复选框，FrontPage 2000将打开“复选框
属性”对话框。
68
第九章 网页制作
9.5.1插入表单域
目
录
上一页
下一页
退 出
2015/7/21
首先应当为复选框命名，当客户提交表单时，复选框的名称和
状态配对发送给Web服务器端的表单处理程序。
用户可以结出复选框的初始状态是选中还是不选中，使用Tab
键按顺序选定。
4．单选按钮
单选按钮通常组成一组互斥的选项。客户只能选择其中一项。
要插入单选按钮，使用“插入”菜单上的“表单”命令，再
选择“单选按钮”。
如果表单上有多个单选按钮，FrontPage 2000默认选中第一
个。
要修改单选按钮的属性，右单击单选按钮，在弹出的菜单中
选择“表单属性”命令，或直接双击单选按钮，FrontPage 2000将
打开“单选按钮属性”对话框 。
第九章 网页制作
69
9.5.1插入表单域
目
录
上一页
下一页
退 出
要注意的是，如果把多个单选按钮编成一组，必须使它们的
组名相同。此外，可以单击“验证有效性”按钮，限定客户按一定
的规则做出选择。
5．下拉菜单（下拉列表框）
下拉菜单用于从一个列表中选择一个或几个项，从功能的角度
讲，可以用一组复选框或一组单选按钮来实现，但下拉菜单占用的
空间相对较小。
要插入下拉菜单，使用“插入”菜单上的“表单”命令，再
选择“下拉菜单”。插入的下拉菜单是空的，用户可以右单击下拉
菜单，在弹出的菜单中选择“表单属性”命令，或直接双击下拉菜
单，FrontPage 2000将打开“下拉菜单属性”对话框 。
单击“添加”按钮，将打开“添加选项”对话框 。
2015/7/21
第九章 网页制作
70
9.5.1插入表单域
目
录
上一页
下一页
退 出
首先在“选项”框内输入名称，当客户提交表单时，提交的是
选项的名称。如果想提交另外的值，应当选中“指定值”复选框，
然后键人一个值。此外，用户还可以指定选项的初始状态是选定还
是未选定。
6．按钮
一个表单上至少要有一个“提交”按钮和一个“全部重写”按
钮，“提交”按钮的作用是把表单上的数据提交给Web服务器的表
单处理程序，“全部重写”按钮的作用是把表单上的数据清空，以
便重新填写。
要插入按钮，使用“插入”菜单上的“表单”命令，再选择
“按钮”。
设置按钮的属性，可以右单击按钮，在弹出的菜单中选择“表
单属性”命令，或直接双击按钮，打开“按钮属性”对话框。
2015/7/21
第九章 网页制作
71
9.5.2提交表单
目
录
上一页
下一页
退 出
Web服务器怎样获取客户在表单中填写的信息呢?当客户单
击“提交”按钮后，Web服务器用表单处理程序来处理表单上的
信息，表单处理程序可以是注册组件，也可以是自定义的ISAPI
／NSAPI应用程序或CGI脚本等。
表单处理程序位于web服务器端，用于处理客户提交过来
的表单上的内容，或者发送确认信息给客户。
要指定表单处理程序，在表单上单击鼠标右键，在弹出的
菜单中选择“表单属性”命令，打开“表单属性”对话框 。
2015/7/21
第九章 网页制作
72
9.5.2提交表单
目
录
上一页
下一页
退 出
如果使用FrontPage 2000默认的表单处理程序，选择“发送
到”。默认情况下，客户在表单上填写的信息以文本文件的形式保
存到web服务器的_private文件夹，文件名为：表单_results.txt。
用户还可以把表单结果发送到某个Email地址。
如果不想使用FrontPage 2000默认的表单处理程序，可以选择
“发送到其他对象”单选按钮，然后在下拉列表中选择“自定义
ISAPI、NSAPI、CGI或ASP脚本”或者FrontPage 2000预定义的“讨
论表单处理程序”或者“注册表单处理程序” 。
注意：使用FrontPage 2000默认的表单处理程序或FrontPage
2000预定义的“讨论表单处理程序”或者“注册表单处理程序”，
Web服务器必须安装FrontPage服务扩展（FrontPage Server
Extension），否则表单功能将不会产生任何效用。
2015/7/21
第九章 网页制作
73
9.6 网页的发布
目
录
上一页
下一页
退 出
2015/7/21
网页的结构形式是由各种视听要素组成的。在设计网页时，强
调页面各组成部分的共性因素或者使诸部分共同含有某种形式特征，
是求得整体的常用方法。这主要从版式、色彩、风格等方面入手。
在版式上，将页面中各视觉要素作通盘考虑，以周密的组织和
精确的定位来获得页面的秩序感，即使运用“散”的结构，也是经
过深思熟虑之后的决定；一个站点通常只使用两到三种标准色，并
注意色彩搭配的和谐；对于分屏的长页面，不可设计完第一屏再考
虑下一屏。同样，整个网页内部的页面，都应统一规划，统一风格，
让浏览者体会到设计者完整的设计思想。
从某种意义上讲，强调网页结构形式的视觉整体性必然会牺牲
灵活的多变性，“物极必反”就是这个道理。因此，在强调网页整
体性设计的同时必须注意：过于强调整体性可能会使网页呆板、沉
闷，以致影响访问者的情趣和继续浏览的欲望。“整体”是“多变”
基础上
74
第九章 网页制作
9.6 网页的发布
目
录
上一页
9.6.1网站和网页的设计原则
下一页
退 出
9.6.2网页的发布和维护
2015/7/21
第九章 网页制作
75
9.6.1网站和网页的设计原则
目
录
上一页
下一页
退 出
2015/7/21
网页设计表面上看，不过是关于网页版式编排的技巧与
方法，而实际上，它不仅是一种技能，更是艺术与技术的高
度统一。
网页设计应当以主题鲜明、形式与内容相统一、强调整
体为设计原则。
网页设计同报刊杂志等平面媒体的版式设计有很多共同
之处。但是，由于表现形式、运行方式和社会功能的不同，
网页设计又有其自身的特殊规律。所谓网页设计，是在有限
的屏幕空间上将各种网页元素，主要包括：文本、图像、表
格、颜色、音乐、动态影像等进行有机的排列组合，将理性
思维个性化的表现出来，是一种具有个人风格和艺术特色的
视听传达方式。它在传达信息的同时，也产生感官上的美感
和精神上的享受。它要求设计者必须掌握以下三个主要原则：
第九章 网页制作
76
9.6.1网站和网页的设计原则
目
录
上一页
下一页
退 出
1.主题鲜明，富有特色
网页设计表达的是一定的意图和要求，有明确的主题。网页设
计不但要单纯、简练、清晰和精确，而且应该通过对网页构成元素
运用艺术的形式美法则进行条理性处理，更好地营造符合设计目的
的视觉环境，突出主题，增强浏览者对网页的注意力，增进对网页
内容的理解。
优秀的网页设计必然服务于网站的主题，就是说，什么样的网
站，应该有什么样的设计。例如，设计类的个人站点与商业站点性
质不同，目的也不同，所以评论的标准也不同。网页设计与网站主
题的关系应该是这样：首先，设计是为主题服务的；其次，设计是
艺术和技术结合的产物。
2015/7/21
要使网页从形式上获得良好的诱导力，鲜明地突出诉求主题，
具体可以通过对网页的空间层次、主从关系、视觉秩序及彼此间的
77
第九章 网页制作
逻辑性的把握运用来达到。
9.6.1网站和网页的设计原则
目
录
上一页
下一页
退 出
2. 形式内容和谐统一
任何设计都有一定的内容和形式。内容是是设计存在的基础；
形式是内容的外部表现方式。一方面，网页设计所追求的形式美，
必须适合主题的需要。只讲花哨的表现形式以及过于强调“独特的
设计风格”而脱离内容，或者只求内容而缺乏艺术的表现，网页设
计都会变的空洞而无力。另一方面，要确保网页上的每一个元素都
有存在的必要性，不要为了炫耀而使用冗余的技术。那样得到的效
果可能会适得其反。
3. 色彩和谐，重点突出，强调整体
网页设计时强调其整体性，可以使浏览者更快捷、更准确、
更全面地认识它、掌握它，并给人一种内部有机联系、外部和谐完
整的美感。整体性也是体现一个站点独特风格的重要手段之一。
2015/7/21
第九章 网页制作
78
9.6.2网页的发布和维护
目
录
上一页
下一页
退 出
所谓发布网站，就是在FrontPage 2000中把创建或修改后的网
站 中 的 内 容 上 传 到 Web 服 务 器 中 。 为 了 便 于 用 户 发 布 站 点 ，
FrontPage 2000提供了一个相当方便的网页发布工具。
（1） 在FrontPage 2000中，打开站点。
（2） 在“常用”上具栏中单击“发布站点” 按钮，或者从“文件”
菜单中选择“发布站点”命令。
（3） 出现“发布站点”对话框，在“指定发布站点的位置”文本框
中输入要发布站点的URL或IP地址 。
（4） 单击“选项”按钮，可以选择发布所需的选项。可以使用默认
选项“只发布更改过的网页”，这样可以节省更新上传的时间。
（5） 单击“发布”按钮，FrontPage 2000开始检测WWW服务器的状态。
2015/7/21
第九章 网页制作
79
9.6.2网页的发布和维护
目
录
上一页
下一页
退 出
（6） 与服务器连接成功后，就会出现“要求提供用户名和密码”
对话框。
（7） 设置完毕后，单击“确定”按钮。
也 许 你 的 WWW 服 务 器 不 支 持 FrontPage 服 务 器 扩 展 ， 此 时
FrontPage 2000会自动启动Web Publishing向导来发布FrontPage
网站，Web Publishing向导能够以FTP上的方式发布网站，但用户
必须给出FTP服务器名、用户名和密码。
当网页内容有更新时，只要单击“常用”工具栏中的 “发
布站点” 按钮，即可将修改过的网页上传。
开始站点的发布过程。当网站发布成功后，在浏览器打开站
点仔细浏览，检查站点中每个网页是否正确的显示。
2015/7/21
第九章 网页制作
80
谢谢使用本课件！