第4讲图像操作.ppt

制作“我与计算机”网页，页面效果见下一张幻灯片 完成后将网页以文件名”ZY2.htm”保存， 上交到“第2次”文件夹中 * 第3章 图像和多媒体 图像是网页中主要元素之一，图像不但能美化网页，与文本相比能够更直观地表达信息。在页面中恰到好处地使用图像能使网页更加地生动、形象和美观， 课程引导 知识技能目标 （1）掌握图像的插入方法。 （2）掌握图像属性的设置方法。 （3）掌握图像与文本混合编排的方法。 （4）掌握插入鼠标经过图像的方法，了解插入图像占位符的方法。 （5）创建网站相册。 3.1.1　课堂案例——儿童相册 使用“图像”按钮插入图像。使用“属性”面板改变图片的大小、调整图像的亮度和对比度并为图片添加文字说明。使用“图像占位符”命令代替网页中缺少的一张图片。 效果图 目前因特网上支持的图像格式主要有GIF、JPEG、PNG三种。其中GIF和JPEG两格式的图片文件由于文件较小、适合于网络上的传输，而且能够被大多数的浏览器完全支持，所以是网页制作中最为常用的图像格式。 3.1.2　网页中的图像格式 3.1.3　插入图像 要在Dreamweaver CS3文档中插入的图像必须位于当前站点文件夹内，否则图像不能正确显示，所以在建立站点时，网站设计者常先创建一个名叫“image”的文件夹，并将需要的图像拷贝到其中。 3.1.4　设置图像属性 插入图像后，在“属性”面板中设置该图像的属性。 属性面板 3.1.5　给图片添加文字说明 当图片不能在浏览器中正常显示时，网页中图片的位置就变成空白区域。为了让浏览者在不能正常图片显示时也能了解图片的信息，常为网页的图像设置“替换”属性。 3.1.6　插入图像占位符 在网页布局时，网站设计者需要先设计图像在网页中的位置，等设计方案通过后，再将这个位置变成具体图像。Dreamweaver CS3提供的“图像占位符”功能，可满足上述需求。 在网页中插入图像占位符的具体操作步骤如下。 （1）在文档窗口中，将插入点放置在要插入占位符图形的位置。 （2）通过以下几种方法启用“图像占位符”命令，弹出“图像占位符”对话框。 选择“插入”面板“常用”选项卡，单击“图像”展开式工具按钮，选择“图像占位符”选项。 选择“插入记录 图像对象 图像占位符”命令。 3.2　调整图文的混排效果 课堂案例——数码相机网页 调整图像与文本的相对位置 3.2.1　课堂案例——数码相机网页 使用“图像”按钮插入图像。使用“属性”面板改变图像的对齐、水平边距。 效果图 3.2.2　调整图像与文本的相对位置 网页中既有文字，又有图像，如何调整文字和图像的摆放位置达到表现良好的视觉效果，这就涉及图像与文字的相对位置问题。 调整同一行图像与文字相对位置的具体操作步骤如下。 （1）在设计视图中选择图像。 （2）在图像“属性”面板中展开“对齐”选项的下拉列表，选择一种调整图像与文字相对位置的方式。“对齐”选项中提供了9种图像与文字的对齐方式。 3.5　课堂练习——数码世界网页 使用“图像”按钮插入图像。使用“对齐”选项将插入的图像右对齐。 效果图 3.3　创建网站相册 课堂案例——家庭生活照片 创建网站相册 3.3.1　课堂案例——家庭生活照片 用“创建网站相册”命令制作相册效果。使用“查找”和“替换”命令将图像设为居中显示效果。 效果图 3.3.2　创建网站相册 在开始创建网站相册之前，将相册的所有图像放置在一个文件夹中，并确保图像文件名的扩展名为：“.Gif”、“.Jpg”、“.Jpeg”、“.Png”、“.Psd”、“.Tif” 或“.Tiff”。首先，使用Fireworks CS3来为该文件夹中的每个图像创建一个缩略图和一个较大尺寸的图像。然后，应用Dreamweaver CS3创建一个Web页，它包含所有缩略图以及指向大图像所在网页的链接。 ★ 课外拓展实践 ★