网页设计与制作 工业和信息化普通高等教育“十二五”规划教材立项项目 作者 雷伟军 第5章 图像与多媒.pptVIP

第5章　图像与多媒体 5.1 网页中常用的图像格式 5.1.1 GIF格式图像 在Dreamweaver中GIF格式图像是常用一种格式。 GIF（Graphics Interchange Format）格式图像，可译为“图像交换格式”，是一种无损压缩格式的图像。它可图像文件大小的最小化，支持动画模式，能在一个图像文件中包含多帧图像页，在浏览器浏览时可看到动感图像效果。网上小一点的动画一般都是GIF格式的图像。大一些的图像多JPEG格式的。 5.1.2 JPEG格式图像 JPG/JPEG（Jpomt Photographic Experts Group）可译为“联合图像专家组”，也是一种压缩 格式的图像。而这种压缩方式它的最大特点是，通过压缩可使其在图像品质和文件大小两者之间达到较好的平衡，在压缩中损失掉的是图像中不易被人察觉到的内容，JPEG获得较小的文件尺寸，使得图像在浏览和下载时的速度加快。 5.1.2 PNG格式图像 PNG（Portable Network Graphic）可译为“便携网络图像”，是一种格式及为灵活的图像，用网页上无损压缩和显示图像。在使用网页制作“三剑客”之一的Fireworks制作的图像的默认格式就PNG，这种文件格式比较小，现在网页上用的非常普遍。 PNG在使用中可替代GIF格式，但同时又保留了GIF文件格式的如下特征： 使用色彩查找表：可支持256种颜色的彩色图像。 流式读写性能：图像文件格式允许连续读出和写入图像数据，这个特性适合于在通信过程中生成和显示图像。 逐次逼近显示：可在通信链路上传输图像文件的同时就在终端上显示图像，先把整个轮廓显示出来，然后逐步显示整个图像的细节，即先用低分辨率显示，随后不断提高图像的分辨率。 透明性：可以使图像文件中某些部分不显示出来，而用来创建一些特色的图像。 5.2 插入与设置图像 图像是网网页中的重要元素，下面就具体介绍在Dreamweaver CS5插入图像的操作方法。 5.2.1 网页中插入图像 （1）在站点中打开一个已经创建的网页或创建一个新的网页，打开的页面 。 （2）将光标置于所插入图像的位置，在菜单栏中选择“插入”→“图像”。 （3）在 “选择图像源文件”对话框中选择图像文件后，单击“确定” 。 （4）单击 “图像标签辅助功能属性”的“确定”。 （5）对所建立的网页进行浏览。如果已经关闭网站，可在网站文件夹中找到该网页，双击就可打开浏览。否则，可在工具栏中单击“在浏览器中预览”按钮。 5.2.2 设置图像属性 在Dreamweaver CS5中插入图像文件以后，还可以网页中的图像进行一些所需要的设置，以达到与网页内容、风格相统一的效果。对于网页中图像属性的设计主要是由网页窗口下方的“属性”面板来实现的。 一般在图像“属性”面板中可以对图像进行如下设置： “图像”：在该文本框中可以输入图像的名称，以便在以后可以调用该图像文件。 “宽”和“高”：在“宽”和“高”文本框中可以输入 数值，以设置文件的宽度和高度。 “源文件”：显示当前图像文件的地址，单击文本框后面的文件夹按钮，可以重新设置当前图像文件的地址。 “链接”：在该文本框中可以设置当前图像的链接地址。 “替换”：在该文本框中可以输入文本，用于设置当前图像文件的描述。在浏览网页文件时，将鼠标指针移动到当前图像上时，就可显示图像的描述信息。 “编辑”区域：在该区域中列出了编辑当前图像文件可以使用的工具。 “边框”：在该文本框中可以设置图像的边框 宽度，相当于给图像加一个边框，其宽度以像素为单位。 “对齐”：在下拉列表框中选择图像对齐的方式。当网页中包括图像和文本时，需要对图像进行对齐设置 “地图”区域：在该文本框中可以图像地图的名称；使用热点工具“矩形、圆形、多边形”在图像中插入热点区域。 边距区域：有“垂直边距”、“水平边距”，其文本框用于设置图像周围的边距，是调整它与周围元素间的距离，其单位为像素。 5.3 插入其他图像元素 5.3.1 插入图像占位符 图像占位符是指将图像添加到网页之前使用的图形，通过使用图像占位符，就可以在创建图像之前确定图像在页面中的位置，要在网页中插入一张图片时，可以使用点位符代替图片位置。具体操作如下： （1）启动Dreamweaver CS5，打开或新建一个网页并将光标定位于网页的文档中。 （2）插入占位符可用菜单和“插入”面板组不同方式操作来实现： 菜单操作法： 单击“插入”→“图像对象”→“图像占位符” 。 “插入”面板组操作法： 在菜单“窗口”下选择“插入”命令，在页面窗口左侧出现“插入”