第4章图像、表格与框架 本章要点 区图像的特点与操作 区表格的创建、编辑和属性设置 区表格的属性设置 区框架网页的使用
第4章 图像、表格与框架 本章要点： • 图像的特点与操作 • 表格的创建、编辑和属性设置 • 表格的属性设置 • 框架网页的使用
41使用图像改善网页效果 41图像格式简介 1,JPG格式JPG是利用JPEG方法压缩的图像格式,它 也是浏览器所广泛支持的种格式 G格式GF( Graphics Interchange Format)是 图形互换格式”的简称,它是专为联机图形设计的 目的是能够在不同平台上交流使用 3.BMP格式BMP( Bit Map)是一种与设备无关的图 像文件格式,它是 Windows软件推荐使用的一种位图格 式
4.1 使用图像改善网页效果 • 4.1.1 图像格式简介 1．JPG格式 JPG是利用JPEG方法压缩的图像格式，它 也是浏览器所广泛支持的一种格式。 2．GIF格式 GIF（Graphics Interchange Format）是 “图形互换格式”的简称，它是专为联机图形设计的， 目的是能够在不同平台上交流使用。 3．BMP格式 BMP（Bit Map）是一种与设备无关的图 像文件格式，它是Windows软件推荐使用的一种位图格 式
41.2图像的基本操作 1,调整图像的大小 2.设置图像边框 3.设置图像与文本的对齐方式 4.设置图像环绕 5.设置图像间距
4.1.2 图像的基本操作 • 1．调整图像的大小 • 2．设置图像边框 • 3．设置图像与文本的对齐方式 • 4．设置图像环绕 • 5．设置图像间距
通过实例说明如何设置图像间距: 在网页中插入两幅图像 选中图像,单击鼠标右键。执行快捷菜单的【图片属性】 命令,打开【图片属性】对话框,选择【外观】选项卡,将【布 局】选项中的【水平间距】、【垂直间距】设置为20,单击【确 定】按钮,完成设置。 KMicrosoft FrontPage-C: \Documents and Settings\ Administrat. -DIxI 文件更)编辑)视图①插入〔)格式)工具红)表格追) 框架)窗口)帮助Q 口·回明地c口感中文简繁转换 宋体 3(12磅)·画]口 视图 网页 文件夹 d回香回m预览上 传输方式:28.8,时间:3秒
通过实例说明如何设置图像间距： • （1）在网页中插入两幅图像； （2）选中图像，单击鼠标右键，执行快捷菜单上的【图片属性】 命令，打开【图片属性】对话框，选择【外观】选项卡，将【布 局】选项中的【水平间距】、【垂直间距】设置为20，单击【确 定】按钮，完成设置
41.3图像工具栏的使用 在 FrontPage200中,可以直接使用【图 像】工具栏中的各种工具对网页中的图 像进行编辑。通过执行【视图】→【工 具栏】【图片】命令,打开【图片】 工具栏,如图: 区Ag4》/因
4.1.3 图像工具栏的使用 • 在FrontPage 2002中，可以直接使用【图 像】工具栏中的各种工具对网页中的图 像进行编辑。通过执行【视图】→【工 具栏】→【图片】命令，打开【图片】 工具栏，如图:
414创建图像映射 图像映射就是在图像的局部区域上定义一个链接到其他对象或网 页的超链接 图像映射通常通过两种途径实现:通过几何图形创建链接热点和 通过图片中的文本建立一个图像映射 面通过具体实例来介绍其创建方法,最后的效果如图 具体操作步骤如下 创建一个新网页,在网页中加入如图所示的元素表格、文 字和幅准备好的图片,并作好网页的布局。然后选中图片准备 创建热点 )单击【图片】工具栏的按钮,在图片中插入文字,这时如果 图片不是GHF格式,系统会提示将其转换为GIF格式 3)此时在图片中会出现一个白边的输入框,框中有一个闪的 光标,提示用户输入文字。在输入框中输入“地球”并调节边 框的大小,执行【格式】→【字体】命令或直接通过【格式】下 只栏上的快捷命令编辑字体的颜色和大小笔
4.1.4 创建图像映射 • 图像映射就是在图像的局部区域上定义一个链接到其他对象或网 页的超链接。 • 图像映射通常通过两种途径实现：通过几何图形创建链接热点和 通过图片中的文本建立一个图像映射。 • 下面通过具体实例来介绍其创建方法，最后的效果如图 • 具体操作步骤如下： （1）创建一个新网页，在网页中加入如图所示的元素：表格、文 字和一幅准备好的图片，并作好网页的布局。然后选中图片准备 创建热点。 （2）单击【图片】工具栏的按钮，在图片中插入文字，这时如果 图片不是GIF格式，系统会提示将其转换为GIF格式。 （3）此时在图片中会出现一个白边的输入框，框中有一个闪动的 光标，提示用户输入文字。在输入框中输入“地球”，并调节边 框的大小，执行【格式】→【字体】命令或直接通过【格式】工 具栏上的快捷命令编辑字体的颜色和大小
4)在输入的文字单击鼠标右键,.行快捷菜单甲的【图片热 点属性】命令,打开【编辑超链接】对话框,选择本热点要链接 到的目标网页。如下图所示 编辑超链接 ? X 链接到:要显示的文字c):《在文档中选定的内容》 屏幕提示) 查找范围:□ My Webs 原有文件或 冒eb页) 当前文件图c: Documents and Settings Administrator1c 书签 买①) C: \Documents and Settings \Administrator My Docu new page_13htm〔打开) 目标框架G) 本文档中的位 置追 浏览过的 lmages 参数匈) ES Coffee Be 新建文档① 近期文件 dione small 地址:afdh 删除链接) 电子邮件地址 确定 取消 是 卷点点
• （4）在输入的文字上单击鼠标右键，执行快捷菜单中的【图片热 点属性】命令，打开【编辑超链接】对话框，选择本热点要链接 到的目标网页。如下图所示：
依次重复步骤2、3、4为图片添加其他的文学热点 单击【图片】工具栏的按钮,为图片插入几何形的热点 7)重复步骤6,为图片中的其它星体创建热点 8)另外,单击【图片】王具栏的按钮可以突出所有定义的热 点,保存网页,在浏览器中浏览,效果如下图所示 太阳系行星示意图= Microsoft Internet Explorer 件G编辑(E查看(收藏(B)工具(D帮助 后退→④团备搜索国收藏历史「·当國·目國⊕ 地址(D图] C: \Documents and Settings \Administrator My Documents\My认→转到|链接川‖ ESnagI 太阳系行星示意 主页 水星 最近更新 月球 宇宙慨况 太阳熟 地球 神舟专题 天体照片 木星 海王 土星 天王星 a file: /t/ C: /Documents
• （5）依次重复步骤2、3、4为图片添加其他的文字热点。 • （6）单击【图片】工具栏的按钮，为图片插入几何形状的热点。 （7）重复步骤6，为图片中的其它星体创建热点。 • （8）另外，单击【图片】工具栏的按钮，可以突出所有定义的热 点，保存网页，在浏览器中浏览，效果如下图所示：
41.5图片的替代性文本和低分辨率图片 在 FrontPage2002中为图片添加替代性文本的具 体操作步骤如下 在【网页】视图中,用鼠标右键单击图形,执行快捷菜单 的【图片属性】命令,也可以直接在编辑状态下双击图片,打 开【图片属性】对话框 单击[图片属性】对话框中的【常规】选项卡,如图48所 宗。在【营代表示】项的【文本】文本框中输入替代文本 3)单击【确定】按钮,完成设置。这样在预览时,就可以看 到替代图片显示的文本 注意:很多Web浏览器在下载图形的过程中,或浏览者 将鼠标移动到图片上方时,也会出现图片的显示文本,男外 在选择替代文本时,所选文学应该能够表达图像的主要含义
4.1.5 图片的替代性文本和低分辨率图片 • 在FrontPage 2002中为图片添加替代性文本的具 体操作步骤如下： • （1）在【网页】视图中，用鼠标右键单击图形，执行快捷菜单 上的【图片属性】命令，也可以直接在编辑状态下双击图片，打 开【图片属性】对话框。 • （2）单击【图片属性】对话框中的【常规】选项卡，如图4-8所 示。在【替代表示】项的【文本】文本框中输入替代文本。 • （3）单击【确定】按钮，完成设置。这样在预览时，就可以看 到替代图片显示的文本。 注意：很多Web浏览器在下载图形的过程中，或浏览者 将鼠标移动到图片上方时，也会出现图片的显示文本，另外， 在选择替代文本时，所选文字应该能够表达图像的主要含义
4.2表格 42,1创建和编辑表格 FrontPage2002提供了四种创建表格的方法 快速创建表格单击【常用】工具栏中的【插入表格】按钮画 2菜单命令插入表格执行【表格】→【插入】→【表格】命令 打开【插入表格】对话框 手绘表格操作步骤如 1)执行【表格】→【手绘表格】命令,打开【表格】工具 2)单击【表格】工具栏的【手绘表格】按钮,鼠标指针在 文本编辑区变为铅笔状图标。 4.。将文本转换为表格要将文本转换为表格,必须先设置文本的 格式。一般用逗号分割数据项,用回车符表示段落结束
4.2 表格 • 4.2.1 创建和编辑表格 FrontPage 2002中提供了四种创建表格的方法： 1．快速创建表格单击【常用】工具栏中的【插入表格】按钮 2．菜单命令插入表格执行【表格】→【插入】→【表格】命令， 打开【插入表格】对话框 3．手绘表格操作步骤如下： （1）执行【表格】→【手绘表格】命令，打开【表格】工具 栏 （2）单击【表格】工具栏的【手绘表格】按钮，鼠标指针在 文本编辑区变为铅笔状图标。 4．将文本转换为表格要将文本转换为表格，必须先设置文本的 格式。一般用逗号分割数据项，用回车符表示段落结束