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

第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文件夹，在work1文件夹下面有images文件夹。此时，将samples文件夹称为父文件夹（Parent Folder）、work1文件夹称为子文件夹（Child Folder）。在以images文件夹为基准的时候，work1文件夹为父文件夹，images文件夹为子文件夹。 背景图像Back08.gif文件在work1文件夹中，而料理图像ch_cook1.gif和ch_cook2.gif文件在work1子文件夹的images文件夹中。这种情况下，把图像路径表示为相对路径的时候，重要的是网页文件的位置。网页文件（chococook.htm）在work1文件夹中，而背景图像也在同样的文件夹里，因此背景图像只要输入文件名称back08.gif即可。但是，其他两个图像在子文件夹的images文件夹中，因此应该应用“文件夹名称/文件名称”的规则，像images/ch_cook1.gif和images/ch_cook2.gif一样要同时输入子文件夹的名称和文件名称。 同一层上的文件：文件名称 上一层的文件：/文件名称（/是为了移动到父文件夹而使用的符号。） 下一层的文件：文件夹名称/文件名称 综上所述，以当前网页文件（HTML文件）为基准表示文件位置的方式称为相对路径。其实本站点中的资源最好都采用相对路径，这样无论站点文件夹移动到任何地方，都可以被正确访问；,绝对路径,一般在导入自己网页以外的其他网页中