html+css网页设计指南 13课件.pptVIP

第4章 将图像放入页面中 一个页面中，除去文本部分，最常见的文件就是图像了。现实中人们所指的图像最常见的莫过于相片或画，专业照片是记录在胶片上的。画当然是描绘在画布或者画纸上的，而通常所说的数字相机记录下来的数字照片，是存放在存储卡上的。存放下来的这些图像可以通过不同的浏览器被阅览，而这种图像才是我们所要关注的图像。在网页中，一张图像可以大到覆盖整个页面的背景，也可以小到微不足道的一个Logo，它们在不经意间充满了整张页面。图4.1是YAHOO门户网站的主页。 4.1 图像的基础知识 页面中放入图像不难，使用HTML标签很容易就可以做的，困难得是明白放入什么格式的图像，如何去修改图像，如何在网页中去应用图像，这些知识基于需要对图像知识有个清晰的认识。了解这些，能使一个设计师在制作页面时，更加的游刃有余，得心应手。 4.1.1 最常用的图像——位图 位图又称之为光栅图，是由许多像素组成的图，像素是很小的颜色块，如马赛克一样，试想一下用小瓷砖拼成的卫生间地板，位图就是这个样子，如图4.2是一张被放大的图像，当图像中模型的头部放大到700倍的时候，图像呈现出锯齿一样的边缘。当图像放大到1400的时候，图像只能被看到的只有一个一个的小方格，这每一个小方格，就是像素。像素表示为一个正方形的颜色块。 4.1.2 在页面中常用的位图格式 生活中，画的种类可以分很多，素描、油画、水墨画等等。在计算机的世界里，图像也可分为很多种格式，但是问题是，人们凭借肉眼就可以在一堆画中分辨出素描和油画，却不可能凭借肉眼直观的分辨电脑世界的图像，它们看上去都是一样的。虽然人眼做不到，而我们的帮手计算机则可以。计算机可以把不同的图像定义为不同的格式，不同格式的图像有它自己的属性和特点，而人们只要了解了不同格式图像的属性和特点，就能掌握运用图像的门道。在页面中，常用的3种位图图像格式分别是JEPG图像、PNG图像和GIF图像。 4.1.3 奇妙的矢量图 计算机中显示的图形一般分为两大类，前面章节中介绍的是位图，这是其中一种，而另一种就是矢量图。矢量图和位图最大的区别在于，前者无论图像大小的缩放，都不会影响其效果，而后者会有损图像质量。如图4.3所示，把“小乌龟”眼部放到之后，可以看到，“眼睛”部位的边缘并没有失真。 4.1.4 图像的分辨率 分辨率的单位是dpi(display pixels/inch)，即每英寸显示的线数。通常人们所指的分辨率是两种，分为屏幕分辨率和图片分辨率，屏幕分辨率指显示器默认的分辨率。一般来说，大部分现在是1024×768两种，宽屏则会更高，而目前大多数浏览器默认的分辨率是1024×768。即是说，如果设计者的制作的页面范围超过了浏览器默认的分辨率，那么在浏览器中将不能完全展示出来，这种情况下，浏览器中就出现了滚动滑条。 图片分辨率定义是，用于量度位图图像内数据量多少的一个参数。分辨率越高的图像，包含的数据越多，图像的容量也大，需要消耗更多的计算机资源，需要更大的存储空间。所以，对于页面开发者，选择适当的图片才是最好的选择。 注意：并不是说图片分辨率越高的图像就一定越清晰，这其中还要看图像本身制作的水准。 4.1.5 认识一些网页中常用的BANNER尺寸 在网页中，经常涉及到使用BANNER，BANNER即是指网幅广告、旗帜广告、横幅广告等。一个优秀的页面，不仅仅是放入的BANNER要美观精致，同时，更要符合页面的风格，BANNER有一定的格式标准可供参考，但不是说一定要完全严格遵循。几种国际尺寸的BANNER有， 468×60，全尺寸BANNER，应用最为广泛的广告条尺寸，用于页眉或页脚。 392×72，全尺寸带导航条BANNER，主要用于有较多图片展示的广告条，用于页眉或页脚。 234×60：半尺寸BANNER，这种规格适用于框架或左右形式主页的广告链接。 125×125：方形按钮，这种规格适于表现照片效果的图像广告。 120×90：按钮类型，主要应用于产品演示或大型LOGO。 120×60：按钮类型，这种广告规格主要用于做LOGO使用。 88×31：小按钮，主要用于网页链接，或网站小型LOGO。 120×240：垂直BANNER。 4.2 用图像来编织美丽的页面 图像是增加网页可视效果的最有力武器之一，在语言文字无法描述的地方，一些只可意会无法言传的表达中，也许设计者使用一张图片就可以完美传达设计者的讯息，这一节将介绍如何在页面中放入图像、编辑图像。 4.2.1 理解图像路径 在页面中放入图像，实际上是使用了服务器中的一张图片。设计者把所有的图片放在一台服务器中某个文件夹中，然后通过HTML语言告诉浏览器这些图片放在哪里，即图片的路径，这就好比是图片住在电脑中的门牌号码。当用户浏览页面的时候，浏览器会解析这张