第 4章 图像、表格与框架本章要点：
图像的特点与操作
表格的创建,编辑和属性设置
表格的属性设置
框架网页的使用
4.1 使用图像改善网页效果
4.1.1 图像格式简介
1,JPG格式 JPG是利用 JPEG方法压缩的图像格式，它也是浏览器所广泛支持的一种格式。
2,GIF格式 GIF（ Graphics Interchange Format）是
,图形互换格式,的简称，它是专为联机图形设计的，
目的是能够在不同平台上交流使用。
3,BMP格式 BMP（ Bit Map）是一种与设备无关的图像文件格式，它是 Windows软件推荐使用的一种位图格式。
4.1.2 图像的基本操作
1．调整图像的大小
2．设置图像边框
3．设置图像与文本的对齐方式
4．设置图像环绕
5．设置图像间距通过实例说明如何设置图像间距：
（ 1）在网页中插入两幅图像；
（ 2）选中图像，单击鼠标右键，执行快捷菜单上的 【 图片属性 】
命令，打开 【 图片属性 】 对话框，选择 【 外观 】 选项卡，将 【 布局 】 选项中的 【 水平间距 】,【 垂直间距 】 设置为 20，单击 【 确定 】 按钮，完成设置。
4.1.3 图像工具栏的使用
在 FrontPage 2002中，可以直接使用 【 图像 】 工具栏中的各种工具对网页中的图像进行编辑。通过执行 【 视图 】 → 【 工具栏 】 → 【 图片 】 命令，打开 【 图片 】
工具栏，如图,
4.1.4 创建图像映射
图像映射就是在图像的局部区域上定义一个链接到其他对象或网页的超链接。
图像映射通常通过两种途径实现：通过几何图形创建链接热点和通过图片中的文本建立一个图像映射。
下面通过具体实例来介绍其创建方法，最后的效果如图
具体操作步骤如下：
（ 1）创建一个新网页，在网页中加入如图所示的元素：表格、文字和一幅准备好的图片，并作好网页的布局。然后选中图片准备创建热点。
（ 2）单击 【 图片 】 工具栏的按钮，在图片中插入文字，这时如果图片不是 GIF格式，系统会提示将其转换为 GIF格式。
（ 3）此时在图片中会出现一个白边的输入框，框中有一个闪动的光标，提示用户输入文字。在输入框中输入,地球,,并调节边框的大小，执行 【 格式 】 → 【 字体 】 命令或直接通过 【 格式 】 工具栏上的快捷命令编辑字体的颜色和大小。
（ 4） 在输入的文字上单击鼠标右键,执行快捷菜单中的 【 图片热点属性 】 命令,打开 【 编辑超链接 】 对话框,选择本热点要链接到的目标网页 。 如下图所示：
（ 5）依次重复步骤 2,3,4为图片添加其他的文字热点。
（ 6）单击 【 图片 】 工具栏的按钮，为图片插入几何形状的热点。
（ 7）重复步骤 6，为图片中的其它星体创建热点。
（ 8）另外，单击 【 图片 】 工具栏的按钮，可以突出所有定义的热点，保存网页，在浏览器中浏览，效果如下图所示,
4.1.5 图片的替代性文本和低分辨率图片
在 FrontPage 2002中为图片添加替代性文本的具体操作步骤如下：
（ 1）在 【 网页 】 视图中，用鼠标右键单击图形，执行快捷菜单上的 【 图片属性 】 命令，也可以直接在编辑状态下双击图片，打开 【 图片属性 】 对话框。
（ 2）单击 【 图片属性 】 对话框中的 【 常规 】 选项卡，如图 4-8所示。在 【 替代表示 】 项的 【 文本 】 文本框中输入替代文本。
（ 3）单击 【 确定 】 按钮，完成设置。这样在预览时，就可以看到替代图片显示的文本。
注意：很多 Web浏览器在下载图形的过程中,或浏览者将鼠标移动到图片上方时,也会出现图片的显示文本,另外,
在选择替代文本时,所选文字应该能够表达图像的主要含义 。
4.2 表格
4.2.1 创建和编辑表格
FrontPage 2002中提供了四种创建表格的方法：
1．快速创建表格 单击 【 常用 】 工具栏中的 【 插入表格 】 按钮
2．菜单命令插入表格 执行 【 表格 】 → 【 插入 】 → 【 表格 】 命令，
打开 【 插入表格 】 对话框
3．手绘表格 操作步骤如下：
（ 1）执行 【 表格 】 → 【 手绘表格 】 命令，打开 【 表格 】 工具栏
（ 2）单击 【 表格 】 工具栏的 【 手绘表格 】 按钮，鼠标指针在文本编辑区变为铅笔状图标。
4．将文本转换为表格 要将文本转换为表格，必须先设置文本的格式。一般用逗号分割数据项，用回车符表示段落结束
4.2.2 表格工具栏的操作
【 表格 】 工具栏中常用工具的使用。
手绘表格
擦除
插入行
插入列
合并单元格
填充颜色
单元格布局
4.2.3 设置表格各种属性
执行 【 表格 】 → 【 表格属性 】 命令，可以看到表格属性包括三部分：表格属性、单元格属性和标题属性，打开其中的 【 表格属性 】
对话框，如图,
表格的外观设置示意图
4.2.4 页面布局
如下图所示，就是一个采用表格布局的网页，具体制作过程，用户可以参考以上的表格编辑方法，自己独立完成。
4.3 创建框架网页
4.3.1 认识框架下面是一个简单的框架网页示例，如下图所示。设计时使用框架将网页分为三部分，点击左下边框架中的导航网页时，通过右下边的主要区域显示目标网页的内容。
4.3.2 在网页中使用框架
1．使用模板创建框架网页
（ 1）执行 【 文件 】 → 【 新建 】 → 【 网页或站点 】 命令，出现
【 新建网页或站点 】 任务窗格，打开 【 网页模板 】 对话框，选择
【 框架网页 】 选项卡
（ 2）在选项卡的 【 预览 】 选项窗口中会出现所选框架模板的外观缩略图。根据需要选择合适的框架网页模板，单击 【 确定 】 按钮
（ 3）新建的框架网页包括 3个框架，可以看到每个框架里都有一个 【 设置初始网页 】 按钮和一个 【 新建网页 】 按钮。
2．在框架中加入网页
（ 1）在已经选择 【 新建网页 】 的框架里，单击鼠标右键，执行快捷菜单中的 【 在新窗口中打开网页 】 命令，就会出现一个新的编辑窗口
（ 2）在新窗口中编辑完成后，关闭网页，这时包含该页面的框架网页窗口中会自动显示该网页。
4.3.3 编辑框架
1．调整各个框架的布局（大小）
(1)用鼠标直接拖动。将鼠标放在框架的线上，当鼠标变成双向箭头时，按住鼠标左键，左右或上下拖动鼠标，到满意的位置再放开鼠标左键即可。
(2)通过设置 【 框架属性 】 对话框的框架高度和宽度来精确的设定框架的大小。
2．拆分框架
(1)使用鼠标拆分框架。
(2)选中该框架，然后执行 【 框架 】 → 【 拆分框架 】 命令，打开
【 拆分框架 】 对话框
4.3.4 设置框架属性
1．设置各个框架之间的间距和边框宽度具体操作步骤如下：
（ 1）在当前网页下，点击某个框架边框选中所有框架，执行
【 文件 】 → 【 属性 】 命令，打开 【 网页属性 】 对话框，切换到
【 框架 】 选项卡。
（ 2）通过选项卡中 【 框架间距 】 选项来设置相邻框架边框之间的间隔大小。
2．设置框架各属性操作步骤如下：
（ 1）在要修改属性的框架中，单击鼠标右键，执行 【 框架属性 】
命令，打开 【 框架属性 】 对话框。
（ 2）可以在对话框的 【 名称 】 文本框中，设定框架的名称，
也可以使用系统的默认值。
4.3.5 嵌入式框架
还有一种特殊的框架是嵌入式框架。它与框架网页的不同之处在于 嵌入式框架及其内容是嵌入在普通的 Web页中，任何可以加载到普通网页的内容都可以加载到嵌入式框架中。下面列举一个嵌入式框架的应用实例,
小结
本章主要讲述图像在网页制作中的应用技术,包括图像的格式,编辑及映射和替代等,以及表格,框架在网页的整体及局部布局中的应用等 。 通过本章的学习,用户可以使用图像来丰富网页的内容,并通过 FrontPage 2002对所用的图像进行编辑,还可以创建图像的映射及替代性文本等 。 另外,在制作网页时通常都离不开表格,有时是因为页面内容本身的需要,而在更多数情况下,是需要表格对网页作整体的编排布局 。 应用表格来设计页面的整体布局,通常这样的表格不是独立的,而是多个表格间的嵌套 。 设计页面布局的另一个重要技术,就是框架的应用 。 FrontPage 2002中提供了多个框架式网页的模板,通过模板可以轻松的创建各式各样的框架式网页,本章详细地介绍了框架的编辑及应用 。
图像的特点与操作
表格的创建,编辑和属性设置
表格的属性设置
框架网页的使用
4.1 使用图像改善网页效果
4.1.1 图像格式简介
1,JPG格式 JPG是利用 JPEG方法压缩的图像格式，它也是浏览器所广泛支持的一种格式。
2,GIF格式 GIF（ Graphics Interchange Format）是
,图形互换格式,的简称，它是专为联机图形设计的，
目的是能够在不同平台上交流使用。
3,BMP格式 BMP（ Bit Map）是一种与设备无关的图像文件格式，它是 Windows软件推荐使用的一种位图格式。
4.1.2 图像的基本操作
1．调整图像的大小
2．设置图像边框
3．设置图像与文本的对齐方式
4．设置图像环绕
5．设置图像间距通过实例说明如何设置图像间距：
（ 1）在网页中插入两幅图像；
（ 2）选中图像，单击鼠标右键，执行快捷菜单上的 【 图片属性 】
命令，打开 【 图片属性 】 对话框，选择 【 外观 】 选项卡，将 【 布局 】 选项中的 【 水平间距 】,【 垂直间距 】 设置为 20，单击 【 确定 】 按钮，完成设置。
4.1.3 图像工具栏的使用
在 FrontPage 2002中，可以直接使用 【 图像 】 工具栏中的各种工具对网页中的图像进行编辑。通过执行 【 视图 】 → 【 工具栏 】 → 【 图片 】 命令，打开 【 图片 】
工具栏，如图,
4.1.4 创建图像映射
图像映射就是在图像的局部区域上定义一个链接到其他对象或网页的超链接。
图像映射通常通过两种途径实现：通过几何图形创建链接热点和通过图片中的文本建立一个图像映射。
下面通过具体实例来介绍其创建方法，最后的效果如图
具体操作步骤如下：
（ 1）创建一个新网页，在网页中加入如图所示的元素：表格、文字和一幅准备好的图片，并作好网页的布局。然后选中图片准备创建热点。
（ 2）单击 【 图片 】 工具栏的按钮，在图片中插入文字，这时如果图片不是 GIF格式，系统会提示将其转换为 GIF格式。
（ 3）此时在图片中会出现一个白边的输入框，框中有一个闪动的光标，提示用户输入文字。在输入框中输入,地球,,并调节边框的大小，执行 【 格式 】 → 【 字体 】 命令或直接通过 【 格式 】 工具栏上的快捷命令编辑字体的颜色和大小。
（ 4） 在输入的文字上单击鼠标右键,执行快捷菜单中的 【 图片热点属性 】 命令,打开 【 编辑超链接 】 对话框,选择本热点要链接到的目标网页 。 如下图所示：
（ 5）依次重复步骤 2,3,4为图片添加其他的文字热点。
（ 6）单击 【 图片 】 工具栏的按钮，为图片插入几何形状的热点。
（ 7）重复步骤 6，为图片中的其它星体创建热点。
（ 8）另外，单击 【 图片 】 工具栏的按钮，可以突出所有定义的热点，保存网页，在浏览器中浏览，效果如下图所示,
4.1.5 图片的替代性文本和低分辨率图片
在 FrontPage 2002中为图片添加替代性文本的具体操作步骤如下：
（ 1）在 【 网页 】 视图中，用鼠标右键单击图形，执行快捷菜单上的 【 图片属性 】 命令，也可以直接在编辑状态下双击图片，打开 【 图片属性 】 对话框。
（ 2）单击 【 图片属性 】 对话框中的 【 常规 】 选项卡，如图 4-8所示。在 【 替代表示 】 项的 【 文本 】 文本框中输入替代文本。
（ 3）单击 【 确定 】 按钮，完成设置。这样在预览时，就可以看到替代图片显示的文本。
注意：很多 Web浏览器在下载图形的过程中,或浏览者将鼠标移动到图片上方时,也会出现图片的显示文本,另外,
在选择替代文本时,所选文字应该能够表达图像的主要含义 。
4.2 表格
4.2.1 创建和编辑表格
FrontPage 2002中提供了四种创建表格的方法：
1．快速创建表格 单击 【 常用 】 工具栏中的 【 插入表格 】 按钮
2．菜单命令插入表格 执行 【 表格 】 → 【 插入 】 → 【 表格 】 命令，
打开 【 插入表格 】 对话框
3．手绘表格 操作步骤如下：
（ 1）执行 【 表格 】 → 【 手绘表格 】 命令，打开 【 表格 】 工具栏
（ 2）单击 【 表格 】 工具栏的 【 手绘表格 】 按钮，鼠标指针在文本编辑区变为铅笔状图标。
4．将文本转换为表格 要将文本转换为表格，必须先设置文本的格式。一般用逗号分割数据项，用回车符表示段落结束
4.2.2 表格工具栏的操作
【 表格 】 工具栏中常用工具的使用。
手绘表格
擦除
插入行
插入列
合并单元格
填充颜色
单元格布局
4.2.3 设置表格各种属性
执行 【 表格 】 → 【 表格属性 】 命令，可以看到表格属性包括三部分：表格属性、单元格属性和标题属性，打开其中的 【 表格属性 】
对话框，如图,
表格的外观设置示意图
4.2.4 页面布局
如下图所示，就是一个采用表格布局的网页，具体制作过程，用户可以参考以上的表格编辑方法，自己独立完成。
4.3 创建框架网页
4.3.1 认识框架下面是一个简单的框架网页示例，如下图所示。设计时使用框架将网页分为三部分，点击左下边框架中的导航网页时，通过右下边的主要区域显示目标网页的内容。
4.3.2 在网页中使用框架
1．使用模板创建框架网页
（ 1）执行 【 文件 】 → 【 新建 】 → 【 网页或站点 】 命令，出现
【 新建网页或站点 】 任务窗格，打开 【 网页模板 】 对话框，选择
【 框架网页 】 选项卡
（ 2）在选项卡的 【 预览 】 选项窗口中会出现所选框架模板的外观缩略图。根据需要选择合适的框架网页模板，单击 【 确定 】 按钮
（ 3）新建的框架网页包括 3个框架，可以看到每个框架里都有一个 【 设置初始网页 】 按钮和一个 【 新建网页 】 按钮。
2．在框架中加入网页
（ 1）在已经选择 【 新建网页 】 的框架里，单击鼠标右键，执行快捷菜单中的 【 在新窗口中打开网页 】 命令，就会出现一个新的编辑窗口
（ 2）在新窗口中编辑完成后，关闭网页，这时包含该页面的框架网页窗口中会自动显示该网页。
4.3.3 编辑框架
1．调整各个框架的布局（大小）
(1)用鼠标直接拖动。将鼠标放在框架的线上，当鼠标变成双向箭头时，按住鼠标左键，左右或上下拖动鼠标，到满意的位置再放开鼠标左键即可。
(2)通过设置 【 框架属性 】 对话框的框架高度和宽度来精确的设定框架的大小。
2．拆分框架
(1)使用鼠标拆分框架。
(2)选中该框架，然后执行 【 框架 】 → 【 拆分框架 】 命令，打开
【 拆分框架 】 对话框
4.3.4 设置框架属性
1．设置各个框架之间的间距和边框宽度具体操作步骤如下：
（ 1）在当前网页下，点击某个框架边框选中所有框架，执行
【 文件 】 → 【 属性 】 命令，打开 【 网页属性 】 对话框，切换到
【 框架 】 选项卡。
（ 2）通过选项卡中 【 框架间距 】 选项来设置相邻框架边框之间的间隔大小。
2．设置框架各属性操作步骤如下：
（ 1）在要修改属性的框架中，单击鼠标右键，执行 【 框架属性 】
命令，打开 【 框架属性 】 对话框。
（ 2）可以在对话框的 【 名称 】 文本框中，设定框架的名称，
也可以使用系统的默认值。
4.3.5 嵌入式框架
还有一种特殊的框架是嵌入式框架。它与框架网页的不同之处在于 嵌入式框架及其内容是嵌入在普通的 Web页中，任何可以加载到普通网页的内容都可以加载到嵌入式框架中。下面列举一个嵌入式框架的应用实例,
小结
本章主要讲述图像在网页制作中的应用技术,包括图像的格式,编辑及映射和替代等,以及表格,框架在网页的整体及局部布局中的应用等 。 通过本章的学习,用户可以使用图像来丰富网页的内容,并通过 FrontPage 2002对所用的图像进行编辑,还可以创建图像的映射及替代性文本等 。 另外,在制作网页时通常都离不开表格,有时是因为页面内容本身的需要,而在更多数情况下,是需要表格对网页作整体的编排布局 。 应用表格来设计页面的整体布局,通常这样的表格不是独立的,而是多个表格间的嵌套 。 设计页面布局的另一个重要技术,就是框架的应用 。 FrontPage 2002中提供了多个框架式网页的模板,通过模板可以轻松的创建各式各样的框架式网页,本章详细地介绍了框架的编辑及应用 。
