网页设计技术教程 第4章 图像、表格与框架

《网页设计技术教程 第4章 图像、表格与框架》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第4章图像、表格与框架本章要点：图像的特点与操作表格的创建、编辑和属性设置表格的属性设置框架网页的使用4.1使用图像改善网页效果4.1.1图像格式简介1．JPG格式JPG是利用JPEG方法压缩的图像格式，它也是浏览器所广泛支持的一种格式。2．GIF格式GIF（GraphicsInterchangeFormat）是“图形互换格式”的简称，它是专为联机图形设计的，目的是能够在不同平台上交流使用。3．BMP格式BMP（BitMap）是一种与设备无关的图像文件格式，它是Windows软件推荐使用的一种位图格式。4.1.2图像的基本操作1．调整图像的大小2．设置图像边框3．设置图像与文本

2、的对齐方式4．设置图像环绕5．设置图像间距通过实例说明如何设置图像间距：（1）在网页中插入两幅图像；（2）选中图像，单击鼠标右键，执行快捷菜单上的【图片属性】命令，打开【图片属性】对话框，选择【外观】选项卡，将【布局】选项中的【水平间距】、【垂直间距】设置为20，单击【确定】按钮，完成设置。4.1.3图像工具栏的使用在FrontPage2002中，可以直接使用【图像】工具栏中的各种工具对网页中的图像进行编辑。通过执行【视图】→【工具栏】→【图片】命令，打开【图片】工具栏，如图:4.1.4创建图像映射图像映射就是在图像的局部区域上定义一个链接到其他对象或网页的超链接。图像映射通常通过两种

3、途径实现：通过几何图形创建链接热点和通过图片中的文本建立一个图像映射。下面通过具体实例来介绍其创建方法，最后的效果如图具体操作步骤如下：（1）创建一个新网页，在网页中加入如图所示的元素：表格、文字和一幅准备好的图片，并作好网页的布局。然后选中图片准备创建热点。（2）单击【图片】工具栏的按钮，在图片中插入文字，这时如果图片不是GIF格式，系统会提示将其转换为GIF格式。（3）此时在图片中会出现一个白边的输入框，框中有一个闪动的光标，提示用户输入文字。在输入框中输入“地球”，并调节边框的大小，执行【格式】→【字体】命令或直接通过【格式】工具栏上的快捷命令编辑字体的颜色和大小。（4）在输入的

4、文字上单击鼠标右键，执行快捷菜单中的【图片热点属性】命令，打开【编辑超链接】对话框，选择本热点要链接到的目标网页。如下图所示：（5）依次重复步骤2、3、4为图片添加其他的文字热点。（6）单击【图片】工具栏的按钮，为图片插入几何形状的热点。（7）重复步骤6，为图片中的其它星体创建热点。（8）另外，单击【图片】工具栏的按钮，可以突出所有定义的热点，保存网页，在浏览器中浏览，效果如下图所示：4.1.5图片的替代性文本和低分辨率图片在FrontPage2002中为图片添加替代性文本的具体操作步骤如下：（1）在【网页】视图中，用鼠标右键单击图形，执行快捷菜单上的【图片属性】命令，也可以直接在编辑

5、状态下双击图片，打开【图片属性】对话框。（2）单击【图片属性】对话框中的【常规】选项卡，如图4-8所示。在【替代表示】项的【文本】文本框中输入替代文本。（3）单击【确定】按钮，完成设置。这样在预览时，就可以看到替代图片显示的文本。注意：很多Web浏览器在下载图形的过程中，或浏览者将鼠标移动到图片上方时，也会出现图片的显示文本，另外，在选择替代文本时，所选文字应该能够表达图像的主要含义。4.2表格4.2.1创建和编辑表格FrontPage2002中提供了四种创建表格的方法：1．快速创建表格单击【常用】工具栏中的【插入表格】按钮2．菜单命令插入表格执行【表格】→【插入】→【表格】命令，打

6、开【插入表格】对话框3．手绘表格操作步骤如下：（1）执行【表格】→【手绘表格】命令，打开【表格】工具栏（2）单击【表格】工具栏的【手绘表格】按钮，鼠标指针在文本编辑区变为铅笔状图标。4．将文本转换为表格要将文本转换为表格，必须先设置文本的格式。一般用逗号分割数据项，用回车符表示段落结束4.2.2表格工具栏的操作【表格】工具栏中常用工具的使用。手绘表格擦除插入行插入列合并单元格填充颜色单元格布局4.2.3设置表格各种属性执行【表格】→【表格属性】命令，可以看到表格属性包括三部分：表格属性、单元格属性和标题属性，打开其中的【表格属性】对话框，如图：表格的外观设置示意图4.2.

7、4页面布局如下图所示，就是一个采用表格布局的网页，具体制作过程，用户可以参考以上的表格编辑方法，自己独立完成。4.3创建框架网页4.3.1认识框架下面是一个简单的框架网页示例，如下图所示。设计时使用框架将网页分为三部分，点击左下边框架中的导航网页时，通过右下边的主要区域显示目标网页的内容。4.3.2在网页中使用框架1．使用模板创建框架网页（1）执行【文件】→【新建】→【网页或站点】命令，出现【新建网页或站点】任务窗格，打开【网页模板】对话框，选