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

（8）在“插入”下拉列表框中可以选择导航条的排列方式，有两个选项：“水平”和“垂直”。如果选择“水平”，则导航条将水平排列；如果选择“垂直”，则导航条将垂直排列。这里选择“水平”。 （9）对于“使用表格”复选框，如果选中它，则使用表格来排列导航条中的元件。 （10）单击【确定】按钮关闭“插入导航条”对话框。 （11）在页面中选中该“导航条”图像，利用“属性”面板对“导航条”图像的属性进行必要的设置，打开“页面属性”对话框适当调整左、右边距，将左边距和右边距调整为“50px”即可。 （12）保存网页文档，然后按F12快捷键浏览该网页。 * * 第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）在“替换”文本框输入“悉尼歌剧院”，在显示图像之前或者图像无法显示时，将显示这段文字。 （6）在“边框”文本框中输入“3”，单位为像素。用来设置图像边框的宽度。 （7）单击左对齐按钮，把图像设置成与浏览器左对齐，在“对齐”下拉列表框中选中“绝对底部”，用来设置图像与同一行文本的相互对齐方式。 插入鼠标经过图像的具体过程如下： 1．在Dreamweaver 8的文档窗口中，将光标置于第二幅图像的右侧。 6.3　插入相关图像元素 6.3.1　插入鼠标经过图像 2．在“常用”插入工具栏中单击【图像】按钮旁边的小三角形，在弹出的菜单中单击【鼠标经过图像】按钮。弹出一个“插入鼠标经过图像”对