第5章 网页设计初步-FrontPage 2003

admin管理员组

文章数量:1566980

2024年7月24日发(作者：)

第5章 网页设计初步－FrontPage 2003

因特网已成为目前最主要的电子信息发布媒体，无论是政府、公司、企业、还是个人都

纷纷建立自己的网站来发布和收集信息。不仅如此、越来越多的公司、企业和政府还将自己的

商务、政务活动放到网站上，从而使得网站又成为信息处理的新平台。

一、案例说明

本例描述：本例通过一个个人网站的建立过程来简要介绍利用FrontPage 2003建立网页的

基本方法和常用功能，使得学习者对网页的设计过程有个初步的了解。

本例知识点： 站点的建立、表格及其表格布局、插入图片、背景音乐、超级链接、电子

邮件链接、图片热区链接、字幕制作、站点发布

二、方法指导

1．熟悉Microsoft FrontPage 2003界面

① 启动FrontPage 2003，图5.1所示的为FrontPage 2003的操作界面。

图5.1 操作界面

编辑区

标题栏

常用工

具栏

菜单栏

格式工

具栏

任务窗

口

网页显示

方式

2．新建站点

创建一个名为“花样年华”站点，保存在“D:my webhynh”

操作方法：

① 单击“文件”菜单中的“新建”命令，在弹出的“新建”任务窗口中选择“新建网站”

中的“由一个网页组成的网站”，打开如图5.2所示的“网站模板”对话框。

② 在“指定新站点的位置”处输入“D:my webhynh”，双击“空白站点”图标，“花样

年华”站点创建完毕。

-

图5.2 “新建”对话框

③ FrontPage 2003自动创建了“_ private”和“images”两个文件夹。

④ 单击“文件”菜单中的“新建”命令，在弹出的“新建”任务窗口中选择“新建网页”

中的“空白网页”，创建一个名为“”的网页(新建的网页默认名称为“new_page_”，

可以在保存时改为“”)。

⑤ 单击“视图”菜单中的“文件夹”命令，可以发现右边窗口中增加了一个标题为

“”的主页图标，如图5

.

3所示。

⑥ 双击“”的主页图标，按保存按钮

，保存新建网页。

图5.3 新建网页样图

3．制作主页

试在上面创建的站点基础上，创建如图5

.

4所示的个人主页。该主页使用6×3表格布局，

其中第一行三个单元格合并为一个标题单元格，第三行第四行的第一个单元格合并为一个图片

单元格，第二行三个单元格合并为一个滚动条单元格。在第四行单元格中建立了2个超链接，，

分别与2个网页相链接，第五行的第一个单元格插入一个层，并且这个单元格中的图片中建立

个一个热点链接，最后一行为联系方式中建立了一个电子邮件链接，最后在主页中插入音乐。

(1) 用表格划分网页

操作方法：

① 启动Microsoft FrontPage 2003，在“D:my webhynh”下找到主页文件“”，

双击该文件即可打开主页。

② 进行页面设计，单击“文件”菜单中的“属性”，在常规选项卡的“标题”中添入“花

样年华”，在“背景音乐”中可以插入音乐，如图5

.

5所示;在高级选项卡“边距”的“上边距”

和“下边距”分别设为0像素,如图5

.

6所示。

图5.4 花样年华个人主页

图5.5 常规选项卡 图5.6 高级选项卡

-

③ 单击“表格”菜单中的“插入”命令，

选择级联菜单中的“表格”命令，如图5

.

7所

示，打开“插入表格”对话框。

图5.7 插入表格菜单

④ 选定表格的行数为6，列数为3，边框

粗细为“0”(这样在IE浏览器或预览中就看不

到表格的网格线)，如图5

.

8所示。

⑤ 选中第一行三个单元格，单击右键，选

择“合并单元格”，如图5

.

9所示。用同样的方

法将单元格合并成如图5.10所示。

图5.9 合并单元格

图5.10 合并后的单元格

图5.8 “插入表格”对话框

⑥ 调整各单元格的大小(以后会不断调整)，如图5

.

11所示。

(2) 设置背景

操作方法：

① 单击“格式”菜单，选择“背景”，

打开网页属性对话框，如图5.12所示。

② 选中“背景图片”，单击浏览按钮选

择合适的图片。

(3) 输入文本及插入图片

操作方法：

图5.11 调整单元格

① 在第一行中输入“花样年华”，设置字体为“华文新魏”，大小为“7”，对齐方式为“居

中”。

图5.12 “网页属性”对话框

图5.13 “字幕属性”对话框

② 在第二行中插入字幕。单击“插入”菜单，选择组件菜单中的“字幕”，打开字幕属性

对话框，如图5

.

13所示。在文本框中输入“欢迎来到花样年华个人主页”，方向为“左”，背

景色为“黄色”，表现方式为“滚动条”，单击“确定”。

③ 在其余单元格中输入文本，参照图5

.

4。

④ 在合适处插入图片。单击插入菜单中的“图片”级联菜单中的“来自文件”选择一幅

合适的图片。

⑤ 在插入层。单击插入菜单中的“层”或单击插入层按钮

（层中也可以插入图片这里就不再演示）。

⑥ 单击保存按钮，保存文件名为“”(保存文件时最好使用英文字母)。

⑦ 单击编辑窗口下的“预览”按钮，观察编辑效果。

⑧ 单击“保存”按钮保存主页。

提示：主页中的超链接可以在建立了其他网页以后再进行建立。

，在层中输入“故乡的风景”

4．建立二级链接子网页

在上面新建网站的基础上，新建一个“我的故乡”的网页。

操作方法：

① 设置背景（方法同前）。

② 输入文本“我的作品”，设置字体为“华文新魏”，大小为“7(36磅)”，颜色为“蓝色”，

对齐方式为“居中”。

③ 插入表格。插入一个行一列的表格，将第一行拆分为两列。在第一列和第二列中分别

插入图片，如图5.14所示。

④ 在最后一行中输入“返回主页”。

⑤ 单击保存按钮

，保存文件名为“My

Town

.htm”。

⑥ 用类似的方法创建子网页“My

University

.htm”。

-

图5.14 “我的故乡”样图

5．建立主页与其他各网页的链接

将建立主页与子网页相链接。

操作方法：

① 在主页中选中“我的作品”，单击鼠标右键，在弹

出的快捷菜单中选择“超链接”，如图5

.

15所示，打开“创

建超链接”对话框，如图5

.

16所示。也可以单击插入超链

接按钮

。

②在名称中选择要链接的文件“My ”，

点击“确定”。

③ 用同样的方法链接“我的故乡”。

④ 在“联系方式”后建立电

子邮件链接，选中

huayangnianhua@单击常

用工具栏中的插入超链接按钮

，在“链接到”中点击电子邮

件地址，在“电子邮件地址”中

输入邮箱地址（输入电子邮件地

址时地址前面自动填入mailto:)，

如图5

.

17所示。

图5.16 “创建超链接”对话框

图5.15 “超链接”

⑤ 在“故乡的风景”的图片上建立热区链接，单击图片

工具栏中的，在所需的图片上画出需要的链接部分，如

图5

.

18所示。

⑥ 单击编辑窗口下的“预览”按钮，观察链接效果。

⑦ 单击“保存”按钮保存主页。

图5.17 “插入超链接”对话框

6．发布站点

将创建好的My Websl网站发布到Internet上或硬盘上

的某个文件中(如D:my web，必须事先创建)。

操作方法：

① 单击工具栏上的“发布站点”按

钮，打开如图5.19所示的“发布站点”

对话框。

② 在“指定发布站点的位置(S)：”

中输入要发布的网站地址或硬盘上的某

个文件夹，单击“发布”。

图5.19 “远程网站属性”对话框

图6.18 图片热区链接

-

习 题

一、选择题

1．创建空白站点，“新建”命令在 ________ 。

A) “文件”菜单 B) “编辑”菜单 C) “查看”菜单 D) “插入”菜单

2．拆分框架时，按住 ________ 键，在框架边缘向下拖动鼠标，可以水平拆分

A) Shift B) Ctri C) Center D) Alt

3．在FrontPage 2003中，提供了 ________ 个框架结构模板

A) 5个

A) 图片

B) 6个

B) 文字

C) 8个

C) 动画

C) To

C) 圆圈

C) 音乐

C) 层

D) 10个

D) 书签

D) Mall From

D) 以上都不正确

D) 以上都可以

D) 章节

D) JPG

4．如果网页中的文字内容比较多，为了搜索段落方便可以插入 ________ 。

5．创建电子邮件的链接地址前应该以 ________ 开始。

A) Mall To：

A) 波浪线

A) 图片

A) 表格

A) Flash

A) Mpeg

B) Mall To

B) 下划线

B) 动画

B) 段落

B) gif

6．文字建立链接后通常在文件下方会产生 ________ 。

7．网页中可以插入 ________ 。

8．排版漂亮的网页都会用很多 ________ 来控制文本、图片、动画及视频位置。

9．在FrontPage 2003中，一般常用的动画文件格式有 ________ 格式。

C) Flash和gif

B) AVI

D) Mpeg、AVI、QuickTime

C) 背景

C) 动画

C) 表格

C) 边距

C) 图片

C) 音乐

D) 音乐

D) 超级链接

D) 动画

D) 数据源

D) 动画

D) 页面

10．网页中的视频文件的主要文件格式有 ________ 。

C) QuickTime

A) 属性

A) 文字

A) 高级

A) 常规

11．在网页中插入背景音乐，单击“文件”菜单中的 ________ 命令。

B) 新建

B) 图片

B) 图片

B) 背景

B) 表格

B) 图片

12． ________ 是WWW的灵魂

13．插入Flash动画是选择“插入”菜单中的 ________ 选项。

14．在网页属性对话框中，下列 ________ 是没有的。

15． ________ 是一种独特的页面组织方式，它在一个窗口中包括了几个单独的WEB网页

A) 框架网页

A) 文字

16． ________ 是利用框架进行网页可见制作的基本元素

17．在网页中 ________ 可以建立超级链接

A) 文字 B) 图片

C) 电子邮件 D) 文字、图片、电子邮件

18．通过IE浏览器菜单上的 ________ 按钮可以返回

A) 后退 B) 前进 C) 停止 D) 刷新

19．“超链接”在 ________ 菜单中

A) 文件 B) 编辑 C) 插入 D) 工具

20“视频”命令在“插入”菜单中的 ________ 选项中

A) 图片 B) 表格 C) 超连接 D) 书签

二、判断题。

1．网页是网络信息的载体。 (

2．网页是一种基于文本方式的文档。 (

3．没有只有一个网页的站点。 (

4．FrontPage 2003也有所见即所得的特点。 (

5．网页中最实用的工具是文字段落。 (

6．网页中的图片越大其浏览的速度越快。 (

7．在图片文件夹中，单击图片文件名可以看到预览图案。 (

8．声音是多媒体网页中不可缺少的元素。 (

9．网页中的视频文件只有AVI一种。 (

10．网页中可以插入动画。 (

11．一般不要在网页中大量使用AVI动画。 (

12．文字建立链接前后颜色一样。 (

13．每一个框架是一个页面文件。 (

14．悬停按钮不能自定义。 (

15．与Internet的连接可以通过电话线和调制解调器，也可以通过局域网连接。 (

16．建立了电子邮件的链接后，单击此链接就会自动启动默认的邮件收发工具。(

17．网页中插入Flash动画可以在编辑窗口预览。 (

18．表格可以选择插入行或列。 (

19．在网页中gif动画需要安装插件才能浏览。 (

20．FrontPage2000与Word一样都可以设置文字的属性。 (

)

)

)

)

)

)

)

)

)

)

)

)

)

)

)

)

)

)

)

)

本文标签： 网页插入链接图片