网页设计与制作 雷伟军 第5章 图像与多媒

《网页设计与制作 雷伟军 第5章 图像与多媒》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5章　图像与多媒体5.1网页中常用的图像格式5.1.1GIF格式图像在Dreamweaver中GIF格式图像是常用一种格式。GIF（GraphicsInterchangeFormat）格式图像，可译为“图像交换格式”，是一种无损压缩格式的图像。它可图像文件大小的最小化，支持动画模式，能在一个图像文件中包含多帧图像页，在浏览器浏览时可看到动感图像效果。网上小一点的动画一般都是GIF格式的图像。大一些的图像多JPEG格式的。5.1.2JPEG格式图像JPG/JPEG（JpomtPhotographicExpertsGroup）可译为“联合图像专家组”，也是一种压缩格式的图像。而这种压缩方式它

2、的最大特点是，通过压缩可使其在图像品质和文件大小两者之间达到较好的平衡，在压缩中损失掉的是图像中不易被人察觉到的内容，JPEG获得较小的文件尺寸，使得图像在浏览和下载时的速度加快。5.1.2PNG格式图像PNG（PortableNetworkGraphic）可译为“便携网络图像”，是一种格式及为灵活的图像，用网页上无损压缩和显示图像。在使用网页制作“三剑客”之一的Fireworks制作的图像的默认格式就PNG，这种文件格式比较小，现在网页上用的非常普遍。PNG在使用中可替代GIF格式，但同时又保留了GIF文件格式的如下特征：使用色彩查找表：可支持256种颜色的彩色图像。流式读写性能：图像文

3、件格式允许连续读出和写入图像数据，这个特性适合于在通信过程中生成和显示图像。逐次逼近显示：可在通信链路上传输图像文件的同时就在终端上显示图像，先把整个轮廓显示出来，然后逐步显示整个图像的细节，即先用低分辨率显示，随后不断提高图像的分辨率。透明性：可以使图像文件中某些部分不显示出来，而用来创建一些特色的图像。5.2插入与设置图像图像是网网页中的重要元素，下面就具体介绍在DreamweaverCS5插入图像的操作方法。5.2.1网页中插入图像（1）在站点中打开一个已经创建的网页或创建一个新的网页，打开的页面。（2）将光标置于所插入图像的位置，在菜单栏中选择“插入”→“图像”。（3）在“选择图像

4、源文件”对话框中选择图像文件后，单击“确定”。（4）单击“图像标签辅助功能属性”的“确定”。（5）对所建立的网页进行浏览。如果已经关闭网站，可在网站文件夹中找到该网页，双击就可打开浏览。否则，可在工具栏中单击“在浏览器中预览”按钮。5.2.2设置图像属性在DreamweaverCS5中插入图像文件以后，还可以网页中的图像进行一些所需要的设置，以达到与网页内容、风格相统一的效果。对于网页中图像属性的设计主要是由网页窗口下方的“属性”面板来实现的。一般在图像“属性”面板中可以对图像进行如下设置：“图像”：在该文本框中可以输入图像的名称，以便在以后可以调用该图像文件。“宽”和“高”：在“宽”和“

5、高”文本框中可以输入数值，以设置文件的宽度和高度。“源文件”：显示当前图像文件的地址，单击文本框后面的文件夹按钮，可以重新设置当前图像文件的地址。“链接”：在该文本框中可以设置当前图像的链接地址。“替换”：在该文本框中可以输入文本，用于设置当前图像文件的描述。在浏览网页文件时，将鼠标指针移动到当前图像上时，就可显示图像的描述信息。“编辑”区域：在该区域中列出了编辑当前图像文件可以使用的工具。“边框”：在该文本框中可以设置图像的边框宽度，相当于给图像加一个边框，其宽度以像素为单位。“对齐”：在下拉列表框中选择图像对齐的方式。当网页中包括图像和文本时，需要对图像进行对齐设置“地图”区域：在该文

6、本框中可以图像地图的名称；使用热点工具“矩形、圆形、多边形”在图像中插入热点区域。边距区域：有“垂直边距”、“水平边距”，其文本框用于设置图像周围的边距，是调整它与周围元素间的距离，其单位为像素。5.3插入其他图像元素5.3.1插入图像占位符图像占位符是指将图像添加到网页之前使用的图形，通过使用图像占位符，就可以在创建图像之前确定图像在页面中的位置，要在网页中插入一张图片时，可以使用点位符代替图片位置。具体操作如下：（1）启动DreamweaverCS5，打开或新建一个网页并将光标定位于网页的文档中。（2）插入占位符可用菜单和“插入”面板组不同方式操作来实现：菜单操作法：单击“插入”→“图

7、像对象”→“图像占位符”。“插入”面板组操作法：在菜单“窗口”下选择“插入”命令，在页面窗口左侧出现“插入”面板组。面板组可通过在“窗口”下级菜单中根据需要进行相应的选择，从而实现面板组的显现或隐藏。上面两种操作，都会出现如图5-11所示的“图像占位符”对话框。图5-11图像占位设置通过对占位进行设置后，出现如图5-12所示的效果。图5-12占位符在网页效果在网页中插入图像的占位符后，可以在其属性面板中对占位符进行设置。