《网页设计与制作》教案-第5讲 图像的操作(一)

第5讲图像的操作（一）
1.1教学目标：
◆知识目标
1.认识图像，掌握在页面中插入图像的方法
2.掌握图像各属性的作用和交换图像的设置。

◆技能目标
1.能够根据页面显示效果在适当位置插入图像元素。

◆品质目标
培养学生认真细致、踏实进取的精神
1.2教学重点：
2.掌握图像各属性的作用和交换图像的设置。

1.3 教学难点
交换图像的设置。

1.4教学方法：讲练结合，任务驱动、分子任务操练
1.5课时安排：2课时
1.6教学对象分析：
这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：
一、激趣导入，揭示课题
前一章节把Dreamweaver MX的工作环境做了一个详细介绍，相信同学们对网页制作软件的界面有了一个清晰的认识，万事开头难，一个好的站点不仅有全局规划，而且一个功能强大的网站，需要多方面知识的积累，首先找一个已经做得比较好的网站，把整个链接过程演示给学生，让他们感受到网站其实做起来也不难，只要用心就可以，关键是主线要清晰。

二、使用图像
图像和文字是网页中最重要的两个元素。

一个高质量的网页是离不开图像的。

制作精良的图像可以大大增强网页的美观性，令网页更加生动多彩。

在页面中如何用漂亮的图像来吸引人们的视线是每个网站都需要面对的问题。

一幅好的图片，胜过千言万语，反映在网页上也是如此。

在这里“好的”这个词包含了三方面的含义：一是指合适的，用一幅毫不相干的图像只会起到画蛇添足的作用；二是指正确的，用一个文件量很大的图像或者格式错误的图像，只会让浏览者对你的网页火冒三丈；三是指漂亮的。

0.1认识图像
要在文档中正确使用图像，首先要了解一些Internet相关的图像知识。

由于图像在磁盘中的压缩方式和存储方式的不同，加上许多图像处理软件又有自己专门的格式，所以图像的标准有很多种。

目前在Internet上最为常见的图像包括JPG、JPEG、GIF
和PNG等几种，在网页上使用的图像一般有JPEG、GIF、PNG等。

像BMP、PSD等格式的图像因为文件太大，影响网络的传输速度，因此几乎不在网络中使用。

1.GIF图像
GIF（Graphics Interchange Format图形交换格式）是一种索引颜色格式，文件最多只支持256 种颜色，色彩比较简单，但文件比较小，是网页上常用的图像格式。

GIF图像在网络上流行的另一个原因是它支持透明背景，所以它在网页中经常被用做项目符号和按钮等希望不遮挡背景的元素。

但是，由于GIF动画最高只支持256色，所以它的缺点也很明显，不能很好的表现更丰富的色彩效果。

2.JPEG图像
JPEG（Joint Photographic Expert Group联合图像专家组标准）格式是一种有损压缩的格式，由于它具有很高的压缩比，从浏览的角度看图像质量受到损失不大，大大方便了网上传输和用磁盘交换图像。

JPEG格式是用于摄影或连续色调图像的高级格式，这是因为JPEG 文件可以包含数百万种颜色。

随着JPEG 文件品质的提高，文件的大小和下载时间也会随之增加。

通常可以通过压缩JPEG 文件在图像品质和文件大小之间达到良好的平衡。

3.PNG图像
PNG（Portable Network Graphic可移植网络图形）文件格式是一种替代GIF 格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及alpha 通道透明的支持。

PNG 是Macromedia Fireworks 固有的文件格式。

PNG 文件可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是可以完全编辑的。

文件必须具有.png 文件扩展名才能被Dreamweaver 识别为PNG 文件。

目前，GIF 和JPEG 文件格式的支持情况最好，大多数浏览器都可以查看它们。

0.2插入图像
插入图像是一个简单的操作，只需要用一个命令或者一个按钮就可以实现。

然而，想正确地插入图像需要了解很多知识。

除了前面介绍过的图像格式外，图像的位置也是很重要的，在插入图像时要明确采用的是绝对位置还是相对位置。

还需要对图像属性的了解，包括对齐方式和留白大小等。

要在页面中插入图像，可执行下列操作：
1)在设计视图下，将光标放置到文档中需要插入图像的地方。

2)执行“插入/图像”命令，或者单击对象面板常用对象组上的图像按钮，如图2-37
所示。

此时会出现如图2-38所示对话框，用户可以从磁盘上选择图像文件。

图2-37 插入图像
图2-38插入图像对话框
3)选择需要插入的图片，在该对话框的URL文本框中，会显示当前选中文件的URL
地址。

4)在“相对于”选项后的文本框下拉列表中，可以选择文件URL地址的类型。

选择文
档，则使用相对地址；选择站点根目录，则使用基于根目录的地址。

选择预览图像复选框，则可以在对话框右边预览图像。

5)选定图像文件后，单击确定按钮，即可将图像插入到页面中。

如果选择的图像没有在本地站点的目录中，则会出现如图2-39所示对话框，询问是否要将该图像文件复制到你的本地站点中。

单击“是”，则图像被复制到站点目录中，同时会出现一个对话框，提示从站点中选择目录。

图2-39询问是否将图像复制到本地站点
将图像复制到站点中后，页面中引用的是位于站点中的图像文件，如果不希望复制图像文件，则单击“否”按钮，如果图像位于站点目录之外，可能会造成网页无法正常浏览。

在文档窗口中插入图像后，就会将该图像的原始大小显示出来。

如图2-40所示。

图2-40在页面中插入图片
0.3设置图像属性
仅仅将图像插入网页，并不能达到正确使用图像的目的。

只有了解了图像的属性以及如何设置修改这些属性，才能创建出图文并茂的网页。

插入图像以后在属性面板中可以查看图像的所有属性，并对其进行修改。

在文档窗口选择一幅图像，此时属性检查器显示该图像的基本属性。

如图2-41所示。

图2-41图像属性面板
若要设置图像属性，则在选择图像后，执行以下操作：
1.给图像命名
在属性面板的左上角显示当前图像的缩略图，使用缩略图下面的文本框设置图像名称，以便在使用Dreamweaver 行为（例如“交换图像”）或脚本撰写语言（例如JavaScript 或VBScript）时可以引用该图像。

2.改变图像大小
“宽”和“高”以像素为单位指定图像的宽度和高度。

在页中插入图像时，Dreamweaver 自动用图像的原始尺寸更新这些文本框。

这里我们更改是图像显示的宽度和高度，图像文件的真正大小是不变，只是它在页面中的显示被进行了缩放。

所以这不会缩短下载时间，因为浏览器在缩放图像前会下载所有图像数据。

若要缩短下载时间并确保所有图像实例以相同大小显示，请使用图像编辑应用程序缩放图像。

3.改换图像
在属性检查器中“源文件”可以指定图像资源的URL路径。

若需要替换图片，可以单击右边的文件夹图标打开一个对话框，然后从磁盘上选择文件，或者直接键入图像的路径。

4.图像超链接
“链接”指定图像的超链接。

在文本框中输入图像超链接的URL地址，此时图像被设置为一个超级链接。

在浏览器中，单击该图像，即可跳转到相应的位置上。

同样，通过单击右边的文件夹图标，可以打开一个对话框，从磁盘上选择要链接是对象；通过拖动该文本框右边
的“指向文件”图标，也可以提取相应的URL链接路径。

（有关创建链接的信息将在后面的
章节中详细叙述）
5.给图像加上替代文本
“替代”指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。

在属性检查器中“替代”文本框中输入图像的文本说明。

图像替代文本起到了两个作用。

一是当鼠标移动到这些图像上时，如果这个图像加上了替代文本，浏览器可以在鼠标指针右下方弹出一个黄底的说明框，为浏览者提供提示。

二是当浏览器禁止显示图片时，如果给图像加上了替代文本，可以在图像位置显示出这些文本。

6.为图像定义样式
单击属性检查器中“类”后面的下拉列表可以从已定义的样式中选择为图像定义的样式。

7.编辑图像
在属性检查器中编辑这里集合了一些常用的图片编辑工具，其实是调用了Fireworks的图
片编辑功能，这是Dreamweaver MX 2004新增的功能。

如图2-42所示。

图2-42图片编辑按钮
其中，按钮从左至右依次为：
使用Fireworks编辑图像：点击后可以调出Fireworks编辑窗口，进行图像编辑。

在Fireworks中优化：打开Fireworks的优化窗口，进行图像的优化。

（关于Fireworks
的编辑与优化请参考Fireworks相关书籍，这里不详述）
裁切图像：使用内置的裁切工具进行图像的裁切。

修剪图像的大小，从所选图像中删除不需要的区域。

图2-41裁切图像
重新取样：单击此按钮后，如果把图像宽度和高度变小后，可以重新采样，使图像本身文件尺寸变小。

如图2-42所示
图2-42图像重新采样前后
调整亮度和对比度：单击此按钮，或执行“修改/图像/亮度/对比度”命令，弹出如图
2-43所示亮度对比度对话框，分别拖动滑块来调整图像的亮度和对比度。

值的范围从-100~100。

“亮度/对比度”修改图像中像素的亮度或对比度，这将影响图像的高亮显示、阴影和中间色调。

修正过暗或过亮的图像时通常使用“亮度/对比度”。

图2-43调整亮度对比度
锐化图像：锐化将增加对象边缘的像素的对比度，从而增加图像清晰度或锐度。

单击图像属性检查器中的“锐化”按钮，或者执行“修改/图像/锐化”命令，将弹出如图2-44
所示对话框。

可以通过拖动滑块控件或在文本框中输入一个0 到10 之间的值，来指定Dreamweaver 应用于图像的锐化程度。

图像锐化前后的效果对比如图2-45所示。

图2-44锐化图像图2-45图像锐化前后的效果
8.为图像创建链接热区
在图像属性检查器中“地图”后面的文本框中输入图像映像的名称，用巨型、圆形、多边形工具可以在一幅图像上创建多个链接热区。

例如选择地图右下角的矩形工具，在图像上绘制一个矩形热区，在属性检查器中链接文本框后输入链接地址，如图2-46所示，则一个矩形链接热区创建完成，预览时，单击该热区即可跳转到该热区所连链接的内容上去。

图2-46为图像创建热区
9.设置图像边距
选中图像后，在图2-41所示的图像属性检查器上“垂直边距”和“水平边距”后的文本框中输入合适的参数可以设置图像垂直方向和水平方向的边距。

10.设置图像超链接的目标窗口
如果为图像设置了超链接，则在图像属性检查器上“目标”后的下拉列表中选择设置链接目标端点文档的打开位置。

“目标”是指链接的页面载入的框架或窗口。

当前框架集中所有框架的名称都显示在“目标”列表中。

也可选用下列保留目标名：
_blank将链接的文件载入一个未命名的新浏览器窗口中。

_parent将链接的文件载入含有该链接的框架的父框架集或父窗口中。

如果包含链接的框
架不是嵌套的，则链接文件加载到整个浏览器窗口中。

_self将链接的文件载入该链接所在的同一框架或窗口中。

此目标是默认的，所以通常不需要指定它。

_top将链接的文件载入整个浏览器窗口中，因而会删除所有框架。

11.设置低分辨率图像
用图像处理工具制作两个图像，其中一个是浏览器最终显示的图像，另一个是它是低分辨率图像或者是灰度图像，把它们都保存在站点文件夹下。

在页面中插入需要的图像后，在属性检查器上“低解析度源”文本框后的浏览文件按钮，选中低分辨率图像，确认。

这样浏览者在浏览网页时，低分辨率图像就最为载入主图像的缩略图，它们在主图像被载入前先被显示，因为它们的分辨率低，所以文件很小，显示很快，便于浏览者快速了解要显示的图像到底是什么样子的。

12.增加图像边框
在图像属性检查器上“边框”后的文本框内输入边框的宽度，以象素为单位，可以为图像增加边框，不输入或输入为0表示没有边框。

13.对齐图像
可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐。

还可以设置图像的水平对齐方式。

在属性检查器中“对齐”下拉列表中设置该图像的对齐属性。

可以设置该图像相对于同一段落或行中的其它元素的对齐方式。

0.4设置交换图像
1.创建鼠标经过图像
鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。

我们浏览网站时经常可以看到这样一种情况，当鼠标移到某一图像时，图像变成了另一幅图像，当鼠标移开时，又恢复成原来的图像。

我们把这种图像为鼠标经过图像。

若要插入鼠标经过图像，必须准备两幅图像：主图像（当首次载入页时显示的图像）和次图像次图像（当鼠标指针移过主图像时显示的图像）。

鼠标经过图像中的这两个图像应大小相等；如果这两个图像大小不同，Dreamweaver 将自动调整第二个图像的大小以匹配第一个图像的属性。

若要在网页中实现创建鼠标经过图像效果，可以按照如下方法进行操作：
1)利用处理工具创建两幅图像，一幅主图像，一幅次图像。

2)在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。

3)在“插入”栏中，选择“常用”，然后单击“鼠标经过图像”图标或直接将“鼠标经过图
像”图标拖到“文档”窗口中的所需位置，或者执行“插入/图像对象/鼠标经过图像”命令，弹出如图2-47所示“插入鼠标经过图像”对话框，依次填写过程。

图2-47插入鼠标经过图像对话框
4)设置完毕，按下确定按钮，确认操作，即可在文档中插入鼠标经过图像效果。

5)预览鼠标经过效果。

在文档窗口是不能看到鼠标经过图像的效果的。

要看效果可以
执行“文件/在浏览器中预览”命令，或按F12 键，启动浏览器，在浏览器中，将鼠
标指针移过原始图像，显示应切换到鼠标经过图像。

如图2-48所示。

2.利用行为创建交换图像
“交换图像”动作通过更改img标签的src属性将一个图像和另一个图像进行交换。

使用此动作创建按钮鼠标经过图像和其它图像效果（包括一次交换多个图像）。

插入鼠标经过图像会自动将一个“交换图像”行为添加到页面中。

因为只有src属性受此动作的影响，应该换入一个与原图像具有相同尺寸（高度和宽度）的图像。

否则，换入的图像显示时会被压缩或扩展，以使其适应原图像的尺寸。

若要在网页中添加交换图像行为，可执行以下操作：
1)插入图像，设置图像相应的属性，并为图像命名。

可以插入多幅图像，这些图像将
作为原始图像。

2)选择要添加交换图像行为的对象（通常是将要交换的图像），并打开“行为”面板。

3)单击行为面板上的加号按钮，并从“动作”弹出菜单中选择“交换图像”，弹出交换
图像对话框，如图2-49所示。

鼠标没有指向图像时鼠标指向图像时
图2-48在浏览器中预览鼠标经过效果
图2-49交换图像对话框
4)设置完毕，单击确定按钮。

此时在行为面板上出现了两个动作，同时还出现了相应的事件，如图2-50所示。

这样在浏览网页时，当鼠标移到初始图像上时，将变换为选择的第二幅图像。

图2-50添加交换图像后的行为面板
行为面板中为对象添加动作；删除对象已存在的动作；“上/下移”按钮调整动作顺序。

左边显示事件，右边显示当事件发生时进行的动作。

1.8归纳总结：
本讲主要是让同学们认识图像，掌握在页面中插入图像的方法，掌握图像各属性的作用和交换图像的设置。

1.9课后作业题：
1.图像的格式有哪几种？
2.图像的属性如何设置？
3.交换图像效果如何设置？。