
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”文件夹