第 3 章 FrontPage 2000 网页制作
FrontPage 2000 是美国微软公司与 Office 2000 办公系列软件同时推出的一个可以让一般 用户轻松制作网页的软件。它支持所见即所得的编辑方式，不需要用户掌握深奥的网页制作知 识，甚至不需要了解 HTML 的基本语法。使用 FrontPage 可以编辑 Internet 上以 HTML 格式保 存的所有文件（网页），可以处理图像、动画等多媒体信息，并且可以在网页中插入各种插件 （包括 Java、ActiveX、JavaScript），在网页中产生各种效果。FrontPage 2000 还是一个站点管 理工具，可以利用它以不同方式查看各个网页之间的关系，调整站点的组织结构，最终实现在 Internet 上发布信息。 学习目标 掌握 FrontPage 运行方式和网页制作的基本知识。 掌握图像的编辑方法。 掌握表格的设置。 掌握组件和表单的使用方法。 掌握各种超链接的创建与区别。 掌握网页属性和框架属性的设置。基
本 操 作
3.1 FrontPage 2000 基础
3.1.1 FrontPage 2000 的启动与退出 1．FrontPage 2000 的启动 启动 FrontPage 2000 的常用方法有如下两种： （1）通过 Windows 任务栏中的“开始”菜单启动，操作为： 单击“开始”→“所有程序”→Microsoft FrontPage 命令，如图 3-1 所示。 （2）通过双击桌面上的 FrontPage 快捷方式图标。 2．FrontPage 2000 的退出 退出 FrontPage 2000 的常用方法有如下 3 种： （1）单击 FrontPage 2000 窗口右上角的“关闭”按钮 。 （2）单击“文件”→“退出”命令，如图 3-2 所示。图 3-1 FrontPage 的启动 （3）单击 FrontPage 2000 窗口标题栏中的图标 ，从弹出的菜单中选择“关闭”命令（或 直接双击图标 ），如图 3-3 所示。 图 3-2 单击“文件”→“退出”命令退出 图 3-3 从弹出的菜单中单击“关闭”命令退出 3.1.2 FrontPage 2000 的窗口界面 启动 FrontPage 2000 应用程序之后，就可以看到其工作窗口，如图 3-4 所示。下面对窗口 的组成部分进行说明。 1．标题栏
标题栏左边显示的是 FrontPage 2000 的图标 和 Microsoft FrontPage 文字，标题栏的右边 有一组按钮 ，单击这组按钮可分别对窗口进行最小化 、最大化 和关闭 操作。单 击“最大化”按钮后按钮组变为 ，即“最大化”按钮 变为“还原”按钮 。
图 3-4 FrontPage 2000 的窗口 2．菜单栏 菜单栏中包含 10 个菜单：文件、编辑、查看、插入、格式、工具、表格、框架、窗口和 帮助，每个菜单都有一组自己的命令。 3．工具栏 默认的工具栏包括“常用”工具栏和“格式”工具栏，在必要的情况下可以在工具栏处 右击显示或隐藏工具栏。 4．视图栏 FrontPage 2000 共提供了 6 种视图：网页视图、文件夹视图、报表视图、导航视图、超链 接视图和任务视图。这些视图为用户创建网页和站点提供了极大的方便。 5．编辑区 编辑区是创建网页的工作区，大部分的编辑工作都是在编辑区进行的。 6．网页查看方式 FrontPage 2000 的查看方式有 3 种：普通方式、HTML 方式和预览方式。 （1）普通方式。普通方式是 FrontPage 2000 启动时的默认方式。制作网页时大多数情况 都是在这种方式下进行编辑操作。 （2）HTML 方式。一个网页实际上就是一个 HTML 文件，它以<html>开始、以</html> 结束，包括<head>和<body>两部分。在普通方式下编辑网页时，FrontPage 2000 根据用户的操 作自动生成合适的 HTML 文件。 （3）预览方式。在编辑网页时，若要随时查看网页在浏览器中的实际效果，可以使用预 览方式。其与普通方式的最主要区别是：网页的一些特殊效果如动态 HTML 效果只有在预览 状态栏 网页查看方式 标题栏 编辑区 视图栏 工具栏 菜单栏
方式下才可以看到。 提示：在预览方式下是不能进行编辑操作的，要修改或编辑必须回到普通方式。 3.1.3 创建网页和站点 1．创建网页 在 FrontPage 2000 启动后，自动创建一个名为 new_page_1.htm 的空白网页。 （1）创建常规网页。要创建一个空白网页，可以单击“常用”工具栏中的“新建网页” 按钮 。创建其他常规网页的步骤如下： 1）单击“文件”→“新建”→“网页”命令，如图 3-5 所示，弹出“新建”对话框，如 图 3-6 所示。 图 3-5 新建网页菜单操作 图 3-6 “新建”对话框 2）单击“常规”选项卡，然后从列表框中选择网页类型，此时会在“预览”窗格中出现 此类网页的样式图，如图 3-6 所示，单击“确定”按钮即可生成所需要的页面。生成的常规网 页如图 3-7 所示。 图 3-7 两栏交错正文的常规网页 （2）创建框架网页。大家也注意到了之前所创建的网页只有一个页面，这在实际的网页
制作中是完全不够的，所以还必须使一个网页中含有多个页面。这时可以通过 FrontPage 2000 中的创建框架网页得到，步骤如下： 1）单击“文件”→“新建”→“网页”命令，弹出“新建”对话框。 2）单击“框架网页”选项卡，然后从列表框中选择框架网页类型，此时会在“预览”窗 格中出现此类框架网页的样式图，如图 3-8 所示，单击“确定”按钮即可生成所需要的页面。 图 3-8 “新建”对话框的“框架网页”选项卡 生成的框架网页如图 3-9 所示，可以看到此时出现 3 个页面，同时提示是“设置初始页面” 还是“新建网页”。单击框架中的“设置初始网页”按钮，在弹出的对话框中单击相应的页面， 会在对话框下部的 URL 组合框中出现具体的地址，如图 3-10 所示，单击“确定”按钮。当然 如果想自己创建新的页面，则直接单击框架中的“新建网页”按钮即可。 图 3-9 横幅和目录的框架网页 2．创建站点 网页只是一些页面，没有图像、声音和视频等信息，因此无法在 Internet 中实现浏览，所 以必须引入一个新的概念：站点。 站点是 WWW 上的若干相关网页以及与这些网页相关的图像、声音和视频等的集合。站 点包含了一个或多个网页，网页之间用超链接联系在一起。
图 3-10 设置初始页面对话框 要想制作一个好的网页必须先创建一个站点作为制作网页的根本，具体步骤如下： （1）单击“文件”→“新建”→“站点”命令，如图 3-11 所示，弹出“新建”站点对话 框，如图 3-12 所示。 图 3-11 新建站点菜单操作 图 3-12 “新建”站点对话框
（2）在“指定新站点的位置”组合框中输入新站点的位置或选择使用过的站点。 （3）在左侧列框表中选择新站点的模板或向导。选中不同的模板或向导时，对话框中会 显示相应的关于该模板或向导的说明。最后单击“确定”按钮。这时就会生成一个含有 Index.htm （主页）的站点，现在就可以在编辑区中对主页进行编辑了，同时还可以在“文件夹列表”窗 格中右击添加新页面，如图 3-13 所示。 图 3-13 生成的站点 3.1.4 打开与保存网页和站点 1．打开网页 此操作与 Word 和 Excel 的打开类似，具体操作步骤如下： （1）单击“文件”→“打开”命令（或者单击“常用”工具栏中的“打开”按钮 ）， 弹出“打开”对话框。 （2）在“查找范围”下拉列表框中选择要打开的文件所在的位置，在“文件类型”下 拉列表框中选择“Web 页”，然后单击要打开的网页，最后单击“打开”按钮。 2．保存网页 单个网页的保存有直接保存和另存为两种，和 Word、Excel 中的保存一样，重点是框架网 页的保存。下面以新建一个横幅和目录的框架网页（上框架、右框架是通过“设置初始网页” 按钮得到的并做了改动，左框架通过“新建网页“按钮得到）为例讲解框架网页的保存。具体 操作步骤如下： （1）单击“文件”→“另存为”命令，在弹出的对话框中先选择好存放路径。 （2）此时请注意“保存”对话框，要根据对话框右侧的提示确定当前保存的是网页的哪 一部分还是整个网页。如图 3-14 所示，此时蓝色阴影覆盖住整个网页，所以此时是保存整个 网页，因此在“文件名”文本框中输入整个网页的名称，如 Index。 （3）在图 3-15 中，蓝色阴影只覆盖住了左框架，所以在“文件名”文本框中输入左框架 的名称，如 left。 （4）单击“保存”按钮，会提示是否保存对上框架的更改和是否保存对右框架的更改，单 击“是”按钮。
图 3-14 网页保存对话框 1 图 3-15 网页保存对话框 2 提示：关于框架网页的保存大家要记住一点，含有 n 个框架的网页在保存完毕后，会有 n+1 个页面，比如说上面的，因为有 3 个框架，如果都做了改动则需要保存 4 次，有 4 个页面。 3．打开站点 （1）单击“文件”→“打开站点”命令，弹出“打开站点”对话框，如图 3-16 所示。 图 3-16 “打开站点”对话框 （2）在“查找范围”下拉列表框中选择要打开的文件所在的位置，然后单击“打开” 按钮。
4．保存站点 因为是在站点的基础上对网页进行的操作，所以只需要将所做的网页保存好，系统会提 示将用到的制作内容和素材保存在站点中。
3.2 编辑文本和图像
3.2.1 编辑文本 1．文本输入 在视图模式为网页视图、查看方式为普通查看方式情况下，只要在网页中确定文本的输 入位置即可在光标提示符后直接输入文本。 2．文本的修饰 通过“字体”对话框和“格式”工具栏可以对文本的字体、字号、颜色、效果等属性 进行修饰，具体操作和 Word 中关于字体的操作类似。但是在修饰文本时，应注意以下几 个原则： 可读性至关重要。网页内同时使用两种或者三种字体后，将使它看上去很凌乱。在应 用混合字体时，在同一段落或一句文本内应该使用相同的字体。 保留网页内超链接的下划线。 网页的标题一般采用黑体。 在使用颜色突出所选文本时，要保证它不与背景色冲突。 3.2.2 编辑图像 1．插入图像 图像的插入和 Word 中的操作一样，图像的来源可以是剪贴画中的也可以来自计算机的某 个文件夹。 在 FrontPage 中插入来自文件的图片的操作步骤如下： （1）选择“插入”→“图片”→“来自文件”命令，弹出“插入图片”对话框，如图 3-17 所示。 图 3-17 插入来自文件的图片（2）在“查找范围”下拉列表框中选择要插入的图片所在的位置，在“文件类型”下拉 列表框中选择“所有图片”，然后单击所要插入的图片，单击“插入”按钮。 2．编辑图片 单击插入到网页中的图片时，在它周围将出现 8 个黑色标记，同时在 FrontPage 2000 窗口 内出现“图片”工具栏，如图 3-18 所示。使用“图片”工具栏可以对图像进行透明背景设置、 旋转图像、剪切图像、添加文本、创建热点等操作。下面介绍一些常见的图像编辑操作。 图 3-18 “图片”工具栏 （1）剪裁图像。单击“图片”工具栏中的“剪裁”按钮，即可在所选图像内出现剪切框。 用鼠标拖动剪切框的边界确定剪切框的大小和位置，即可完成剪切操作。 （2）设置背景透明。在网页内插入图像之后，由于图像背景与网页背景不一样，使图像 看起来像网页上的一块“补丁”。单击“图片”工具栏中的“透明设置”按钮，将鼠标移动到 插入图像的背景处单击，即可将图像的背景设置为透明，这样图像就和网页融为一体了，如图 3-19 所示。 图 3-19 设置透明背景示意图 提示：单击“透明设置”按钮之后，单击图像内的任意一种颜色都将被设置为透明，但 图像内只能有一种颜色处于透明状态。 （3）添加文本。为了说明图像在网页中的作用与意 义，可以在图像内添加一些说明性的文字，给网络浏览者 一个明确的提示，如图 3-20 所示。操作步骤如下： 1）在网页中选择准备添加文本的图像。 2）单击“图片”工具栏中的“文本”按钮，在出现的 文本框中输入所需的文字信息。 3）在图像外的网页编辑区中单击。 （4）旋转。单击“图片”工具栏中的“向左旋转”按钮，可将所选的图像向左旋转 90°。 同样，单击“图片”工具栏中的“向右旋转”按钮，可将所选的图像向右旋转 90°。如果需要 旋转任意角度，则必须使用专用的图像编辑器实现。
3.3 表格的设置
表格是由表格行、列组成的，它的最小空间是单元格，具有结构严谨、效果直观、信息 图 3-20 为图像添加文字量大等特点。FrontPage 2000 具有强大的表格功能，可用来显示数据、文本和图片等。对于那 些对灵活性要求比较高的网页制作人员来说，表格工具是个不错的选择。 3.3.1 创建表格 在 FrontPage 2000 中，可以使用各种形式来建立表格。创建新的表格后可对表格进行填充 单元格信息、将已有的文本转换为表格、绘制表格、嵌套表格、将已有的数据源创建成表格等 操作。创建空表格的常用方法有如下两种： （1）使用“常用”工具栏中的“插入表格”按钮 。在这种方式下，不能设置表格的 列宽，只能在表格建立后再设置，操作步骤如下： 1）将光标放到需要插入表格的位置。 2）单击“常用”工具栏中的“插入表格”按钮 ，此时出现示意网格，如图 3-21 所示。 图 3-21 利用工具栏插入表格 3）向下向右拖动鼠标，直至拖动到所需要的行数和列数后松开鼠标。 若在选定过程中要取消选定的行和列，则将鼠标移动到示意网格外单击。此时生成的表 格的行高和列宽以及表格的格式都是采用 FrontPage 2000 的默认值。 （2）使用“插入表格”命令创建表格。使用这种方式创建表格时用户可以设置表格的行 数和列数，同时还可以进行表格的设置，操作步骤如下： 1）将光标放到需要插入表格的位置。 2）单击“表格”→“插入”→“表格”命令，弹出“插入表格”对话框，如图 3-22 所示。 图 3-22 “插入表格”对话框 3）在其中设置表格的属性。 大小：包括表格的行数和列数。 对齐方式：表格在网页中的对齐方式，包括默认、左对齐、右对齐、水平居中和两端 对齐。 指定宽度：表格边框宽度，单位为像素或占 Web 浏览器的百分比。
边框粗细：用来确定表格边框的粗细。在具体的网页制作中，经常会将其设置为 0， 这样在普通方式下会看到表格，而在浏览器中就看不到表格。这是个不错的应用。 单元格边距：指定单元格的内容和内边框之间的距离，单位为像素。单独的单元格不 能设置单元格边距。默认的单元格边距为 1。 单元格间距：指定单元格之间的间距，单位为像素。 3.3.2 编辑表格 1．表格或单元格的选定 将光标移动到表格的某个单元格内，选择“表格”→“选定”→“表格”、“行”、“表列” 或“单元格”命令即可分别选中整个表格、单元格所在的行、单元格所在的列、单元格。 选择表格和单元格时要重点掌握怎样使用鼠标进行选择。鼠标选定的方法如下： （1）选定整个表格：将光标移到表格的左边，当鼠标指针变为指向右上方的箭头 时双 击即可选定整个表格。 提示：将光标放在表格内，然后拖动鼠标至占满整个表格，只是选定了表格里面的内容， 并没有选定表格，区别如图 3-23 和图 3-24 所示。 图 3-23 选定整个表格 图 3-24 选定了表格的所有内容 由上面两张图可以看出，选定表格时表格的边框也被黑色阴影覆盖，而选定表格内容时 边框没有被覆盖。 （2）选定单元格：按住 Alt 键，在要选中的单元格内单击。 （3）选定多个相邻的单元格：在单元格上单击并拖动鼠标。 （4）选定多个不连续的单元格：按住 Alt+Ctrl 键，在要选择的单元格内单击；或者选定 一个单元格后按住 Shift 键，然后单击其他单元格。 （5）选定某一行：将光标移到某一行的左边，当鼠标指针变为黑色小箭头 时单击。 （6）选定某一列：将光标移到某一列的上方，当鼠标指针变为黑色小箭头 时单击。 （7）选定多行或多列：先选定一行（列），然后拖动鼠标移过这些行（列）。 2．修改属性 关于单元格的插入与删除、单元格的合并与拆分，以及给表格加标题在 Word 中已经讲解 过了，在此只讲解与其他软件有区别的表格属性和单元格属性的修改。 （1）表格属性的修改。将光标移动到表格的某个单元格内，选择“表格”→“属性”→ “表格”命令，弹出“表格属性”对话框，如图 3-25 所示。
“表格属性”对话框包含了“插入表格”对话框中的选项，下面只对其他选项进行说明。 设置边框颜色：在“边框”区域中的“颜色”下拉列表框中选择一种颜色。 设置具有三维效果的双色边框：在“边框”区域中的“亮边框”和“暗边框”下拉列 表框中各选择一种颜色。 设置表格背景颜色：在“背景”区域中的“颜色”下拉列表框中选择一种颜色。 设置文本的环绕表格方式：在“布局”区域中的“浮动”下拉列表框中选择，有默认、 左对齐、右对齐 3 种方式。 （2）单元格属性的修改。将光标移动到表格的某个单元格内，选择“表格”→“属性” →“单元格”命令，弹出“单元格属性”对话框，如图 3-26 所示。 图 3-25 “表格属性”对话框 图 3-26 “单元格属性”对话框 此对话框中的很多操作与“表格属性”对话框中的操作一样，因此就只对“布局”区域 中的各项操作进行说明。 对齐方式：包括水平对齐方式和垂直对齐方式，它们是指单元格中的内容在水平方向 和垂直方向的对齐方式。其中默认值是保持原样对齐方式。 跨距：包括行跨距和列跨距，是指要增加的单元格的行数和列数。 标题单元格：是指选定此复选框则标记单元格为表格标题。 不换行：是指选定此复选框则避免 Web 浏览器将单元格内的文本换行。
3.4 网页特效
网页设计中有许多技巧，可以实现一些特殊的效果为网页增色。 3.4.1 组件的使用 在 FrontPage 2000 中可以加入各种组件，这里主要介绍字幕、悬停按钮和横幅广告管理器 的使用。 1．字幕 选择“插入”→“组件”→“字幕”命令，弹出“字幕属性”对话框，如图 3-27 所示。 文本的输入：在“文本”文本框中输入要显示的文本，也可以在网页中先输入文本，然后用鼠标选中，再选择“组件”→“字幕”命令。 图 3-27 “字幕属性”对话框 文本的修饰：在此对话框中只有文本背景的修饰。要对字幕文本进行修饰必须在字幕生 成后单击字幕文字即选中文字，然后利用“常用”工具栏进行设置。 改变字幕的大小：默认情况下生成的字幕都是占满一行，这对制作的网页在布局的美观 性上有很大的影响，所以在生成字幕后需要将鼠标移到字幕的边角拖动鼠标来改变字幕的大 小。当然也可以在“字幕属性”对话框的“大小”区域中设置，但那样设置不能一次性达到符 合网页布局的要求，比较麻烦。 所有都设置完毕后，可以在预览方式下观看效果。 2．悬停按钮 悬停按钮是指当鼠标指向按钮时可以变为另外一种颜色，并且单击时可以链接到指定的 位置。选择“插入”→“组件”→“悬停按钮”命令，弹出“悬停按钮属性”对话框，如图 3-28 所示。 图 3-28 “悬停按钮属性”对话框 可以在“按钮文本”文本框中输入按钮上将要显示的文字，同时单击后面的“字体”按 钮来选择所需要的字体。 单击“浏览”按钮在弹出的对话框中可以选择此按钮要链接的对象，当然也可以在“链 接到”文本框中直接输入地址。 “按钮颜色”是指鼠标没有指向此按钮时的颜色，相应的“效果颜色”是指鼠标指向此 按钮时的颜色。 “效果”下拉列表框中有：填充颜色、颜色对比、发光、反色发光、微微发光、凸出、 凹进。
其实“悬停按钮”除了设置文本变换外，还可以设置悬停图片，即当鼠标指向一幅图片 时图片会立刻变成另一幅图片，移开后又变成原图。操作步骤如下： （1）将光标移到需要插入图片的位置。 （2）打开“悬停按钮属性”对话框，单击“自定义”按钮，弹出“自定义”对话框，如 图 3-29 所示。 （3）在“自定义图片”区域中的“按钮”处选择未按时的图片，在“自定义图片”区域 中的“悬停时”处选择悬停时的图片。 提示：做出悬停按钮后，有时在预览方式下也看不到效果，此时要将网页保存一下，在 Web 浏览器下即可看到效果了。 3．横幅广告管理器 网页中的广告可以实现不同图片间的自动切换，以引起浏览者的注意，在单击图片时可 以链接到广告商的网页上。 选择“插入”→“组件”→“横幅广告管理器”命令，弹出“横幅广告管理器属性”对 话框，如图 3-30 所示。 图 3-29 “自定义”对话框 图 3-30 “横幅广告管理器属性”对话框 “宽度”和“高度”用于设置横幅广告管理器的大小。 “过渡效果”为图片自动切换时的切换方式，有：无、水平遮蔽、垂直遮蔽、分解、盒 状分解、盒状收缩。 单击“添加”按钮会出现新的对话框，在其中选择图片，插入一幅后继续单击“添加” 按钮即可插入多幅图片。若要删除图片，则选中图片并单击“删除”按钮。当然，选中图片后 单击“上移”、“下移”按钮可实现原来图片的上移或下移。 3.4.2 表单的使用 表单能够方便地收集各种所需的信息，是浏览者与网页进行交互的最佳方法之一。表单 中通常包括单选按钮、复选框、单行文本框、滚动文本框、下拉列表框和按钮等多种对象，统 称为表单的字段。浏览者通过选择字段或在其中输入信息即可将数据传送给表单处理程序。 下面以插入滚动文本框为例简单介绍一下表单的使用。 滚动文本框可以实现浏览者将他们的意见等信息通过文本框的输入然后单击“提交”按 钮传送给信息接收者的功能。操作步骤如下：
（1）将光标移到需要插入表单的位置。 （2）选择“插入”→“表单”→“滚动文本框”命令，即可将表单插入到网页中。 提示：可以单击选中文本框，然后拖动文本框改变其大小，还可以在文本框的后面插入 “回车”使按钮定位到文本框的下面。 （3）选定“提交”按钮并右击，在弹出的快捷菜单中选择“表单域属性”选项，弹出“按 钮属性”对话框，在“值/标签”文本框中可以输入文字，如图 3-31 所示。 （4）在表单的任意位置右击，在弹出的快捷菜单中选择“表单属性”选项，在弹出的“表 单属性”对话框中输入文件名称或电子邮件地址，如图 3-32 所示。 图 3-31 “按钮属性”对话框 图 3-32 “表单属性”对话框 3.4.3 动态 HTML 效果 对于一个成功的网页，动画效果是不可缺少的，因为动画可以引起浏览者的注意。插入 动画最简单的方法就是利用“格式”→“动态 HTML 效果”命令。 以网页加载时文字产生一种飞入效果为例介绍设置对象的动态 HTML 效果的方法。操 作步骤如下： （1）选中要使用效果的文字。 （2）选择“格式”→“动态 HTML 效果”命令，弹出“DHTML 效果”工具栏。 （3）在“开启”下拉列表框中选择“网页加载”事件，在“应用”下拉列表框中选择“螺 旋”动画效果，如图 3-33 所示。 图 3-33 设置文字的动态 HTML 效果
3.4.4 网页过渡和主题 1．网页过渡 在不同页面相互切换时，可以使用网页过渡实现页面间的动态切换以达到引起浏览者注 意的效果。操作步骤如下： （1）打开需要设置效果的页面。 （2）选择“格式”→“网页过渡”命令，弹出“网 页过渡”对话框，如图 3-34 所示。 （3）在“事件”下拉列表框中有进入网页、离开网 页、进入站点和离开站点 4 种事件，选择其中一种，然 后在“周期”文本框中输入时间，最后在“过渡效果” 列表框中选择一种效果，单击“确定”按钮。 2．主题 在设置页面时为了使页面看起来效果更好，经常会用到主题。选择“格式”→“主题” 命令，弹出“主题”对话框，有彩条、粗条型、导航图等多种主题供选择。当选择好一种主题 后即可根据需要勾选“鲜艳的颜色”、“动态图形”、“背景图片”和“应用 CSS”4 种效果中的 一种或多种，如图 3-35 所示。 图 3-35 “主题”对话框
3.5 超链接
3.5.1 超链接的概念 我们知道整个 WWW 技术的核心之一就是超链接，它是 Web 和其他媒体之间最大的区别， 只要单击站点内的超链接它就会自动跳转到链接目标处，而不论这个目标是在本地还是在 Internet 的其他计算机上。 图 3-34 “网页过渡”对话框超链接是网页间的一种联系，由链源和链宿两部分组成。链源就是链接的起始点，可以 是一个字、一个词、一段文字、一幅图片等。链宿是指链接的目的端，可以是一个网页、一幅 图片、一个电子邮件地址、一个文件或一个程序。 值得注意的是，在网页中一般超链接的文字都是蓝色的，文字下面带有下划线，当鼠标 移过时鼠标指针变为 ，单击就可以转到超链接所指向的目标。访问过的超链接变为暗红色。 若是将图片作为超链接，图片的颜色不会发生变化，当鼠标移到图片上时鼠标指针变为 。 一般来说，网页的层次不宜过多，网页之间的超链接应尽量是双向的，为用户留一条回 去的路。 3.5.2 创建超链接 超链接的链源可以是文本，也可以是图片。 1．建立文本超链接 （1）选中需要实现超链接的文本并右击，在弹出的快捷菜单中选择“超链接”命令，弹 出“创建超链接”对话框，如图 3-36 所示。 图 3-36 “创建超链接”对话框 （2）如果链接目标在本地，则在“搜索”下拉列表框中选择链接目标所存放的位置，然 后单击选中，在 URL 组合框中会出现相应的地址，也可以单击 图标自己查找。如果是链接 到 Internet 上的内容，则在 URL 组合框中直接输入完整的地址即可。 提示：链接的目标最终是以什么形式出现与“目标框架”的设置有关。默认情况下是“网 页默认值”，要改变出现形式时可以单击 按钮。具体的形式有：默认值、相同框架、整页、 新建窗口、父框架，在框架网页中还会有 main、banner、contents 等。 2．建立图片超链接 图片的超链接方式与文本超链接一样，只是在某些情况下只需要图片的某一部分实现超 链接或者要求图片的不同部分链接到不同的目标，这就需要先在图片上添加热点，然后就可以 实现文本超链接中所讲的内容了。 添加热点很简单，在编辑图像中提到过。单击图片就会出现“图片”工具栏，有长方形 热点、圆形热点和多边形热点，选择一种，在图片的某处拖动鼠标，选好一块区域后松开鼠标， 会自动弹出“创建超链接”对话框，后面的操作同上。
3.5.3 书签链接 当一个网页内容较多需要多屏显示时，若要快速地定位到页面的某一位置，可以采用“书 签链接”的方法来实现。这种方法是在同一页面的不同点之间 进行链接，因此首先要定位书签的位置，然后建立超链接。 定义书签的方法是，将光标移到要定位书签的位置，然后 选择“插入”→“书签”命令，弹出“书签”对话框，在“书 签名称”文本框中输入书签的名称，如图 3-37 所示，单击“确 定”按钮。 书签定义完成后，将光标移动到要建立超链接的位置并右 击，在弹出的快捷菜单中选择“超链接”选项，弹出“创建超 链接”对话框，在“书签”下拉列表框中选择需要的书签，单 击“确定”按钮。 提示：在书签定义完毕后，有时在选择书签时找不到书签，原因是所选的页面不对，也 就是说 URL 不对。此种情况出现在从一个页面书签链接到另外一个页面时。 3.5.4 导航栏 在大多数 Web 站点内都包含着形式各样的导航栏，它们通常是由一组按钮或文本链接组 成的，代表着网页之间的链接关系，导航栏就是在网页内实现这种链接关系的手段。导航栏一 般放置在网页的顶端或左侧，为浏览者跟踪、访问站点内的网页提供方便。 加入导航栏的操作步骤如下： （1）在网页内确定插入导航栏的位置。 （2）选择“插入”→“导航栏”命令，弹出“导航栏属性”对话框，如图 3-38 所示。 图 3-38 “导航栏属性”对话框 （3）为了确定当前网页导航栏的结构布局，可在“父层”等 6 个单选按钮中选择一个， 然后还可以选择“其他网页”区域中的“主页”和“父页”复选框，最后在“方向和外观”区 域中确定导航栏的方向和显示方式。 图 3-37 “书签”对话框
3.6 设置网页属性和框架属性
在 FrontPage 中除了利用菜单栏和工具栏进行网页的设计外，还经常涉及到网页属性和框 架属性的设置。这两个都是在普通方式下右击时出现在快捷菜单中。 1．设置网页属性 右击，在弹出的快捷菜单中选择“网页属性”选项，弹出“网页属性”对话框，如图 3-39 所示。 在“常规”选项卡中可以设置网页的标题，通过“浏览”按钮可以设定背景音乐，然后 在“循环次数”数值框中设定循环的次数或选择“不限次数”复选框。 在“背景”选项卡中选择“背景图片”复选框后可以通过“浏览”按钮选择背景图片， 或者在“颜色”区域中设置背景和文本颜色，如图 3-40 所示。 图 3-39 “网页属性”对话框的“常规”选项卡 图 3-40 “网页属性”对话框的“背景”选项卡 提示：注意背景音乐和背景图片这两个设置的位置是不同的，一个在“常规”选项卡中， 另一个在“背景”选项卡中。同时，插入图片和插入背景图片所采用的方法也是不一样的。 2．设置框架属性 右击，在弹出的快捷菜单中选择“框架属性”选项，弹出“框架属性”对话框，如图 3-41 所示。 名称：可修改框架网页的名称。 初始网页：可将原有的页面修改为你想要的页面。 “框架大小”和“边距”区域：用于设计框架。 选项：一般都选择“可在浏览器中调整大小”复选项以便浏览者阅览。 显示滚动条：有从不、在需要时和始终 3 种情况。 框架网页：单击该按钮后会弹出一个新的对话框，如图 3-42 所示。虽然也是“网页 属性”对话框，但和图 3-39 所示有很大区别。首先，这个图只有在网页是框架网页 时打开“框架属性”对话框后才会出现；其次，若要为整个框架设置标题，必须在此 对话框中进行，在图 3-39 所示的对话框中只能为一个当前框架设置标题；最后，此 对话框还多了一个“框架”选项卡，通过它可以修改框架间距。图 3-41 “框架属性”对话框 图 3-42 框架“网页属性”对话框
考
点 强 化
利用 FrontPage 2000 制作网页是江苏省高等学校非计算机专业学生计算机基础知识和应 用能力一级考试中的重要内容。根据对历年的一级考试命题内容和规则的总结，列出了 FrontPage 2000 部分相应的考点，然后将这些考点融入到试题中进行强化。 考点提要 文字的插入、删除以及字体的设置。 图片、声音、视频剪辑等对象的插入及其属性设置。 表格的处理。 组件和表单的使用方法。 超链接的创建以及书签设置。 框架网页的建立、初始页面的设置与更改。 框架网页的调整及属性设置。 网页属性的设置。 强化操作 在做下面的操作之前，请在 D 盘根目录下创建一个文件夹，名称为“考生 FrontPage”。 下面操作所应用到的文件均在附赠资料的“FrontPage 强化操作”文件夹中。每一个强化操作 使用同一个文件夹中的素材。 强化操作 1：关于框架的操作 要求 1：打开站点 Web1，新建一个横幅和目录的框架网页，上框架、右框架初始网页分 别设置为 Y5-02e.htm、Y5-02a.htm，左框架新建网页。 步骤： （1）打开 FrontPage 2000，单击“文件”→“打开站点”命令，弹出“打开站点”对话 框，在“查找范围”下拉列表框中选择要打开的文件所在的位置，最后单击“打开”按钮。 提示：考试时文件所在的位置都是指 D 盘“考生文件夹”中的“Web 文件夹”。我们操作时一定要选择 D 盘下的“考生文件夹”，然后单击“Web 文件夹”，最后单击“打开”按钮。 （2）单击“文件”→“新建”→“网页”命令，弹出“新建”对话框。 （3）单击“框架网页”选项卡，从列表框中选择“横幅和目录”，单击“确定”按钮即 可生成所需要的页面，如图 3-43 所示。 图 3-43 生成的框架网页示意图 （4）分别单击上框架和右框架中的“设置初始网页”按钮，在弹出的“创建超链接”对 话框中单击相应的页面，此时会在对话框下侧的 URL 组合框中出现具体的地址，如图 3-44 所 示，单击“确定”按钮。 （5）单击右框架中的“新建网页”按钮。 要求 2：设置上框架高度为 100 像素、边距宽度和高度均为 0，可在浏览器中调整大小， 从不显示滚动条。 步骤： （1）将光标移到上框架并右击，在弹出的快捷菜单中选择“框架属性”选项，如图 3-45 所示。 图 3-44 设置初始页面对话框 图 3-45 选择“框架属性”选项
（2）在弹出的对话框中进行相应设置，设置情况如图 3-46 所示。 要求 3：将上框架的初始网页更换为 top.htm。 步骤：打开“框架属性”对话框，单击“浏览”按钮，在弹出的对话框中选择 top.htm， 单击“确定”按钮。 要求 4：将整个网页的标题设置为“希望”，上边距和左边距设置为 4，框架间距为 4，并 要求显示框架。 步骤： （1）打开“框架属性”对话框，单击“框架网页”按钮，弹出“网页属性”对话框，如 图 3-47 所示。 图 3-46 “框架属性”对话框 图 3-47 框架“网页属性”对话框 （2）在“常规”选项卡的“标题”文本框中输入网页名称“希望”，在“边距”选项卡 中设置上边距和左边距，在“框架”选项卡中设置框架间距。 要求 5：将制作好的框架网页以文件名 Index.htm 保存，左框架网页以文件名 Lpage.htm 保存，文件均存放在“考生文件夹”下的 Web1 站点中。 步骤： （1）单击“文件”→“另存为”命令，在弹出的对话框中先选择好存放路径（在考试时， 路径都是在 D 盘“考生文件夹”的“Web 文件夹”中）。 （2）请注意保存对话框，要根据对话框右侧的提示确定到底当前保存的是网页的哪一部 分还是整个网页。如图 3-48 所示，此时蓝色阴影覆盖住整个网页框架，所以此时是保存整个 网页，因此在“文件名”文本框中输入 Index；在图 3-49 中，蓝色阴影只覆盖住了左框架，所 以在“文件名”文本框中输入 Lpage。 强化操作 2：关于表格的操作 要求 1：新建一个空白的页面，插入 4 行 1 列、边框粗细为 1 的表格，并在表格单元格中 依次输入文字“实时扫描”、“实时扫描统计”、“自定义扫描”、“演示文稿”，设置单元格文字 水平居中。 步骤： （1）打开 FrontPage，新建一个空白的页面，选择“表格”→“插入”命令。 （2）在弹出的对话框中进行相应的设置，单击“确定”按钮，如图 3-50 所示。 （3）在生成的表格的每一行分别单击，依次输入对应的文字。
图 3-48 “另存为”对话框 1 图 3-49 “另存为”对话框 2 要求 2：在第一行“实时扫描”前插入一行，输入“扫描系统”，合并“自定义扫描”和 “演示文稿”所在的两行。 步骤： （1）将鼠标放在第一行并右击，在弹出的快捷菜单中选择“插入行”命令。 （2）单击刚生成的第一行，输入文字“扫描系统”。 （3）选中最后两行并右击，在弹出的快捷菜单中选择“合并单元格行”命令。 要求 3：表格的宽度和高度分别设置为 300 像素和 100 像素，表格和文字水平居中，边框 粗细为 4，亮边框颜色为浅绿色，暗边框颜色为黑色。 步骤： （1）将光标放在表格左侧，双击选中整个表格，右击并在弹出的快捷菜单中选择“表格 属性”命令，或者选择“表格”→“属性”→“表格属性”命令。 （2）在弹出的对话框中进行相应设置，如图 3-51 所示。 图 3-50 “插入表格”对话框 图 3-51 “表格属性”对话框 （3）将光标放在表格里拖动鼠标选中表格里的所有内容，单击“常用”工具栏中的“水 平居中”按钮。 要求 4：将第一行的行跨距和列跨距都设置为 5，并设置其为标题单元格。 步骤： （1）将光标放在第一行内并右击，在弹出的快捷菜单中选择“单元格属性”命令；或者 选择“表格”→“属性”→“单元格属性”命令。 （2）在弹出的对话框中进行相应设置，如图 3-52 所示。
强化操作 3：关于组件的使用 要求 1：新建一个标题的框架网页，在上框架新建网页，插入字幕“组件的演示操作”，方 向为左，延迟速度为 60，表现方式为“交替”，字体颜色为红色，大小为 36 磅。 步骤： （1）打开 FrontPage，新建一个标题的框架网页，在上框架中单击“设置初始网页”按钮。 （2）将光标放在上框架中，选择“插入”→“组件”→“字幕”命令，弹出“字幕属性” 对话框，在“文本”文本框中输入相应的文字，方向选择“左”，速度延迟为 60，表现方式为 “交替”，如图 3-53 所示，单击“确定”按钮。 图 3-52 “单元格属性”对话框 图 3-53 “字幕属性”对话框 （3）单击生成的字幕，在“常用”工具栏中设置字体的大小和颜色。 要求 2：在下框架中单击“新建网页”按钮，然后在下框架网页上部添加悬停按钮，按钮 文字为“百度搜索”，宽度为 150，链接到http://www.baidu.com，目标框架为“新建窗口”。 步骤： （1）在下框架中单击“新建网页”按钮。 （2）将光标放在上框架中，选择“插入”→“组件”→“悬停按钮”命令，在弹出的“悬 停按钮属性”对话框中进行相应设置，如图 3-54 所示。 图 3-54 悬停按钮属性对话框 （3）单击“浏览”按钮，弹出“选择悬停按钮超链接”对话框。 （4）在“目标框架”中选择“新建窗口”，如图 3-55 所示。 要求 3：在下框架中的悬停按钮下面插入横幅广告管理器，间隔 1 秒依次显示 2_1.jpg、 2_2.jpg、2_3.jpg、2_4.jpg。
图 3-55 “悬停按钮超链接”对话框 步骤： （1）将光标放在悬停按钮的后面，插入“回车”。 （2）将光标放在下框架中，选择“插入”→“组件”→“横幅广告管理器”命令，在弹 出的“横幅广告管理器属性”对话框中进行相应的设置，如图 3-56 所示。 图 3-56 “横幅广告管理器属性”对话框 强化操作 4：表单、动态 HTML 效果和网页过渡 要求 1：打开站点 Web3，编辑 Index.htm 文件，在左框架的适当位置插入单选按钮， 并输入“不喜欢”。 步骤： （1）打开 FrontPage 2000，单击“文件”→“打开站点”命令，在弹出的“打开站点” 对话框的“查找范围”下拉列表框中选择要打开的文件所在的位置，最后单击“打开”按钮。 （2）双击“文件夹列表”中的 Index.htm 打开 Index.htm 文件，然后将光标放在右框架的 适当位置。 （3）选择“插入”→“表单”→“单选按钮”命令。 （4）此时就生成了单选表单，直接在当前光标所在的位置输入“不喜欢”。 要求 2：为右框架中的第一段文字应用动态 HTML 效果，当网页加载时从底部飞入。 步骤： （1）选中第一段文字。
（2）选择“格式”→“动态 HTML 效果”命令，出现“DHTML 效果”工具栏。 （3）在“开启”下拉列表框中选择“网页加载”事件，在“应用”下拉列表框中选择 “飞入”动画效果，在“方向”下拉列表框中选择“从底部”，如图 3-57 所示。 图 3-57 “DHTML 效果”工具栏 要求 3：为右框架应用主题“蓝图”中的“鲜艳的颜色”和“动态图形”复选项，不应用 “背景图片”和“应用 CSS”。 步骤： （1）将光标放在右框架中。 （2）选择“格式”→“主题”命令，弹出“主题”对话框。 （3）在左侧窗格中选择“蓝图”，在下侧选择“鲜艳的颜色”和“动态图形”复选项， 如图 3-58 所示。 图 3-58 “主题”对话框 要求 4：将右框架的网页过渡效果设置为“向下擦除”，离开网页时发生。 步骤： （1）将光标放在右框架中。 （2）选择“格式”→“网页过渡”命令，弹出“网页过渡”对话框。在“事件”下拉列 表框中选择“离开网页”，在“过渡效果”列表框中选择“向下檫除”，如图 3-59 所示，单击 “确定”按钮。 强化操作 5：超链接 要求 1：打开站点 Web4，编辑 Index.htm 文件，为左框架表格中的每行文字设置超链接， 分别指向右框架中相应内容的段落。
图 3-59 “网页过渡”对话框 步骤： （1）将光标放在右框架第一个标题的前面，选择“插入”→“书签”命令，弹出“书签” 对话框，在“书签名称”文本框中输入书签的名称“1”，如图 3-60 所示。 图 3-60 “书签”对话框 （2）重复操作步骤（1），分别插入书签 2、3、4、5。 （3）选中左框架第一行表格中的文字并右击，在弹出的快捷菜单中选择“超链接”命令。 （4）在弹出的对话框中，选中建立书签的页面即 web21.htm，此时在 URL 是组合框中也 会出现相应的地址，然后在“书签”下拉列表框中选择对应的书签，如图 3-61 所示。 图 3-61 “创建超链接”对话框
（5）重复操作步骤（3）和（4）。 要求 2：给框架表格下方的文字一、二、三分别建立超链接指向 web21.htm、web22.htm、 web23.htm，目标框架为父框架。 步骤： （1）选中左框架中的文字“一”并右击，在弹出的快捷菜单中选择“超链接”命令。 （2）在弹出的对话框中选中页面 web21.htm，然后单击“目标框架”后面的 按钮，在 弹出的新对话框中选择“父框架”，如图 3-62 所示。 图 3-62 超链接的两级对话框 要求 3：为左框架中的图片创建一个圆形热点并创建超链接，指向 web24.htm，目标框架 为“新建窗口”。 步骤： （1）单击图片，在“图片”工具栏中选择“圆形热点”。 （2）按住 Shift 键，在图片上用鼠标拖出一块圆形区域，松开鼠标，弹出“创建超链接” 对话框，如图 3-63 所示。 图 3-63 “创建超链接”对话框
（3）选中页面 web24.htm，然后单击“目标框架”后面的 按钮，在弹出的新对话框中 选择“新建窗口”。 强化操作 6：设置网页属性、插入水平线和日期 要求 1：新建一个带有正文的宽行正文网页，设置背景音乐为 blood.mid，循环次数 5 次， 背景颜色 Hex={FF,00,66}。 步骤： （1）单击“文件”→“新建”→“网页”命令，弹出“新建”对话框。 （2）单击“常规”选项卡，然后从列表框中选择“带有正文的宽行正文”。 （3）右击，在弹出的快捷菜单中选择“网页属性”选项，弹出“网页属性”对话框。 在“常规”选项卡中单击“浏览”按钮找到背景音乐所在的位置，然后在“循环次数”数 值框中设定循环的次数为 5。 （4）在“背景”选项卡中单击“颜色”区域中的“背景”下拉列表框，选择“其他颜色”， 在弹出的对话框中单击“自定义”按钮，在“值”文本框中输入 Hex={FF,00,66}，如图 3-64 所示。 图 3-64 “其他颜色”对话框 要求 2：在标题下面插入水平线，要求高度为 1 像素，右对齐，显示为实线（无阴影）。 步骤： （1）在标题后面插入“回车”。 （2）单击“插入”→“水平线”命令，即会插入一条水平线。 （3）双击水平线会弹出“水平线属性”对话框，如图 3-65 所示，按要求设置相应的 属性。 图 3-65 “水平线属性”对话框
要求 3：在网页的右下角插入自动更新的日期。 步骤： （1）将光标放在网页右下角。 （2）单击“插入”→“日期和时间”命令，弹出“日期时间属性”对话框。 （3）根据要求进行相应的设置，如图 3-66 所示。 图 3-66 “日期时间属性“对话框
综
合 应 用
下面操作所应用到的文件均在附赠资料的“FrontPage 综合应用”文件夹中。 综合应用一 操作要求： （1）打开站点 Web1，在其下创建一个具有“横幅和目录”的框架网页，把 right.htm 设 置为右框架初始网页，上框架和左框架选择“新建网页”。 （2）设置右框架边距宽度为 180 像素，横幅框架高为 100 像素，框架间距为 4，显示边 框，上边距和左边距分别为 3 像素和 5 像素。 （3）设置左框架网页的背景音乐为 music.mid，循环次数为 5 次。 （4）在上框架网页中，插入字幕“网页制作软件的介绍”，方向为“向右”，延迟速度为 40，表现方式为“交替”，字体格式为红色、加粗、24 磅。 （5）在上框架的文字“网页制作软件的介绍”下方插入水平线，要求宽度为 400 像素， 水平居中对齐，显示为实线（无阴影）。 （6）为左框架中的两段文字应用动态 HTML 效果，当网页加载时从底部飞入。 （7）在左框架中插入 4 行 1 列的表格，要求边框粗细为 2，对齐方式为水平居中，宽度 为 100%，高度为 300 像素，单元格边距和间距都为 4，亮边框颜色为绿色，暗边框颜色为 黑色。 （8）在表格单元格中依次插入图片 dw.gif、fl.gif、fw.gif、fp.gif，并创建超链接，分别指 向 dw.htm、fl.htm、fw.htm、fp.htm，目标框架均为右框架（main）。 （9）在表格下方插入一个站点计数器，要求采用第 5 行的，计数器重置为 0。 （10）将制作好的框架网页以文件名 Index.htm 保存，上框架网页以文件名 Top.htm、左 框架网页以文件名 Left.htm 保存，其他修改的网页以原文件名保存，所有网页均存放在 Web1站点中。 参考样张如图 3-67 所示。 图 3-67 参考样张 综合应用二 操作要求： （1）打开站点 Web2，编辑网页“生物多样性.htm”，为标题设置字幕方向为“向左”，延 迟速度为 60，表现方式为“滚动条”，字体颜色为绿色，大小为 36 磅。 （2）在标题下方插入水平线，要求高度为 5 像素，水平对齐、黄色，显示为实线（无 阴影）。 （3）设置背景颜色为自定义颜色：Hex={FF,CC,99}。 （4）在表格的空单元格内插入图片“地球.gif”，在图片上输入文字“保护地球”，并设置 其背景色与网页背景一致。 （5）在图片后面插入“悬停按钮”，按钮文本为“濒危物种”，链接到“濒危物种.htm”， 效果为反色发光，按钮颜色为浅绿色，效果颜色为浅蓝色。 （6）在表格下方插入一个滚动文本框，并在文本框中输入文字“说说您的感想”。 （7）为正文中的每一个章节标题建立书签，然后使标题下面的“第一章”到“第五章” 分别指向对应的书签。 （8）编辑网页“濒危物种.htm”，设置其网页过渡效果为“向下擦除”，进入网页时 发生。 （9）网页应用主题“渐蓝”中的“鲜艳的颜色”和“应用 CSS”，不应用“背景图片” 和“动态图形”。 （10）在图片上方插入自动更新的日期，样式为***年***月***日，字体颜色为红色，大
小为 18 磅，楷体。 （11）在网页的最后输入文字“生物多样性”并为其建立超链接，指向“生物多样 性.htm”。 （12）保存所有修改的网页，均存放在 Web2 站点中。 参考样张如图 3-68 所示。 图 3-68 参考样张
