网页视觉设计_第1页
网页视觉设计_第2页
网页视觉设计_第3页
网页视觉设计_第4页
网页视觉设计_第5页
已阅读5页,还剩19页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

网页视觉设计第1页,共24页,2023年,2月20日,星期二1网页的规格尺寸第2页,共24页,2023年,2月20日,星期二1.1网页尺寸与分辨率

网页尺寸和显示器的分辨率有直接关系,分辨率是以像素为单位的。在15寸阴极射线管(CRT)显示器普及的年代,800x600的分辨率为主流,那时宽度为778像素的网页最为常见,是778像素而不是800像素是为了给网页浏览器的滚动条留出位置。出于浏览者的易用性考虑,高度是允许向下延展的,所以一般对高度不限制。对于一屏来说,一般没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被插件占了半个屏幕,所以高度没有确切值。

在17寸阴极射线管(CRT)显示器普及的年代,1024x768的分辨率为主流,这时宽度为1001~1003像素的网页最为常见,同样,是1002像素而不是1024像素是为了给网页浏览器的滚动条留出位置。CRT显示器第3页,共24页,2023年,2月20日,星期二对于17、19英寸普屏液晶(LCD)显示器,其最佳分辨率为1280x1024,这时宽度为1259像素的网页才能在宽度上满屏显示,同样,是1259像素而不是1280像素是为了给网页浏览器的滚动条留出位置。17寸普屏液晶显示器19寸宽屏液晶显示器

现在流行的宽屏液晶显示器的显示比例有16:10和16:9两种,对于19英寸16:10比例的宽屏液晶显示器,1440x900为最佳分辩率;对于19英寸16:9比例的宽屏液晶显示器,1366x768为最佳分辩率。1.1网页尺寸与分辨率第4页,共24页,2023年,2月20日,星期二显示器分辨率:800×600网页宽度:778像素第5页,共24页,2023年,2月20日,星期二显示器分辨率:1024×768网页宽度:778像素第6页,共24页,2023年,2月20日,星期二显示器分辨率:1280×1024网页宽度:778像素第7页,共24页,2023年,2月20日,星期二显示器分辨率:1024×768网页宽度:1002像素第8页,共24页,2023年,2月20日,星期二显示器分辨率:1280×1024网页宽度:1002像素第9页,共24页,2023年,2月20日,星期二显示器分辨率:800×600网页宽度:1002像素第10页,共24页,2023年,2月20日,星期二960像素;950像素;950像素;960像素;950像素;1.2各大网站的网页规格第11页,共24页,2023年,2月20日,星期二2网页的图像第12页,共24页,2023年,2月20日,星期二网页图像主要包含网站Logo、内容图像、背景图像、广告图像、图标等。2.1网页图像的种类第13页,共24页,2023年,2月20日,星期二JPEG(JointPhotograhicExpertsGroup,联合图像专家组),这种图像的扩展名为jpg。

JPG最主要的优点是能支持上百万种颜色。由于JPG图片使用更有效的有损压缩算法,它的压缩比相当高,使用专门的JPG压缩工具其压缩比可达180:1,有损压缩会放弃图像中的某些细节,但是图像质量从浏览角度来讲质量受损不会太大,从而使图像文件量更小,这样就大大方便了网络传输和磁盘交换文件。JPG格式适合表现颜色数目多、渐变丰富、无清晰轮廓的连续调图像(如人物、景象照片),因为在照片中损失一些细节不像对艺术线条那么明显。

但是从长远来看,JPG随着带宽的不断提高和存储介质的发展,它也应该是一种被淘汰的图片格式,因为有损压缩对图像会产生不可恢复的损失。所以经过压缩的JPG的图片一般不适合打印,在备份重要图片时也最好不要使用JPG。还有,JPG也不如GIF图像那么灵活,它不支持图形渐进、背景透明,更不支持动画。2.2网页图像的格式第14页,共24页,2023年,2月20日,星期二原图像:435KB2.1网页图像的种类第15页,共24页,2023年,2月20日,星期二JPG压缩后:95.2KB2.1网页图像的种类第16页,共24页,2023年,2月20日,星期二GIF格式:164KB2.1网页图像的种类第17页,共24页,2023年,2月20日,星期二GIF(GraphicsInterchangeformat,图形交换格式),GIF图片的扩展名是gif。GIF是一种索引颜色格式,最多只有256种颜色,适合存储颜色数量不多、层次变化少、颜色边缘清晰的图片(如网站logo、单一图形、图标)。它的优点主要有:支持背景透明——

GIF图片如果背景色设置为透明,它将与浏览器背景相结合,生成非矩形的图片,但效果不理想。支持简易动画——

在Flash动画出现之前,GIF动画可以说是网页中唯一的动画形式。GIF格式可以将单帧的图象组合起来,然后轮流播放每一帧而成为动画。支持无损压缩

——

无损压缩是不损失图像细节而压缩图片的有效方法,由于GIF格式采用无损压缩,GIF格式它更适合于存储线条、图形、图标等颜色数较少、色块化明显的图像。2.1网页图像的种类第18页,共24页,2023年,2月20日,星期二GIF格式:41.7KB2.1网页图像的种类第19页,共24页,2023年,2月20日,星期二JPG格式:43.3KB2.1网页图像的种类第20页,共24页,2023年,2月20日,星期二PNG(PortableNetworkGraphics)是一种新兴的网络图像格式,PNG结合JPG及GIF及两种格式的优点,1996年10月1日由PNG向国际网络联盟提出并得到推荐认可标准,并且大部分绘图软件和浏览器开始支持PNG图像浏览。

PNG格式的优点:①

存贮形式丰富,兼有GIF和JPG的色彩模式;

它的另一个特点能把图像文件压缩到极限以利于网络传输,但又能保留所有与图像品质有关的信息,因为PNG是采用无损压缩方式来减少文件的大小,这一点与牺牲图像品质以换取高压缩率的JPG有所不同;③

显示速度很快,只需下载1/64的图像信息就可以显示出低分辨率的预览图像;④

同样支持透明图像的制作,透明图像在制作网页图像的时候很有用,我们可以把图象背景设为透明,用网页本身的颜色信息来代替设为透明的色彩,这样可让图像和网页背景很和谐地融合在一起。

PNG格式的缺点:不支持动画应用效果。Adobe公司的Fireworks软件的默认格式就是PNG。2.1

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论