《Dreamweaver 网页设计》第4章 图像的应用

Dreamweaver网页设计 第4章图像的应用

Dreamweaver 网页设计 第4章 图像的应用

【学习概述】 图像和文字都是组成网页的基本元素, 直文字相比:图像更加直观生动而论 并茂的网页。同时一定要注意图像的大小 和数量。如果图像文件太大、太多会影响 下载速度,这会使浏览者失去信心。本章 首先介绍了网页图像基础,然后通过 精心设计的实例讲解了应用图像的大部分 基础内容。读者应该专注于操作图像的基 本方法。相信通过本章的学习读者一定能 制作出精美的网页

【学习概述】 图像和文字都是组成网页的基本元素， 与文字相比，图像更加直观、生动。无论 是商业网站还是个人网站，都应该是图文 并茂的网页。同时一定要注意图像的大小 和数量。如果图像文件太大、太多会影响 下载速度，这会使浏览者失去信心。本章 首先介绍了网页图像基础，然后通过一个 精心设计的实例讲解了应用图像的大部分 基础内容。读者应该专注于操作图像的基 本方法。相信通过本章的学习读者一定能 制作出精美的网页

4.1【课堂讲解】网页图像基础 计算机图像格式有成百上千种,但网页中使用的只有3中,即JPEG/JPG, G|F和PNG。 4.1.1图像格式 JPEG/JPG格式 扩展名是jpg/jpeg,其全称为 Joint Photograhic Experts Group(联合图 象专家组,一种压缩标准),JPEG是一种有损压缩格式,当读者将 图像保存为JPEG格式时,可以指定图像的品质和压缩级别,应用 网页中的JPEG格式品质一般选中等的,比如在 photoshop软件中读者 可以选用压缩级别为6。JPEG格式可以支持多达16M种颜色,能很好 地实现 舍数风像图有利老图营套刘色有边轮笔图 4-1所 2.G|F格式 扩展名是.g,其全称为 Graphics Interchange Format(交换的图像文件 格式),GF采用无损压缩存储,在不影响图像质量的情况下

4.1 【课堂讲解】网页图像基础 计算机图像格式有成百上千种，但网页中使用的只有3中，即JPEG/JPG， GIF和PNG。 4.1.1 图像格式 1. JPEG/JPG格式 扩展名是.jpg/.jpeg，其全称为Joint Photograhic Experts Group（联合图 象专家组，一种压缩标准），JPEG是一种有损压缩格式，当读者将 图像保存为JPEG格式时，可以指定图像的品质和压缩级别，应用于 网页中的JPEG格式品质一般选中等的，比如在photoshop软件中读者 可以选用压缩级别为6。JPEG格式可以支持多达16M种颜色，能很好 地实现全彩图像，有利于表现带有渐变色彩且没有清晰轮廓的图像。 网络上自然风景图片、鲜花图片多为JPEG格式，比如牡丹花，如图 4-1所示。 2. GIF格式 扩展名是.gif，其全称为Graphics Interchange Format（交换的图像文件 格式），GIF采用无损压缩存储，在不影响图像质量的情况下

4.1【课堂讲解】网页图像基础 它还支持透明色,可以去掉图像的背景。但是G|F只支持最 多256色,因此多用于渐变色彩不明显或者轮廓清晰的图 像。G|F最突出的一个特点是可以制作动画图像。网络上 很多图标、按钮、漫画卡通图片等多为GF格式,如图42 所示。3.PNG格式 扩展名是*png,其全称为 Portable Network Graphics(可移植 的网络图象文件格式),从其名称就可以看出,它是专门 为网络而生的图像格式。PNG是一种能存储32位信息的 位图文件格式,和GF格式一样,png也使用无损压缩方 式。类似于GF,PNG可以也可以是动画,比G|F能容纳 更多的颜色,如图4-3所示

4.1 【课堂讲解】网页图像基础 它还支持透明色，可以去掉图像的背景。但是GIF只支持最 多256色，因此多用于渐变色彩不明显或者轮廓清晰的图 像。GIF最突出的一个特点是可以制作动画图像。网络上 很多图标、按钮、漫画卡通图片等多为GIF格式，如图4-2 所示。 3. PNG格式 扩展名是*.png，其全称为Portable Network Graphics（可移植 的网络图象文件格式），从其名称就可以看出，它是专门 为网络而生的图像格式。PNG是一种能存储32位信息的 位图文件格式，和GIF格式一样，png也使用无损压缩方 式。类似于GIF，PNG可以也可以是动画，比GIF能容纳 更多的颜色，如图4-3所示

4.1【课堂讲解】网页图像基础 图4-1JPEG 图4-2GF 图4-3PNG

4.1 【课堂讲解】网页图像基础 图4-1 JPEG 图4-2 GIF 图4-3 PNG

4.1.2网页图像应用策略 读者可以打开一个或多个网页,然后打开“ C: Documents and Settings Xia0xng让 Local Settings Temporary Internet File8网络临 时文件)文件夹,如图44所示。可以看到这里有各种文件类型,如 htm cSs”和图像文件等,也就是说当浏览网 页时,浏览器把请求的网页文件都缓冲到“ Temporary Internet Files 文件夹下,所以文件越大越多下载的时间也越长。一般来说图像文件 是比较大的。因此一定要注意图像文件适可而止,同时要讲究一些应 用图像的策略。 总结:网页的图像格式一般为:gjf格式、jpg格式、png格式三种 G|F格式优点为:可以制作动画,其缺点为:最多只可以支持到256 而JPEG格式的优点为:可以支持真彩色,其缺点为:只能为静态图 PNG格式的优点为:既可以制作动画又可以支持真彩色,其缺点为: 文件大,下载速度慢 当只需要静态图像且色彩要求也不高时:当所选用图像较小时用qf格 式文件小;而当所选用图像大时甪jpg格式文件小。此时png格式不真 备优势

4.1.2 网页图像应用策略 读者可以打开一个或多个网页，然后打开“C:\Documents and Settings\xiaoxing\Local Settings\Temporary Internet Files”（网络临 时文件）文件夹，如图4-4所示。可以看到这里有各种文件类型，如 “.htm”，“.swf”，“.js”，“.css”和图像文件等，也就是说当浏览网 页时，浏览器把请求的网页文件都缓冲到 “Temporary Internet Files” 文件夹下，所以文件越大越多下载的时间也越长。一般来说图像文件 是比较大的。因此一定要注意图像文件适可而止，同时要讲究一些应 用图像的策略。 总结：网页的图像格式一般为：gif格式、jpg格式、png格式三种。 GIF格式优点为：可以制作动画，其缺点为：最多只可以支持到256 色。 而JPEG格式的优点为：可以支持真彩色，其缺点为：只能为静态图 像。 PNG格式的优点为：既可以制作动画又可以支持真彩色，其缺点为： 文件大，下载速度慢。 当只需要静态图像且色彩要求也不高时：当所选用图像较小时用gif格 式文件小；而当所选用图像大时用jpg格式文件小。此时png格式不具 备优势

a Temporary Internet Files 回 文件)编辑)查看Q收藏)工具〔)帮助0 搜文件夹回 地址①)自性型 M转到 地址类型 大小截.上次修改时间上 件夹任务 http://ad4.sⅣ1ah影片 19K2..2006-6-1015:0820 共享此文件夹 acomment4.ht...http://comme...HtmLDocument1Kb2006-6-11:29200 凹tychannel....http://comme...xml文档 1I无2006-6-1213:3820 readout.673.htt:dm..m" L Document5B无无 其它位置 alchinesejshttp://txt.m...jsCriPtSc 无 2006-4-1111 a 777. js http://txt.m...JsCriptSc...8Kb3e2006-4-1111:04200 O Local Settings http://txt.m...jscRiPtSc...5Kbt2006-4-3013:35 我的文档 包function.jsphttp:/dhm.hTMLDocument3B无无 共享文档 alfloatl.jshttp://txt.m...JsCriptSc..,3KbE2006-4-1111:04200 1无2006-6-1318 号网上邻居 Srosesgjs?...http://txt.m...JsCriptSc epop-tip.htmlhttp://searc...htmlDocument8Kb2...2006-4-1315:46200 aleft.cs http://img.m...Cascading 2B无2004-12-112 详细信息 adefault.htm...http://comme...HtMlDocument30KbE2006-6-618:4920(v 18511个对象 图4-4网络临时文件文件夹

图4-4网络临时文件文件夹

针对上面最后一条结论,读者可以做一个试验来证明。选取一幅图 像,用软件分别转换为JPEG格式和G|F格式,两者都为4×4像素, 且同为256色。但是可以看到JPEG格式图像大小为343字节,如图4 5所示;而GF格式图像大小仅为46字节,如图4-6所示(图像被放大 16倍)。这就印证了“当所选用图像较小时用g格式文件小”这条准 则。网页中背景图像、小图标等文件比较小,所以多为G|F格式图像。 图4-5JPEG(343字节)图46GF(46字节)

针对上面最后一条结论，读者可以做一个试验来证明。选取一幅图 像，用软件分别转换为JPEG格式和GIF格式，两者都为4×4像素， 且同为256色。但是可以看到JPEG格式图像大小为343字节，如图4- 5所示；而GIF格式图像大小仅为46字节，如图4-6所示（图像被放大 16倍）。这就印证了“当所选用图像较小时用gif格式文件小”这条准 则。网页中背景图像、小图标等文件比较小，所以多为GIF格式图像。 图4-5 JPEG（343字节） 图4-6 GIF（46字节）

选取一幅图像,用软件分别转换为JPEG格式和GF格式,两者都为 640×480像素,且同为256色。但是可以看到JPEG格式图像大小仅 为23.0KB,如图4-7所示;而GF格式图像大小为126KB,如图4-8 所示。这就印证了“当所选用图像大时用jg格式文件小”这条准则。 图47JPEG(23.0KB) 图48G|F(126KB)

选取一幅图像，用软件分别转换为JPEG格式和GIF格式，两者都为 640×480像素，且同为256色。但是可以看到JPEG格式图像大小仅 为23.0 KB，如图4-7所示；而GIF格式图像大小为126 KB，如图4-8 所示。这就印证了“当所选用图像大时用jpg格式文件小”这条准则。 图4-7 JPEG（23.0 KB） 图4-8 GIF（126 KB）

4.2.1插入图像 在建立了一个站点,比如“ eshop,一般要在站点目录下建立一个图像 目录,比如“ Images”,方法是:在文件面板中选中站点“ eshop (“商城”为站点标签),单击鼠标右键,执行【新文件夹】命令,。 然后把文件夹名称“ untitled改为“ Images”即可,如图4-11所示。 d Macromedia Dreamweaver 8 回 文件￠)编辑￠)查看①插入)修改)文本①)命令c)站点 窗口〖)帮助①D v甄入常用布表文m应收看cs 标签检查器 @)ASP.NETCE 文件 d JavaScript ⊙商城 aXLT(整页 日站点-商城(:\ eshop 结果 ⑤日期20861319日 图411新建“ Images”文件夹

4.2.1 插入图像 在建立了一个站点，比如“eshop”，一般要在站点目录下建立一个图像 目录，比如“images”，方法是：在文件面板中选中站点“eshop” （“商城”为站点标签），单击鼠标右键，执行【新文件夹】命令，。 然后把文件夹名称“untitled”改为“images”即可，如图4-11所示。 图4-11 新建“images”文件夹