第5讲  图像的操作（一）
1.1教学目标：
◆ 知识目标
1. 认识图像，掌握在页面中插入图像的方法
2. 掌握图像各属性的作用和交换图像的设置。
◆ 技能目标
3. 能够根据页面显示效果在适当位置插入图像元素。
◆ 品质目标
培养学生认真细致、踏实进取的精神
1.2教学重点：
4. 掌握图像各属性的作用和交换图像的设置。
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图片编辑按钮
其中，按钮从左至右依次为：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。