第4章利用图像决定网页氛围.ppt

Version 3.0 第4章 利用图像决定网页氛围 本章内容 网页文件和图像 图像的相对路径和绝对路径 改变图像的属性 Dreamweaver的图像编辑功能 创建轮换图像 网盘-你所不知道的秘密：/248645140.html 网页文件和图像 初期的网络互不干涉由于网络传送速度慢，因此大部分的信息都是以文本形式来体现的。但最近随着网络传送速度的加快，也开始普遍在网页中使用图像。图像不仅使散在网页的设计领域中，而且还使用于强调菜单或内容的场景中。但插入过多的图像会延长网页文件 的读取时间，因此应该多加注意。 网盘-你所不知道的秘密：/248645140.html 网页图像文件的大小 最近随着数码相机和可拍照手机的普及，网页中经常出现插入自拍相片的情况。在网页中插入图像时，为了加快网页文件的读取，应该尽量缩小文件的大小。缩小图像的像素或更改文件形式，就可以把图像文件的大小缩小至一半左右。这种根据网络环境来适当调节图像文件大小的操作称为图像优化处理。利用Fireworks等网页专用绘图软件，就可以实现图像的优化处理。 网盘-你所不知道的秘密：/248645140.html 图像文件类型 网页中使用的图像文件要符合几种条件，但其中最为重要的条件是为了使网页文件快速传送，应该尽量缩小文件的大小。但文件大小越小画质也会相对降低。保持优良画质的同时尽量缩小文件的大小，这是对使用在网页文件中的图像文件的基本要求。在图像文件的格式中符合这种要求的有GIF，JPG/JPEG，PNG等文件格式。 GIF（Graphic Interchange Format） 比起JPG或PNG格式，GIF格式的文件虽然相对比较小，但是GIF格式最多只能显示256种颜色，因此GIF格式很少使用在照片等需要很多颜色的图像中，而多使用在菜单或图标等简单的图像中。GIF格式根据保存选项可以应用为各种方式，介绍如下： 透明GIF：这是使背景颜色透明的图像格式。在使用背景颜色或背景图像的网页文件中插入透明GIF，就会如实显示文档背景。 Interlace GIF：插入图像的大部分文档都是先读取图像后再显示文档。但Interlace Gif图像在读取的过程中先用模糊的效果来显示，等读取完后图像再变得更加清晰。利用这种格式在读取图像较多的文档中，可以在一定程度上减少对时间的持续感。 动画GIF：动画GIF格式是连续多个GIF图像得到的动画效果。用其他格式的图像文件是制作不出该效果。 网盘-你所不知道的秘密：/248645140.html JPEG（Joint Photographic Experts Group） GIF格式保能显示256种颜色，而JPG/JPEG格式比起GIF格式可以使用更多的颜色，因此是一种适合体现照片图像的格式。用这种格式适合保存用数码相机拍照的照片或扫描的照片，或是使用多种颜色的图片等图像。 PNG（Portable Network Graphics） PNG格式是在Internet Explorer和Netscape中部分支持的格式。JPG格式在保存时由于压缩而损失了一定图像信息，但用PNG格式保存的文件几乎与原图像相同。 网盘-你所不知道的秘密：/248645140.html 制作网页时经常使用的图像处理软件 Adobe Photoshop 即使对绘图没有多大兴趣的人，也会多多少少了解Photoshop这一软件。它具有计算机能实现的大部分图像编辑功能，因此软件容量较大价格也相对贵一些。 Adobe ImageReady 页面设计中不一定需要Phoshop的所有功能。因此，只汇集Photoshop中页面设计上使用到的功能来制作出来的软件即是ImageReady。利用该软件可以非常容易地制作出动画GIF文件，而且具有制作网页时使用到的大部分编辑功能。 Macromedia Fireworks Fireworks是Macromedia公司开发的网页专用图像处理软件。它比ImageReady更早出市，而且目前有很多人都在使用该软件。联合使用Dreamweaver、Fireworks、Flash等软件，就可以很容易地设计制作出完美的网页。 图像的相对路径和绝对路径 在网页文件中插入图像后，在浏览器中预览时经常会看不到这些插入的图像。这大部分是由于图像文件的路径输入错误导致的。 路径指示从当前HTML文件如何的工到图像文件的地址。如果要正确管理这些路径，就最好把HTML文件和图像文件进行分离后，另外创建保存图像文件的文件夹，下面是对于初学者来说最容易混淆的相对路径和绝对路径的相关说明。 网盘-你所不知道的秘密：/248645140.html 相对路径 请仔细观察下面的文件夹结构。在samples文件夹下面有work1文件夹，在wo