第6章网页图像处理 通过本章学习,应该掌握以下内容 1.能够选择合适的网页颜色 2.了解网页图像的基本格式 3.掌握使用网页图像的要点 4.在网页中插入图像的方法 5.图像属性的设置 6.调整图像的大小及位置
通过本章学习，应该掌握以下内容： 1. 能够选择合适的网页颜色 2. 了解网页图像的基本格式 3. 掌握使用网页图像的要点 4. 在网页中插入图像的方法 5. 图像属性的设置 6. 调整图像的大小及位置 第6章 网页图像处理
Q|6.利用 Dreamweaver4编辑图像 61.1网页中的颜色 图像与颜色是分不开的。在网页中是以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）要围绕网页的主题选择颜色，色彩要能烘托出主题
61.2图像格式 由于受网络带宽的限制,在Web页上使用的图像都是一些压 缩格式,最常用的包括:GIF格式、JPEG格式、PNG格式和矢量 格式。 1.GIF格式 GIF格式采用无损压缩算法进行图像的压缩处理,是目前在 网页设计中使用最普遍、最广泛的一种图像格式。 2.JPEG格式 JPEG格式是另一种在Web上应用广泛的图像格式。由于它支持 的颜色数几乎没有限制,因此适用于使用真彩色或平滑过渡色的 照片和图片。与GIF格式采用无损压缩不同,JPEG格式使用有损 压缩来减小图片文件的大小,因此用户将看到随着文件的减小, 图片的质量也降低了。 3.PNG格式 PNG格式是近年来新出现的一种图像格式,它适于任何类型 任何颜色深度的图片。 矢量格式
6.1.2 图像格式 由于受网络带宽的限制，在Web页上使用的图像都是一些压 缩格式，最常用的包括：GIF格式、JPEG格式、PNG格式和矢量 格式。 1．GIF格式 GIF格式采用无损压缩算法进行图像的压缩处理，是目前在 网页设计中使用最普遍、最广泛的一种图像格式。 2．JPEG格式 JPEG格式是另一种在Web上应用广泛的图像格式。由于它支持 的颜色数几乎没有限制，因此适用于使用真彩色或平滑过渡色的 照片和图片。与GIF格式采用无损压缩不同，JPEG格式使用有损 压缩来减小图片文件的大小，因此用户将看到随着文件的减小， 图片的质量也降低了。 3．PNG格式 PNG格式是近年来新出现的一种图像格式，它适于任何类型、 任何颜色深度的图片。 4．矢量格式
61.3使用网页图像的要点 在Web页上显示图片之前,通常需要考虑下列三个问题: ①确保文件较小; ②控制图像的数量和质量; ③合理使用动画。 614在网页中插入图像 1.插入图像 在 Dreamweaver中插入图像非常简单,具体操作步骤见课本。 2.图像属性参数 在文档中插入图像后,用鼠标单击图像,图像四周出现可编辑 的缩放手柄,说明该图像被选定。这时属性面板中显示出关于图 像的属性信息。 3.改变图像的尺寸 改变图像的尺寸大小可以通过在属性面板中的 W”和“H 直接输入数值来改变图像的尺寸大小。此外,还可以通过拖放图 像边框来改变图像的尺寸。 4.调整图像在网页中的相对位置
6.1.3 使用网页图像的要点 在Web页上显示图片之前，通常需要考虑下列三个问题： ① 确保文件较小； ② 控制图像的数量和质量； ③ 合理使用动画。 6.1.4 在网页中插入图像 1．插入图像 在Dreamweaver中插入图像非常简单，具体操作步骤见课本。 2．图像属性参数 在文档中插入图像后，用鼠标单击图像，图像四周出现可编辑 的缩放手柄，说明该图像被选定。这时属性面板中显示出关于图 像的属性信息。 3．改变图像的尺寸 改变图像的尺寸大小可以通过在属性面板中的“Ｗ”和“Ｈ” 直接输入数值来改变图像的尺寸大小 。此外，还可以通过拖放图 像边框来改变图像的尺寸。 4．调整图像在网页中的相对位置
61.5设置网页背景 改变网页背景的状态可以通过两种方法来实现,一种是设置背 景颜色;另一种是设置背景图像 设置网页背景颜色 设置网页背景色在页面属性对话框里设置。 2.设置背景图像 设置网页背景色,只能得到单一颜色的背景。如何能使背景发 生更多的变化,这就需要设置网页的背景图像。 61.6在 Dreamweaver40中巧妙地处理图像 1.给图像加文字说明 利用 Dreamweaver中为图像加文字说明的功能,可使网页中的 图像在不能被浏览器正常显示时,以说明文字代替,以帮助访问 者了解图像的信息。 2.制作低分辨率图像 3.为图像添加热点 热点即图像上不可见的区域,该区域分配了一个超链接。为图 像添加热点就是在图像上划分区域,从而设定图像上制作超链接 的范围
6.1.5 设置网页背景 改变网页背景的状态可以通过两种方法来实现，一种是设置背 景颜色；另一种是设置背景图像。 1．设置网页背景颜色 设置网页背景色在页面属性对话框里设置 。 2．设置背景图像 设置网页背景色，只能得到单一颜色的背景。如何能使背景发 生更多的变化，这就需要设置网页的背景图像。 6.1.6 在Dreamweaver 4.0中巧妙地处理图像 1．给图像加文字说明 利用Dreamweaver 中为图像加文字说明的功能，可使网页中的 图像在不能被浏览器正常显示时，以说明文字代替，以帮助访问 者了解图像的信息。 2．制作低分辨率图像 3．为图像添加热点 热点即图像上不可见的区域，该区域分配了一个超链接。为图 像添加热点就是在图像上划分区域，从而设定图像上制作超链接 的范围