frontpage2003密钥

1

6.5网页制作

大家在因特网上浏览过许多网站，查阅过许多资料，那么，这些网站是怎样建立的呢？制作网站要借助

于制作网站的软件工具。制作网站的工具非常多，如FrontPage、Dreamweaver等，我们以FrontPage2003为例，

学习网站的制作。FrontPage2003是Microsoft公司推出的Web站点创建和管理工具，它是微软Office成员之

一。

FrontPage2003是一个所见即所得的“傻瓜”型网页制作软件，你可以对HTML毫不了解的情况下轻松

地制作出自己的网页来，你需要的只是用鼠标及键盘的简单操作。

6.5.1FrontPage2003的启动与退出

1．FrontPage2003的启动

如图6-1所示，选择“开始”→“程序”→“MicrosoftOffice”→“MicrosoftOfficeFrontPage2003”命

令，即可启动FrontPage。其界面如图6-1所示

图6-22FrontPage2003窗口

与以前版本的FrontPage不同，编辑模式按钮提供了“设计”模式、“拆分”模式、“代码”模式和“预

览”模式，用户不必经过选择就可直接进入编辑器和资源管理器的窗口。FrontPage2003提供了与Word类似

的中文界面，使用户可以轻松地建立站点和编辑网页。

2．FrontPage2003的退出

（1）单击“标题栏”右端的“关闭”按钮；

（2）选择“文件”下拉菜单中的“退出”命令。

标题栏

工具栏

菜单栏

编辑区第6章当前文件名

状态栏第5章

视图切换按钮

第六章计算机网络知识与网页制作

2

6.5.2创建网站

任务制作个人网站“鸿渐工作室”

★【任务说明】

某财经学校计算机专业张鸿渐同学多才多艺，在学完网页制作课程之后想在网上安个“家”。本任务以制

作个人网站“鸿渐工作室”为例学习网站站点的建立过程。

【任务实施】

本任务包括的操作主要是，创建站点、在网站中加入网页等

1.规划网站，绘制结构图

网站包含多个由超级链接连在一起的网页，所以，在建立网站之前，要明确这个网站由哪些网页组成，

明确网页之间的关系。张鸿渐的作品很多，需要分类，在制作网站之前，首先画出网站的设计草图。如图6-23

所示

图6-23网站结构图

2.创建网站

创建一个Web网站有两种方法。第一种方法是利用FrontPage的Web网站模板和向导，这种方法操作简

首页

个人简介

给我留言

应用技巧

站长原创

动画欣赏

摄影作品

网文飘飘

第六章计算机网络知识与网页制作

3

单、速度快，比较适合建立大、中型的Web网站。第二种方法是逐个地创建网页文件，然后创建它们之间的

链接关系，这种方法适合于网页数量不多的小型网站。

使用FrontPage模板创建网站的步骤：

（1）启动FrontPage应用程序；选择【文件】/【新建…】命令，在窗口右侧打开“新建”任务窗格；选择

【新建网站】栏“由一个网页组成的网站…”如图6-24。

（2）打开“网站模板”对话框，如图6-25;在“指定新网站的位置”下拉列表框中选择新站点的保存位置，

或者选择“浏览”按钮选择新站点的保存位置，也可以直接输入，本例直接输入“E:webhongjian”。选择左边

框中“只有一个网页的网站”选项，然后单击“确定”按钮。

图6-24“新建”任务窗格图6-25“网站模板”对话框

（3）此时FrontPage就会自动创建一个单网页的网站，此网站只有一个网页，即主页。主页是一个站点

的第一页，文件名通常为。在工具栏中单击“文件夹列表”按钮，出现文件夹列表，在这里可以

看到所建网站的结构，如图6-26所示，其中的“images”文件夹是系统自动生成的用来存放图像文件的文件夹，。

双击“”,打开主页的编辑界面，此时可以向主页中加入内容（加入内容的方法后面会有介绍），这样，

一个简单的主页就制作完成了。

图6-26建立网站后的窗口

第六章计算机网络知识与网页制作

4

3.在新建网站中加入网页

在实际应用中，仅有一个主页的站点是极少见的，接着上面的例子，向主页中加入新网页的操作步骤如

下。

（1）单击“新建”任务窗格中“新建网页”下的”空白网页“（快捷键“Ctrl+N”），FrontPage2003将

自动创建一个新的网页，该网页被命名为“new_page_”，但这个新页还未被加入站点中，现在站点中还

只有主页这一个网页。

（2）单击【文件】/【保存】命令，弹出“另存为”对话框，如图6-27，单击“更改标题”，在弹出的

“输入文字”对话框中修改网页的标题名为“个人简介”如图6-28；单击“确定”，在“另存为”对话框“的

文件名”文本框中更改网页的文件名为“jianjie”然后单击“保存”按钮，则新页“”就被加入到站

点中，在“文件夹列表”框中能够查看到。

图6-27保存新建文件图6-28修改网页标题

（3）重复以上步骤，按“图6-22网站结构图”中列出的英文文件名向站点中加入其它6个新网页。完

成后的结果如图6-29所示。

图6-29添加完八个网页文件后的文件夹视图

第六章计算机网络知识与网页制作

5

4.建立网页间的层次关系

（1）单击“视图”菜单下的“导航”，进入“导航”视图，如图6-30。

图6-30“导航”视图

（2）鼠标指针指向“文件夹列表”中的“”,拖动鼠标到右侧窗格“”图标下面。同

样，根据“图6-23网站结构图”，建立网页层次结构，如图6-31所示。

图6-31

网页层次结构

5.关闭网站

执行【文件】/【关闭站点】命令。

通过本任务的学习，了解创建网站的一般方法：确定主题→设计网站结构、风格→收集相关资料→绘制

网站结构图→创建网站。

★【知识链接】

（1）网页（WEB）：是用html语言编写的，通过www网传输，并被web浏览器翻译成可以显示出来的

集合文本、图片、声音和动画等信息元素的页面文件；根据页面内容可以分首页（又称主页）、专栏网页、内

容网页和功能网页等类型；按制作技术分为静态网页与动态网页。

（2）网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的集合。信息可以是网

页形式也可以是其他的文档形式

第六章计算机网络知识与网页制作

6

（3）网页与网站的区别与联系：

网站是一个文件夹，其中的文件不仅是网页还有网站所需的其他文件或文件夹。网页是一个页面文

件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超

链接形成的集合。

6.5.3设计主页

任务制作“鸿渐工作室”的主页

★【任务说明】

在“鸿渐工作室”的主页里有网站的logo、banner、导航栏及各链接页的简单介绍。本任务利用表格有

效地控制整个网页的布局，通过这个主页的制作，学习在网页中插入文字、图片、Flash动画等媒体的方法。

【任务实施】

本任务包括的操作主要是，在网页中插入表格控制网页的布局，在网页中插入文字、图片、Flash动画并

进行排版设置操作。

在具体制作之前，我们把网页中要用到的图片准备好幷拷到“E:webhongjianimages”文件夹中，把其它

素材最好也分类存放在站点下不同的文件夹中以备用；如在“E:webhongjian”下分别建立动画文件夹

“donghua”、下载文件夹“xiazai”，来存放动画文件及让网站访问者下载的文件。

1.打开“webhongjian”网站

（1）启动Frontpage2003。

（2）执行【文件】/【打开网站】命令，打开如图6-32所示的对话框。

（3）选中“E:webhongjian”文件夹，单击“打开”按钮

2.打开主页

双击文件夹列表中的“”主页，文件名“”显示在文件编辑窗口的文件标题栏的左边，

开始编辑主页。

3.插入并设置表格

（1）执行【表格】/【插入】/【表格】命令,打开表格属性对话框，按图6-33所示设置各参数，其中行

数为5，列数为2，对齐方式为居中，指定宽度为760像素，边框粗细为0。其它按默认值，设置完成后按“确

定”退出，主页中插入了一个5行2列的表格，再分别把第2行、第4行、第5行的二个单元格合并为一个单

第六章计算机网络知识与网页制作

7

元格，结果如图按图6-34所示。

图6-32打开网站图6-33表格属性

图6-34插入一个5行2列的表格

图6-35插入图片

（2）把光标定位在表格第一行第一列的单元格中，执行【插入】/【图片】/【来自文件】命令，打开“图

片”对话框，选择“images”文件夹下的“”文件后，单击“插入”按钮，如图6-35所示；可以看到，

在表格中已经插入了所选的图像，调整表格第一列的宽度使其与插入的图像同宽。

（3）把光标定位在表格第一行第二列的单元格中，执行【插入】/【图片】/【Flash影片】命令，打开“选

择文件”对话框，选择“donghua”文件夹下的“”文件后，单击“插入”按钮，可以看到，在表格

中已经插入了一个动画文件的标志，如图6-36所示，此时的动画并不播放，我们可以单击“预览”按钮切换

到预览视图或按F12键在浏览器中预览就可以看到动画效果了，如图6-37所示。

第六章计算机网络知识与网页制作

8

图6-36插入logo及banner后的主页

图6-37预览视图的效果

（4）接下来，把光标定位在表格第二行的单元格中，执行【表格】/【插入】/【表格】命令,打开表格属

性对话框，设置各参数，其中行数为1，列数为8，指定宽度为100%，指定高度为40像素，边框粗细为0，

背景颜色选“其它颜色”“值Hex={CC,66,99}”；其它按默认值，设置完成后按“确定”退出，在单元格内插

入一个一行八列的表格。选中八个单元格，设置单元格的宽度为95像素。在八个单元格中分别输入“本站首

页”、个人简介”、“站长原创”、“动画欣赏”、“摄影作品”、“网文飘飘”、“应用技巧”、“给我留言”，对输入的

文字进行排版：“宋体加粗，12磅，居中显示”。至此，完成了导航栏内容的输入，如图6-38所示。

图6-38导航

栏制作完成后的效果

（5）将表格的第三行第一列单元格的背景设为“海军蓝”，并在里面输入一些经典励志格言，并对文字进

行排版。效果如图6-39所示。

图6-39插入经典励志格言后的效果

第六章计算机网络知识与网页制作

9

（6）站长原创页面简介的制作：把光标定位在第三行第二列单元格中，设置单元格属性为：水平对齐方

式为“居中”，垂直对齐方式为“顶端对齐”。插入一个2行2列的表格，其中设置：指定宽度为100%，单元

格衬距设为10，单元格间距设为0，边框粗细为1，边框颜色为海军蓝，其它按默认值。把光标定位在新插入

的表格的第一行第一列，再嵌套插入一个7行1列的表格，其中设置：指定宽度为100%，指定高度210像素，

边框粗细为0，其它按默认值。在刚插入的表格中插入图片、输入文字并进行排版，插入站长原创页简介，效

果如图6-40所示。

图6-40插入站长原创页简介后的效果

重复以上步骤，完成其它页的简单介绍，本例中我们仅对4个页面进行简介。完成后的效果，如图6-41

所示。

图6-41添加完4个页面的简介内容后的效果

（6）把光标定位在表格第四行的单元格中，插入一个1行5列的表格，在1-4单元格中输入文字，第五

单元格中插入图片“”；把光标定位在表格第五行的单元格中，插入建议使用的分辨率、网站的

第六章计算机网络知识与网页制作

10

备案号、更新日期和时间、版权信息等文字并排版；设置第四、五行单元格属性：使用背景图片为

“”，整个主页就制作完成了。按F12，预览一下网页的效果，如图6-44所示（在预览窗口上

方如果出现“为帮助保护您的安全，InternetExplorer已经限制此文件显示可能访问您的计算机的活动内容，单

击此处查看选项”时，如图6-43所示，请单击并选择“允许阻止的内容”）。

图6-42制作完成后的主页预览效果

图6-43选择“允许阻止的内容”动画才能正常播放

★【知识链接】

（1）制作静态网页实际上是一个技术问题，而在制作网页之前，应该有一个设计网页的工作要做。设计

网页是一个艺术创作过程，这不是这门课主要要解决的问题。本章只涉及怎么制作网页的技术问题。

使用可视化的网页制作工具FrontPage制作网页时，用户的基本操作和使用Word进行DOC文档的图、

文、表混排操作非常类似。因此，有Word、Excel应用基础的用户使用FrontPage制作网页在操作方面应该

不会有太大的问题。

（2）使用表格进行页面布局，表格可以嵌套，最外层的表格宽度一般设为固定宽度，对齐方式为居中，

第六章计算机网络知识与网页制作

11

这样在高分辨率下浏览时整个页面内容会居中显示；而嵌套的表格多按百分比设置。考虑到有部分访问者可能

使用较低的分辨率浏览网页，横向宽度最好不要超过760像素，否则在800x600的分辨率下浏览时，会出现水

平滚动条，影响美观。

（3）设置网页属性,可单击【格式】/【背景】命令或者鼠标在页面空白处右击选择“网页属性”，打开“网

页属性”对话框的“格式”选项卡，如图6-44所示。在图中可更改背景颜色、文本颜色和超链接颜色。若需

设置页面背景图案，可选择“背景图片”复选框，单击“浏览”按钮，弹出“选择背景图片”对话框，可从文

件中选择图像文件，例如选择“images/”作为页面的背景。

图6-44“格式”选项卡

（4）FrontPage是Office中一个专门制作网页的应用程序。除了FrontPage，Offic中其它一些应用程

序也有可视化制作网页功能。下面就让我们来看一下Word制作网页的功能。

Word制作网页的的一种方法是使用Word编辑文档，最后将文档保存为Web文件格式即可。具体

操作方法是，单击“文件”菜单|“另存为网页”选项。

Excel是一个专门的表格数据处理程序。用它来编辑和处理表格数据，以及有多个表构成的工作文档非

常方便。如果要制作一个网页，而这个网页要能够具有使用Excel对它进行处理时的那种操作效果的话，使用

Excel是很方便的。可以直接将excel文件另存为网页。具体操作方法是，单击“文件”菜单|“另存为网页”选项。

使用PowerPoint制作好了演示文稿后，可以直接将演示文稿另存为网页。具体操作方法是，单击“文件”

菜单|“另存为网页”选项。

【练习与思考】制作个人简介页

制作“个人简介”网页。

【操作提示】

（1）启动Frontpage2003。

第六章计算机网络知识与网页制作

12

（2）打开“webhongjian”网站

（3）双击文件夹列表中的“”和“”打开主页及个人简介页

（4）把主页最外层表格的第三行内容全部删除，保留表格第一行（logo、banner），第二行（导航栏）及

最后两行即所有网页都有的内容，完成后的结果如图6-45。选中“body”标签或者按“CTRL+A”全选后按鼠

标右键进行复制，然后粘贴到个人简介页中，在此基础上进行个人简介页的设计制作。

图6-45其它网页在此基础上进行设计制作

6.5.4超级链接的应用

任务创建超链接

★【任务说明】

上一节我们在首页中输入了作为导航条的内容：“本站首页”、个人简介”、“站长原创”、“动画欣赏”、“摄

影作品”、“网文飘飘”、“应用技巧”、“给我留言”，那么每一个内容都应该链接一个网页，这就是超级链接，

本任务就是要进行超级链接的基本操作，让我们感受一下超级链接的魅力吧！

【任务实施】

1.打开“webhongjian”网站

（1）启动Frontpage2003。

（2）执行【文件】/【打开网站】命令

（3）选中“E:webhongjian”文件夹，单击“打开”按钮。

第六章计算机网络知识与网页制作

13

2.创建超级链接

（1）创建链接到原有文件或网页的链接

双击文件夹列表中的“”文件，打开主页继续编辑主页。

选中导航栏上的“本站首页”文本后，可单击【插入】/【超链接】命令或单击鼠标右键选择“超链接”

命令，也可以单击“常用”工具栏上的“插入超链接”按钮，打开“插入超链接”对话框，如图6-46所示。

“连接到：”选择“原有文件或网页”，“查找范围”选择本站点所在的“E：/webhongjian”文件夹，然后在

下面窗口选中“（打开）”文件，单击“确定”，文本超级链接就建立好了；选中“友情链接”后面的

文字“搜狐”，单击鼠标右键选择“超链接”命令，打开“插入超链接”对话框，直接在地址栏输入

“”就创建好了到搜狐网站的链接。按F12进行预览，当鼠标移到添加了超链接的文本

处会变成小手，再单击鼠标就会打开相应的网页了。

图6-46

选中主页中的图片“”，单击鼠标右键选择“超链接”命令，打开“插入超链接”对话框，

“连接到：”选择“原有文件或网页”，“查找范围”选择本站点所在的“E：/webhongjian”文件夹，然后在

下面窗口选中“”文件，单击“确定”，在图片上就创建了超级链接。

（2）创建链接到电子邮件的链接

选中主页面中的“写信给我”文字，单击鼠标右键选择“超链接”命令，打开“插入超链接”对话框，

“连接到：”选择“电子邮件地址”，打开如图6-47所示的对话框。在“电子邮件地址（E）：”下输入

“mailto:czcxweb@”，单击“确定”，就创建了电子邮件链接。

图6-47创建链接到电子邮件的链接

第六章计算机网络知识与网页制作

14

（3）创建图像热点链接

图像热点链接是指在一幅图像上建立不同形状的热点区域，每一个区域都是一个超链接。制作步骤如下：

选定要制作图像热点的图片，例如选中主页中的图片“”，右键选择

“显示图片工具栏”，此时屏幕会显示出“图片”工具栏，在“图片”工具栏上有5个专门为图像热点功能设置的

按钮。如图图6-48所示。单击“图片”工具栏中一种热点形式，并将光标移到要制作图像热点的图片中，光标

变成铅笔形状然后用鼠标在图片中拖动出一个矩形区域；本例我们把教育部及其前面的标志用矩形热点按钮框

选住，松开鼠标后，出现“创建超链接”对话框，从中可设置该热点的链接目标为教育部的网址

（/）。

图6-48“图片”工具栏

（4）创建书签链接（链接到本文档中的位置）

在主页的基础上我们接着制作个人简介页：可以把制作好的主页通过【文件】/【另存为】命令，保存

为“”，当保存文件提示如图6-49的对话框时选择“是”。接下来把最外层表格的第三行内容全部删

除，设置第三行单元格的垂直对齐方式为“顶端对齐”，在里面输入如图6-50所示的文字内容。右侧单元格文

字内容较多，有部分栏目的介绍需要使用垂直滚动条才能查看到。

图6-49替换原文件

图6-50个人简介页图6-51“书签”对话框

定义“书签”：将光标移动到右侧单元格上方文字“教育背景”前，执行【插入】/【书签】命令，

打开如图6-51所示的“书签”对话框，在“书签名称”中输入“1”，单击“确定”，这时在光标所在位置出

第六章计算机网络知识与网页制作

15

现了一个标志“”。

建立链接：选中左侧单元格上方的“教育背景”文字，单击鼠标右键选择“超链接”命令，打开“插

入超链接”对话框，“连接到：”选择“本文档中的位置”，打开如图6-51所示的对话框。在“书签”下选择

“1”，单击“确定”，就创建了书签链接。

图6-51插入书签链接

同法制作主页及个人简介页中其它位置的超级链接（注意：主页中“”共有4处，它们均为

图片，但链接到的文件不同。）

★【知识链接】

（1）超链接是Web页面之间的纽带，是从一个网页指向另一个目的地的指针，使用超链接可访问各种

网站，并进行网上学习、交流与合作等活动。没有超链接，网页就失去其真正的意义

（2）创建网页超链接的步骤如下。

①选择链接的载体：链接的载体是显示链接的页面元素，如文字、图形或图像的部分区域（也称为热点

区域）。把某个文本或某幅图像与某个页面的地址联系在一起，该文本或图像具有超链接功能。若访问者单击

此文本或图像，浏览器将打开相应地址的网页。创建超链接之前要选中链接的载体，每次只能创建一个超链接，

②选择链接的目标：链接的目标包括原有文件或网页、本文档中的位置（书签）、新建文档、电子邮件

等。根据跳转目的地的不同，网页中链接可分为4种类型。

Ⅰ、原有文件或网页：直接跳转到已经存在的某一网页或文件。

如果是本网站内的网页，可用光标在“插入超链接”对话框列表文件中选择。如果是本机上其它网站中的

网页，则选择“插入超链接”对话框中的按钮，或从“查找范围”中选择相应的网站，再选择所需网页。

如果是Internet上其它网站的某一网页，可单击按钮打开浏览器找到该页面后，该页面的网址会自动出现

在“地址”栏；也可以直接在地址栏文本框中输入该网页的地址。

Ⅱ、本文档中的位置：是直接跳转到本网页中的某书签标志的位置。要进行此链接操作，必须先用【插

入】【书签】命令在网页中的某些位置插入书签；在“插入超链接”对话框中单击“本文档中的位置”，然后选择

该网页上的书签，将会在书签位置创建一超链接

Ⅲ、新建文档：可以将当前选中的链接的载体链接到一个新建的页面上。单击“新建文档”按钮，在“新建

文档名称”栏填写该网页的名称

Ⅳ、电子邮件链接：单击“电子邮件地址”按钮，在“电子邮件地址”栏填写目标电子邮件地址，可创建一

第六章计算机网络知识与网页制作

16

个到电子邮件的链接

③确定目标框架：链接的目标网页选定后，可以指定目标网页是在本窗口中显示还是在新打开的浏览器

窗口中显示。单击“插入超链接”对话框中“目标框架”按钮，打开“目标框架”对话框，。指定链接的目标网页的

目标窗口，默认是在当前窗口中打开目标网页。

“公用的目标区”列表框选项含义如下：

相同框架：链接的目标网页显示在包含该超链接的同一个框架内。

整页：将框架展开为全窗口后显示链接的目标网页。

新建窗口：另外打开一个浏览窗口显示链接的目标网页。

父框架：如果是一页套一页的框架网页，选择父框架可以回到上一层框架显示链接的目标网页。

（3）可用如下的方法来验证一下超链接是否正确，：

网页的设计视图中，把鼠标移到已经创建了超链接的载体上（文字、图像），鼠标变成手状，按下

键，然后单击鼠标，便可验证链接目的地。

在网页的预览视图中，用鼠标单击创建了链接的载体，便可验证链接目的地。

（4）设置超链接的状态颜色：在浏览器中浏览网页时，已经访问过的超链接、尚未访问过的超链接和正

在访问的超链接应有不同的颜色显示，使浏览者一目了然。

设置超链接的状态颜色方法：选择【格式】【背景】命令，打开“网页属性”对话框。选中“格式”选项卡，

对与超链接有关的部分进行设置。如图6-52所示，设置超链接颜色为黑色，设置已访问的超链接颜色为红色，

设置当前超链接颜色为绿色。

图6-52设置超链接的状态颜色

【练习与思考】制作书签链接网页

试着利用书签链接制作“网文飘飘”、“应用技巧”网页。

第六章计算机网络知识与网页制作

17

6.5.5框架网页

任务利用框架制作摄影作品网页

★【任务说明】

框架就是将浏览器窗口分成几个部分，每个部分是独立的网页，这样在一个屏幕上可以同时观看多

个页面，还可以在同一个屏幕上的各个框架之间设置超链接。很多网站都具有这样的结构。一般一个网

页至少分成3部分，最上面是标题，左面是目录，单击不同的目录，在右边框架中会显示相应的内容。

使用框架网页可以同时浏览几个页面，框架可以使站点充满趣味性。本节我们利用框架网页的知识制作

“摄影作品”页。

【任务实施】

1.打开“webhongjian”网站

（1）启动Frontpage2003。

（2）执行【文件】/【打开网站】命令

（3）选中“E:webhongjian”文件夹，单击“打开”按钮。

2.制作“摄影作品”页。

FrontPage2003提供了最流行的框架网页布局模板，利用这些模板可以轻松地创建框架网页。操作

步骤如下。

（1）选择【文件】/【新建…】命令，出现“新建”任务窗格，单击“其他网页模板”命令，弹出“网

页模板”对话框；选中“框架网页”选项卡，在列表中选择所需的模板，在右边的“预览”区域可以预

览框架的外观；本例我们选择“标题、页脚和目录”框架，如图6-53所示。单击“确定”按钮，建

立了一个新的框架网页，如图6-54所示。

第六章计算机网络知识与网页制作

18

图6-53“框架网页”选项卡

图6-54“标题、页脚和目录”框架网页

图6-53“标题、页脚和目录”框架网页

以上创建的这个框架只是一个空框架，下面给它加入内容。

（2）在某个框架中单击“设置初始网页”按钮，弹出“插入超链接”对话框，如图6-55所示。

图6-54“插入超链接”对话框

第六章计算机网络知识与网页制作

19

（4）在对话框中设置链接的网页，单击“确认”按钮，（则该网页出现在框架内部。

（5）其他框架可以类似加入网页，也可以固定其中的几个部分，而允许其中的一个框架跟随需要

不断改变。接着上面的例子，在预览状态下，单击左边框中的“主页”这两个字，则与之相链接的页显

示在右边的框架中，如图6-55所示。

图6-55框架内显示内容

（6）若要给框架填充一个新网页，则在其中某个框架中单击“新页面”按钮，一个新的网页就会

出现在框架中。要给新建的网页增加内容，可单击网页内部，继续进行增加内容的操作。

（1）创建链接到原有文件或网页的链接

双击文件夹列表中的“”文件，打开主页继续编辑主页。

选中导航栏上的“本站首页”文本后，可单击【插入】/【超链接】命令或单击鼠标右键选择“超链接”

命令，也可以单击“常用”工具栏上的“插入超链接”按钮，打开“插入超链接”对话框，如图6-46所示。

“连接到：”选择“原有文件或网页”，“查找范围”选择本站点所在的“E：/webhongjian”文件夹，然后在

下面窗口选中“（打开）”文件，单击“确定”，文本超级链接就建立好了；选中“友情链接”后面的

文字“搜狐”，单击鼠标右键选择“超链接”命令，打开“插入超链接”对话框，直接在地址栏输入

“”就创建好了到搜狐网站的链接。按F12进行预览，当鼠标移到添加了超链接的文本

处会变成小手，再单击鼠标就会打开相应的网页了。

图6-46

第六章计算机网络知识与网页制作

20

选中主页中的图片“”，单击鼠标右键选择“超链接”命令，打开“插入超链接”对话框，

“连接到：”选择“原有文件或网页”，“查找范围”选择本站点所在的“E：/webhongjian”文件夹，然后在

下面窗口选中“”文件，单击“确定”，在图片上就创建了超级链接。

（2）创建链接到电子邮件的链接

选中主页面中的“写信给我”文字，单击鼠标右键选择“超链接”命令，打开“插入超链接”对话框，

“连接到：”选择“电子邮件地址”，打开如图6-47所示的对话框。在“电子邮件地址（E）：”下输入

“mailto:czcxweb@”，单击“确定”，就创建了电子邮件链接。

图6-47创建链接到电子邮件的链接

（3）创建图像热点链接

图像热点链接是指在一幅图像上建立不同形状的热点区域，每一个区域都是一个超链接。制作步骤如下：

选定要制作图像热点的图片，例如选中主页中的图片“”，右键选择

“显示图片工具栏”，此时屏幕会显示出“图片”工具栏，在“图片”工具栏上有5个专门为图像热点功能设置的

按钮。如图图6-48所示。单击“图片”工具栏中一种热点形式，并将光标移到要制作图像热点的图片中，光标

变成铅笔形状然后用鼠标在图片中拖动出一个矩形区域；本例我们把教育部及其前面的标志用矩形热点按钮框

选住，松开鼠标后，出现“创建超链接”对话框，从中可设置该热点的链接目标为教育部的网址

（/）。

图6-48“图片”工具栏

（4）创建书签链接（链接到本文档中的位置）

在主页的基础上我们接着制作个人简介页：可以把制作好的主页通过【文件】/【另存为】命令，保存

为“”，当保存文件提示如图6-49的对话框时选择“是”。接下来把最外层表格的第三行内容全部删

除，设置第三行单元格的垂直对齐方式为“顶端对齐”，在里面输入如图6-50所示的文字内容。右侧单元格文

字内容较多，有部分栏目的介绍需要使用垂直滚动条才能查看到。

第六章计算机网络知识与网页制作

21

图6-49替换原文件

图6-50个人简介页图6-51“书签”对话框

定义“书签”：将光标移动到右侧单元格上方文字“教育背景”前，执行【插入】/【书签】命令，

打开如图6-51所示的“书签”对话框，在“书签名称”中输入“1”，单击“确定”，这时在光标所在位置出

现了一个标志“”。

建立链接：选中左侧单元格上方的“教育背景”文字，单击鼠标右键选择“超链接”命令，打开“插

入超链接”对话框，“连接到：”选择“本文档中的位置”，打开如图6-51所示的对话框。在“书签”下选择

“1”，单击“确定”，就创建了书签链接。

图6-51插入书签链接

同法制作主页及个人简介页中其它位置的超级链接（注意：主页中“”共有4处，它们均为

图片，但链接到的文件不同。）

第六章计算机网络知识与网页制作

22

★【知识链接】

（1）超链接是Web页面之间的纽带，是从一个网页指向另一个目的地的指针，使用超链接可访问各种

网站，并进行网上学习、交流与合作等活动。没有超链接，网页就失去其真正的意义

（2）创建网页超链接的步骤如下。

①选择链接的载体：链接的载体是显示链接的页面元素，如文字、图形或图像的部分区域（也称为热点

区域）。把某个文本或某幅图像与某个页面的地址联系在一起，该文本或图像具有超链接功能。若访问者单击

此文本或图像，浏览器将打开相应地址的网页。创建超链接之前要选中链接的载体，每次只能创建一个超链接，

②选择链接的目标：链接的目标包括原有文件或网页、本文档中的位置（书签）、新建文档、电子邮件

等。根据跳转目的地的不同，网页中链接可分为4种类型。

Ⅰ、原有文件或网页：直接跳转到已经存在的某一网页或文件。

如果是本网站内的网页，可用光标在“插入超链接”对话框列表文件中选择。如果是本机上其它网站中的

网页，则选择“插入超链接”对话框中的按钮，或从“查找范围”中选择相应的网站，再选择所需网页。

如果是Internet上其它网站的某一网页，可单击按钮打开浏览器找到该页面后，该页面的网址会自动出现

在“地址”栏；也可以直接在地址栏文本框中输入该网页的地址。

Ⅱ、本文档中的位置：是直接跳转到本网页中的某书签标志的位置。要进行此链接操作，必须先用【插

入】【书签】命令在网页中的某些位置插入书签；在“插入超链接”对话框中单击“本文档中的位置”，然后选择

该网页上的书签，将会在书签位置创建一超链接

Ⅲ、新建文档：可以将当前选中的链接的载体链接到一个新建的页面上。单击“新建文档”按钮，在“新建

文档名称”栏填写该网页的名称

Ⅳ、电子邮件链接：单击“电子邮件地址”按钮，在“电子邮件地址”栏填写目标电子邮件地址，可创建一

个到电子邮件的链接

③确定目标框架：链接的目标网页选定后，可以指定目标网页是在本窗口中显示还是在新打开的浏览器

窗口中显示。单击“插入超链接”对话框中“目标框架”按钮，打开“目标框架”对话框，。指定链接的目标网页的

目标窗口，默认是在当前窗口中打开目标网页。

“公用的目标区”列表框选项含义如下：

相同框架：链接的目标网页显示在包含该超链接的同一个框架内。

整页：将框架展开为全窗口后显示链接的目标网页。

新建窗口：另外打开一个浏览窗口显示链接的目标网页。

父框架：如果是一页套一页的框架网页，选择父框架可以回到上一层框架显示链接的目标网页。

（3）可用如下的方法来验证一下超链接是否正确，：

网页的设计视图中，把鼠标移到已经创建了超链接的载体上（文字、图像），鼠标变成手状，按下

键，然后单击鼠标，便可验证链接目的地。

在网页的预览视图中，用鼠标单击创建了链接的载体，便可验证链接目的地。

（4）设置超链接的状态颜色：在浏览器中浏览网页时，已经访问过的超链接、尚未访问过的超链接和正

在访问的超链接应有不同的颜色显示，使浏览者一目了然。

设置超链接的状态颜色方法：选择【格式】【背景】命令，打开“网页属性”对话框。选中“格式”选项卡，

对与超链接有关的部分进行设置。如图6-52所示，设置超链接颜色为黑色，设置已访问的超链接颜色为红色，

设置当前超链接颜色为绿色。

第六章计算机网络知识与网页制作

23

图6-52设置超链接的状态颜色

【练习与思考】制作书签链接网页

1．试着利用框架制作“动画欣赏”网页。

2．把“应用技巧”网页改为框架网页结构。