网页制作与网站设计_06DreamweaverCS3中使用图片

1、项目六项目六 Dreamweaver CS3中使用图片 l 内容摘要内容摘要 介绍了图片的插入与编辑 介绍了修改图片大小 介绍了图像的对齐、裁减图片 介绍了设置图片交替效果 l 学习图片的插入及其属性设置l 掌握如何调整图片大小、裁剪图片并进行效果的修复 l 学习图片与其它元素的对齐方式l 掌握图片的应用交换图像行为，创建鼠标经过图像并在浏览器中观察l 学习目标学习目标任务1 图片的插入与编辑 1. 任务说明任务说明 图像是网页制作中最常用的因素之一，灵活地使用图像会使网页更加亮丽。 2. 任务说明任务说明 本任务主要介绍图片的插入和编辑，因为此项操作的详细讲解已在项目四中做了介绍，故在此只做

2、总结性介绍。 图像的插入方法如下 。 3. 操作步骤操作步骤 1）在文档窗口工具箱的常用工具栏中单击“图像”按钮，在图像源文件目录中选择一幅图片。2）单击文档窗口菜单命令“插入/图像”。3）按F11键，打开资源面板，从本站点的图像列表中点击图片，预览插入图片，也可直接拖动图片到“文档”编辑窗口中所需位置，如图6-1所示 。 选中图片后，就可在属性面板中对该图片进行属性设置。如果没有属性面板，可单击菜单命令“窗口/属性” 图6-1 资源面板 任务2修改图片大小 1任务描述任务描述 插入的图片过大会影响页面的布局，需要调整图片大小。 2. 任务说明任务说明 在 Dreamweaver 中以可视方式

3、调整图像的大小，有助于看到不同尺寸的图像对布局的影响情况，但不会将图像文件缩放到您所指定的比例。但如没有使用图像编辑应用程序（如 Fireworks）将图像缩放到所需大小，则可能导致用户浏览器中页面下载延迟和图像显示不正确。若要缩短下载时间并确保所有图像实例以相同大小显示，应使用图像编辑应用程序缩放图像。 3. 操作步骤操作步骤 1）在“文档”窗口中选中图像，则图像的底部、右侧及右下角出现调整大小的控制点。如果未出现调整大小控制点，则单击该图像以外的部分然后重新选择它，或在标签选择器中单击标签以选择该图像，如图6-2所示 图6-2 调整图像大小 2）在属性面板的“宽”和“高”文本框中输入数值，

4、调整图像的大小。 若要将已调整大小的元素恢复为原始尺寸，在属性检查器中删除“宽”和“高”文本框中的值，或者单击图像属性检查器中的“重设大小”按钮，（如图6-3中箭头指向按钮） 图6-3 还原图像大小 图6-4 图像重新取样 3）在 Dreamweaver 中调整图像大小时，可以对图像进行重新取样（如图6-4中箭头指向按钮），以适应其新尺寸。重新取样将添加或减少已调整大小的 JPEG 和 GIF 图像文件中的像素，以与原始图像的外观尽可能地匹配。对图像进行重新取样会提高图片在新的大小和形状下的品质，减小该图像的文件大小并提高下载性能 任务3对齐、裁剪图片 1. 任务描述任务描述 除了对图像整体大

5、小进行调整外，还需要去掉图像的某些部分，达到所需效果。 2. 任务说明任务说明 本任务学习将图像与本页面中同行或同一段落的文本、图像、插件或其它元素的对齐方式，以及对图片进行裁剪获取局部图像。3. 操作步骤1）对齐图像 在“设计”视图中选择该图像。 在属性检查器中使用“对齐”弹出菜单设置该图像的对齐属性。对齐选项中包含如下选项：l默认值：指定基线对齐。（根据站点访问者的浏览器的不同，默认值也会有所不同。） l基线和底部：将文本（或同一段落中的其它元素）的基线与选定对象的底部对齐。 l顶对齐 ：将图像的顶端与当前行中最高项（图像或文本）的顶端对齐。 l居中 ：将图像的中线与当前行的基线对齐。 l

6、文本上方 ：将图像的顶端与文本行中最高字符的顶端对齐。 l绝对居中：将图像的中线与当前行中文本的中线对齐。 l绝对底部 ：将图像的底部与文本行（这包括字母下部，例如在字母 g 中）的底部对齐。 l左边距：将所选图像放置在左侧，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。l右对齐：将图像放置在右侧，文本在对象的左侧换行。如果右对齐文本在行上位于该对象之前，则它通常会强制右对齐对象换到一个新行。2）裁剪图片l在图像属性面板中单击“裁剪”工具按钮，这时会出现一个提示框，提示此操作将永久性改变所选图像，并非只在Dreanweaver中进行修改，而是在Win

7、dows的文件夹里的图像已经被永久改变，被截掉的部分不会被恢复。l裁剪时可以拖动各个方面的裁剪手柄，满意后双击鼠标或按回车键确认，如图6-5所示。任务4设置图片交替效果 1 1任务说明任务说明 在Dreamweaver中只需要简单的操作，就可以制作出极具动感的交替图像按钮，而且占用空间少，建立一组相互交替的图像，当鼠标移至目标图像上时，会显示出另外一幅图像，就像会动的按钮，既动感，又时尚。 2 2任务说明任务说明 通过“属性”检查器的“行为”面板中的“交换图像”，可以将一个图像和另一个图像进行交换。3. 操作步骤1）应用交换图像行为 “交换图像”行为通过更改 标签的src属性将一个图像和另一个

8、图像进行交换。使用此行为可创建鼠标经过按钮的效果以及其它图像效果（包括一次交换多个图像）。因为只有 src 属性受此行为的影响，所以应换入一个与原图像具有相同尺寸（高度和宽度）的图像。否则，换入的图像显示时会被压缩或扩展，以使其适应原图像的尺寸。还有一个“恢复交换图像”行为，可以将最后一组交换的图像恢复为它们以前的源文件。 在新建页面中，选择“插入/图像”或单击“插入”栏的“图像”按钮来插入一个图像。 在“属性”检查器最左边的文本框中为该图像输入一个名称，并不是一定要对图像指定名称，在将行为附加到对象时会自动对图像命名。但是，如果所有图像都预先命名，则在“交换图像”对话框中就更容易区分它们，如

9、图6-6所示。 选择该对象（通常是将交换的图像），然后从“行为”面板的“动作”菜单中选择“交换图像”（点击菜单命令“窗口/行为”会出现“行为”面板），如图6-7所示. 在“交换图像”对话框中，从“图像”列表中，选择要更改其来源的图像，这里是“奥运图标”图像，单击“浏览”选择新图像文件，或在“设定源文件为”框中输入新图像的路径和文件名，这里被交换的图像为“奥运冠军”，如图6-8所示 对所有要更改的其它图像重复第步。同时对所有要更改的图像使用相同的“交换图像”动作；否则，相应的“恢复交换图像”动作就不能全部恢复它们。 选择“预先载入图像”选项可在加载页面时对新图像进行缓存，这样可防止当图像应该出现

10、时由于下载而导致延迟。 单击“确定”，完成操作。这样在浏览器中当鼠标经过“奥运图标”图片时就会显示出另外一幅”乒乓冠军”图片.2）创建鼠标经过图像 鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。 它是由以下两个图像来创建鼠标经过图像：主图像（首次加载页面时显示的图像）和次图像（鼠标指针移过主图像时显示的图像）。鼠标经过图像中的这两个图像应大小相等，如果这两个图像大小不同，Dreamweaver 将调整第二个图像的大小以与第一个图像的属性匹配。插入鼠标经过图像的步骤如下： 在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。 使用以下方法之一插入鼠标经过图像：在“插

11、入”栏的“常用”标签中，单击“图像”按钮右边的下拉按钮，找到命令图标“鼠标经过图像”。 选择“插入/图像对象/鼠标经过图像 在弹出的“插入鼠标经过图像”对话框中进行相应设置，如图6-9所示。图像名称：用于设置该图像的名称l原始图像：页面加载时要显示的图像。在文本框中输入路径，或单击“浏览”并选择该图像。 l鼠标经过图像：鼠标指针滑过原始图像时要显示的图像。输入路径或单击“浏览”选择该图像。 l预载鼠标经过图像：将图像预先加载浏览器的缓存中，以便用户将鼠标指针滑过图像时不会发生延迟。 l替换文本：这是一种（可选）文本，为使用只显示文本的浏览器的访问者描述图像。 l单击时，转到 URL：用于设置变换图像上应用的超级链接，当鼠标指针移至该图像上并且