第4章_在网页中使用图像.pptVIP

Dreamweaver 网页制作 授课：沈森林 交流论坛：/bbs E-Mail:keithforest@163.com 第四章 在网页中使用图像 教学目标： 了解常用的网页图像格式 掌握如何在Dreamweaver中添加图像 掌握如何在Dreamweaver中处理图像 如何使用热区 掌握如何制作图片导航条和鼠标经过图像 掌握如何添加图像占位符 掌握如何添加背景图像 了解如何使用Photoshop文件 4.1 网络图像格式 图像是网页中非常重要的内容。在Dreamweaver CS3中，可以在页面中插入图像，并利用软件自带的功能设置各种图像效果，例如导航栏、链接和鼠标经过效果等。 网页中常用的图像文件格式有JPEG(JPG)、GIF和PNG这3种。 4.1.1 Web 页图像基础 4.1.1 .1 Web 页图像格式 1.GIF 格式 对于目前广泛使用的 GIF 格式而言，还具有透明色的特点，即可以将图片中的某种颜色设置为透明色。这对于实现某些网页效果来说，具有非常现实的意义。例如，图 4-1 对比了一般的 GIF 图像和具有透明色的 GIF 图像。对于多数图像处理软件（例如 Fireworks）甚至某些网页制作软件（例如 FrontPage），都提供了将图片中的某种颜色转换为透明色的功能。 图 4-1 普通 GIF 与透明 GIF 的区别 JPEG 格式 图4-2中显示了两种不同压缩比率的 JPEG 图的效果。 图 4-2 不同质量 JPEG 图像的对比 PNG 格式 矢量格式 位图格式与矢量格式的区别如图 3-3 所示。 位图，用点描述图像 矢量图，用线条等数学信息描述图像 图 3-3 位图与矢量图的对比 4.1.2选择图形图像处理软件 PhotoshopPhotoshop 6.0 的界面如图 3-4 所示。 图 4-4 Photoshop 6.0 的基本界面 Fireworks Flash Flash界面如图 3-5、3-6 所示。 图 3-5 Fireworks4.0 基本界面 图 4-6 Flash5.0 基本界面 4.1.3　使用网页图像的要点 确保文件较小 1．使图像具有所需的像素大小 所谓图像的像素大小就是指由图像本身的像素宽和像素高所确定的图像大小，例如，在同一种显示模式下，一个 1024×768 的图像就显然比 800×600的图像大的多。 在大多数情况下，如要将原来像素大小比较大的图像缩小，应使用图形图像处理软件更改图像的“Image Size”。一般在修改之后，图像的文件大小会显著变化。 例如，在 Photoshop6.0 中，可以使用“Image”菜单中的“Image Size”命令，此时弹出如图 4-7 所示的“Image Size”对话框，可以在其中更改图像的宽度、高度和分辨率。 图 4-7 Photoshop6.0 的“Image Size”对话框 2．采用正确的格式进行优化处理 一般图形图像处理软件都可以进行这些工作。例如，在 Photoshop6.0 中，如果要设置图像的格式和优化选项，可以先将图像文件打开，然后选择“File”菜单中的“Save for Web”命令，此时打开如图 3-8 所示的“Save for Web”对话框。 4.2 在Dreamweaver中插入图片 4.2.1 在设计视图中插入图像 4.2.2 从资源面板中插入图像 4.2.3 在代码视图中插入图像 4.3 在Dreamweaver中处理图片 4.3.1 图片的基本设置 4.3.2 编辑图片 4.3.1 图片的基本设置 设置图片属性，主要包括设置图片的大小、对齐方式、边距等。 4.3.2 编辑图片 图像编辑器，主要分为内部图像编辑器和外部图像编辑器。 4.4 使用热区 大家在打开带有图片的网页时，有时会看到这样的情况：当鼠标指向图片的不同部位时，可以打开不同的超链接，这种技术我们称之为——网页图片热区 4.4.1 绘制热区 4.4.2 在标签检查器中设置热区 4.5 制作光标经过图像 是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。 必须用以下两个图像来创建鼠标经过图像:主图像(首次加载页面时显示的图像)和次图像(鼠标指针移过主图像时显示的图像) 4.6 制作导航条 “导航条”由一个或多个图像组成，它的显示随着动作的改变而改变，因此，在使用导航条命令之前，应首先创建一个用于导航条的图像集。