第六讲：图像——网页制作.pptVIP

第6章 图 像 6.1 图像文件格式 6.1.1图像格式 1.JPG/JPEG 图像 JPG/JPEG（joint photographic experts group，联合图像专家组）图像是一种压缩格式的图像，文件扩展名为jpg或jpeg,它采用有损压缩算法，在损失了原图像中不易为人眼察觉部分的情况下，获得较小的文件，从而减少下载时间。JPG/JPEG图像的另一特点是它支持24位真彩色。所以在网页中，如果要显示的图像特别重视色彩，则可以使用JPG/JPEG 类型的图像。 2.GIF图像 GIF（graphics interchange format，图像交换格式）图像采用无损压缩格式，因此，原始图像是什么样子，压缩后的GIF图像也是什么样子。但是GIF有一个致命的弱点，就是它仅支持8位的颜色（256色），适用于显示卡通等对色彩数目要求不高的地方。GIF图像之所以在网络上流行的原因之一是它支持动画格式，网页中的动画图像、交错图像、透明图像都是GIF格式，这是JPG/JPEG图像做不到的。 3.PNG图像 PNG（portable network graphic，便携网络图像）图像由于受到W3C（World Wide Web Consortium）组织的大力推荐，目前已经在网络上逐渐推广。它既可以采用无损压缩算法，又可以采用有损压缩算法，以期在质量与文件大小之间找到最好的平衡，同时又支持真彩色。目前较高版本的浏览器，都支持PNG 格式的图像。 6.1.2 动画格式 目前Internet上的动画主要有GIF动画和Flash动画。GIF动画文件小，浏览方便，不需任何插件，与普通图像的使用相同，因此广泛应用于网页中的广告条。Flash动画功能强大，可以有复杂的动作，还可以交互操作，但文件相对较大，故播放Flash动画需要相应的插件。 6.2 在文档中插入图像 6.2.1 插入图像 【例6.1】在页面中插入图像 ① 将插入点放到文档中需要插入图像的位置。 ② 执行Insert|Images(插入|图像)命令，或单击Common(普通）对象面板上的Insert Image(插入图像)按钮，打开Select Image Source(选择图像来源)对话框（见图6.1），可以从磁盘上选择图像文件。 ③ 选择需要的文件。在URL文本框中，显示当前选中文件的URL地址。在Relative To（相对于）下拉列表框中，选择文件URL地址的类型，选择Document（文档），则使用相对地址；选择Site Root（站点根目录）则使用基于根目录的地址；选中Preview Images（预览图像）复选框，则可以在对话框左边预览图像。 ④ 选中图像文件后，单击Select（选择）按钮。 ⑤ 如果选择的图像文件位于本站点的目录中，即可将图像插入到文档。 如果选择的图像没有位于本地站点的目录中，则会弹出一个对话框，询问是否要将该图像文件复制到本地站点中。单击Yes按钮，则会将选中的图像复制到站点目录中，同时会出现一个文件选择对话框，提示从站点中选择目录，将图像复制到站点中，这样文档中引用的实际上是位于站点中的图像文件；如果不希望复制图像文件，可以单击No。 一般来说，建议将图像文件复制到站点目录中，以便于管理。 ⑥ 在文档窗口中插入图像后，就会将该图像以原始大小显示出来（见图6.2）。 ⑦ 在文档窗口中单击图像，图像四周出现黑色方形控制柄，可以在图像属性面板中修改图像的属性，包括图像大小、边框大小、对齐方式、超链接路径等（见图6.3）。 提示： 插入的文件可以是jpg文件、png文件、gif文件，包括gif动画文件。 可以不预先设置插入点，直接将对象面板上的Insert Image（插入）按钮直接拖动到文档中希望插入图像的位置上，即可在相应位置上放置图像；这时同样会出现图6.1所示的选择图像文件对话框，提示选择图像文件。 如果插入图像后尚未保存过文档，则文档中图像的引用地址会采用file://的前缀；在保存文件后，Dreamweaver会自动将该引用地址改变为合适的相对路径格式地址。 在文档窗口中选择图像，按Del键可以从页面删除图像。 6.2.2 为图像命名 为了在JavaScript、VBScript等脚本语言中引用图像，可以为图像起个名字。在图像属性面板（图6.3）左上角，图像缩略图的右边有一个文本框，其中可以输入图像的名称。 提示： 该操作设置Img标记的name属性。 注意： 图像名称为英文字母和数字，必须以字母开头。 该名称与文件名不同，它是脚本语言引用图像的标志。 如果在脚本中没有引用该图像，则不必设置图像的名称。 6.2.3 设置可替换文本和提示文本 在浏览网页时，当图像还没有完全下载完时，或图像不能正确显示时，为了让