网设计与制作案例教程电子教案7

第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（GraphicsInterchangeFormat）、JPEG（JointPhotographicExpertsGroup）、PNG（PortableNetworkGraphic）三种。其中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．在Dreamweaver8的文档窗口中，将光标置于第二幅图像的右侧。6.3插入相关图像元素6.3.1插入鼠标经过图像第十七页，共四十七页。2．在“常用”插入工具栏中单击【图像】按钮旁边的小三角形，在弹出的菜单中单击【鼠标经过图像】按钮。弹出一个“插入鼠标经过图像”对话框。第十八页，共四十七页。3．在“插入鼠标经过图像”对话框中，设置各个选项。（1）在“图像名称”文本框中输入“Image3”，用来设置鼠标经过图像的名称。（2）在“原始图像”文本框中输入原始图像的路径及名称，或者单击文本框右侧【浏览】按钮打开“OriginalImage”对话框，在其中选择原始图像，这里选择“3.jpg”。及名称，这里选择“4.jpg”。第十九页，共四十七页。（3）在“鼠标经过图像”用来设置当移动鼠标指针到鼠标经过图像时，原始图像替换成的图像，在其后的文本框中输入该替换图像的路径及名称，这里选择“4.jpg”。第二十页，共四十七页。（4）对于“预载鼠标经过图像”复选框，如果选中复选框，则网页一打开即预下载替换图像到本地机，当移动鼠标指针到鼠标经过图像时，能迅速切换到替换图像；如果取消对该复选框的选择，当移动鼠标指针到鼠标经过图像时才下载这个替换图像，替换的时候可能有画面不连贯的情况出现。第二十一页，共四十七页。（5）“替换文本”文本框用来设置该鼠标经过图像的替换文本，当图像无法显示时，将显示这些替换文本，这果输入文字“图片三”。（6）“按下时，前往的URL”用来设置该鼠标经过图像上应用的超级链接。这里可先输入“03.html”。单击【确定】按钮，即可完成插入“鼠标经过图像”的操作。第二十二页，共四十七页。第二十三页，共四十七页。制作导航条的具体过程如下：（1）打开网站“长沙世界之窗”的网页03.html，光标置于“鼠标经过图像”的右侧，准备制作导航条。（2）在“常用”插入工具栏中，单击【图像】按钮旁边的小三角形，在弹出的菜单中单击【导航条】按钮，弹出“插入导航条”对话框。然后在该对话框中设置各个参数。6.3.2插入导航条第二十四页，共四十七页。（3）在导航条中，每个图像链接被称为一个项目，所有的项目都显示在“导航条元件”列表框中，刚开始只存在一个默认的导航条按钮。在“项目名称”文本框中输入第一个导航条元件的名称为“button1”。第二十五页，共四十七页。（4）在“状态图像”文本框中输入图像文件的路径和名称，也可以通过单击文本框右侧的【浏览】按钮，从磁盘上选择已有的图像文件。这里选择5.jpg，同插入图像的操作一样，如果图像文件不在站点根文件夹内，会弹出对话框询问是否将图片复制到站点文件夹中。第二十六页，共四十七页。使用同样的方法，为“鼠标经过图像”、“按下图像”、“按下时鼠标经过图像”分别选择不同的图像，这里所选择的图像文件名称分别为“6.jpg”、“7.jpg”、“8.jgp”。第二十七页，共四十七页。第二十八页，共四十七页。（6）对于“预先载入图像”复选框，如果选中它，访问者浏览该网页时，上述设置的四幅图像将在页面下载时全部下载；若取消对该复选框的选择，页面下载的同时只下载“状态图像”，其他的图像在交互操作时才开始下载。这里选择该复选框。第二十九页，共四十七页。（7）对于“页面载入时就显示‘鼠标按下图像’”复选框，如果选中它，访问者浏览该网页时，会先显示在“按下图像”文本框中设置的图像；如果取消对该复选框的选择，浏览该网页时，会先显示在“状态图像”文本框中设置的图像。这里不选择该复选框。第三十页，共四十七页。（8）在“插入”下拉列表框中可以选择导航条的排列方式，有两个选项：“水平”和“垂直”。如果选择“水平”，则导航条将水平排列；如果选择“垂直”，则导航条将垂直排列。这里选择“水平”。第三十一页，共四十七页。（9）对于“使用表格”复选框，如果选中它，则使用表格来排列导航条中的元件。（10）单击【确定】按钮关闭“插入导航条”对话框。第三十二页，共四十七页。（11）在页面中选中该“导航条”图像，利用“属性”面板对“导航条”图像的属性进行必要的设置，打开“页面属性”对话框适当调整左、右边距，将左边距和右边距调整为“50px”即可。（12）保存网页文档，然后按F12快捷键浏览该网页。第三十三页，共四十七页。插入图像占位符的操作过程如下：（1）在“常用”插入工具栏中，单击“图像”按钮旁边的小三角形，在弹出的下拉菜单中单击【图像占位符】，弹出“图像占位符”对话框。6.3.3插入图像占位符第三十四页，共四十七页。（2）在“图像占位符”对话框中设置占位符的属性，在“名称”文本框中输入要插入图片的名称；在“宽度”和“高度”文本框中输入图片的宽度和高度的数值；在“颜色”选择器中设置占位符的颜色；在“替换文本”文本框中输入图片的替代文字。第三十五页，共四十七页。（3）图像占位符的属性设置完成后，单击【确定】按钮，这样一幅实际上并不存在的图片将出现在页面上。（4）用鼠标单击选中该图像占位符，然后在属性面板中单击【创建】按钮可以调用Fireworks生成PNG图像。第三十六页，共四十七页。★课堂实践★打开“课堂实践”网站中文件夹“03图像操作”中的网页文档“03.html”，然后在网页中插入四幅图像，具体操作要求如下：（1）第一幅与第二幅图像插入的是普通图像，源文件分别为“01.jpg”和“02.jpg”，“替换文本”分别为“湘江谷景观之一”和“湘江谷景观之二”。1．操作要求第三十七页，共四十七页。（2）第三幅插入的是“鼠标经过图像”，“原始图像”的源文件为“03.gif”，“鼠标经过图像”的源文件为“04.gif”，“替换文本”为“湘江谷景观之三”，“链接”为“03.html”。第三十八页，共四十七页。（3）第四幅插入的是“导航条”的图像按钮，该图像按钮的项目名称为“button1”，“状态图像”的源文件为“05.jpg”，“鼠标经过图像”的源文件为“06.gif”，“按下图像”的源文件为“07.gif”，“按下时鼠标经过图像”的源文件为“08.gif”，“替换文本”为“湘江谷景观之四”，“链接”为“03.html”。第三十九页，共四十七页。（4）所有图像的“宽度”和“高度”都为“128”，“水平边距”都为“10”，边框都为“2”，“对齐”都为“默认值”。第四十页，共四十七页。网页文档“03.html”插入图像后的浏览效果如图所示。2．项目展示 图6-24“课堂实践”网站的网页03.html的浏览效果第四十一页，共四十七页。3．制作要点提示（1）所需的图像文件位于文件夹“03图像操作”的image子文件夹中。（2）插入普通图像直接单击“常用”插入工具栏中的“图像”按钮，弹出“选择图像源文件”对话框，在该对话框中选择所需的图像文件，单击【确定】按钮即可。第四十二页，共四十七页。（3）插入“鼠标经过图像”时，必须在“插入鼠标经过图像”对话框中设置相应的参数，然后单击【确定】按钮即可。（4）插入“导航条”时，必须在“插入导航条”对话框中设置相应的参数，然后单击【确定】按钮即可。第四十三页，共四十七页。（5）图像插入到网页后，可以通过“图像属性面板”设置所插入图像的“宽度”、“高度”、“水平边距”、“边框”、“对齐”等属性。第四十四页，共四十七页。★课外拓展实践★在“湖铁职院学院网站”站点文件夹“03图像操作”中创建一个网页文档“03.html”，然后插入图片和文字，实现图文混排效果。第四十五页，共四十七页。★本章小结★图像和文本一样，也是网中最常用的元素，通过本章的学习，掌握图像的基本操作，掌握图像与文本的混合编排方法。第四十六页，共四十七页。内容总结第6章图像操作。（4）掌握插入鼠标经过图像的方法，了解插入图像占位符的方法