【网页设计技术】图像、表格与框架.pptVIP

第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）单击【确定】按钮，完成设置。这样在预览时，就可以看到替代图片显示的文本。 4.2 表格 4.2.1 创建和编辑表格 FrontPage 2002中提供了四种创建表格的方法： 1．快速创建表格单击【常用】工具栏中的【插入表格】按钮 2．菜单命令插入表格执行【表格】→【插入】→【表格】命令，打开【插入表格】对话框 3．手绘表格操作步骤如下： （1）执行【表格】→【手绘表格】命令，打开【表格】工具栏 （2）单击【表格】工具栏的【手绘表格】按钮，鼠标指针在文本编辑区变为铅笔状图标。 4．将文本转换为表格要将文本转换为表格，必须先设置文本的格式。一般用逗号分割数据项，用回车符表示段落结束 4.2.2 表格工具栏的操作 【表格】工具栏中常用工具的使用。 ? 手绘表格 ? 擦除 ? 插入行 ? 插入列 ? 合并单元格 ? 填充颜色 ? 单元格布局 ? 4.2.3 设置表格各种属性 执行【表格】→【表格属性】命令，可以看到表格属性包括三部分：表格属性、单元格属性和标题属性，打开其中的【表格属性】对话框，如图 ： 表格的外观设置示意图 4.2.4 页面布局 如下图所示，就是一个采用表格