网页制作技能训练 教学课件 作者 高津 许晓斌项目六.ppt

《网页制作技能训练 教学课件 作者 高津 许晓斌项目六.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目六DreamweaverCS3中使用图片内容摘要介绍了图片的插入与编辑介绍了修改图片大小介绍了图像的对齐、裁减图片介绍了设置图片交替效果学习图片的插入及其属性设置掌握如何调整图片大小、裁剪图片并进行效果的修复学习图片与其它元素的对齐方式掌握图片的应用交换图像行为，创建鼠标经过图像并在浏览器中观察学习目标任务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图像文件中的像素，以与原始图像的外观尽可能地匹配。对图像进行重新取样会提高图片在新的大小和形状下的品质，减小该图像的文件大小并提高下载性能任

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

6、最高项（图像或文本）的顶端对齐。居中：将图像的中线与当前行的基线对齐。文本上方：将图像的顶端与文本行中最高字符的顶端对齐。绝对居中：将图像的中线与当前行中文本的中线对齐。绝对底部：将图像的底部与文本行（这包括字母下部，例如在字母g中）的底部对齐。左边距：将所选图像放置在左侧，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。右对齐：将图像放置在右侧，文本在对象的左侧换行。如果右对齐文本在行上位于该对象之前，则它通常会强制右对齐对象换到一个新行。2）裁剪图片在图像属性面板中单击“裁剪”工具按钮，

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

8、图像”，可以将一个图像和另一个图像进行交换。3.操作步骤1）应用交换图像行为“交换图像”行为通过更改标签的src属性将一个图像和另一个图像进行交换。使用此行为可创建鼠标经过按钮的效果以及其它图像效果（包括一次交换多个图像）。