CH4 网页图像处理

,单击此处编辑母版标题样式,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,通过本章学习，应该掌握以下内容：,第,4,章 网页图像的处理,1.,能够选择合适的网页颜色,2.,了解网页图像的基本格式,3.,掌握使用网页图像的要点,4.,在网页中插入图像的方法,5.,图像属性的设置,6.,调整图像的大小及位置,5.1,利用,Dreamweaver,编辑图像,12errrrrrrrrrrrrr3.3,5.1.1,网页中的颜色,在网页中是以,RGB,方式来表示颜色的，,RGB,颜色包括几百万种之多，这么多的颜色却有一个共同点，都是由红、绿、蓝这三种基色调混和而成的，,RGB,其实就是,Red,、,Green,、,Blue,的缩写。,这三种基色中每一种颜色的饱和度和透明度都是可以变化的，用,0,（表示最弱）,255,（表示最强）的数值来表示。例如纯红色表示为：,Red 50%,、,Green 0%,、,Blue 0%,，简单的表示法为（,255,，,0,，,0,），用十六进制数来表示的话就变成了“,FF0000”,。,在网页中运用色彩一般应遵循下列几个原则,:,（,1,）一个页面中切忌采用过多的颜色，否则会给人一种繁杂的感觉，也烘托不了网页的主题，因此一种风格的网页选用颜色一般不要超过三四种。,（,2,）背景的颜色不要太深，显得过于厚重，因为这样会影响整个页面的显示效果。但也有例外，黑色的背景衬托出亮丽的文本和图像，会给人一种另类的感觉。,（,3,）要保持整个网页的色调统一。,（,4,）要围绕网页的主题选择颜色，色彩要能烘托出主题。,5.1.2,图像格式,GIF,格式（,Graphics Interchange Format,图像交换格式）采用无损压缩（所谓无损压缩是指在压缩过程中图像的质量不会丢失）算法进行图像的压缩处理，是目前在网页设计中使用最普遍、最广泛的一种图像格式。,GIF,格式可以高度压缩图像,; GIF,格式支持图像游离在背景之上的视觉效果,;,GIF,格式的图像可以被交错下载,;,可以将很多幅图像结合在一个,GIF,文件中。,1,GIF,格式,2,JPEG,格式,JPEG,格式（,Joint Photo Expert Graphics,，联合图形专家组图片格式）是另一种在,Web,上应用广泛的图像格式。由于它支持的颜色数几乎没有限制，因此适用于使用真彩色或平滑过渡色的照片和图片。与,GIF,格式采用无损压缩不同，,JPEG,格式使用有损压缩来减小图片文件的大小，因此用户将看到随着文件的减小，图片的质量也降低了。,1.,支持,24,位图像，能够很好地表现照片等全彩色的图像；,2.,可以生成类似,GIF,格式的交错关联图像,渐变,JPEG,；,3.,可以制作透明,JPEG,图像。,JPEG,格式图像的优点：,1.,有损压缩使之不适合表达高清晰度的图像：,2.,最高只能以,256,色显示的用户，可能无法观看,JPEG,图像；,3.,当图像中包含,fine,字体时应避免用,JPEG,格式，在该字体与纯颜色重叠的地方，,JPEG,压缩作品看上去只是一种外观近似。,4.,采用,JPEG,格式对图像进行压缩后，不能再重新打开图像。,5. JPEG,格式不支持透明色，也没有动画的概念。,JPEG,格式图像的缺点：,PNG,格式（,Portable Networks Graphics,，可移植的网络图形格式）是近年来新出现的一种图像格式，它适于任何类型、任何颜色深度的图片。该格式用无损压缩来减小图片文件的大小，同时保留图片中的透明区域。此外，该格式是仅有的几种支持透明度概念的图片格式之一（透明,GIF,的透明度只能是,50%,，但,PNG,格式可以是,0% 50%,）。,3,PNG,格式,GIF,、,JPEG,、,PNG,这几种格式都是标准的位图格式，但现在,Web,上还可以使用新的矢量格式。所谓位图格式就是指用图片上每一点的信息来描述图像，而矢量格式则是用线条和填充色等数学信息来描述图像。相比而言，矢量格式的文件要比位图格式的文件小得多，但表现力丝毫不逊色。,除了表现一般的静态画面以外，动画是矢量格式具有巨大优势的另一个领域。,4,矢量格式,在,Web,页上显示图片之前，通常需要考虑下列三个问题：, 确保文件较小；,1,）使图像具有所需的像素大小,2,）采用正确的格式进行优化处理, 控制图像的数量和质量；, 合理使用动画。,5.1.3,使用网页图像的要点,在,Dreamweaver,中插入图像非常简单，具体操作步骤如下：,（,1,）打开网页，将光标移到将要插入图像的位置。,（,2,）用下列,3,种方法中的任意一种方法，打开“选择图像源”对话框，,如图所示,。,在插入“常用”面板中，单击插入图像按钮。,直接拖曳插入“常用”面板中的插入图像按钮至页面的光标处。,选择,Dreamweaver,主菜单中的“插入”,|“,图像”命令。,5.1.4,在网页中插入图像,1,插入图像,（,3,）在对话框中选择查找图像文件的路径，选中“预览图像”复选框，选定图像的预览图就显示在对话框的右侧。,（,4,）如果文件存放在网站的目录中，那么将“相对于”下拉列表调整到“文档”项。,（,5,）然后单击“确认”按钮，图像就插入到网页中了。,在文档中插入图像后，用鼠标单击图像，图像四周出现可编辑的缩放手柄，说明该图像被选定。这时属性面板中显示出关于图像的属性信息，如图所示。,2,图像属性参数,图像属性面板的左上方有一个缩略图，它的右边是“图像”字样，“图像”的右边是当前文件大小，下方的空格可以键入名称，以便将来使用时好调用该文件。,改变图像的尺寸大小，可以通过在属性面板中的“宽”和“高”文本框中直接输入数值来改变图像的尺寸大小，当在网页中需要精确地定位元素时，这种方法可以帮助设计者达到预想的效果。不过这种方法有一个弊端，如果数值输入不当，可能造成图像在浏览器中无法正常显示。此外，还可以通过拖放图像四周的缩放边框来改变图像的尺寸。,3,改变图像的尺寸,Dreamweaver,中调整图像位置的方法很简单，简述如下：,（,1,）选中页面中要编辑的图像；,（,2,）打开图像属性面板中的“对齐”下拉列表，在列表中选择需要的选项。,4,调整图像在网页中的相对位置,在页面中合理地使用图形图像已经成为网页制作的一个基本要求。但是并非所有图形图像都可以直接用在网页中，大多数情况下，需要对原始图像素材进行一些处理，例如图像优化、添加特效等，然后再在网页中使用。要方便地完成相关的处理工作，则需要图形图像处理软件的协助。另外，对于具备创作才能的网页制作者来说，也可以直接使用图形图像处理软件创作出适合,Web,的作品。,5,编辑图像,改变网页背景的状态可以通过两种方法来实现，一种是设置背景颜色，通常是在网页安全颜色范畴之内选择；另一种是设置背景图像，但不是所有的图像都可以做背景。,1,设置网页背景颜色,设置网页背景色在页面属性对话框里设置 。,2,设置背景图像,设置网页背景色，只能得到单一颜色的背景。如何能使背景发生更多的变化，这就需要设置网页的背景图像。,5.1.5,设置网页背景,在浏览网页时，可能会遇到下列情况。当图像不能被浏览器正常显示时，图像区变成了空白区域。,利用,Dreamweaver,中为图像加文字说明的功能，可使网页中的图像在不能被浏览器正常显示时，以说明文字代替，以帮助访问者了解图像的信息。,5.1.6,在,Dreamweaver,中巧妙地处理图像,1,给图像加文字说明,2,制作低分辨率图像,低分辨率图像是相对于高分辨率图像而言的，高分辨率图像一般指的是图像的色彩丰富逼真、压缩比较小的图像，这种图像文件容量比较大，浏览器要费很长时间来下载。而低分辨率图像包含的色彩少、压缩比较大，所以这种图像文件容量较小，能够较快地被浏览器下载。因此经常要为高质量、大尺寸的图像制作一个副本，这个副本图像采用的是较低的分辨率，从而减小了文件的大小，缩短了图像的下载时间。,3,为图像添加热点,热点即图像上不可见的区域，该区域分配了一个超链接。为图像添加热点就是在图像上划分区域，从而设定图像上制作超链接的范围。,在,Dreamweaver,中为图像添加热点的方法为：,（,1,）选定图像，打开图像属性面板，选择设置热点按钮，单击鼠标左键并拖动，在图像中设置热点形状。,（,2,）在属性面板中设置热点的超链接。,5.2,利用,HTML,处理图像,在,HTML,中，使用,IMG,标记符可以在网页中加入图像。它具有两个基本属性：,src,和,alt,，分别用于设置图像文件的位置和替换文本。,src,表示要插入图像的文件名，必须包含绝对路径或相对路径，图像可以是,GIF,文件、,JPEG,文件或,PNG,文件。,alt,表示图像的简单文本说明，用于不能显示图像的浏览器或浏览器能显示图像但显示时间过长时先显示。,5.2.1,插入图像,5.2.2,设置图像属性,在,HTML,中，使用,IMG,标记符的,width,和,height,属性可以指定图像的高度和宽度，以告诉浏览器,Web,页应分配给图像多少空间（以像素为单位）。当浏览器解释,Web,页时，在实际下载图像之前会给图像预留出空间，以避免在每个图像下载时重新绘制网页，从而加快网页的下载速度。,width,和,height,属性的取值既可以是像素数，也可以是百分数。,1,指定图像的宽和高,2,图像的边框,使用,IMG,标记符的,border,属性，可以给图像添加边框效果，边框的取值是像素数。,3,设置图像周围的空白,可以在,IMG,标记符内使用属性,hspace,和,vspace,设置图像周围空白，其中,hspace,示水平方向的空白，,vspace,表示垂直方向的空白，它们的取值都是像素数。通过指定图像周围的空白，可以使页面的版式更加合理。,（,1,）图像在页面中的对齐,设置图像在页面中的对齐与设置文本对齐类似，可以使用,DIV,或,P,标记符将,IMG,标记符括起来，然后使用,align,属性。,（,2,）图像与周围内容的垂直对齐,使用,IMG,标记符的,align,属性，可以控制图像与周围内容的垂直对齐。此时，,align,属性的值可以是：,top,、,middle,、,bottom,分别,表示图像与周围内容的顶部、中央、底部对齐。,4,图像的对齐,（,3,）图文混排时的图像对齐,如果要在图像的左、右环绕文字，也应该使用,IMG,标记符的,align,属性，此时，,align,属性的值可以是：,left,表示图像居左，文本在图像右侧；,right,表示图像居右，文本在图像左侧。,“,选择图像源”对话框,返 回,1,操作要求,打开,“,课堂实践,”,网站中文件夹,“,03,图像操作,”,中的网页文档,“,03.html,”,，然后在网页中插入四幅图像，具体操作要求如下：,（,1,）第一幅与第二幅图像插入的是普通图像，源文件分别为,“,01.jpg,”,和,“,02.jpg,”,，,“,替换文本,”,分别为,“,湘江谷景观之一,”,和,“,湘江谷景观之二,”,。,（,2,）第三幅插入的是,“,鼠标经过图像,”,，,“,原始图像,”,的源文件为,“,03.gif,”,，,“,鼠标经过图像,”,的源文件为,“,04.gif,”,，,“,替换文本,”,为,“,湘江谷景观之三,”,，,“,链接,”,为,03.html,”,。,课堂实践,（,3,）第四幅插入的是,“,导航条,”,的图像按钮，该图像按钮的项目名称为,“,button1,”,，,“,状态图像,”,的源文件为,“,05.jpg,”,，,“,鼠标经过图像,”,的源文件为,“,06.gif,”,，,“,按下图像,”,的源文件为,“,07.gif,”,，,“,按下时鼠标经过图像,”,的源文件为,“,08.gif,”,，,“,替换文本,”,为,“,湘江谷景观之四,”,，,“,链接,”,为,“,03.html,”,。,（,4,）所有图像的,“,宽度,”,和,“,高度,”,都为,“,128,”,，,“,水平边距,”,都为,“,10,”,，边框都为,“,2,”,，,“,对齐,”,都为,“,默认值,”,。,2,项目展示,网页文档,“,03.html,”,插入图像后的浏览效果如图所示。,图,6-24,“,课堂实践,”,网站的网页,03.html,的浏览效果,3,制作要点提示,（,1,）所需的图像文件位于文件夹,“,03,图像操作,”,的,image,子文件夹中。,（,2,）插入普通图像直接单击,“,常用,”,插入工具栏中的,“,图像,”,按钮，弹出,“,选择图像源文件,”,对话框，在该对话框中选择所需的图像文件，单击,【,确定,】,按钮即可。,（,3,）插入,“,鼠标经过图像,”,时，必须在,“,插入鼠标经过图像,”,对话框中设置相应的参数，然后单击,【,确定,】,按钮即可。,（,4,）插入,“,导航条,”,时，必须在,“,插入导航条,”,对话框中设置相应的参数，然后单击,【,确定,】,按钮即可。,（,5,）图像插入到网页后，可以通过,“,图像属性面板,”,设置所插入图像的,“,宽度,”,、,“,高度,”,、,“,水平边距,”,、,“,边框,”,、,“,对齐,”,等属性。,E N D,