网页制作与网站设计_06DreamweaverCS3中使用图片解剖.ppt

项目六 Dreamweaver CS3中使用图片 内容摘要 介绍了图片的插入与编辑 介绍了修改图片大小 介绍了图像的对齐、裁减图片 介绍了设置图片交替效果 学习图片的插入及其属性设置 掌握如何调整图片大小、裁剪图片并进行效果的修复 学习图片与其它元素的对齐方式 掌握图片的应用交换图像行为，创建鼠标经过图像并在浏览器中观察 学习目标 任务1　 图片的插入与编辑  1. 任务说明 图像是网页制作中最常用的因素之一，灵活地使用图像会使网页更加亮丽。 2. 任务说明 本任务主要介绍图片的插入和编辑，因为此项操作的详细讲解已在项目四中做了介绍，故在此只做总结性介绍。 图像的插入方法如下 。 3. 操作步骤 1）在文档窗口工具箱的常用工具栏中单击“图像”按钮，在图像源文件目录中选择一幅图片。 2）单击文档窗口菜单命令“插入/图像”。 3）按F11键，打开资源面板，从本站点的图像列表中点击图片，预览插入图片，也可直接拖动图片到“文档”编辑窗口中所需位置，如图6-1所示 。 选中图片后，就可在属性面板中对该图片进行属性设置。 如果没有属性面板，可单击菜单命令“窗口/属性” 图6-1 资源面板 任务2　修改图片大小  　　 1．任务描述 插入的图片过大会影响页面的布局，需要调整图片大小。 2. 任务说明 在 Dreamweaver 中以可视方式调整图像的大小，有助于看到不同尺寸的图像对布局的影响情况，但不会将图像文件缩放到您所指定的比例。但如没有使用图像编辑应用程序（如 Fireworks）将图像缩放到所需大小，则可能导致用户浏览器中页面下载延迟和图像显示不正确。若要缩短下载时间并确保所有图像实例以相同大小显示，应使用图像编辑应用程序缩放图像。 3. 操作步骤 1）在“文档”窗口中选中图像，则图像的底部、右侧及右下角出现调整大小的控制点。如果未出现调整大小控制点，则单击该图像以外的部分然后重新选择它，或在标签选择器中单击img标签以选择该图像，如图6-2所示 图6-2 调整图像大小 2）在属性面板的“宽”和“高”文本框中输入数值，调整图像的大小。 若要将已调整大小的元素恢复为原始尺寸，在属性检查器中删除“宽”和“高”文本框中的值，或者单击图像属性检查器中的“重设大小”按钮，（如图6-3中箭头指向按钮） 图6-3 还原图像大小 图6-4 图像重新取样 3）在 Dreamweaver 中调整图像大小时，可以对图像进行重新取样（如图6-4中箭头指向按钮），以适应其新尺寸。重新取样将添加或减少已调整大小的 JPEG 和 GIF 图像文件中的像素，以与原始图像的外观尽可能地匹配。对图像进行重新取样会提高图片在新的大小和形状下的品质，减小该图像的文件大小并提高下载性能 任务3　对齐、裁剪图片  1. 任务描述 除了对图像整体大小进行调整外，还需要去掉图像的某些部分，达到所需效果。 2. 任务说明 本任务学习将图像与本页面中同行或同一段落的文本、图像、插件或其它元素的对齐方式，以及对图片进行裁剪获取局部图像。 3. 操作步骤 1）对齐图像 ① 在“设计”视图中选择该图像。 ② 在属性检查器中使用“对齐”弹出菜单设置该图像的对齐属性。 对齐选项中包含如下选项： 默认值：指定基线对齐。（根据站点访问者的浏览器的不同，默认值也会有所不同。） 基线和底部：将文本（或同一段落中的其它元素）的基线与选定对象的底部对齐。 顶对齐 ：将图像的顶端与当前行中最高项（图像或文本）的顶端对齐。 居中 ：将图像的中线与当前行的基线对齐。 文本上方 ：将图像的顶端与文本行中最高字符的顶端对齐。 绝对居中：将图像的中线与当前行中文本的中线对齐。 绝对底部 ：将图像的底部与文本行（这包括字母下部，例如在字母 g 中）的底部对齐。 左边距：将所选图像放置在左侧，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。 右对齐：将图像放置在右侧，文本在对象的左侧换行。如果右对齐文本在行上位于该对象之前，则它通常会强制右对齐对象换到一个新行。 2）裁剪图片 在图像属性面板中单击“裁剪”工具按钮，这时会出现一个提示框，提示此操作将永久性改变所选图像，并非只在Dreanweaver中进行修改，而是在Windows的文件夹里的图像已经被永久改变