Dreamweaver网页设计 图像的应用
Dreamweaver 网页设计 图像的应用
【学习概述】 图像和文字都是组成网页的基本元素， 嘉音还实闲都酸 并茂的网页。同时一定要注意图像的大小 和数量。如果图像文件太大、太多会影响 下载速度，这会使浏览者失去信心。本章 嘉大手保等头公 基础内容。读者应该专注宇操作图像的基 本方法。相信通过本章的学习读者一定能 制作田精美的网页
【学习概述】 图像和文字都是组成网页的基本元素， 与文字相比，图像更加直观、生动。无论 是商业网站还是个人网站，都应该是图文 并茂的网页。同时一定要注意图像的大小 和数量。如果图像文件太大、太多会影响 下载速度，这会使浏览者失去信心。本章 首先介绍了网页图像基础，然后通过一个 精心设计的实例讲解了应用图像的大部分 基础内容。读者应该专注于操作图像的基 本方法。相信通过本章的学习读者一定能 制作出精美的网页
4.1【课堂讲解】网页图像基础 计算机图像格式有成百上千种，但网页中使用的只有3中，即JPEG/JPG, G引F和PNG。 4.1.1图像格式 1.JPEG/JPG格式 扩展名是jpg/jpeg,其全称为Joint Photograhic Experts Group 天2 一种压缩标准) JPEG是 一种有损压循格 图像保存为JPEG格式时， 可以指定图像的品质和压缩级别 网中的JPEG格式品质一般选中等的， 比如仕photoshop软件 中苡 可以选用压缩级别为6。JPEG格式可以支持多达16M种商 能花 比如针 如冬 4-1所示。 2.GF格式 扩展名是，gif,其全称为Graphics Interchange Format(交换的图像文件 格式) G引F采用无损压缩存储，在不影响图像质量的情况下
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色，因此多用于渐变色彩不明显或者轮廓清晰的图 像。GF最突出的一个特点是可以制作动画图像。网络上 很多图标、按钮、漫画卡通图片等多为G引F格式，如图4-2 所示。3.PNG格式 扩展名是*png,其全称为Portable Network Graphics(可移植 的网络图象文件格式)，从其名称就可以看出，它是专门 为网络而生的图像格式。PNG是一种能存储32位信息的 位图文件格式，和GlF格式一样，png也使用无损压缩方 式。类似于G引F,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-2GIF 图4-3PNG
4.1 【课堂讲解】网页图像基础 图4-1 JPEG 图4-2 GIF 图4-3 PNG
4.1.2网页图像应用策略 读者可以打开一个或多个网页，然后打开“C.\Documents and Settings\xiaoxing\Local Settings\Temporary Internet Files”(网络临 时文件)文件夹，如图44所示。可以看到这里有各种文件类型，如 “.htm、 “js 页时，浏览器把请求的网页文件都缓冲到 和图像文件等，也就是说当浏览网 Temporary Internet Files' 文件夹下，所以文件越大越多下载的时间也越长。 一股来说图像文件 是比较大的。因此一定要注意图像文件适可而止，同时要讲究一些应 角阁像的策略。 总结：网页的图像格式一般为：gif格式、jpg格式、png格式三种。 GF格式优点为：可以制作动画，其缺点为：最多只可以支持到256 色。 而JPEG格式的优点为：可以支持真彩色，其缺点为：只能为静态图 像： PNG格式的优点为：既可以制作动画又可以支持真彩色，其缺点为： 文件大，下载速度慢。 当只需要静态图像且色彩要求也不高时：当所选用图像较小时用gf格 文件尔；当所选用图像大时用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格式不具 备优势
Teaporary Internet Files 文件)编福)查看)收旅)工具)帮助) ·文件夹国 地址Q)白3 Docunenti:and Settings xiaoxing Local Settings\Temporary Internet Fil正 )转到 名称 Internet地址 类 截.上次性改时间 文件夹任务 12.5w nttp://ads.s. h影片 9 同共享此文件夹 en L文档 2006-6-1213:38 20 elreadSub 673. http://dzh m. 围L Docunent 5 KB 201 其它位置 http://txt.m. 2006-4-1111:04 0 88 attp://txt.m. 无无无无 3 KB 20r bttp://tztm 口共享文档 a且oal.js 无 2006-4-1111:04 http://txt.m. JSeript Se. 1 KB 2006-6-1318:00 习网上邻居 epop_tip.html http://searc HTML Docunent 2006-4-131540 详细信息 08-661248 18,511个对 Internet 图4-4网络临时文件文件夹
图4-4网络临时文件文件夹
针对上面最后一条结论，读者可以做一个试验来证明。选取一幅图 像，用软件分别转换为JPEG格式和GF格式，两者都为4×4像素， 且同为256色。但是可以看到JPEG格式图像大小为343字节，如图4 5所示：而G1F格式图像大小仅为46字节，如图4-6所示（图像被放大 16倍)。这就印证了“当所选用图像较小时用gf格式文件小”这条准 则。网页中背景图像、小图标等文件比较小，所以多为GF格式图像 图4-5JPEG(343字节) 图4-6G1F(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色。但是可以看到UPEG格式图像大小仅 为23.0KB,如图4-7所示：而GF格式图像大小为126KB,如图4-8 所示。这就印证了“当所选用图像大时用jg格式文件小”这条准则。 图4-7JPEG(23.0KB) 图4-8GIF(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所示。 回区 图查四指入议侧文本①命站点回 口心帮勒 希表文应1，收写 ASP.NET C# Javascript 文件资凉代锅片新 XML 丰地视 司X9T(鉴顶) 品C&y合回 ,性 结 日期0mw63190E号 图411新建“images"文件夹
4.2.1 插入图像 在建立了一个站点，比如“eshop”，一般要在站点目录下建立一个图像 目录，比如“images”，方法是：在文件面板中选中站点“eshop” （“商城”为站点标签），单击鼠标右键，执行【新文件夹】命令，。 然后把文件夹名称“untitled”改为“images”即可，如图4-11所示。 图4-11 新建“images”文件夹