《网页设计教程》PPT课件：第6章 网页图像处理

第6章网页图像处理 通过本章学习,应该掌握以下内容 1.能够选择合适的网页颜色 2.了解网页图像的基本格式 3.掌握使用网页图像的要点 4.在网页中插入图像的方法 5.图像属性的设置 6.调整图像的大小及位置

通过本章学习，应该掌握以下内容： 1. 能够选择合适的网页颜色 2. 了解网页图像的基本格式 3. 掌握使用网页图像的要点 4. 在网页中插入图像的方法 5. 图像属性的设置 6. 调整图像的大小及位置 第6章 网页图像处理

61利用 Dreamweaver4.0编辑图像 611网页中的颜色 图像与颜色是分不开的。在网页中是以RGB方式来表示颜色的, RGB颜色包括几百万种之多,这么多的颜色却有一个共同点,都是 由红、绿、蓝这三种基色调混和而成的,RGB其实就是Red、 Green Blue的缩写。 在网页中运用色彩一般应遵循下列几个原则。 (1)一个页面中切忌采用过多的颜色,否则会给人一种繁杂的感觉, 也烘托不了网页的主题,因此一种风格的网页选用颜色一般不要超 过三四种。 (2)背景的颜色不要太深,显得过于厚重,因为这样会影响整个页面 的显示效果。但也有例外,黑色的背景衬托出亮丽的文本和图像, 会给人一种另类的感觉。 (3)要保持整个网页的色调统一 (4)要围绕网页的主题选择颜色,色彩要能烘托出主题

6.1 利用Dreamweaver 4.0编辑图像 6.1.1 网页中的颜色 图像与颜色是分不开的。在网页中是以RGB方式来表示颜色的， RGB颜色包括几百万种之多，这么多的颜色却有一个共同点，都是 由红、绿、蓝这三种基色调混和而成的，RGB其实就是Red、Green、 Blue的缩写。 在网页中运用色彩一般应遵循下列几个原则。 （1）一个页面中切忌采用过多的颜色，否则会给人一种繁杂的感觉， 也烘托不了网页的主题，因此一种风格的网页选用颜色一般不要超 过三四种。 （2） 背景的颜色不要太深，显得过于厚重，因为这样会影响整个页面 的显示效果。但也有例外，黑色的背景衬托出亮丽的文本和图像， 会给人一种另类的感觉。 （3）要保持整个网页的色调统一。 （4）要围绕网页的主题选择颜色，色彩要能烘托出主题

612图像格式 由于受网络带宽的限制,在Web页上使用的图像都是一些压 缩格式,最常用的包括:GIF格式、JPEG格式、PNG格式和矢量 格式。 1.GIF格式 GIF格式采用无损压缩算法进行图像的压缩处理,是目前在 网页设计中使用最普遍、最广泛的一种图像格式。 2.JPEG格式 JPEG格式是另一种在web上应用广泛的图像格式。由于它支持 的颜色数几乎没有限制,因此适用于使用真彩色或平滑过渡色的 照片和图片。与GIF格式采用无损压缩不同,JPEG格式使用有损 压缩来减小图片文件的大小,因此用户将看到随着文件的减小, 图片的质量也降低了。 3.PNG格式 NG格式是近年来新出现的一种图像格式,它适于任何类型、 任何颜色深度的图片。 4.矢量格式

6.1.2 图像格式 由于受网络带宽的限制，在Web页上使用的图像都是一些压 缩格式，最常用的包括：GIF格式、JPEG格式、PNG格式和矢量 格式。 1．GIF格式 GIF格式采用无损压缩算法进行图像的压缩处理，是目前在 网页设计中使用最普遍、最广泛的一种图像格式。 2．JPEG格式 JPEG格式是另一种在Web上应用广泛的图像格式。由于它支持 的颜色数几乎没有限制，因此适用于使用真彩色或平滑过渡色的 照片和图片。与GIF格式采用无损压缩不同，JPEG格式使用有损 压缩来减小图片文件的大小，因此用户将看到随着文件的减小， 图片的质量也降低了。 3．PNG格式 PNG格式是近年来新出现的一种图像格式，它适于任何类型、 任何颜色深度的图片。 4．矢量格式

613使用网页图像的要点 在Web页上显示图片之前,通常需要考虑下列三个问题: ①确保文件较小; ②控制图像的数量和质量; ③合理使用动画。 614在网页中插入图像 1.插入图像 在 Dreamweaver中插入图像非常简单,具体操作步骤见课本。 2.图像属性参数 在文档中插入图像后,用鼠标单击图像,图像四周出现可编辑 的缩放手柄,说明该图像被选定。这时属性面板中显示出关于图 像的属性信息。 3.改变图像的尺寸 改变图像的尺寸大小可以通过在属性面板中的“W”和“H” 直接输入数值来改变图像的尺寸大小。此外,还可以通过拖放图 像边框来改变图像的尺寸。 4.调整图像在网页中的相对位置

6.1.3 使用网页图像的要点 在Web页上显示图片之前，通常需要考虑下列三个问题： ① 确保文件较小； ② 控制图像的数量和质量； ③ 合理使用动画。 6.1.4 在网页中插入图像 1．插入图像 在Dreamweaver中插入图像非常简单，具体操作步骤见课本。 2．图像属性参数 在文档中插入图像后，用鼠标单击图像，图像四周出现可编辑 的缩放手柄，说明该图像被选定。这时属性面板中显示出关于图 像的属性信息。 3．改变图像的尺寸 改变图像的尺寸大小可以通过在属性面板中的“Ｗ”和“Ｈ” 直接输入数值来改变图像的尺寸大小 。此外，还可以通过拖放图 像边框来改变图像的尺寸。 4．调整图像在网页中的相对位置

615设置网页背景 改变网页背景的状态可以通过两种方法来实现,一种是设置背 景颜色;另一种是设置背景图像。 设置网页背景颜色 设置网页背景色在页面属性对话框里设置。 2.设置背景图像 设置网页背景色,只能得到单一颜色的背景。如何能使背景发 生更多的变化,这就需要设置网页的背景图像。 616在 Dreamweaver4.0中巧妙地处理图像 1.给图像加文字说明 利用 Dreamweaver中为图像加文字说明的功能,可使网页中的 图像在不能被浏览器正常显示时,以说明文字代替,以帮助访问 者了解图像的信息。 2.制作低分辨率图像 3.为图像添加热点 热点即图像上不可见的区域,该区域分配了一个超链接。为图 像添加热点就是在图像上划分区域,从而设定图像上制作超链接 的范围

6.1.5 设置网页背景 改变网页背景的状态可以通过两种方法来实现，一种是设置背 景颜色；另一种是设置背景图像。 1．设置网页背景颜色 设置网页背景色在页面属性对话框里设置 。 2．设置背景图像 设置网页背景色，只能得到单一颜色的背景。如何能使背景发 生更多的变化，这就需要设置网页的背景图像。 6.1.6 在Dreamweaver 4.0中巧妙地处理图像 1．给图像加文字说明 利用Dreamweaver 中为图像加文字说明的功能，可使网页中的 图像在不能被浏览器正常显示时，以说明文字代替，以帮助访问 者了解图像的信息。 2．制作低分辨率图像 3．为图像添加热点 热点即图像上不可见的区域，该区域分配了一个超链接。为图 像添加热点就是在图像上划分区域，从而设定图像上制作超链接 的范围

62网页图像的其他处理方法 6.21利用 FrontPage2002处理图像 用 FrontPage2002同样可以处理网页图像,不过在 FrontPage中习 惯称图像为图片。 1.插入图片 (1)插入来自文件的图片 (2)插入来自剪贴画的图片 2.修改图片属性 (1)调整图片的大小 (2)移动图片位置 在 Frontpage2002中移动图片位置很容易,只要在图片上单击鼠 标左键,然后按住鼠标左键,拖动图片之所需的位置即可。 (3)更改图片属性 更改图片属性指的是更改图片的格式属性。 (4)替换图片或文字 当图片太大,下载速度很慢,可使用一个分辨率较低的图片代替 而当图片不能被浏览器正常显示时,可以使用一些说明性文字

6.2 网页图像的其他处理方法 6.2.1 利用FrontPage 2002处理图像 用FrontPage 2002同样可以处理网页图像，不过在FrontPage中习 惯称图像为图片。 1．插入图片 （1）插入来自文件的图片 （2）插入来自剪贴画的图片 2．修改图片属性 （1）调整图片的大小 （2）移动图片位置 在FrontPage 2002中移动图片位置很容易，只要在图片上单击鼠 标左键，然后按住鼠标左键，拖动图片之所需的位置即可。 （3）更改图片属性 更改图片属性指的是更改图片的格式属性。 （4）替换图片或文字 当图片太大，下载速度很慢，可使用一个分辨率较低的图片代替； 而当图片不能被浏览器正常显示时，可以使用一些说明性文字

3.图片与文字 (1)图片与文字的对齐方式 (2)图片的环绕样式 图片的环绕样式决定了文字在图片周围的排列方式。设置图片 的环绕样式可以在“图片属性”对话框中通过“环绕样式”命令 完成,也可在“定位”对话框中设置。 622利用HTML处理图像 1.插入图像 在HTML中,使用IMG标记符可以在网页中加入图像。它具有 两个基本属性:sre和alt,分别用于设置图像文件的位置和替换文 本 2.设置图像属性 (1)指定图像的宽和高 在HTML中,使用IG标记符的 width和 height属性可以指定图 像的宽度和宽度,以告诉浏览器Web页应分配给图像多少空间 以像素为单位)。 (2)图像的边框 使用IG标记符的 border属性,可以给图像添加边框效果,边 框的取值是像素数

3．图片与文字 （1）图片与文字的对齐方式 （2）图片的环绕样式 图片的环绕样式决定了文字在图片周围的排列方式。设置图片 的环绕样式可以在“图片属性”对话框中通过“环绕样式”命令 完成，也可在“定位”对话框中设置。 6.2.2 利用HTML处理图像 1. 插入图像 在HTML中，使用IMG标记符可以在网页中加入图像。它具有 两个基本属性：src和alt，分别用于设置图像文件的位置和替换文 本。 2．设置图像属性 （1）指定图像的宽和高 在HTML中，使用IMG标记符的width和height属性可以指定图 像的宽度和宽度，以告诉浏览器Web页应分配给图像多少空间 （以像素为单位）。 （2）图像的边框 使用IMG标记符的border属性，可以给图像添加边框效果，边 框的取值是像素数

(3)设置图像周围的空白 可以在IMG标记符内使用属性 hspace和 vspace设置图像周围 空白,其中 spacer水平方向的空白, vspace表示垂直方向的空 白,它们的取值都是像素数。 (4)图像的对齐 ①图像在页面中的对齐 设置图像在页面中的对齐与设置文本对齐类似,可以使用DⅣ或 P标记符将IMG标记符括起来,然后使用aign属性。 ②图像与周围内容的垂直对齐 使用IⅠG标记符的 align属性,可以控制图像与周围内容的垂 直对齐。 ③图文混排时的图像对齐 如果要在图像的左、右环绕文字,也应该使用IG标记符的 align属性

（3）设置图像周围的空白 可以在IMG标记符内使用属性hspace和vspace设置图像周围 空白，其中hspace示水平方向的空白，vspace表示垂直方向的空 白，它们的取值都是像素数。 （4）图像的对齐 ① 图像在页面中的对齐 设置图像在页面中的对齐与设置文本对齐类似，可以使用DIV或 P标记符将IMG标记符括起来，然后使用align属性。 ② 图像与周围内容的垂直对齐 使用IMG标记符的align属性，可以控制图像与周围内容的垂 直对齐。 ③ 图文混排时的图像对齐 如果要在图像的左、右环绕文字，也应该使用IMG标记符的 align属性