《网站设计与建设第4节1图形与Web设计》由会员分享，可在线阅读，更多相关《网站设计与建设第4节1图形与Web设计（19页珍藏版）》请在金锄头文库上搜索。
1、信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 网站设计与建设第4节1图形与Web设计 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life, there is hope。有生命必有希望。有生命必有希望信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 概概 述述u数字图形的重要性数字图形的重要性u位图和向量图像位图和向量图像 u图像文件的格式图像文件的格式u图像的创建和优化图像的创建和优化 u图像的常用规则图像的常用规则2信息管理与信息系统专业 网络技
2、术系列课程商学院 信息管理与信息系统教研室网站规划与设计 31.1.网站图像的重要性网站图像的重要性u网页中的文字信息分为两种：网页中的文字信息分为两种：一种为一种为HTMLHTML的纯文的纯文本，另一种为图像中的文字信息。本，另一种为图像中的文字信息。u网站的网站的徽标、网站艺术体名称徽标、网站艺术体名称、导航、按钮、新、导航、按钮、新闻照片和页面修饰等，无一能离开图像。闻照片和页面修饰等，无一能离开图像。 u图像重点考虑的问题：文件大小、下载速度、禁图像重点考虑的问题：文件大小、下载速度、禁止滥用图形、协调。止滥用图形、协调。 信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息
3、系统教研室网站规划与设计 41.1.网站图像的重要性网站图像的重要性 续续返回返回信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 2.2.网站图像常用规则网站图像常用规则u网站徽标应适宜大小放在主页左上方网站徽标应适宜大小放在主页左上方 u网站标题应放在主页徽标的右边网站标题应放在主页徽标的右边u网站图像与网站色系协调一致网站图像与网站色系协调一致 u图像的文件尺寸应该要足够小图像的文件尺寸应该要足够小 一般一般50K50K左右左右u使用使用WebWeb标准调色板，避免抖动标准调色板，避免抖动5信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信
4、息系统教研室网站规划与设计 3.3.数字图像的基本概念数字图像的基本概念u像素：像素：计算机显示器是由行列组成栅格，每一个计算机显示器是由行列组成栅格，每一个栅格可以显示一个图像元素，这些图像元素叫做栅格可以显示一个图像元素，这些图像元素叫做像素。像素是计算机显示器显示的最小单元。像素。像素是计算机显示器显示的最小单元。u颜色分辨率颜色分辨率：屏幕显示图像的精度，分辨率越高，屏幕显示图像的精度，分辨率越高，显示的图像越清晰，图像文字越小。最常用的标显示的图像越清晰，图像文字越小。最常用的标准屏幕的分辨率是准屏幕的分辨率是800600 (800600 (屏幕宽屏幕宽屏幕高屏幕高) )。640*4
5、80640*480，800*600800*600，1024*7681024*768，1280*10241280*1024。6信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 3.3.数字图像的基本概念数字图像的基本概念u图像分辨率图像分辨率：以每英寸的像素数以每英寸的像素数(PPI)(PPI)来衡量。来衡量。例如图像分辨率为例如图像分辨率为500PPI500PPI，就是每英寸有，就是每英寸有500500个个像素。分辨率越高，在每英寸上看见得细节就越像素。分辨率越高，在每英寸上看见得细节就越清楚，图像越精细，质量越好，数据量也越大。清楚，图像越精细，质量越好
6、，数据量也越大。u显示器设备分辨率：显示器设备分辨率：显示器上每单位长度显示的显示器上每单位长度显示的像素或点的数量，通常以点像素或点的数量，通常以点/ /英寸英寸 (dpi) (dpi) 来表示。来表示。大多数新显示器的分辨率大约为大多数新显示器的分辨率大约为 96 dpi96 dpi，而较，而较早的早的 Mac OS Mac OS 显示器的分辨率为显示器的分辨率为 72 dpi72 dpi。7信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 4.4.位图图像（位图图像（bitmapbitmap）u位图：位图：位图图像位图图像( (栅格图像栅格图像) )
7、使用颜色网格使用颜色网格( (像素）像素）来表现图像。每个像素都有自己特定的位置和颜来表现图像。每个像素都有自己特定的位置和颜色值。色值。uJPEGJPEG、GIFGIF、BMPBMP格式都是位图。格式都是位图。u位图图像和分辨率有关。位图图像和分辨率有关。u缺点：原始文件尺寸大，适用于照片阴影等。缺点：原始文件尺寸大，适用于照片阴影等。u位图处理工具：位图处理工具：8Adobe Photoshop CS3 Adobe Photoshop CS3 Adobe Fireworks CS3 Adobe Fireworks CS3 Microsoft Microsoft 画图画图 Corel Pai
8、nt Shop Pro X Corel Paint Shop Pro X Corel Painter IX Corel Painter IX 信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 5.5.矢量图形（矢量图形（vectorvector）u矢量图形：矢量图形：由被称为矢量的数学对象定义的线条由被称为矢量的数学对象定义的线条和曲线组成。矢量根据图像的几何特性描绘图像，和曲线组成。矢量根据图像的几何特性描绘图像，适用于线、形状和插图。适用于线、形状和插图。 u矢量图形与分辨率无关。矢量图形与分辨率无关。u矢量常用工具：矢量常用工具：9Adobe Ill
9、ustrator CS3 Adobe Illustrator CS3 Adobe Flash CS3 Adobe Flash CS3 CorelDRAW Graphics Suite X3CorelDRAW Graphics Suite X3 信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 6.6.图形文件格式：网页的图像标准文件图形文件格式：网页的图像标准文件格式仅包括格式仅包括GIFGIF、JPEGJPEG和和PNG PNG u.gif.gif：优优点点：广广泛泛支支持持InternetInternet标标准准，与与平平台台无无关关的的文文件件格格式
10、式， 无无损损压压缩缩和和透透明明支支持持，GIF GIF 压压缩缩格格式式可可以以“渐渐显显” ” ，尺尺寸寸小小，下下载载速速度度快快，动态动态GIFGIF可以支持动画程序。可以支持动画程序。缺缺点点：仅仅能能显显示示256256色色，不不能能显显示示实实景景图图像像，有有限限的的透透明明度度，不不能能设设置置GIFGIF图像的压缩量。图像的压缩量。u.jpg,.jpeg.jpg,.jpeg：联合图像专家组联合图像专家组优优点点：广广泛泛支支持持InternetInternet标标准准，可可以以调调节节图图像像质质量量和和大大小小，尺尺寸寸小小，下载速度快。下载速度快。缺缺点点：无无法法控
11、控制制2424位位色色与与256256色色调调色色板板的的映映射射，有有损损压压缩缩会会降降低低图图像像质质量量。JPEG2000JPEG2000采采用用新新的的子子波波压压缩缩技技术术，减减少少压压缩缩损损失失，同同时时支支持有损和无损压缩。持有损和无损压缩。JPEGJPEG支持渐进式隔行扫描支持渐进式隔行扫描u. .10信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 6.6.图形文件格式图形文件格式upngpng： PNG PNG是目前保证最不失真的格式，它汲取了是目前保证最不失真的格式，它汲取了GIFGIF和和JPGJPG二者的优点。二者的优点。
12、PNG PNG支持支持2424位图像并产生无锯齿状边缘的背景透明度，位图像并产生无锯齿状边缘的背景透明度，PNG PNG 保留灰度和保留灰度和RGBRGB图像中的透明度。图像中的透明度。 PNG PNG是采用无损压缩方式来减少文件的大小，显示速是采用无损压缩方式来减少文件的大小，显示速度很快，同样支持透明图像。度很快，同样支持透明图像。 缺点：缺点：是不支持动画应用效果。是不支持动画应用效果。 Fireworks Fireworks默认格式是默认格式是PNGPNG。11信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 6.6.图形文件格式图形文件格式u.s
13、wf.swf：FlashFlash制制作作矢矢量量动动画画的的后后缀缀。可可以以边边下下载载边边观观看看，因因此特别适合网络传输。网上动画的事实标准。此特别适合网络传输。网上动画的事实标准。u.bmp.bmp：MicrosoftMicrosoft，支支持持高高达达 24 24 位位的的图图像像，无无损损格格式式无无压压缩图形文件。缩图形文件。u.tif.tif：是是MacMac中中广广泛泛使使用用的的图图像像格格式式，它它由由AldusAldus和和微微软软联联合合开发，最初是出于跨平台存储扫描图像的需要而设计的。开发，最初是出于跨平台存储扫描图像的需要而设计的。 u.PSD.PSD：Adob
14、eAdobe公公司司的的PhotoshopPhotoshop的的专专用用格格式式，包包含含图图层层、通通道道、遮遮罩罩等等多多种种设设计计的的样样稿稿，便便于于修修改改上上一一次次的的设设计计。可可轻轻易易转转化为其他格式。化为其他格式。 u.SVG.SVG：目目前前最最火火热热的的图图像像文文件件格格式式，可可缩缩放放的的矢矢量量图图形形。它它是是基基于于XMLXML，由由W3CW3C联联盟盟进进行行开开发发的的。可可用用任任何何文文字字处处理理工工具具打打开开SVGSVG图图像像，通通过过改改变变部部分分代代码码来来使使图图像像具具有有互互交交功功能能，并可以随时插入到并可以随时插入到HT
15、MLHTML中通过浏览器来观看。中通过浏览器来观看。 12信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 第第3 3章章 小结小结13uWebWeb图形的重要性图形的重要性uWebWeb图像图形概念图像图形概念uWebWeb图像常用规则图像常用规则 uWebWeb常用图形格式常用图形格式uWebWeb图形常用工具图形常用工具信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 第第3 3章章 思考问题思考问题endend14u3-3 3-3 图像在网站设计中的一般原则如何？图像在网站设计中的一般原则如何？u3-6 3-6
16、 请解释颜色抖动的原因如何？请解释颜色抖动的原因如何？u3-10 3-10 浏浏览览器器支支持持哪哪些些网网页页的的图图像像标标准准文文件件格格式？式？u3-11 GIF3-11 GIF、JPEGJPEG和和PNGPNG的区别是什么？的区别是什么？u3-14 SWF3-14 SWF是一种什么格式的文件？是一种什么格式的文件？u3-15 SVG3-15 SVG的含义是什么？的含义是什么？信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 图像图像( (图片图片) )颜色要与网站色系协调一致颜色要与网站色系协调一致 15返回返回返回返回信息管理与信息系统专业 网
17、络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 网站网站- -图形尺寸尽可能小图形尺寸尽可能小 16返回返回返回返回信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 在不同大小和分辨率的显示器上显示的图像在不同大小和分辨率的显示器上显示的图像 17返回返回返回返回信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 分辨率为分辨率为72ppi72ppi和和300ppi300ppi的图像的图像18返回返回返回返回信息管理与信息系统专业 网络技术系列课程商学院 信息管理与信息系统教研室网站规划与设计 http:/ http:/ 19返回返回返回返回
