北京市职业院校网页制作教程（主编齐建玲-水利水电第二版）教案：第6章 网页图像的处理 .PPTVIP

通过本章学习，应该掌握以下内容： ;6.1 利用Dreamweaver 8编辑图像 ; 在网页中运用色彩一般应遵循下列几个原则: （1）一个页面中切忌采用过多的颜色，否则会给人一种繁杂的感觉，也烘托不了网页的主题，因此一种风格的网页选用颜色一般不要超过三四种。 （2）背景的颜色不要太深，显得过于厚重，因为这样会影响整个页面的显示效果。但也有例外，黑色的背景衬托出亮丽的文本和图像，会给人一种另类的感觉。 （3）要保持整个网页的色调统一。 （4）要围绕网页的主题选择颜色，色彩要能烘托出主题。 ;6.1.2 图像格式 ;2．JPEG格式 ; 1.支持24位图像，能够很好地表现照片等全彩色的图像； 2. 可以生成类似GIF格式的交错关联图像——渐变JPEG； 3.可以制作透明JPEG图像。 ; 1. 有损压缩使之不适合表达高清晰度的图像： 2. 最高只能以256色显示的用户，可能无法观看JPEG图像； 3. 当图像中包含fine字体时应避免用JPEG格式，在该字体与纯颜色重叠的地方，JPEG压缩作品看上去只是一种外观近似。 4. 采用JPEG格式对图像进行压缩后，不能再重新打开图像。 6. JPEG格式不支持透明色，也没有动画的概念。 ; PNG格式（Portable Networks Graphics，可移植的网络图形格式）是近年来新出现的一种图像格式，它适于任何类型、任何颜色深度的图片。该格式用无损压缩来减小图片文件的大小，同时保留图片中的透明区域。此外，该格式是仅有的几种支持透明度概念的图片格式之一（透明GIF的透明度只能是50%，但PNG格式可以是0% ~50%）。 ; GIF、JPEG、PNG这几种格式都是标准的位图格式，但现在Web上还可以使用新的矢量格式。所谓位图格式就是指用图片上每一点的信息来描述图像，而矢量格式则是用线条和填充色等数学信息来描述图像。相比而言，矢量格式的文件要比位图格式的文件小得多，但表现力丝毫不逊色。 除了表现一般的静态画面以外，动画是矢量格式具有巨大优势的另一个领域。 ; 在Web页上显示图片之前，通常需要考虑下列三个问题： ① 确保文件较小； 1）使图像具有所需的像素大小 2）采用正确的格式进行优化处理 ② 控制图像的数量和质量； ③ 合理使用动画。 ; 在Dreamweaver中插入图像非常简单，具体操作步骤如下： （1）打开网页，将光标移到将要插入图像的位置。 （2）用下列3种方法中的任意一种方法，打开“选择图像源”对话框，如图所示。 在插入“常用”面板中，单击插入图像按钮。 直接拖曳插入“常用”面板中的插入图像按钮至页面的光标处。 选择Dreamweaver 8主菜单中的“插入”|“图像”命令。 ;返 回 ;（3）在对话框中选择查找图像文件的路径，选中“预览图像”复选框，选定图像的预览图就显示在对话框的右侧。 （4）如果文件存放在网站的目录中，那么将“相对于”下拉列表调整到“文档”项。 （5）然后单击“确认”按钮，图像就插入到网页中了。 ; 在文档中插入图像后，用鼠标单击图像，图像四周出现可编辑的缩放手柄，说明该图像被选定。这时属性面板中显示出关于图像的属性信息，如图所示。 ; 改变图像的尺寸大小，可以通过在属性面板中的“宽”和“高”文本框中直接输入数值来改变图像的尺寸大小，当在网页中需要精确地定位元素时，这种方法可以帮助设计者达到预想的效果。不过这种方法有一个弊端，如果数值输入不当，可能造成图像在浏览器中无法正常显示。此外，还可以通过拖放图像四周的缩放边框来改变图像的尺寸。 ; Dreamweaver中调整图像位置的方法很简单，简述如下： （1）选中页面中要编辑的图像； （2）打开图像属性面板中的“对齐”下拉列表，在列表中选择需要的选项。 ; 在页面中合理地使用图形图像已经成为网页制作的一个基本要求。但是并非所有图形图像都可以直接用在网页中，大多数情况下，需要对原始图像素材进行一些处理，例如图像优化、添加特效等，然后再在网页中使用。要方便地完成相关的处理工作，则需要图形图像处理软件的协助。另外，对于具备创作才能的网页制作者来说，也可以直接使用图形图像处理软件创作出适合Web的作品。 ; 改变网页背景的状态可以通过两种方法来实现，一种是设置背景颜色，通常是在网页安全颜色范畴之内选择；另一种是设置背景图像，但不是所有的图像都可以做背景。 1．设置网页背景颜