1

FrontPage 2003 网页制作入门

一、 创建站点 二、 视图、导航栏与共享边框 三、 网页的基本操作 四、 网页中的多媒体

五、 超级链接的使用

六、 网页中表格的使用 七、 网页中表单的使用八、 网页中框架的使用 九、 动态网页十、 发布站点

2

一、创建站点 • 网页是构成 WWW的基本组成单位，在网页中，可包含文字、声音、

图形、图象、动画等信息，还可以包含超链接，使得可以从一个页面快速跳转到另一个页面。

• 网页是以网页文件的形式制作和保存，网页文件的扩展名是 .htm或 .html

• 网站（ Web Site ）是 WWW 上的一个结点，网站中保存了多个网页以及站点结构，网页间用超链接联系。网页可以是站点的一部分，也可以独立存放，但只有当网页存放到网站中时，网页的许多特性才有效。

• 每个站点都有一个主页（首页），通过主页上的超链接，可以进入 其 他 网 页 。 通 常 ， 主 页 文 件 名 为 index.htm 或default.htm 。

3

• Frontpage 2003 是 Office 2003 的 组 件 之 一 ， 运 行Frontpage与启动 Office其他组件相同。 FrontPage的主窗口中有一个视图栏，包含：网页、文件夹、报表、导航、超链接、任务。– 1 、网页。有“普通”、“ HTML”和“预览” 3 张选项卡，可以在“普

通”或“ HTML”中创建、编辑网页信息，并可在“预览”中预览网页制作效果。

– 2 、文件夹。用于管理站点中的网页文件夹和网页文档，可进行新建、复制、删除、移动操作。

– 3 、报表。用于对网站中的文件和超链接等信息进行统计，有助于维护站点。

– 4 、导航。用于对站点结构的管理，可以创建网页、更改网页间的互相链接结构。

– 5 、超链接。显示站点中每一页的超链接。– 6 、任务。用于记录与创建和 Web站点有关的所有细节，对于大型站点

和有许多人参加创建的站点，维护管理十分有效。

一、创建站点

4

FrontPage 2003 主窗口

5

新建站点对话框

• 1 、创建新站点 在 FrontPage 窗口中

执行“文件”→“新建”→“站点”命令，在如图所示的对话框中，选择“只有一个网页的站点”模板，并指定新站点的位置，最后单击“确定”按钮。

一、创建站点

6

• 2 ．新建网页– 方法一：单击工具栏上“新建普通页面”按钮即可创建一个

新的空白网页。– 方法二：执行“文件” → “新建” → “网页” ，打开“网

页模板”对话框， FrontPage 提供了 3 套（常规、框架网页、样式表）共 50 种不同的模板供用户选择。

– 方法三：在 FrontPage 的文件夹列表框中，可以直接新建网页。只要在文件夹列表框的空白位置或某个文件夹上单击鼠标右键，选择“新建”命令，在右侧的选项中选择“网页”，可在根目录下或所选文件夹中创建一个新网页。

• 3 ．保存网页– 工具栏上的“保存”按钮或“文件”→“保存”命令，均可

保存当前网页。– 若在网页中添加了图片、声音文件、 ActiveX 控件或其他对

象，保存网页时系统将会提示将它们保存在相同的目录下。

一、创建站点

7

新建网页对话框

8

• FrontPage2003 的视图– “ 网页”视图：可以对网页的内容进行编辑和修改，但

无法了解网站的整体结构。– “ 文件夹”视图：用来查看网站中的文件夹的分布情况。

类似资源管理器。– “ 报表”视图：把许多视图以报表的形式列在一张表里，

更方便管理网站。– “ 导航”视图：表示各网页之间的层次关系。– “ 超链接”视图：是详细显示各个文件之间超链接关系

的一种视图。一般以一个网页文件为中心，发散地表示出链接的关系。

– “ 任务”视图：用来维护一个动态项目表的视图。

二、视图、导航栏与共享边框

9

• 导航栏– 导航栏是根据导航视图中网站结构自动建立的，由一组

按钮或文本组成的超链接构成。– 目的是为了用户在每一个网页上都能很方便地访问到其

他相关的网页。• 共享边框

– 是站点中一个或多个网页的公共区域，包含的内容将在该共享边框的每一个网页中出现。

– 可以在网页的顶部、左边、右边、底部创建共享边框。– 通常把导航栏插入到网页顶部和左边的共享边框中。

二、视图、导航栏与共享边框

10

• 网页的创建、打开、保存、打印和关闭– “ 文件”菜单中的相关命令。

• 网页的主题– 主题是一种预先设计的元素与色彩方案，可将站点的所有页面和谐

统一。– 方法：“格式”菜单→“主题”命令→打开“主题”对话框– CSS ：级联样式表，可以使用 CSS 统一修改任何 HTML 样式标签

如标题、段落文本的外观，或者自定义新的样式。• 网页横幅

– 位于网页顶端，是一条可以自己选定的横幅标志，类似于广告牌。– 可以是图片或文本形式。

三、网页的基本操作

11

三、网页的基本操作• 文本的编辑和格式化

– 包括网页标题、网页中字体的大小、颜色、各种效果及段落样式的设置等。

– 方法一：是先选中要修饰的文字，单击“格式”菜单中对应命令，例如“字体”命令，打开字体对话框。

– 方法二：用鼠标右键弹出快捷菜单，选择字体属性。选择对话框中的字体、字型、大小、效果和颜色等选项，单击“确定”按钮使设置有效，并关闭字体对话框。

– 方法三：直接通过格式工具栏上的按钮完成。在网页设计时最好使用比较常见的字体。否则，如果浏览者计算机上没有安装这种字体，那么使用这种字体的文本将不能正常显示。

– 举例 : （文本字体、段落、样式）

12

• 插入特殊对象– 符号。单击“插入”菜单→“符号”打开符号对话框，选择合适的符号进行插入即可。

– 水平线。方法是：先将光标定位到要插入水平线的位置，再执行“插入”→“水平线”命令即可。双击已插入的水平线可设置水平线的属性（宽度、高度、对齐方式和颜色等）。

– 注释。注释可便于网页的维护。先定位插入点，再执行“插入”→“注释”命令，可打开“注释”对话框。注释标识文字只能在普通查看方式下显示。

– 时间戳。时间戳包含的日期和时间域会在网页被修改时自动更新。插入时间戳的方法是：将光标移到插入点，执行“插入”→“日期和时间”命令，打开“日期和时间”对话框。

三、网页的基本操作

13

水平线属性对话框 日期和时间对话框

14

四、网页中的多媒体• 插入图片

– 定位光标→工具栏上的“插入文件中的图片“按钮– “ 插入”菜单→“图片”→“来自文件”命令。– “ 插入”菜单→“图片”→“剪贴画”命令可打开

Microsoft剪辑库，用户可以选择合适的剪贴画插入到网页中。

• 设置图片属性– 鼠标右键单击某一图片，执行“图片属性”命令，

选择“图片属性”对话框中“外观”标签，可以设置图片的大小、对齐方式、图片的边框等。

• 举例 : 图片属性的设置

15

图片属性对话框

图片工具栏

16

• 设置背景图片和颜色– 背景可由“背景图片”和无图片的“背景颜色”构成。– （ 1 ）添加“背景图片”的方法：

• ① “ 格式”菜单 → “背景”命令 → “背景”选项卡；

• ②鼠标右键单击 FrongPage 编辑区，选择“网页属性”命令中的“背景”选项卡。

– （ 2 ）设置网页“背景”颜色和“文本”颜色的方法：• ① 使用“背景”选项卡的“颜色”区域，可以设

置“背景”、“文本”、“超链接”的颜色。• ③ 使用背景图片时，所设置的背景颜色将被图片覆盖。

四、网页中的多媒体

17

• 图片保存– 若图片只用于一个独立的页面中，建议将图片文件与网

页文件放在同一个目录。– 若图片供某个站点中的网页使用，建议专门建立一个存放图片的文件夹，例如 images 文件夹。

• 网页中应用声音、动画和视频– FrontPage2003支持的声音文件主要是 PC 上通用的

WAV 和 MIDI 音乐。– 添加背景音乐

• 在网页上单击右键，在快捷菜单中选择“网页属性”

四、网页中的多媒体

18

五、超级链接的使用• 超链接是 Web 的精华。超级链接是实现页面之间相互跳转的导

航路径，创建超链接要指定起点和目标地址。• 超链接一般分为文本链接和图片链接两种表现形式，就超链接的

方式来说，可分为以下几种：– 1 、 WWW 超链接 用于访问 WWW服务器，访问时使用 HTTP 即

超文本传输协议，其 URL 的格式例如： http://www.ywicc.net.cn – 2 、 FTP 超链接 用于访问 FTP服务器，定义 URL 时必须使用

FTP 协议形式，如 ftp://172.16.1.11– 3 、 BBS 超链接 建立一个 BBS 超链接可以通过两种方法：一种是

以 HTTP 协议的方式建立，另一种是以 TELNET协议的方式建立，同一个 BBS 的超链接的 URL 可以同时使用 HTTP 协议和 TELNET 协议形式。

– 4 、 E-MAIL 超链接 当定义了 E-MAIL 超链接后，不需要知道对方的 E-MAIL 地址就可以发送电子邮件。一个 E-MAIL 超链接的 URL必须使用 MAILTO协议，如： mailto:Huangh@ywu.cn

– 5 、 TELNET 超链接 其超链接 URL 使用 TELNET协议形式，如：telnet://xx.yy.zz 。

19

• 超链接的目标地址有两种– 绝对 URL

– 相对 URL

• 方法一：选定文本或图片，单击常用工具栏上的“超链接”按钮• 方法二：选定文本或图片，单击鼠标右键，从弹出的快捷菜单中

选择“超链接”命令，打开如图的对话框。• 编辑超链接

– 方法：选中某个超链接，单击鼠标右键，选择“超链接属性”命令– 或者执行“插入”→“超链接” →“编辑超链接”对话框，用户可

以修改超链接的目标地址，或者删除目标地址取消该超链接。– 浏览某个网页时，用不同的颜色区别超链接的未访问、正在访问和已访问 3 种情况。

– 方法：在网页空白处单击右键，选择“网页属性”– 或者执行“格式”→“背景” →“网页属性” →“背景”选项卡

• 举例：超链接设置

五、超级链接的使用

20

插入超链接对话框

插入超链接的邮件对话框

21

• 设置热点– 热点是图像上具有超链接功能的区域，一幅图片上可以包含若干个热点。热点形状可以是矩形、圆形或多边形，热点位置可自行确定。

– (1) 对整个图片创建一个超链接• 方法一：与创建文本超链接相同。• 方法二：选中图片后，单击鼠标右键，从快捷菜单中选择“图片属性”命令，在“常规”选项卡的“默认超链接”选项组中设置该图片的链接对象，即目标地址。

• 方法三：在原始图片与它对应的缩微图标之间建立链接关系。先在网页上插入一个图片，并选中它，单击图片工具栏中的“缩微”按钮，这时网页中出现一个与所选图片相对应的缩微图标。在浏览网页时，单击缩微图标即可跳转到原始图片。

– 举例：热点设置

五、超级链接的使用

22

创建超链接——图片对话框

23

• (2)对图片的某一部分创建超链接– ① 选中某个欲设置热点的图片；– ② 在图片工具栏中选择合适的热点形状，鼠标成铅笔形状，将光标

定位到需创建热点区域的左上角或右下角，然后拖动鼠标形成一个热点区域，松开鼠标后自动弹出“创建超链接”对话框；

– ③ 在“创建超链接”对话框中设置要链接的 URL 地址（包括网址、文件名或电子邮件地址）

• (3)在图片上建立文本热点（即在图片在又叠加文本）– ① 选定图片，单击图像工具栏上插入文本图标按钮，在图片上出现

一个文本框，输入所需要的文字；– ② 双击文本框的边框，在弹出的“创建超链接”对话框中设置要链

接的 URL 地址。

五、超级链接的使用

24

• 书签的使用– 当网页文件很长，超出显示屏幕时，要快速寻找网页中某个专题的内容是比较困难的。这时可以在各个专题上加上“书签”，浏览者可以通过单击书签进行跳转。

– 事实上“书签”也是一种超级链接，与一般超级链接不同的是，书签是在同一网页中的不同位置进行链接定位。

– 举例，如何创建书签？– ① 确定各个标题对应的跳转位置，单击“插入”→“书签”命令，

打开“书签”对话框，输入书签名称后“确定”，即可创建一个书签。

– ② 定义完书签后，就可以创建链接到该书签的超链接。方法与创建超链接的方法相同，只是选择的目标文件不是 URL 地址，而是“书签”按钮。

五、超级链接的使用

25

创建书签

26

选择书签

27

六、网页中表格的使用• 创建表格

– 执行“表格”→“插入”→“表格”命令，设定行数和列数，即可。• 对行和列的编辑操作

– 一个单元格：单击单元格。– 行或列：在某一行的左边或某一列的上面，单击鼠标就会选中一行

或一列；或者单击“表格”→“选定”→“行（或列）”命令；或者 Alt 键 +单击。

– 块：先选择一个单元格或一行 (列 )，按下鼠标左键在单元格上拖拽。– 插入行或列。在要插入行或列的某个单元格中，单击鼠标右键，选

择“插入行”或“插入列”命令，就会在所在行的上方，或所在列的左侧添加。

– 删除：选定行或列后执行“表格”→“删除单元格”命令，即可。• 格式化表格

– 选定表格或单元格，执行“表格”→“表格属性”命令，打开对应的对话框。可以设置水平、垂直对齐；加边框架；底纹、背景、大小等。

28

七、网页中表单的使用• 在网页设计时经常需要使用表单，例如登记表、订单、文卷调查

表等，主要负责数据的采集，以增强Web 站点的交互功能。• 一个表单有三个基本组成部分：

– 表单标签：用于申明表单，定义采集数据的范围。– 表单域：包括文本框、文本区、复选框、选项按钮、下拉框、按钮、

图片和标签等。– 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送

到服务器或者取消输入。• 使用向导创建表单

– (1) 执行“文件”→“新建”→“网页”命令，从“新建网页”任务窗格中选定“网页模板”选项，在弹出的“网页模板”对话框中，单击“常规”标签，选中“表单网页向导”，单击“确定”按钮，弹出“表单网页向导”对话框，单击“下一步”按钮。

29

表 单

表单网页向导 1

30

表单网页向导 2

31

表单网页向导 3

• 在“在选择此问题要收集的输入类型列表框”中选中某种类型，如个人信息，这时在“说明栏”中将提示应输入的具体内容。单击“下一步”按钮，弹出如图所示的对话框，在此应设定收集信息的项目，如姓名、年龄、性别等。

七、网页中表单的使用

32

表单向导创建的表单

33

• 保存表单– 表单制作完成后，还需要设置填表人所提交的表单内容的保存方式。默认方式是以文本文件保存。

– 设置方法：在表单中单击鼠标右键，快捷菜单中选择“表单属性”命令，在“发送到”选项中设置，

– 可以输入目标文件名、电子邮件地址、发送到数据库或其他处理程序中。

– 表单默认保存到当前站点的—— private 文件夹。– 举例：表单创建

七、网页中表单的使用

34

表单属性对话框

35

八、网页中框架的使用

• WWW 上的大多数网页都是框架网页，其主要特点是将浏览器窗口分割成不同的区域，每个区域呈现不同的网页内容。

• 框架网页中最大的区域通常作为主框架区，频繁变化的内容一般安排在该区域中显示。除主框架区外的其他区域相对稳定，常用于显示框架的标题和目录等。

• 使用框架网页的优点是可以避免浏览窗口的频繁切换。• 创建框架网页

– 可以利用 FrontPage 提供的模板创建框架网页。– 方法：单击“文件”→“新建”→“网页或站点”命令，从

显示的“新建网页或站点”任务窗格中选择“网页模板”选项。

36

使用框架

网页模板对话框

37

• 在“框架网页”标签中选定某种模板，如“嵌套式层次结构”模板，单击“确定”按钮即可生成与所选模板对应的框架网页。

• 网页中每一个框架都有两个按钮：“设置初始网页”和“新建网页”按钮。– 单击“设置初始网页”按钮将弹出“插入超链接”对话框，可在此

设定该框架最初显示的网页地址。– 单击“新建网页”按钮，将出现一个空白网页供用户创建新的内容。

• 设置框架属性– 在框架中单击鼠标右键，选择“框架属性”命令；– 或者选中某一框架，单击“框架”→“框架属性”命令– 可以设置框架的名称、大小、边距以及是否显示滚动条等。– 框架拆分：先选中要拆分的框架，然后执行“框架”→“拆分框

架”命令，打开“拆分框架”对话框，选定拆分方向即可。

八、网页中框架的使用

38

框架网页

39

框架属性对话框

40

• 设置目标框架– 在使用框架网页时，通常只需设定其中的一个或几个框架作为浏览

窗口，因此，要对它们设置超链接。不仅要指定超链接的地址，还要指定目标框架名称。通常的做法时：目录框架作为标题框架的目标框架，即单击标题框架中的某个链接将改变目录框架的显示内容；主框架是目录框架的目标框架，即单击目录框架中的某个链接将改变主框架的显示内容。

– 以图 4.66 所示的框架页面为例，把中间框架作为目录框架中某个超链接的目标框架，可以按以下方法进行设置：

– 1、在要设置超链接的某个超文本（例如个人资料）上单击鼠标右键，选择“超链接属性”命令，打开“编辑超链接”对话框。

– 2 、设置其链接目标地址后，单击对话框右侧的“目标框架”按钮，选择一个目标框架。

• 使用表格进行页面布局– 先确定页面中各个对象所在的区域，再用表格将这些区域划分出来。

将布局问题转变为表格设计。

八、网页中框架的使用

41

编辑超链接对话框

42

目标框架对话框

43

九、动态网页• 文字的动态效果

– 选定网页中的某段文字，单击“格式“菜单”→“动态 DHTML效果”命令。

– 事件：单击、双击、鼠标悬停、网页加载– 应用：列表中提供了不同的选项。如“网页加载”时“从左侧”“飞入”等

– 选中某个已设置动态效果的网页元素，单击“ DHTML效果”工具栏上的“删除效果”按钮即可取消动态效果。

• 悬停按钮– 悬停按钮在外观上与普通按钮相同，但当鼠标指针移到这类按钮上时，会

出现不同的显示效果。• 动画效果：填充颜色、发光、凸出、凹进• 方法：执行“插入”→“组件”→“悬停按钮”命令，打开 “悬停按

钮属性”对话框，用户可设置悬停按钮的链接目标地址，在“效果”下拉列表框中选择动画效果。

44

动态 DHTML效果设置

“悬停按钮属性”对话

框

45

• 使用字幕– FrontPage允许使用滚动字幕，即在一个背景方框中，一些文字

不停地沿着一个方向或来回地滚动。– 执行“插入”→“组件”→“字幕”命令，打开 “字幕属性”对话

框，可以设置字幕内容、文本格式、滚动方向、速度、表现方式等属性。

• 站点计数器– 站点计数器用于统计网站被访问次数。– 添加的方法为：定点插入点后，执行“插入”→“组件”→“站点

计数器” 命令，打开 “站点计数器属性”对话框，设定计数器的位数（默认是 5 位）、样式等。

– 站点计数器必须在网站发布后才能正常显示。

九、动态网页

46

“字幕属性”对话

框 “ 站点计数器属性”对话

框

47

• 搜索表单– FrontPage 提供搜索表单组件，它起到一个搜索引擎的作用，利用它

可以实现对当前整个网站上所有文件进行全文搜索。– 定位插入点后，执行“插入”→“组件”→“搜索表单”命令，打开

“搜索表单属性”对话框。• 网页过渡效果

– 设置网页过渡方式可以实现如随机分解、溶解等动态效果。会对网页浏览速度造成一定的影响。

– 执行“格式”→“网页过渡”命令，打开“网页过渡”对话框。在“事件”栏中选择一种事件，如进入网页、离开网页、进入站点和离开站点。在“过渡效果”列表框中选择一种效果，如“盒状收缩”，最后单击“确定”按钮。

九、动态网页

48

“ 网页过渡”对话

框

九、动态网页

“搜索表单属性”对话

框

49

• 站点发布是指将已经设计好的站点传送到 Internet 上的一个 Web

服务器上，这样 Internet 上的用户才能访问它。• 步骤如下：

– 打开需要发布的站点，执行“文件”菜单→“发布站点”命令

– 在“指定发布站点的位置”列表框中可以直接键入 Web服务器的 URL 地址；

– 选择发布网页的内容，设置完毕后，单击“发布”按钮。

十、发布站点