《将图像放入页面》PPT课件.pptx

第4章将图像放入页面中,一个页面中，除去文本部分，最常见的文件就是图像了。现实世界中，人们所指的图像最常见的莫过于相片或者是画。专业照片是记录在胶片上的，画当然是描绘在画布或者画纸上的，而通常所说的数字相机记录下来的数字照片，是存放在存储卡上的。存储下来的这些图像可以通过不同的浏览器被阅览，而这种图像才是我们所要关注的图像。,第4章将图像放入页面中,在网页中，一张图像可以大到覆盖整个页面的背景，也可以小到微不足道的一个Logo，他们在不经意间充斥着整张页面。如下图是YAHOO门户网站的一张主页。,4.1图像的基础知识,在页面中放入图像不难，使用HTML标签很容易就可以做的，困难的是明白放入什么格式的图像，如何去修改图像以及如何在网页中去应用图像，这些知识基于对图像知识有个清晰的认识。了解这些，能使一个设计师在制作页面时，更加的游刃有余，得心应手。,4.1.1最常用的图像位图,位图又称之为光栅图，是由许多像素组成的图。像素是很小的颜色块，如马赛克一样，试想一下用小瓷砖拼成的卫生间地板，位图就是这个样子。如下图是一张被放大的图像。,4.1.1最常用的图像位图,通常位图又被分为8、16、24、32位图。这并不是说只有8种颜色，而是有2的8次方，即256种颜色。从人眼的感觉来说，16位色基本能满足需要了。而24位色又被称之为“真彩色”，2的24次方大概是1677万之多，这个数字差不多是人眼可以分辨颜色数的极限。而32位色是个例外，并不是说有2的32次方之多的发光数，它是在24位色的基础上加入了256阶颜色的灰度。,4.1.2在页面中常用的位图格式,生活中，画的种类可以分很多，素描、油画、水墨画等。在计算机的世界里，图像也可分为很多种格式，但是问题是，人们凭借肉眼就可以在一堆画中分辨出素描和油画，却不可能凭借肉眼直观的分辨计算机世界的图像，它们看上去都是一样的。虽然人眼做不到，而我们的帮手计算机却可以做到。计算机可以把不同的图像定义为不同的格式，不同格式的图像有它自己的属性和特点，而人们只要了解了不同格式图像的属性和特点，就能掌握运用图像的门道。在页面中，常用的3种位图图像格式分别是JPEG图像、PNG图像和GIF图像。,1JEPG格式的图像,JPEG文件是最常见的图像格式之一，后缀名是.jpg。几乎所有的软件或者是平台都可以打开它，JPEG文件是经过压缩的一种图像。压缩的图像可以保持为8位、24位、32位深度的图像，压缩比率可以高达100：1。,2PNG格式的图像,PNG文件的后缀名是.png。这是一种能够存储32位信息的位图图像，采用的是一种无损压缩的方式。目前，已经在Web上广泛流行。此外，它支持透明信息。所谓透明，即是说，图像可以浮现在其他页面文件或页面图像之上。,3GIF格式的图像,GIF是一种图像交互格式，后缀是.gif，它只支持256色以内的图像。所以，GIF文件的图像效果是很差的。但是，GIF文件有一个最大的特点，就是可以制作动画，图像制作者利用图像处理软件，将静态的GIF图像设置为单帧画面，然后把这些单帧画面连在一起，设置好上一幅画到下一幅画面的间隔时间，最后保存为GIF格式就可以了。,4.1.2在页面中常用的位图格式,总结来说，这3种图像从使用上各有千秋，JEPG可以压缩图像的容量，PNG的质量较好，GIF可以做动画。所以，当处理色调复杂、绚丽的图像时，如照片、图画等，适合使用JPEG；而处理一些LOGO、BANNER、简单线条构图的时候，适合使用PNG；而GIF通常只是用来表达动画效果。,4.1.3奇妙的矢量图,计算机中显示的图形一般分为两大类，前面章节中介绍的是位图，这是其中一种，而另一种就是矢量图。矢量图和位图最大的区别在于，前者无论图像缩放多少倍，都不会影响其效果，而后者会有损图像质量。,4.1.3奇妙的矢量图,矢量图是以一种数学描述的方式来记录图像内容的图像格式。如一个方程y=kx，当这个小方程体现在坐标系上的时候，设置不同的参数可以绘制不同角度的直线，这就是矢量图的构图原理。矢量图一般以线条、曲线和色块为主，不易制作色调丰富，效果绚丽的图像，其文件所占的容量也比较小。矢量图的后缀一般有.ai、.cdf、.fh、.swf等。.ai后缀的文件是一种静帧的矢量文件格式，.cdf后缀的文件多以工程图为常见。而.swf格式文件其实指的就是FLASH，FLASH也是页面中最常见的一种动画，将在后面的章节中介绍。,4.1.4图像的分辨率,分辨率，即每英寸显示的线数，单位是dpi（displaypixels/inch）。通常人们所指的分辨率分为屏幕分辨率和图片分辨率。屏幕分辨率即指计算机显示器默认的分辨率。一般来说，目前大部分显示器的分辨率是1024768。也就是说，如果设计者制作的页面范围超过了显示器默认的分辨率，那么即使是在浏览器全屏的情况下，页面也不能完全在浏览器中展示出来，这种情况下，浏览器中就会出现滚动滑条。,4.1.4图像的分辨率,图片分辨率定义是用于量度位图图像内数据量多少的一个参数。分辨率越高的图像，包含的数据越多，图像的容量也大，需要消耗更多的计算机资源，需要更大的存储空间。所以，对于页面开发者，选择适当的图片才是最好的选择。,4.1.4图像的分辨率,那么，像素和分辨率又有什么关系呢？分辨率指的是每英寸的像素值，通过像素和分辨率的换算可以测算长度。举例来说，一副400300分辨率的图像，在一个屏幕分辨率为300dpi的浏览器中，最终图像的长和宽是通过分辨率和像素的换算得出的。1英寸=2.54厘米。400/3002.54=3.39厘米。300/3002.54=2.54厘米。,4.1.5认识一些网页中常用的BANNER尺寸,在网页中，经常涉及到使用BANNER，BANNER即是指网幅广告、旗帜广告、横幅广告等。一个优秀的页面，不仅仅放入的BANNER要美观精致，同时，更要符合页面的风格。BANNER有一定的格式标准可供参考，但不是说一定要完全严格遵循。,4.1.5认识一些网页中常用的BANNER尺寸,几种国际尺寸的BANNER如下：46860：全尺寸BANNER，应用最为广泛的广告条尺寸，用于页眉或页脚。39272：全尺寸带导航条BANNER，主要用于有较多图片展示的广告条，用于页眉或页脚。23460：半尺寸BANNER，这种规格适用于框架或左右形式主页的广告链接。125125：方形按钮，这种规格适于表现照片效果的图像广告。12090：按钮类型，主要应用于产品演示或大型LOGO。12060：按钮类型，这种广告规格主要用于做LOGO使用。8831：小按钮，主要用于网页链接，或网站小型LOGO。120240：垂直BANNER。,4.2用图像来编织美丽的页面,图像是增加网页可视效果的最有力武器之一。在语言文字无法描述的地方，一些只可意会无法言传的表达中，也许使用一张图片就可以完美传达设计者的信息。,4.2.1理解图像路径,在页面中放入图像，实际上是使用了服务器中的一张图片。在页面文档中，使用标签将图像放入页面中，使用的格式如下：,4.2.2像编辑文本对齐一样在页面中对齐图像,在一个页面中放入图像，一样可以像编辑文本一样，令图像左对齐、右对齐或者居中对齐。只要在标签中加入“align”属性就可以了。,4.2.3图像与文本的对齐方式,在编辑图像的时候，图像不同于文本的意义在于，图像都是一个个分开的整体。而编辑图像时，如果设计者想在图像的旁边放入文本内容，就需要考虑如何处理文本和图像的对齐方式。,4.2.3图像与文本的对齐方式,在HTML文档中图像与文本的对齐方式分为4种：使图像的顶部和同一行的文本对齐，使用代码如下：使图像的中部和同一行的文本对齐，使用代码如下：使图像的底部和同一行文本对齐，使用代码如下：使图像的底部和文本的基线（文本的底部）对齐，使用代码如下：,4.2.4控制图像与文本的距离,编辑页面的时候，除了可以控制图像与文本的编排方式外，甚至可以进一步地调整图像和文本的距离。当设置好图片和文本的距离后，可利用“hspace”和“vspace”属性来分别控制图像四周与其他内容间隔的水平方向的宽度、或者是垂直方向的高度，语法结构如下：,4.3让图像变得更美观,如果使用Google或者百度，设计者可以找到任何自己需要的图像。可是，这些图像又不可能完全符合设计者的想法。每个设计者总要面对这样的问题：改变图像的大小，截选图片的部分区域等。,4.3.1修改图像的宽度和高度,在网页中插入图片时使用width属性，可以设置插入的图片的宽度。在设置了图片宽度以后，图片会根据指定的宽度适当地调整图片的高度。width属性语法结构如下。和设置图片的宽度一样，在网页中插入图片的时候也是可以设置图片的高度的。height属性就用来设置图片的高度。height属性和width属性的用法一样，其语法结构如下：,4.3.2不一样的改变给图像添加边框,编辑图像时，有一种使用频度很高的修饰图片的方式，那就是给图像添加边框。虽然这是对图片小小的修饰，但是带来的效果是相当突出的。在标签中添加border属性可以为图像添加边框，语法结构如下：,4.3.3独树一帜的水平线,在设计页面的时候，经常需要在网页中插入一条水平线来隔开文本，或者是为了起到美化页面的作用。水平线是设计页面中的一个特殊的小部分，使用页面标签可以实现这个功能，代码的写法如下：,4.4改变页面的背景,放入背景图像的方式和插入图像的方式是不同的。添加图可以放入在页面中任意位置，但是不能在插图上编辑页面内容。而背景图像就是整个页面的最底层，原先是一片空白的页面改成了一张图像而已。设计者可以在背景图像上放入任何页面内容，使用的页面代码如：,4.5案例：把宠物的照片放到网页上去,本章涉及了很多编辑图像的技法，本节通过运用这些技法，将这些技能运用到实际操作中去。现在很多人有自己的宠物，有些人会把自己的宠物照片晒到互联网上，给自己的宠物找玩伴，藉此来认识同样喜爱宠物的朋友。这个例子中，将学习如何将自己的宠物照片晒到互联网上。首先，需要对这个宠物页面给出一个设计方案，明确基本的构思。如在这个例子中，需要3个设计要点。一个页面的BANNER。宠物的图像要放在页面的右侧，应该给图像加上边框。定义页面的文本内容，放在页面的左侧。,4.6小结,本章中，主要介绍了关于页面中图像的知识。重要的知识点有：图像分为位图和矢量图，设计者经常使用JPEG、PNG和GIF图像放在页面中。图像的分辨率和像素。学习了图像和图像之间排版的方法以及图像和文本之间排版的方法。HTML中使用代码给图像添加边框和在页面中放入水平线。设置页面背景并有效地控制页面背景。,