第5章使用网页图像讲解.ppt

Dreamweaver CS3中文版应用教程 第5章 使用网页图像 重点内容： 网页图像的格式 插入图像 编辑图像 创建图像地图 一、 网页图像简述 1.位图 位图是目前最为常用的图像表示方法。这种图形使用在网格内排列的称为像素的彩色点来描述图像，每一点就是一个像素，其值是像素的亮度和色彩值。位图产生的图像比较细致，层次和色彩也比较丰富，可以逼真地表现自然界的景象，同时也可以很容易地在不同软件之间交换文件。但是，由于在保存位图文件时需要记录每一个像素的位置和色彩数据，显然网格划分得越密，对应的图像分辨率就越高，图像质量也越好，当然文件也就越大，处理速度也就越慢，而且在缩放和旋转时会产生失真的现象。 一、 网页图像简述 2.矢量图 矢量图以数学的矢量方式记录图像内容，以一系列的线段或其他造型描述一幅图像，内容以线条和色块为主，通常它以一组指令的形式存在，这些指令描绘图中所包含的每个直线、圆、弧线和矩形的大小及形状。矢量图文件占的容量相对较小，可以很容易地进行放大、缩小或旋转等操作，并且不会失真，精确度较高。但是，矢量图不宜制作色调丰富或者色彩变化太多的图像，而且绘制出来的图形不是很逼真，无法像照片一样精确地描写自然界的景象，最适合制作一些由线条或色块构成的图形，如色彩简单的图像或卡通形象一类的夸张造型。 一、 网页图像简述 3.常见的网页图像格式 GIF格式：即图形交换格式，最多使用256种颜色。它适合显示色调不连续或具有大面积单一颜色的图像，如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。 JPEG格式：即联合图像专家组格式，是用于摄影或连续色调图像的高级格式，可以包含数百万种颜色。 PNG格式：即可移植网络图形格式，是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像及Alpha通道透明的支持。 二、 插入图像 1.插入普通图像 单击“常用”工具栏中的“图像”按钮右侧的三角按钮 ，从弹出的菜单中选择“图像”命令，或选择“插入记录”|“图像”命令，打开“选择图像源文件”对话框，选择所需的图像文件。 二、 插入图像 2.插入图像占位符 单击“常用”工具栏中的“图像”按钮右侧的三角按钮，从弹出的菜单中选择“图像占位符”命令，或选择“插入记录”|“图像对象”|“图像占位符”命令，打开“图像占位符”对话框，在其中进行相关设置。 二、 插入图像 3.插入鼠标经过时变化的图像 单击“常用”工具栏中的“图像”按钮右侧的三角按钮，从弹出的菜单中选择“鼠标经过图像”命令，或者选择“插入记录”|“图像对象”|“鼠标经过图像”命令，打开“插入鼠标经过图像”对话框，在其中进行所需设置。 二、 插入图像 4.插入Photoshop图像 插入Photoshop图像：选择“插入记录”｜“图像”命令，打开“选择图像源文件”对话框。选择后缀为.psd的图像文件，单击“确定”按钮，打开“图像预览”对话框。在“选项”选项卡中的“格式”下拉列表框中选择要将其转换为的图像格式，然后根据所选格式做进一步设置。 二、 插入图像 4.插入Photoshop图像 复制Photoshop图像： （1）使用选框工具选择要复制的部分，然后选择“编辑”｜“拷贝”命令，复制整个图层或局部。 （2）使用选框工具选择要复制的部分，然后选择“编辑”｜“合并拷贝”命令，复制并合并多个图层。 （3）使用“切片选择”工具选择切片，然后选择“编辑”｜“拷贝”命令，复制切片。 （4）选择“选择”｜“全部”命令选择整个图像，再选择“编辑”｜“拷贝”命令将其复制到剪贴板中。 三、 编辑图像 1.图像的属性检查器 编辑图像的操作主要是在图像的属性检查器中进行的。当选择了网页中的一幅图像时，属性检查器中即会反映该图像的属性。 三、 编辑图像 2.调整图像大小 使用属性检查器：在属性检查器上的“宽”与“高”文本框中输入图像的宽、高值。若要将图像的宽、高大小按比例缩放，则可在“宽”或“高”中任意一个文本框中输入值，然后按Enter键，系统会自动确定另一个值。 使用鼠标拖动：在图像的选择状态下，图像选择框上会显示3个控制柄，拖动任意一个控制柄即可按相应的方向缩放图像。若要进行等比例缩放，可在按住Shift键的同时拖动右下角的控制点。 三、 编辑图像 3.裁剪图像 选择所需的图像后，单击属性检查器中的“裁剪”按钮 ，或者选择“修改”|“图像”|“裁剪”命令，所选图像的周围即会出现裁剪控制柄，如下图。调整裁剪控制柄到图像中要保留的位置，在图像上双击或按Enter键即可将图像的多余部分裁剪掉。 三、 编辑图像 4.调整图像的亮度和对比度 选择所需图像后，选择“修改”|“图像”|“