大学IT

Download Report

Transcript 大学IT 

第
网
八
页
章
制
作
第八章 网页制作
目 录
上一页
下一页
8.1
8.2
8.3
8.4
8.5
8.6
概述
HTML简介
网页制作
网页布局
创建表单页面
网页的发布
结 束
2015/7/21
计算机文化基础
1
8.1
目 录
8.1.1
8.1.2
8.1.3
8.1.4
8.1.5
概
述
网站
服务器与浏览器
网页
网页制作工具
网页设计的相关计算机语言
上一页
下一页
结 束
2015/7/21
计算机文化基础
2
8.1.1 网站
目 录
上一页
下一页
结 束
2015/7/21
网站是一组相关网页和有关文件的集合，
一般有一个特殊的网页作为浏览的起始点，
称为主页（Homepage），用来引导用户访问
其他网页。
网站中的内容通常包括网页和相关的文
件，一般被存储在同一个目录中，并根据网
站栏目或资源类型进行分类，分别存放在不
同的子目录中。本地网站在制作完成后，不
经过发布是不能被其他浏览者访问的。发布
就是将本地网站的内容传输到连接Internet的
Web服务器上。网站发布后，即获得一个网
站地址。
计算机文化基础
3
8.1.2 服务器与浏览器
网站通常位于Web服务器上，Web服务器又称WWW服务
器、网站服务器或站点服务器。从本质上讲，Web服务器就是
一个软件系统，它通过网络接收HTTP请求，然后提供HTTP响
应给请求者。HTTP响应一般包含一个HTML文件，但也可以包
含文本文件、图像或其他类型的文件。要使一台计算机成为一
台Web服务器，就需要安装专门的服务程序 。
目 录
上一页
下一页
结 束
2015/7/21
要浏览Web页面，必须在本地计算机上安装浏览器软件。
浏览器就是Web客户端，它是一个应用程序，用于与Web服务
器建立连接，并与之进行通信。
浏 览 器 和 服 务 器 之 间 通 过 超 文 本 传 送 协 议 （ HyperText
Transfer Protocol，HTTP）进行通信。
计算机文化基础
4
8.1.3 网页
目 录
上一页
网页一般又称为HTML文件，是一种可
以在WWW上传输，能被浏览器认识和翻
译成页面并显示出来的文件。通常用户看
到的网页大多是以.htm和.html为扩展名的
文件。
下一页
结 束
2015/7/21
计算机文化基础
5
8.1.3 网页
1. 网页内容
一般来说，网页主要由文字、图片、动画、
超链接和特殊组件等元素构成。
2. 静态网页和动态网页
目 录
上一页
下一页
根据网页的生成方式，大致可以分为静态网
页和动态网页两种。
结 束
2015/7/21
计算机文化基础
6
8.1.4 网页制作工具
1. 网页制作三剑客
Dreamweaver、Flash、Fireworks被称为网页制作“三剑客” 。
（1）Dreamweaver是美国著名的软件开发商Macromedia公司
推出的一个所见即所得的可视化网站开发工具，该软件同
时适用于初学者和专业网页设计师。
目 录
上一页
下一页
（2）Fireworks也是由Macromedia公司开发的一种工具，它
以处理网页图片为特长，并可以轻松创造GIF动画。
（3）Flash是当今Internet最流行的动画作品的制作工具，并
成为事实上的交互式矢量动画标准。
结 束
2015/7/21
计算机文化基础
7
8.1.4 网页制作工具
2. Microsoft FrontPage 2003
目 录
上一页
FrontPage 2003是微软公司推出的Microsoft
Office 2003家族的成员之一，与Office的其他组件
高 度 融 合 ，界面友好 ，功能强大 ， 易学易用 。
FrontPage 2003的主要功能是设计、制作、管理网
页或站点。
下一页
结 束
2015/7/21
计算机文化基础
8
8.1.5 网页设计的相关计算机语言
1. HTML
HTML是Hypertext Markup Language的缩写，
是 WWW 技 术 的 基 础 ， 它 使 用 一 些 约 定 的 标 记
（Tag）对文本进行标注，定义网页的数据格式，
描述Web页中的信息，控制文本的显示。
目 录
上一页
下一页
结 束
2015/7/21
我们把用HTML语言编写的文件称为HTML
文件，把HTML文档称为网页（Web Page）。用
HTML语言编写的网页实际上是一种文本文件，
它以.htm或.html为扩展名。
计算机文化基础
9
8.1.5 网页设计的相关计算机语言
2. XML
目 录
上一页
下一页
结 束
2015/7/21
XML是Extensible Markup Language的缩写，
中文名为可扩展标记语言。其主要用途是在
Internet上传递或处理数据。XML与HTML不是
并列的概念，它可以说是HTML的补丁，以弥补
HTML的不足。比如，在HTML中不允许用户自
定义控制标识符，而在XML中允许用户这样做。
XML文件的扩展名为.xml。
计算机文化基础
10
8.1.5 网页设计的相关计算机语言
3. CSS
目 录
上一页
下一页
结 束
2015/7/21
CSS是Cascading Style Sheets的缩写，中文名
为层叠样式表，主要用来对网页数据进行编排、
格式化、显示、特效等。传统的HTML不能对网
页数据进行随心所欲的格式化，而CSS语言却满
足了这种要求，它对网页的特殊显示、特殊效果
提 供 了 很 大的帮助 。 目前 ，大多数网页都用了
CSS。
计算机文化基础
11
8.1.5 网页设计的相关计算机语言
4. DHTML
目 录
上一页
下一页
结 束
2015/7/21
DHTML是动态的HTML，这种技术要求网
页具备动态功能，如动态交互、动态更新等。事
实上，这是要求我们应该掌握Web中所包含的对
象、对象集，以及对象的属性、方法、事件等，
然后用程序处理这些对象相关的属性、方法，让
事件去完成一定的处理程序，以达到网页的动态
效果。
计算机文化基础
12
8.1.5 网页设计的相关计算机语言
5. 脚本语言
目 录
上一页
下一页
结 束
2015/7/21
脚本（Script）语言是嵌入到HTML代码中的
程序，根据运行的位置不同把它分为客户端脚本和
服务器端脚本。客户端脚本是运行在客户端的程序，
服务器端脚本是运行在服务器端的程序。这里所说
的客户端指的是浏览器，服务器端指的是Web服务
器。
目 前 较 为 流 行 的 脚 本 语 言 有 JavaScript 和
VBScript。
计算机文化基础
13
8.2 HTML简介
HTML文件是一种纯文本文件，我们可以使用
任何文本处理软件（如记事本）来创建或处理
HTML文件。
8.2.1 HTML语言概述
目 录
上一页
8.2.2 常用的HTML标记
下一页
结 束
2015/7/21
计算机文化基础
14
8.2.1 HTML语言概述
HTML语言是由世界性的标准化组织W3C
（World Wide Web Consortium）制定的，通过
浏览http://www.w3.org可以了解到HTML标准的
最新动态。
目 录
上一页
下面介绍HTML文件的基本构成和层次结构。
下一页
结 束
2015/7/21
计算机文化基础
15
8.2.1 HTML语言概述
目 录
上一页
下一页
结 束
2015/7/21
1. HTML文件标记
Internet中的每一个HTML文件都包括文本内容
和HTML标记两部分。其中，HTML标记负责控
制文本显示的外观和版式，并为浏览器指定各种
链接的图像、声音和其他对象的位置。多数
HTML标记的书写格式如下：
<标记名>文本内容</标记名>
标记名写在“< >”内。多数HTML标记同时具有
起始和结束标记，并且成对出现，但也有些
HTML标记没有结束标记。另外，HTML标记不
区分大小写。
计算机文化基础
16
8.2.1 HTML语言概述
某些HTML标记还具有一些属性，这些属性指定
对象的特性，如背景颜色、文本字体及大小、对齐方
式等。属性一般放在“起始标记”中，格式如下：
<标记名 属性1=值1 属性2=值2 …> 文本内容 </标记
名>
目 录
上一页
其中标记名和属性之间用空格分隔。如果标记有
多种属性，属性之间也要用空格分隔。
下一页
结 束
2015/7/21
计算机文化基础
17
8.2.1 HTML语言概述
2. HTML网页的结构
目 录
上一页
下一页
结 束
2015/7/21
现 在 我 们 先 看 一 个 简 单 的 HTML 文 件 ， 从 中 体 会 用
HTML语言编写网页时的层次结构。
【例8-1】用HTML语言编写一个简单的网页。
<html>
<head>
<title>我的第一个Web页</title>
</head>
<body>
<h1>欢迎进入HTML世界！</h1>
<p>这里我们首先介绍HTML语言的基本知识和语法。
然后，讲授如何使用HTML语言编写您的Web页面。
</p>
</body>
</html>
计算机文化基础
18
8.2.1 HTML语言概述
将上述代码用文本编辑器编辑并保存为一个
扩展名为.htm的文件，双击该文件图标，在浏览
器中看到如下图所示的结果。
目 录
上一页
下一页
结 束
图9-1
2015/7/21
计算机文化基础
19
8.2.1 HTML语言概述
目 录
上一页
下一页
结 束
2015/7/21
从 上 例 可 以 看 出 ， 一 般 HTML 文 件 都 是 以
<html>开头，以</html>结束。其文件结构由以下
两部分组成：
1）头部（Head）
HTML文件的头部由<head>和</head>标记定
义。通常情况下，文件的标题、语言字符集信息
等都放在头部信息中。最常用到的标记是
<title>…</title>，它用于定义网页文件的标题，
当该网页文件被打开后，网页文件的标题将出现
在浏览器的标题栏中。
计算机文化基础
20
8.2.1 HTML语言概述
目 录
上一页
下一页
结 束
2）正文主体（Body）
正文主体是HTML文件的核心内容，由<body>和
</body>标记定义。<body>标记具有一些常用的属性，
格式如下：
<body bgcolor=#n color=#n>…</body>
其中，bgcolor为背景颜色，color为文本颜色。n为六
位十六进制数。
如果网页使用背景图像，格式如下：
<body background="路径/图片文件名">…</body>
HTML对格式的要求并不严格，当HTML文件被
浏览器扫描时，所有包含在文件中的空格、回车等均
被忽略。因此你可以将一行写成两行或多行，在浏览
器中结果是相同的。
返 回
2015/7/21
计算机文化基础
21
8.2.2 常用的HTML标记
1. 文本布局
目 录
上一页
下一页
结 束
2015/7/21
1）段落标记<p>
<p>…</p>标记指定文档中一个独立的段落。通过设置
align属性，控制段落的对齐方式，其值可以是left、
center、right、justify，分别表示左对齐、居中、右对
齐和两端对齐，默认值为左对齐。
使用格式如下：
<p align=对齐方式> … </p>
2）换行标记<br>
<br>标记可以强制文本换行。该标记只有起始标记。
3）水平线标记<hr>
水平线标记<hr>用于在网页中插入一条水平线。
计算机文化基础
22
2. 文字格式
目 录
上一页
下一页
HTML语言中用于文字格式化的标记有：
1）标题标记<hn>
格式为：<hn 属性=属性值> 标题文字内容 </hn>
其中n说明大小级别，取值范围为1到6的数字。把
标题分为 6级，即h1~h6，其中h1文字最大，h6文
字最小。
结 束
2015/7/21
计算机文化基础
23
2）字体标记<font>
目 录
上一页
下一页
结 束
2015/7/21
字体标记用来对文字格式进行设置，主要具有以下属性：
（1）size属性：控制文字的大小，格式如下：
<font size=n>…</font>
其中n的取值范围为1～7的数字，默认值为3。
<font>标记和<hn>标记都可以控制文字的大小。一般情况下，
文章的标题最好由<hn>标记控制，而其余的文字由<font>标
记控制。相比较而言，<font>对字体的控制更加灵活。
（2）color属性：控制文字的颜色，格式如下：
<font color=#n或英文表示的颜色>…</font>
其中n是一个十六进制的六位数。
（3）face属性：指明文字使用的字体，格式如下：
<font face=字体名>…</font>
其中字体名的选择由Windows操作系统安装的字体决定。如：
宋体、楷体_GB2312、Times New Roman、Arial等。
计算机文化基础
24
3）字形标记
字形标记用于设置文字的粗体、斜体、
下划线、上标、下标等，如表所示：
目 录
上一页
下一页
标记格式
字形
<b>…</b>
粗体
<i>…</i>
斜体
<u>…</u>
下划线
<sup>…</sup>
上标
<sub>…</sub>
下标
结 束
2015/7/21
计算机文化基础
25
3. 图片
目 录
上一页
下一页
结 束
2015/7/21
<img>标记将图片插入网页中，用于设置图片的大小以及
相邻文字的排列方式。该标记具有以下属性：
（1）src属性：指明图片文件所在的位置。格式如下：
<img src =URL>
其中URL指图片文件存放的位置。
（2）alt属性：图片的文字说明，当鼠标指针指向图片时，
该图片的说明性文字弹出。格式如下：
<img src =URL alt =说明文字>
（3）width和height属性：设置图片显示区域的宽度和高度。
格式如下：
<img src =URL width =n1 height =n2>
其中width和height属性的取值n1和n2，可以是像素数或百
分比。
计算机文化基础
26
（4）border属性：设置图片文件的边框。格式
如下：
<img src =URL border =n>
其中n为像素数。
目 录
上一页
下一页
（5）align属性：设置图片相对于文本的位置关
系。格式为：<img src =URL align =对齐方式>
对齐方式可以是：top（顶端对齐）、middle
（相对垂直居中）、bottom（相对底边对齐）、
left（左对齐）、right（右对齐）、texttop（文
本上方）等。
结 束
2015/7/21
计算机文化基础
27
4. 超链接
目 录
上一页
下一页
结 束
2015/7/21
在HTML语言中，<a>和</a>标记用于设置网页中
的超链接，href属性指明被超链接的文件地址。格
式如下：
<a href=URL>超链接文本</a>
用于表示超链接的文本一般显示为蓝色并且加下
划线。在浏览器中，当鼠标指针指向该文本时，箭
头变为手形，并在浏览器的状态栏中显示该超链接
的地址。
若使用图片做超链接，可使用如下格式完成：
<a href=URL1><img src=URL2></a>
计算机文化基础
28
5. 表格
目 录
上一页
下一页
结 束
在网页中插入一个表格，需要用到一组
HTML标记。定义表格的有关标记如下：
<table> … </table> 定义表格区域。
<caption> … </caption>定义表格标题。
<th> … </th>
定义表格头。
<tr> … </tr>
定义表格行。
<td> … </td>
定义表格单元格。
返 回
2015/7/21
计算机文化基础
29
表格属性
目 录
上一页
下一页
结 束
2015/7/21
常用的标记属性中，border属性用
于设置表格边框的宽度；width、height
属性用于设置表格或单元格的宽度、高
度；cellspacing和cellpadding属性分别用
于设置单元格之间的间隙和单元格内部
空白；align属性用于设置表格或单元格
的对齐方式；bgcolor和background属性
分别用于设置表格的背景颜色和背景图
像。
计算机文化基础
30
8.3 网 页 制 作
目 录
8.3.1
8.3.2
8.3.3
8.3.4
8.3.5
FrontPage 2003概述
创建站点
网页编辑
插入对象
创建超链接
上一页
下一页
结 束
2015/7/21
计算机文化基础
31
8.3.1 FrontPage 2003概述
FrontPage 2003可以按下列方法启动：单
击“开始”按钮，在“开始”菜单中指向“程
序 ” → “ Microsoft Office”→“Microsoft Office
FrontPage 2003”；通过创建FrontPage 2003的快
捷方式启动。
目 录
上一页
下一页
FrontPage 2003的退出可以使用以下几种方
式：选取“文件”菜单中的“退出”；单击窗口
右上角的“关闭”按钮；按快捷键Alt+F4等。
结 束
2015/7/21
计算机文化基础
32
8.3.1 FrontPage 2003概述
启动FrontPage 2003后，可以看到以下几种视图，用户可以在不同
的视图中进行相应的操作。
1. 网页视图
网页视图是FrontPage 2003中最常用的工作界面，网页的创建、编辑、
预览等基本操作都是在此视图中进行的。
FrontPage 2003提供了四种网页视图模式，即设计、拆分、代码、预
览。
2. 文件夹视图
文件夹视图用于管理文件和文件夹，使用它可以直接处理文件和文
目 录
件夹以及组织网站内容。在此视图中，可以创建、删除、复制和移动文
上一页
件夹，具体操作与在Windows资源管理器中类似。
下一页 3. 远程网站视图
远程网站视图用于站点和站点内文件的发布。在远程网站视图中查
结 束
看文件时，文件将用图标和描述性文字进行标记以表示发布状态 。
2015/7/21
计算机文化基础
33
8.3.1 FrontPage 2003概述
目 录
上一页
下一页
结 束
4. 报表视图
报表视图用于查看站点的各种情况，如文件内容、更新链接、
文件列表及变化情况等。
5. 导航视图
利用导航视图可以清晰地看到当前站点的主页和其他网页的
链接关系，也可以设置站点的导航结构或添加、删除网页。
6. 超链接视图
超链接视图将当前站点显示为链接文件的一个网络，它们表
示了站点中各个网页之间的相互链接关系。利用超链接视图可
以管理站点中各个网页的超链接。
7. 任务视图
任务视图主要用于创建和管理任务。任务视图以列格式显示
网站中的所有任务，并在各个标题下提供有关各项任务的当前
信息。
2015/7/21
计算机文化基础
34
8.3.2 创建站点
目 录
上一页
下一页
结 束
2015/7/21
使用FrontPage 2003的模板和向导，用户可以轻松地创
建出各种用途和风格的站点。
新建站点时，可以根据自己的需求选择不同的模板和
向导。对于不同的模板和向导，其新建站点的步骤略有
不同。
下面以“由一个网页组成的网站”模板为例，介绍新
建站点的方法。
（1）单击“文件”菜单的“新建”命令，在“新建”任
务窗格中选择“新建网站”中的“由一个网页组成的网
站”；
（2）在弹出的“网站模板”对话框的“指定新网站的位
置”框中输入新站点要保存的位置，也可使用“浏览”
按钮指定新站点的位置；
计算机文化基础
35
（3）单击 “确定”按钮，新建站点如下图所
示
目 录
上一页
下一页
结 束
返 回
2015/7/21
该站点只有一个空白网页index.htm（主页）和用
于存储图片的文件夹images，你可以打开
index.htm进行编辑，也可以进一步根据网站规划
创建文件夹和新建其他网页。
选择“文件”菜单的“退出”命令，可以关闭
FrontPage 2003。
计算机文化基础
36
8.3.3 网页编辑
目 录
上一页
下一页
结 束
返 回
2015/7/21
1. 新建网页
要根据“网页模板”创建一个新的网页，可以按下
面的步骤：
（1）单击“文件”菜单的“新建”命令，在“新建”
任务窗格中选择“新建网页”中的“其他网页模板”。
（2）在弹出的“网页模板”对话框中选择所需的网
页模板，可以在“说明”及“预览”区域查看该模板
的说明及预览图。
（3）单击“确定”按钮，系统新建一个基于所选模
板的网页。
（4）单击“文件”菜单，选择“保存”命令，弹出
“另存为”对话框。在此对话框中，输入文件名进行
保存。
计算机文化基础
37
8.3.3 网页编辑
目 录
上一页
下一页
结 束
2. 打开/保存网页
FrontPage 2003中，编辑某个网页之前，需要先
打开该网页。打开网页的方法有多种，常用的有以
下几种：
（1）使用“文件”菜单的“打开”命令，或“常
用”工具栏的“打开”按钮，在弹出的“打开文件”
对话框中选择相应的网页；
（2）如需要打开的文件已在打开的网站中，在文
件夹视图中双击该网页图标即可将其打开。实际上，
在其他视图中双击网页图标，同样会打开指定网页。
要保存一个网页，可以使用“文件”菜单的“保
存”命令，或“常用”工具栏的“保存”按钮，如
需另存可使用“文件”菜单的“另存为”命令。
返 回
2015/7/21
计算机文化基础
38
8.3.3 网页编辑
3. 预览网页
目 录
网页制作过程中，用户可以切换到“预览”视图预
览网页，也可以使用“文件”菜单的“在浏览器中预
览”命令预览网页。使用后者，系统会打开浏览器显
示网页，如果该网页尚未保存，会弹出对话框提示用
户保存网页。
上一页
下一页
结 束
返 回
2015/7/21
计算机文化基础
39
8.3.3 网页编辑
4. 设置文字格式
同其他Microsoft Office组件一样，在网页中可以输入文字，
复制、剪切和粘贴文字，设置文字格式，查找和替换文字等。
在FrontPage 2003中，对文字的格式提供了相当完整的设定
功能，文字格式的变化也因此多种多样。可以使用工具栏上的工
具按钮或菜单命令快速地改变文字的外观。
目 录
上一页
下一页
结 束
设置文字格式的一般操作步骤是：选中文字，单击“格式”
菜单的“字体”命令，在弹出的“字体”对话框中设置字体的各
种属性，也可以使用“格式”工具栏中相应的命令按钮。
虽然可以设置各种美观的字体，但是由于用户只能使用本地
计算机中安装的字体显示网页，因此还是使用常见的字体为好。
返 回
2015/7/21
计算机文化基础
40
8.3.3 网页编辑
目 录
上一页
下一页
结 束
返 回
5. 设置段落格式
文字段落的格式编排对于一个网页的外观是至关重
要的。FrontPage 2003通过按Enter键划分段落。值得
注意的是，段落之间插入了一个空行。如果只是需要换
行，而不是另起一个段落，按Shift+Enter键即可。实际
上，按Enter键在HTML代码中插入的是<p>标记，而
按Shift+Enter键则插入的是<br>标记。
段落格式主要包括对齐方式、缩进和段落间距等。
设置段落格式的一般方法如下：
将插入点移动到要设置格式的段落中，或是选中该
段落，单击“格式”菜单的“段落”命令，在弹出的
“段落”对话框中进行各种段落格式属性的设置。
2015/7/21
计算机文化基础
41
8.3.3 网页编辑
6. 设置网页属性
目 录
网页属性包括网页的标题、格式、页边距等。要
设置网页属性，用户可以使用“文件”菜单的“属性”
命令，或者在网页的任意地方单击鼠标右键，在弹出
的 右 键 菜 单 中 选 择 “ 网 页 属 性 ” 命 令 ， FrontPage
2003将显示“网页属性”对话框。
上一页
下一页
结 束
2015/7/21
计算机文化基础
42
6. 设置网页属性
1）“常规”属性
目 录
上一页
下一页
结 束
要设置网页的“常规”属性，单击“网页属性”
对话框的“常规”选项卡。“标题”框用于给出网页
的标题，网页标题将显示在浏览器的标题栏中。“背
景音乐”框用于指定网页的背景音乐，当用浏览器打
开网页时，将自动播放背景音乐 。背景音乐区域的
“位置”框用于指定声音文件的位置，用户可以使用
“浏览”按钮选择一个声音文件；“循环次数”框用
于指定声音要反复播放的次数，如果选中“不限次数”
复选框，表示一直不停地播放。
2015/7/21
计算机文化基础
43
6. 设置网页属性
2）“格式”属性
要设置网页的背景、颜色，可以使用“网页属性”对
话框的“格式”选项卡。
目 录
上一页
下一页
结 束
用户可以选中“背景图片”复选框，指定一个图片
作为网页的背景图片。如果要将图片按水印形式添加，
需要选中“使其成为水印”复选框。通过单击相应的
下拉列表框，可以设置网页的背景颜色、文本颜色以
及超链接文字的颜色。当同时设置背景图片和背景颜
色时，背景图片将覆盖背景色。
返 回
2015/7/21
计算机文化基础
44
8.3.4 插入对象
1.插入水平线
在网页中输入文本内容后，还可在不同的段落、
行之间添加水平线，水平线将网页分割成几个部分，
使得网页更具条理性。具体操作步骤如下：
（1）在准备插入水平线的位置设置插入点；
（2）单击“插入”菜单的“水平线”命令，插入水
平线。
目 录
要 修 改水 平 线 的外 观 ， 可以 双 击 水平 线 ， 打开
上一页
“水平线属性”对话框。“宽度”框用于设置水平线
的宽度，“高度”框用于设置水平线的高度，“对齐
下一页
方式”用于设置水平线在网页内水平对齐的方式，
结 束
“颜色”列表框用于设置水平线的颜色，选中“实线
返 回
（无阴影）”复选框时，水平线将被设成实心线。要
计算机文化基础
2015/7/21为线条指定自定义样式或其他格式，可以使用“样式”
45
8.3.4 插入对象
2. 插入图片
图片可以使网页变得生动活泼，并能吸引用户的注意。
1）图片文件的格式
在WWW上常用的图像文件格式是JPEG和GIF，它们都是压缩
的图像格式，文件的信息量小，适合于网络传输，因此被广泛
地应用在Web站点的设计中。
目 录
上一页
下一页
结 束
GIF（Graphical Interchange Format，图形交换格式）采用无损
压缩方式，其主要特征是支持动画、透明度、图形渐进，但GIF
图像包含的颜色不能超过256种。
JPEG（Joint Photograph Expert Group，联合图像专家组）格
式是专为有几百万种颜色的照片和图形设计的，它采用有损压
缩方式，以牺牲图片质量换取大的压缩比例。JPEG格式支持真
彩色（24位色），并且在压缩大的图像方面已被证明很有效。
2015/7/21
计算机文化基础
46
2. 插入图片
2）插入图片和设置图片属性（方法同Word）
3）编辑图片
利用“图片”工具栏能够完成一些常用的图像编
辑功能。
4）保存图片
目 录
上一页
下一页
插入图片后保存网页，如果图片不在网站文件
夹中，将出现“保存嵌入式文件”对话框。如果图
片在网站文件夹中，就不会出现此对话框。
结 束
2015/7/21
计算机文化基础
47
8.3.4 插入对象
目 录
上一页
下一页
结 束
2015/7/21
3. 插入字幕
在制作网页时，可以将网页中的文字做成由左至右，
或由右至左移动的动态效果，使网页更加形象生动。
具体操作步骤如下：
（1）将插入点设置在要插入移动字幕的位置或者
选中作为移动字幕的文本，单击“插入”菜单的
“Web组件”命令，弹出“插入Web组件”对话框，
在对话框的“组件类型”列表框中选择“动态效果”，
在“选择一种效果”列表中选择“字幕”，单击“完
成”按钮， 打开“字幕属性”对话框。
计算机文化基础
48
3. 插入字幕
（2）如果已经选择了作为移动字幕的文本，此文本就会出现在
“文本”框中，如果没有选择文本，可在“文本”框中输入作为
移动字幕的文本。
下一页
（3）“方向”区域用于指定文本的移动方向。“速度”区域用
于指定文字的滚动速度，“延迟”框中的数值表示字幕滚动一步
的时间间隔是多少毫秒，“数量”框中的数值表示字幕滚动一步
的距离是多少像素。“表现方式”区域用于指定文字的表现方式。
选中“重复”区域的“连续”复选框，移动字幕将连续滚动；若
要设置字幕滚动有限次，可以取消选中“连续”复选框并输入字
幕重复的次数。“背景色”列表框用于设置移动字幕的背景颜色。
“大小”区域用于设置字幕的宽度与高度。
结 束
（4）单击“确定”按钮，即可插入字幕。
目 录
上一页
2015/7/21
计算机文化基础
49
8.3.4 插入对象
目 录
上一页
下一页
结 束
4. 插入交互式按钮
交互式按钮是一个动态按钮，当用户将鼠标指向交互式按钮
时，交互式按钮会改变颜色或形状。默认情况下，交互式按钮是一
个带有彩色方框的文字按钮，也可以应用图片创建交互式按钮。
（1）将插入点设置在要插入交互式按钮的位置，单击“插入”
菜单的“Web组件”命令，打开“插入Web组件”对话框，在对话
框的“组件类型”列表框中选择“动态效果”，在“选择一种效果”
列表中选择“交互式按钮”，单击“完成”按钮，打开“交互式按
钮”属性对话框。
（2）设置
 按钮
 字体
 图像
（3）单击“确定”按钮，即可插入交互式按钮。
2015/7/21
计算机文化基础
50
8.3.4 插入对象
5. 插入站点计数器
目 录
（1）单击“插入”菜单的“Web组件”命令，
打开“插入Web组件”对话框，在对话框的“组
件类型”列表框中选择“计数器”，在“选择计
数器样式”列表中选择一种样式，单击“完成”
按钮，打开“计数器属性”对话框；
上一页
（2）设置计数器属性；
下一页
（3）单击“确定”按钮，插入站点计数器。
结 束
返 回
2015/7/21
计算机文化基础
51
8.3.5 创建超链接
目 录
上一页
下一页
结 束
2015/7/21
Web网页的强大之处就在于其超链接，使用超
链接能够将Internet中的信息有机地组织起来，使
人们在丰富多彩的WWW世界轻松地漫游。超链接
是指从一个网页指向一个目标的链接关系，这个目
标可以是另一个网页，也可以是相同网页上的不同
位置，还可以是图片、文件、电子邮件地址等。
超链接由链接载体和链接目标两部分组成。
根据链接载体的特点，可以把链接分为文本超
链接与图片超链接两大类。
计算机文化基础
52
8.3.5 创建超链接
1. 创建文本超链接
文本超链接是指在文本上定义的超链接，单击文本超链
接，会自动跳转到指向的链接目标。创建文本超链接的具体操
作步骤如下：
（1）选定要定义超链接的文本，从“插入”菜单中选择“超
链接”命令，或单击“常用”工具栏上的“超链接”按钮 ，
打开“插入超链接”对话框，如下图所示；
目 录
上一页
下一页
结 束
2015/7/21
计算机文化基础
53
1. 创建文本超链接
（2）在“插入超链接”对话框中选择要链接的
目标网页，单击“确定”按钮，插入超链接，可
以看到所选定的文本变为蓝色，并且带有下划线，
说明选定的文本已经被设置为超链接文本。
目 录
上一页
保存网页，在浏览器中预览效果。当鼠标移
至链接文字时，鼠标指针变成手形，此时单击鼠
标就跳转到目标网页。
下一页
结 束
2015/7/21
计算机文化基础
54
2. 创建图片超链接
目 录
上一页
下一页
图片超链接是指在图片上创建的超链接，图
片超链接比文本超链接显得更加生动活泼，单击
图片超链接，会自动跳转到指向的链接目标。可
以将整个图片设置为超链接，也可以为图片分配
一个或多个热点。热点是图片上的超链接区域，
包含热点的图片称为图像映射，用户单击热点区
域可以转到相应的链接目标。
结 束
2015/7/21
计算机文化基础
55
1）创建图片超链接
目 录
上一页
下一页
结 束
2015/7/21
（1）选定要定义超链接的图片，从“插入”
菜单中选择“超链接”命令，或单击“常用”工
具栏上的“超链接”按钮，打开“插入超链接”
对话框；
（2）在对话框中选择要链接的目标网页，单
击“确定”按钮，即可插入超链接。
保存网页，在浏览器中预览效果，当鼠标移
至链接图片时，鼠标指针变成手形，此时单击鼠
标就跳转到目标网页。
计算机文化基础
56
2）为图片添加热点
热点可以是图片上具有某种形状的一块区域
或文本，当用户单击该区域或文本时，超链接目
标会显示在Web浏览器中。在FrontPage 2003中，
热点的形状可以是长方形、圆形或多边形。
目 录
上一页
下一页
结 束
2015/7/21
例如我们通过山东省地图浏览山东省各城市的
民俗风情，当鼠标移至地图上的各个城市时，鼠
标指针变为手形，单击后打开描述该城市民俗风
情的页面。
计算机文化基础
57
为图片添加热点，具体操作步骤如下：
目 录
上一页
下一页
结 束
2015/7/21
（1）选择需要添加热点的图片；
（2）在“图片”工具栏中，单击长方形、圆形
或多边形热点按钮匹配需要的形状；
（3）在图片上，采用鼠标拖动操作画出所选形
状（画多边形时，可单击多边形的第一个角，然后
依次单击多边形其他角的位置，最后双击完成多边
形）；
（4）释放鼠标，弹出“插入超链接”对话框，
按照插入超链接中所讲方法创建超链接即可。
计算机文化基础
58
为图片添加热点
重复步骤（2）、（3）、（4），在图片上依次创建
超链接到其他网页。当鼠标移动到热点区域时，光标
变为手形，如下图所示。单击鼠标，超链接的目标网
页就会显示在Web浏览器窗口中。
目 录
上一页
下一页
结 束
返 回
2015/7/21
计算机文化基础
59
3. 使用书签超链接
对于网页的超链接，往往使用户跳转到目
标网页的顶端，应用书签能够更严格地控制用
户到达网页内的某个具体位置。书签是网页中
被标记的位置或被标记的文本。
1）插入书签
目 录
上一页
下一页
结 束
2015/7/21
（1）选中作为书签的文本，或
将光标定位在要插入书签的位置。
（2）选择“插入”菜单的“书
签”命令，弹出“书签”对话框，
如右图所示，所选文本自动出现
在“书签名称”框中。
（3）单击“确定”按钮，插入
书签，可以看到所选文本下方出
现虚线。
计算机文化基础
60
2）创建书签超链接
（1）选定要定义超链接的文本或图片；
（2）从“插入”菜单中选择“超链接”命令，弹出“插入超
链接”对话框，如下图所示，在对话框的“链接到”栏单击“本
文档中的位置”，选择要链接的书签，单击“确定”按钮，插入
书签超链接。
保存网页，在浏览器中预览效果，单击页面中的书签超链接，
页面会跳转到书签的位置。
目 录
上一页
下一页
结 束
2015/7/21
计算机文化基础
61
4. 创建电子邮件超链接
目 录
上一页
下一页
结 束
电子邮件超链接为用户发送电子邮件提供了极大的
方便，单击电子邮件超链接后，允许用户书写电子邮
件内容，并发往指定的地址。具体操作步骤如下：
（1）选择作为电子邮件超链接的文本或图片；
（2）从“插入”菜单中选择“超链接”命令，弹出
“插入超链接”对话框；
（3）在 对 话框 的 “ 链 接到 ”栏 单 击“ 电子 邮 件地
址”，在“电子邮件地址”框中输入所需电子邮件地
址，还可以在“主题”框中键入电子邮件的主题；
（4）单击“确定”按钮，完成电子邮件超链接的创
建。
返 回
2015/7/21
计算机文化基础
62
5. 创建下载文件超链接
如果要在网站中提供资料下载功能，就需要创建下载链接，
网站中每个用于下载的文件要对应一个下载链接。具体操作
步骤如下：
（1）选择作为文件超链接的文本或图片；
（2）从“插入”菜单中选择“超链接”命令，弹出“插
入超链接”对话 框，在对话框中选择要下载的文件；
（3）单击“确定”按钮，完成文件超链接的创建。
保存网页，在浏览器中预览效果，单击创建的文件超链接
时，弹出“文件下载”对话框，如下图所示，用户可以根据
需要打开或保存文件。
目 录
上一页
下一页
结 束
返 回
2015/7/21
计算机文化基础
63
8.4 网 页 布 局
目 录
网页的布局设计，是将文字、图片等网页元
素，根据特定的内容和主题，在网页所限定的
范围中进行视觉的关联与配置，从而将设计意
图以视觉形式表现出来。网页的布局一般使用
表格或框架来实现。
上一页
下一页
结 束
2015/7/21
计算机文化基础
64
8.4 网 页 布 局
8.4.1 创建和使用表格
8.4.2 创建和使用框架
目 录
上一页
下一页
结 束
返 回
2015/7/21
计算机文化基础
65
8.4.1 创建和使用表格
目 录
上一页
下一页
结 束
2015/7/21
表格由单元格构成的行和列组成，单元格中
可以插入文本、图片以及其他对象。利用表格
可以有条理地排列数据或组织网页布局。表格
的行、列和单元格都可以进行复制、粘贴，在
表格中还可以插入表格，一层层的表格嵌套使
设计更加方便。FrontPage 2003提供了与Word
字处理软件类似的表格处理功能，在网页中可
以轻松地创建和编辑表格。
计算机文化基础
66
1. 创建表格
目 录
上一页
下一页
结 束
2015/7/21
创建表格有以下三种常用方法：
（1）使用“表格”菜单的“插入”子菜单中的
“表格”命令，可以对插入的表格进行精确的设
置，包括行和列的数目、对齐方式、单元格间距、
单元格衬距、边框粗细和背景等。
（2）使用“常用”工具栏的“插入表格”按
钮 ，快速插入表格。
（3）使用“表格”菜单的“绘制表格”命令，
手动绘制表格。
计算机文化基础
67
2. 设置表格属性
插入表格后，为了使表格看上去更专业、更美观，
需要设置表格的属性。
目 录
上一页
（1）设置表格行数和列数。
（2）设置表格布局，包括设置表格的对齐方式、浮动、宽
度等。
（3）在“粗细”数值框中输入数值，即可设置表格边框的
粗细。
（4）在背景区域，可以通过“颜色”框设置单一色彩的表
格背景，也可选中“使用背景图片”复选框，用“浏览”按
钮设置图片作为表格的背景。
下一页
结 束
2015/7/21
计算机文化基础
68
3. 设置单元格属性
将光标放置在需要设置属性的单元格中，使用“表格”菜
单的“表格属性”子菜单中的“单元格”命令，打开 “单元格
属性”对话框，设置单元格属性。
目 录
上一页
下一页
在“布局”区域可以设置水平、垂直对齐方式，指定宽度、
高度、标题单元格，设置行跨距、列跨距等。
在“边框”区域中可以设置单元格边框的颜色、亮边框、
暗边框。
在“背景”区域中可以设置单元格的背景颜色，或使用
图片作为背景。
结 束
2015/7/21
计算机文化基础
69
4. 调整表格
目 录
创建表格后，可以对表格单元格、行和列的
布局和结构进行调整，以满足不同的需要。如调
整行、列或单元格；插入行、列或单元格；删除
行、列或单元格；合并、拆分单元格；平均分布
行高、列宽；设置单元格属性等。
上一页
下一页
结 束
返 回
2015/7/21
计算机文化基础
70
8.4.2 创建和使用框架
目 录
上一页
下一页
框架的使用是进行网页布局设计的一种重要
手段。框架将浏览器窗口划分为几个区域，每
个框架中都可以显示一个独立的网页。浏览器
窗口中显示的网页实际是这些框架的集合，因
此被称为框架网页。框架网页并不包含显示的
内容，只是记录了该框架网页包含几个框架、
其拆分方式以及每个框架中显示哪个网页（与
其他网页的超链接）等。
结 束
2015/7/21
计算机文化基础
71
1. 创建框架网页
目 录
上一页
下一页
结 束
2015/7/21
在FrontPage 2003中，可以使用框架网页布局
模板轻松创建框架网页。具体操作步骤如下：
（1）单击“文件”菜单的“新建”命令，在
“新建”任务窗格中选择“新建网页”中的“其
他网页模板”。
（2）在弹出的“网页模板”对话框中，切换到
“框架网页”选项卡，选择所需的模板，如“目
录”模板，可在“说明”及“预览”区域查看该
模板的说明及预览图。
计算机文化基础
72
（3）单击“确定”按钮，完成框架网页的创建，如下图所示；
在该图窗口底部新
增了“无框架”视
图模式，可以为不
支持框架的浏览器
创建替代网页。
目 录
上一页
下一页
结 束
2015/7/21
（4）每个框架中，单击“设置初始网页”按钮可以建立
与已经存在网页的超链接，从而在此框架中显示该网页；单
击“新建网页”按钮可以建立显示在该框架中的新网页。
计算机文化基础
73
2. 保存框架网页
保存框架网页需要保存框架和各个框架中的网页。例如，使用
“目录”模板创建的框架网页需要保存作为容器的框架网页和分
别显示在两个框架中的两个网页。具体操作步骤如下：
（1）使用“文件”菜单的“保存”命令，或单击“常用”工具
栏的“保存”按钮，弹出“另存为”对话框。
目 录
上一页
下一页
结 束
2015/7/21
（2）在“另存为”对话框右边的框架网页预览图中，深蓝色的
区域或边框指明了框架中正在保存的网页。进行相应设置后，单
击“保存”按钮，该网页保存完毕。
（3）重复步骤（2），直至所有的框架网页都保存完毕，如使
用“目录”模板创建的框架网页需要保存三次。
如果某个框架网页通过单击“设置初始网页”按钮建立与已
经存在网页的超链接，则不会弹出“另存为”对话框保存该网页。
计算机文化基础
74
3. 拆分框架
当使用模板创建的框架结构不能满足需要时，可以
通过拆分框架制作出更为复杂的框架网页。具体操作
步骤如下：
（1）选择要拆分的框架，在“框架”菜单中选择
“拆分框架”命令，打开“拆分框架”对话框；
目 录
上一页
下一页
（2）根据需要选择“拆分为列”或“拆分成行”选
项，单击“确定”按钮完成拆分。也可按住Ctrl键拖
动框架的边框实现拆分框架。
结 束
2015/7/21
计算机文化基础
75
4. 删除框架
目 录
上一页
下一页
可以从框架结构中删除指定的框架。此时系
统只是把框架从框架网页中删去，而此框架中的
网页文件仍然存在。删除了一个框架后，其余框
架会加宽以填充删除框架留下的空间。若框架网
页只有一个框架，则不能删除该框架。删除框架
的具体操作方法是：选择要删除的框架，在“框
架”菜单中选择“删除框架”命令。
结 束
2015/7/21
计算机文化基础
76
5. 设置框架属性
在框架网页中可以设置框架的大小、框架的边距和在
框架中是否显示滚动条等属性。具体操作方法是：选择
框架，从“框架”菜单中选择“框架属性”命令，弹出
“框架属性”对话框，如右图所示。
目 录
上一页
下一页
结 束
返 回
2015/7/21
在“名称”框中输入新
的框架名称，即可对该框
架进行重命名。
在“框架大小”区域
中设置宽度和高度，可以
改变框架的大小，也可用
鼠标拖动框架的边框直接
调整框架的宽度和高度。
计算机文化基础
77
6 创建框架超链接
目 录
上一页
下一页
结 束
2015/7/21
框架超链接的使用使网页之间的组织更加灵活、有效。
1). 创建框架超链接
若要设置框架超链接，执行下列操作：
（1）选择要创建超链接的文字或图片，从“插入”菜
单中选择“超链接”命令，弹出“插入超链接”对话
框；
（2）在“插入超链接”对话框中选择要链接的目标网
页，单击“目标框架”按钮，出现“目标框架”对话
框；
（3）在“当前框架网页”区域中单击要用作目标的框
架，单击“确定”按钮，返回到“插入超链接”对话
框，在对话框底部标签“目标框架”后显示设置的目
标框架名称；
计算机文化基础
78
（4）单击“确定”按钮，完成框架超链接的创建。
2). 使用特殊的目标框架
在指定目标框架时，除了当前框架外，还提供
了一些特殊的框架来创建不同效果的目标框架。
这些特殊框架位于“目标框架”对话框的“公用
的目标区”区域中，有以下几种：
目 录
上一页
下一页
结 束
 相同框架：将链接的网页显示在包含该超链接
的同一个框架内。
 整页：将框架展开为整个窗口，显示链接网页。
 新建窗口：打开另外一个新窗口，显示链接网
页。
 父框架：在当前框架的上层框架内显示链接网
页。
返 回
2015/7/21
计算机文化基础
79
8.5 创建表单页面
目 录
上一页
表单是Web服务器与客户交互的手段。表单
的作用就是收集用户的输入信息，从而实现网
站与用户的交互。例如，用户可以用表单收集
用户的个人资料，也可以用表单设计一个订货
单，让用户指定要购买的商品名称、型号、数
量等。
下一页
结 束
2015/7/21
计算机文化基础
80
8.5 创建表单页面
8.5.1 插入表单域
8.5.2 提交表单
目 录
上一页
下一页
结 束
返 回
2015/7/21
计算机文化基础
81
8.5.1 插入表单域
目 录
上一页
下一页
结 束
2015/7/21
表单中至少要有一个供用户输入信息的域，一个用
来把信息发送给服务器的“提交”按钮，以及一个用
来清除域中现有内容的“重置”按钮。当用户在表单
中输入信息，单击“提交”按钮后，这些信息将被发
送到服务器，服务器端程序将对这些信息进行处理。
使用“插入”菜单的“表单”子菜单的“表单”命令，
将插入一个非常简单的表单。该表单只有“提交”和
“重置”两个按钮，但这是所有复杂表单的基础，可
以在其中插入更多的表单域。在FrontPage 2003中，
可以插入文本框、文本区、复选框、选项按钮、分组
框、下拉框、按钮、高级按钮等表单域。
计算机文化基础
82
1. 插入文本框
文本框用于让用户输入一行文字。将光标放在要插
入文本框的位置，使用“插入”菜单的“表单”命令，
再选择“文本框”子命令，即可插入一个文本框，如
下图所示。
目 录
上一页
下一页
结 束
2015/7/21
要设置文本框的属性，可以使用“格式”菜单中的“属性”
命令，也可以使用右键菜单中的“表单域属性”命令，或
直接双击文本框，打开“文本框属性”对话框。在“文本
框属性”对话框中，“名称”用于设置该文本框的名称，
“初始值”用于设置文本框内一开始显示的内容，“宽度”
用于设置文本框所能输入字符的个数，“密码域”用于设
置是否让文本框内输入的字符可见。插入文本框时，若插
入点在一个已有的表单内，就把一个新的文本框插入到这
个表单中。若插入点在表单之外，则创建的文本框包含
“提交”和“重置”按钮。
计算机文化基础
83
2. 插入文本区
文本区和文本框类似，都用于输入文本，不同之处在于
文本区中可以接受多行文本。当文本区中输入内容较多时，
可以拖动上下滚动条。将光标放在要插入文本区的位置，使
用“插入”菜单的“表单”命令，再选择“文本区”子命令，
即可插入一个文本区，如下图所示。
目 录
上一页
下一页
文本区属性与文本框属性基本相同，还可以在“行数”
框中设置该文本区包含的文本行数。
结 束
2015/7/21
计算机文化基础
84
3. 插入复选框
复选框是提供给用户的一个选项，一般彼此独立的多个复选
框组成一组，用户可以在其中任意选择，也可以同时选中所有
项，或一个都不选。
将光标放在要插入复选框的位置，使用“插入”菜单的“表
单”命令，再选择“复选框”子命令，插入一个复选框，最后
在复选框旁键入文字进行说明。如果需要插入多个复选框，重
复以上操作即可。
目 录
上一页
下一页
结 束
2015/7/21
“复选框属性”
对话框如右图所示，
“名称”用于设置复
选框的名称，“值”
用于返回复选框是否
已选中，
“初始状态”选项按钮组用于设置初始状态下该复选框
是否被选中，默认为“未选中”，“Tab键次序”表示当
按下Tab键切换输入焦点时，该复选框所在的次序。
计算机文化基础
85
4. 插入选项按钮
选项按钮与复选框类似，不同的是一组选项按钮只能选
中其中的一个，其外形是圆的。将光标放在要插入选项按钮
的位置，使用“插入”菜单的“表单”命令，再选择“选项
按钮”子命令，插入一个选项按钮，最后在选项按钮旁键入
文字进行说明。如果需要插入多个选项按钮，重复以上操作
即可。如下图所示，插入四个选项按钮供用户评价自己的网
页。
目 录
上一页
下一页
结 束
2015/7/21
在“选项按钮属性”对话框中，“组名称”用来设置此
选项按钮所属组的名称，如果把多个选项按钮编成一组，必
须使它们的组名称相同。
计算机文化基础
86
5. 插入分组框
如果要将一组相关的控件或文本与网页或当前表单中
的其他信息分开，可以使用分组框。将光标放在要插入分
组框的位置，使用“插入”菜单的“表单”命令，再选择
“分组框”子命令，即可插入分组框。
在“分组框属性”对话框中，“标签”用来设置分组
框的名称。“对齐”用来设置分组框标签的对齐方式。
6. 插入下拉框
目 录
上一页
下一页
结 束
2015/7/21
下拉框用于从一个列表中选择一项或几项。从功能的
角度讲，可以用一组复选框或一组单选按钮来实现，但下
拉框占用的网页空间相对较小。
将光标放在要插入下拉框的位置，使用“插入”菜单的
“表单”命令，再选择“下拉框”子命令，即可插入下拉
框。
在“下拉框属性”对话框中，单击“添加”按钮，将
打开“添加选项”对话框，可以设置选项名称，指定选项
的初始状态是选中还是未选中。
计算机文化基础
87
7．插入按钮和高级按钮
目 录
上一页
下一页
结 束
返 回
2015/7/21
一个表单中至少要有一个“提交”按钮和一
个“重置”按钮。“提交”按钮的作用是把表单
中的数据提交给Web服务器的表单处理程序，
“重置”按钮的作用是把表单中的数据清空，以
便重新填写。将光标放在要插入按钮的位置，使
用“插入”菜单的“表单”命令，再选择“按钮”
子命令，即可插入按钮。
在“按钮属性”对话框中可以设置按钮的名
称、值/标签、按钮类型等属性。按钮可以设置为
“提交”、“重置”或普通按钮，对于“提交”
和“重置”按钮来说，它们的动作是默认的。
高级按钮的插入与属性设置与普通按钮基本
相同，但是高级按钮具备更加精确的控制按钮属
性的能力。
计算机文化基础
88
8.5.2 提交表单
目 录
用户结束表单操作后，单击“提交”按钮，当“提交”
按钮设置了表单结果送至何处后可以正常处理。表单处理
程序对表单的处理可以是将表单结果保存为文件，或将表
单结果发送至一个电子邮件地址。
1. 将表单结果保存为文件
在表单上单击鼠标右键，在弹出的右键菜单中选择
“表单属性”命令，打开“表单属性”对话框，如下图所
示。
上一页
下一页
结 束
2015/7/21
计算机文化基础
89
2. 将表单结果发送至电子邮件
目 录
上一页
下一页
结 束
也可以使用电子邮件发送表单结果，当用户提交表单时，
就会向指定的电子邮件地址发送一个包含表单结果的邮件。
打开“表单属性”对话框，在“电子邮件地址”框中，
输入要向其发送表单结果的电子邮件地址。如果只想用电子
邮件发送表单结果，而不想将其保存到文件中，可以清除文
本框“文件名称”。单击“选项”按钮，在“电子邮件结果”
选项卡中可以设置接收结果的电子邮件地址、电子邮件格式、
邮件标题等选项。
要使用FrontPage默认的表单处理程序，Web服务器必
须 安 装 FrontPage 服 务 器 扩 展 （ FrontPage Server
Extension），否则表单功能将不会产生任何效用。要将表
单结果发送至电子邮件，还需将服务器配置为可发送电子邮
件的服务器。
返 回
2015/7/21
计算机文化基础
90
8.6 网页的发布
8.6.1 网站和网页的设计原则
8.6.2 网站的发布和维护
目 录
上一页
下一页
结 束
返 回
2015/7/21
计算机文化基础
91
8.6.1 网站和网页的设计原则
目 录
上一页
下一页
结 束
2015/7/21
网站和网页的设计既是一项复杂的技术也是一门艺术，设
计良好的网站不但可以提供丰富的信息，而且还能给用户带来
愉悦的浏览体验。以下是网站和网页设计的一些基本原则。
1）目标明确，重点突出
首先要明确信息发布者的性质与用途，并了解主要浏览对象
及其要进行的操作，做到有的放矢。然后，对发布的信息要分
清主次，面面俱到可能使浏览者难以找到有用的信息，不能达
到预期目的。
2）主题鲜明，层次清晰
要做到主题鲜明，首先要设计好网站的主页。主页的设计要
简洁，内容不宜过多，应该在主页上建立分类栏目。网页需要
有层次清晰的结构，尤其是内容较多的网页，可以根据内容进
行分类，分成多个栏目，便于阅读。
计算机文化基础
92
目 录
上一页
下一页
结 束
3）合理设置栏目
制作网页前，要先规划好，确定合理的栏目和板
块。栏目的安排要紧扣主题，既要考虑网页内容的
分类，又要方便浏览，并能对浏览者起到较好的导
航作用。
4）正确定位整体风格
网站的整体风格是指站点的整体形象给浏览者的
综合感受。整体风格是非常抽象的概念，包括网站
的标志、色彩、字体、标语、版面布局、内容价值
等诸多因素，需要结合整个站点进行定位。对于栏
目内容跨度较大的网站，可以考虑针对不同栏目采
用不同的风格。
2015/7/21
计算机文化基础
93
5）页面布局合理
网页设计要针对所要表达的信息进行合理的布局，好的页
面布局能使浏览者首先对网页内容的结构有一个清晰的认识。
可以使用表格辅助页面元素的布局，也可以使用特定的布局框
架。页面布局要注意保证重点内容放置在屏幕的重点位置。
6）色彩搭配，和谐统一
目 录
色彩是影响整体风格的关键因素。不同的色彩搭配产生不
同的效果，并可能影响到浏览者的情绪。一般来说，一个网站
的标准色彩以不超过三、四种为宜，以便使页面色彩丰富而又
协调统一。
上一页
7）多媒体功能使用得当
下一页
结 束
返 回
2015/7/21
除了文字信息外，网站中图片、声音、动画以及视频等多
媒体信息的使用也是网页上重要的内容。它们的使用可以丰富
画面，使页面更加形象生动。但这些文件都不应该太大，减少
网页的下载时间，提高用户浏览信息的速度。
计算机文化基础
94
8.6.2 网站的发布和维护
所谓发布网站，就是把网站中的内容上传到Web
服务器上。为了便于用户发布网站，FrontPage 2003
提供了相当方便的发布工具。常用的通过FTP发布网
站的操作步骤如下：
（1）打开要发布的网站，从“文件”菜单中选择
“发布网站”命令，打开“远程网站属性”对话框，
如下图所示。如果已经选择了发布目标，则该对话框
不会出现。
目 录
上一页
下一页
结 束
2015/7/21
计算机文化基础
95
目 录
上一页
下一页
结 束
返 回
2015/7/21
（2）在“远程Web服务器类型”中选择FTP，然后在下方的
“远程网站位置”框中输入远程网站的位置。切换到“发布”
选项卡，可以进行发布网站的相应设置。
（3）单击“确定”按钮，FrontPage 会尝试连接指定的FTP，
如果需要相应的用户名和密码，则会弹出“要求提供用户名和
密码”对话框。
（4）输入用户名和密码，单击“确定”按钮，FrontPage继
续工作。
（5）单击窗口右下角的“发布网站”按钮，开始发布网站.
（6）文件传送完毕，FrontPage显示状态“成功”，表示网
站已经成功发布。
通过HTTP方式上传网页与通过FTP方式非常类似。需要注
意 的 是 ， 通 过 HTTP 方 式 上 传 时 需 要 对 方 的 服 务 器 支 持
FrontPage服务器扩展才行。
计算机文化基础
96
谢谢使用！
目 录
上一页
下一页
结 束
2015/7/21
计算机文化基础
97