《网页设计与制作》 第6章：图像操作.pdf

《网页设计与制作》 《网页设计与制作》 教学课件 教学课件 第6章：图像操作 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 节 环 学 教 要 主 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 （一）课程引导 图像也是网页中主要元素之一，图像不但 能美化网页，与文本相比能够更直观地表达信 息。在页面中恰到好处地使用图像能使网页更 加地生动、形象和美观 （二）明确知识技能目标 （1）掌握图像的插入方法。 （2 ）掌握图像属性的设置方法。 （3 ）掌握图像与文本混合编排的方法。 （4 ）掌握插入鼠标经过图像的方法，了解插入图像 占位符的方法。 （三）网页浏览效果展示 本章所制作的网页03.html浏览效果如图所示。 图6-1 网页03.html的浏览效果 （四）本章操作任务 （1）打开“长沙世界之窗”网站文件夹“03图像操 作”中的网页“03.html”，在该网页中最后一段文本 与日期之间插入两幅图片。 （2）按规定要求设置所插入图像的属性。 （3）在已插入图片的右侧插入鼠标经过图像。 （4）制作包括一个图像按钮的导航条。 （五）知识讲解与操作示范（1） 6.1 图像概述 目前因特网上支持的图像格式主要有GIF、JPEG、 PNG三种。其中GIF和JPEG两格式的图片文件由于文件 较小、适合于网络上的传输，而且能够被大多数的浏 览器完全支持，所以是网页制作中最为常用的文本格 式。 （五）知识讲解与操作示范（2） 6.2 图像操作 6.2.1 插入图像 打开“长沙世界之窗”网站文件夹“03图像操作” 中的网页“03.html”，在该网页中最后一段文本与日 期之间插入两幅图片。具体操作过程如下。 （1）切换到“长沙世界之窗”网站，打开文件夹 “03图像操作”中网页03.html。 （2）将光标放置在网页 03.html正文文本最后一行 的尾部，按Enter键换行。 （五）知识讲解与操作示范（3） （3）单击菜单【插入】→【图像】，或单击“常 用”插入工具栏上的【图像】按钮 ，弹出“选择 图像源文件”对话框。 （4）在“选择图像源文件”对话框中先选择需要 的图像文件的路径，然后选择一个需要插入的图像 文件。 （5）单击【确定】按钮，接着会弹出“图像标签 辅助功能属性”对话框，提醒用户输入替换文本和 详细说明。 （五）知识讲解与操作示范（4） 6.2.2 设置图像属性 图像的属性设置要求如下： （1）设置图像的宽度为“150”，高度为“100”。 （2）调整图像与其上方及下方文字的间距为“10”。 （3）设置图像的替换文本为“悉尼歌剧院”。 （4）为图像添加边框，边框宽度为“3”。 （5）设置图像与浏览器“左对齐”，设置图像与文本 的对齐方式为“绝对底部”。 （五）知识讲解与操作示范（5） 根据图像的属性设置要求完成图像属性的设置