网页设计与制作案例教程-电子教案7.pptVIP

（7）对于“页面载入时就显示‘鼠标按下图像’”复选框，如果选中它，访问者浏览该网页时，会先显示在“按下图像”文本框中设置的图像；如果取消对该复选框的选择，浏览该网页时，会先显示在“状态图像”文本框中设置的图像。这里不选择该复选框。 （8）在“插入”下拉列表框中可以选择导航条的排列方式，有两个选项：“水平”和“垂直”。如果选择“水平”，则导航条将水平排列；如果选择“垂直”，则导航条将垂直排列。这里选择“水平”。 （9）对于“使用表格”复选框，如果选中它，则使用表格来排列导航条中的元件。 （10）单击【确定】按钮关闭“插入导航条”对话框。 （11）在页面中选中该“导航条”图像，利用“属性”面板对“导航条”图像的属性进行必要的设置，打开“页面属性”对话框适当调整左、右边距，将左边距和右边距调整为“50px”即可。 （12）保存网页文档，然后按F12快捷键浏览该网页。 插入图像占位符的操作过程如下： （1）在“常用”插入工具栏中，单击“图像”按钮旁边的小三角形，在弹出的下拉菜单中单击【图像占位符】，弹出“图像占位符”对话框。 6.3.3　插入图像占位符 点击此处结束放映 第6章 图像操作 图像也是网页中主要元素之一，图像不但能美化网页，与文本相比能够更直观地表达信息。在页面中恰到好处地使用图像能使网页更加地生动、形象和美观， 课程引导 知识技能目标 （1）掌握图像的插入方法。 （2）掌握图像属性的设置方法。 （3）掌握图像与文本混合编排的方法。 （4）掌握插入鼠标经过图像的方法，了解插入图像占位符的方法。 网页浏览效果展示 本章所制作的网页03.html浏览效果如图所示 图6-1　　网页03.html的浏览效果 本章操作任务 （1）打开“长沙世界之窗”网站文件夹“03图像操作”中的网页“03.html”，在该网页中最后一段文本与日期之间插入两幅图片。 （2）按规定要求设置所插入图像的属性。 （3）在已插入图片的右侧插入鼠标经过图像。 （4）制作包括一个图像按钮的导航条。 6.1 图像概述 6.2 图像操作 6.3 插入相关图像元素 6.1　图像概述 目前因特网上支持的图像格式主要有GIF（Graphics Interchange Format）、JPEG（Joint Photographic Experts Group）、PNG（Portable Network Graphic）三种。其中GIF和JPEG两格式的图片文件由于文件较小、适合于网络上的传输，而且能够被大多数的浏览器完全支持，所以是网页制作中最为常用的文本格式。 6.2.1　插入图像 6.2　图像操作 打开“长沙世界之窗”网站文件夹“03图像操作”中的网页“03.html”，在该网页中最后一段文本与日期之间插入两幅图片。具体操作过程如下。 （1）切换到“长沙世界之窗”网站，打开文件夹“03图像操作”中网页03.html。 （2）将光标放置在网页03.html正文文本最后一行的尾部，按Enter键换行。 （3）单击菜单【插入】→【图像】，或单击“常用”插入工具栏上的【图像】按钮，弹出“选择图像源文件”对话框。 （4）在“选择图像源文件”对话框中先选择需要的图像文件的路径，然后选择一个需要插入的图像文件。 （5）单击【确定】按钮，接着会弹出“图像标签辅助功能属性”对话框，提醒用户输入替换文本和详细说明。 6.2.2　设置图像属性 图像的属性设置要求如下： （1）设置图像的宽度为“150”，高度为“100”。 （2）调整图像与其上方及下方文字的间距为“10”。 （3）设置图像的替换文本为“悉尼歌剧院”。 （4）为图像添加边框，边框宽度为“3”。 （5）设置图像与浏览器“左对齐”，设置图像与文本的对齐方式为“绝对底部”。 根据图像的属性设置要求完成图像属性的设置： （1）在图像位置的上部输入图像的说明信息“悉尼歌剧院”。 （2）选中刚插入的图像，在属性面板中显示出图像的属性。下方其他页面元素之间的距离。 （3）在“宽”文本框中输入150，用来设置图像的宽度，在“高”文本框中输入100，用来设置图像的高度。图像的宽度和高度的单位是像素。 （4）在“垂直边距”文本框中输入“10”，单位为像素，用来设置图像顶部与其上方其他页面元素之间，以及图像底部与其下方其他页面元素之间的距离。 （5）在“替换”文本框输入“悉尼歌剧院”，在显示图像之前或者图像无法显示时，将显示这段文字。