1、,网页设计与制作 教学课件,教学单元9：网页的图像操作,主要教学环节,五、知识讲解与操作示范,一、课程引导,二、明确知识技能目标,三、展示网页浏览效果,四、分析操作任务,六、课堂模仿实践,七、疑难解析,八、归纳总结,九、布置习题,（一）课程引导,图像也是网页中主要元素之一，图像不但能美化网页，与文本相比能够更直观地表达信息。在页面中恰到好处地使用图像能使网页更加地生动、形象和美观,（二）明确知识技能目标,（1）掌握图像的插入方法。 （2）掌握图像属性的设置方法。 （3）掌握图像与文本混合编排的方法。 （4）掌握插入鼠标经过图像的方法，了解插入图像占位符的方法。,（三）网页浏览效果展示,本章所制
2、作的网页03.html浏览效果如图所示。,操作要点,插入图像 设置图像属性 编辑图像 插入“鼠标经过图像” 插入导航条,（四）本章操作任务,（1）打开“长沙世界之窗”网站文件夹“03图像操作”中的网页“03.html”，在该网页中最后一段文本与日期之间插入两幅图片。 （2）按规定要求设置所插入图像的属性。 （3）在已插入图片的右侧插入鼠标经过图像。 （4）制作包括一个图像按钮的导航条。,6.1 图像概述,目前因特网上支持的图像格式主要有GIF（Graphics Interchange Format）、JPEG（Joint Photographic Experts Group）、PNG（Port
3、able Network Graphic）三种。其中GIF和JPEG两格式的图片文件由于文件较小、适合于网络上的传输，而且能够被大多数的浏览器完全支持，所以是网页制作中最为常用的文本格式。,（五）知识讲解与操作示范（1）,6.2 图像操作,6.2.1 插入图像打开“长沙世界之窗”网站文件夹“03图像操作”中的网页“03.html”，在该网页中最后一段文本与日期之间插入两幅图片。具体操作过程如下。 （1）切换到“长沙世界之窗”网站，打开文件夹“03图像操作”中网页03.html。 （2）将光标放置在网页03.html正文文本最后一行的尾部，按Enter键换行。,（五）知识讲解与操作示范（2）,（
4、3）单击菜单【插入】【图像】，或单击“常用”插入工具栏上的【图像】按钮，弹出“选择图像源文件”对话框。,（4）在“选择图像源文件”对话框中先选择需要的图像文件的路径，然后选择一个需要插入的图像文件。 （5）单击【确定】按钮，接着会弹出“图像标签辅助功能属性”对话框，提醒用户输入替换文本和详细说明。,（五）知识讲解与操作示范（3）,6.2.2 设置图像属性 图像的属性设置要求如下： （1）设置图像的宽度为“150”，高度为“100”。 （2）调整图像与其上方及下方文字的间距为“10”。 （3）设置图像的替换文本为“悉尼歌剧院”。 （4）为图像添加边框，边框宽度为“3”。 （5）设置图像与浏览器“
5、左对齐”，设置图像与文本的对齐方式为“绝对底部”。,（五）知识讲解与操作示范（4）,根据图像的属性设置要求完成图像属性的设置： （1）在图像位置的上部输入图像的说明信息“悉尼歌剧院”。 （2）选中刚插入的图像，在属性面板中显示出图像的属性。 （3）在“宽”文本框中输入150，用来设置图像的宽度，在“高”文本框中输入100，用来设置图像的高度。图像的宽度和高度的单位是像素。 （4）在“垂直边距”文本框中输入“10”，单位为像素，用来设置图像顶部与其上方其他页面元素之间，以及图像底部与其下方其他页面元素之间的距离。,（五）知识讲解与操作示范（5）,（5）在“替换”文本框输入“悉尼歌剧院”，在显示图
6、像之前或者图像无法显示时，将显示这段文字。 （6）在“边框”文本框中输入“3”，单位为像素。用来设置图像边框的宽度。 （7）单击左对齐按钮,，把图像设置成与浏览器左对齐，在“对齐”下拉列表框中选中“绝对底部”，用来设置图像与同一行文本的相互对齐方式。,（五）知识讲解与操作示范（6）,6.3 插入相关图像元素,6.3.1 插入鼠标经过图像 插入鼠标经过图像的具体过程如下： 1在Dreamweaver 8的文档窗口中，将光标置于第二幅图像的右侧。 2在“常用”插入工具栏中单击【图像】按钮旁边的小三角形,，在弹出的菜单中单击【鼠标经过图像】按钮。弹出一个“插入鼠标经过图像”对话框。,（五）知识讲解与
7、操作示范（7）,3在“插入鼠标经过图像”对话框中，设置各个选项。 （1）在“图像名称”文本框中输入“Image3”，用来设置鼠标经过图像的名称。 （2）在“原始图像”文本框中输入原始图像的路径及名称，或者单击文本框右侧【浏览】按钮打开“Original Image”对话框，在其中选择原始图像，这里选择“3.jpg”。 （3）在“鼠标经过图像”用来设置当移动鼠标指针到鼠标经过图像时，原始图像替换成的图像，在其后的文本框中输入该替换图像的路径及名称，这里选择“4.jpg”。,（五）知识讲解与操作示范（8）,(4)对于“预载鼠标经过图像”复选框，如果选中复选框，则网页一打开即预下载替换图像到本地机，
8、当移动鼠标指针到鼠标经过图像时，能迅速切换到替换图像；如果取消对该复选框的选择，当移动鼠标指针到鼠标经过图像时才下载这个替换图像，替换的时候可能有画面不连贯的情况出现。 （5）“替换文本”文本框用来设置该鼠标经过图像的替换文本，当图像无法显示时，将显示这些替换文本，这果输入文字“图片三”。 （6）“按下时，前往的URL”用来设置该鼠标经过图像上应用的超级链接。这里可先输入“03.html”。,（五）知识讲解与操作示范（9）,单击【确定】按钮，即可完成插入“鼠标经过图像”的操作。 4在页面中选中该“鼠标经过图像”，利用“属性”面板对“鼠标经过图像”的属性进行必要的设置，链接也重新输入，例如输入“
9、http:/”。 5保存网页文档03.html，浏览该网页,（五）知识讲解与操作示范（10）,6.3.2 插入导航条 制作导航条的具体过程如下： （1）打开网站“长沙世界之窗”的网页03.html，光标置于“鼠标经过图像”的右侧，准备制作导航条。 （2）在“常用”插入工具栏中，单击【图像】按钮旁边的小三角形，在弹出的菜单中单击【导航条】按钮，弹出“插入导航条”对话框。然后在该对话框中设置各个参数。,（五）知识讲解与操作示范（11）,（3）在导航条中，每个图像链接被称为一个项目，所有的项目都显示在“导航条元件”列表框中，刚开始只存在一个默认的导航条按钮。在“项目名称”文本框中输入第一个导航条元件
10、的名称为“button1”。 （4）在“状态图像”文本框中输入图像文件的路径和名称，也可以通过单击文本框右侧的【浏览】按钮，从磁盘上选择已有的图像文件。这里选择5.jpg，同插入图像的操作一样，如果图像文件不在站点根文件夹内，会弹出对话框询问是否将图片复制到站点文件夹中。,（五）知识讲解与操作示范（12）,使用同样的方法，为“鼠标经过图像”、“按下图像”、“按下时鼠标经过图像”分别选择不同的图像，这里所选择的图像文件名称分别为“6.jpg”、“7.jpg”、“8.jgp”。 （5）在“替换文本”文本框中输入“图片4”，在“按下时，前往的URL”的文本框中输入“http:/”，当单击该图像按钮时
11、，将会打开对应网页。,（五）知识讲解与操作示范（13）,（6）对于“预先载入图像”复选框，如果选中它，访问者浏览该网页时，上述设置的四幅图像将在页面下载时全部下载；若取消对该复选框的选择，页面下载的同时只下载“状态图像”，其他的图像在交互操作时才开始下载。这里选择该复选框。 （7）对于“页面载入时就显示鼠标按下图像”复选框，如果选中它，访问者浏览该网页时，会先显示在“按下图像”文本框中设置的图像；如果取消对该复选框的选择，浏览该网页时，会先显示在“状态图像”文本框中设置的图像。这里不选择该复选框。,（五）知识讲解与操作示范（14）,（8）在“插入”下拉列表框中可以选择导航条的排列方式，有两个选
12、项：“水平”和“垂直”。如果选择“水平”，则导航条将水平排列；如果选择“垂直”，则导航条将垂直排列。这里选择“水平”。 （9）对于“使用表格”复选框，如果选中它，则使用表格来排列导航条中的元件。,（五）知识讲解与操作示范（15）,（10）单击【确定】按钮关闭“插入导航条”对话框。 （11）在页面中选中该“导航条”图像，利用“属性”面板对“导航条”图像的属性进行必要的设置，打开“页面属性”对话框适当调整左、右边距，将左边距和右边距调整为“50px”即可。 （13）保存网页文档，然后按F12快捷键浏览该网页。,（五）知识讲解与操作示范（16）,6.3.3 插入图像占位符,插入图像占位符的操作过程如
13、下： （1）在“常用”插入工具栏中，单击“图像”按钮旁边的小三角形，在弹出的下拉菜单中单击【图像占位符】，弹出“图像占位符”对话框。,（五）知识讲解与操作示范（17）,（2）在“图像占位符”对话框中设置占位符的属性，在“名称”文本框中输入要插入图片的名称；在“宽度”和“高度”文本框中输入图片的宽度和高度的数值；在“颜色”选择器中设置占位符的颜色；在“替换文本”文本框中输入图片的替代文字。 （3）图像占位符的属性设置完成后，单击【确定】按钮，这样一幅实际上并不存在的图片将出现在页面上。 （4）用鼠标单击选中该图像占位符，然后在属性面板中单击【创建】按钮可以调用Fireworks生成PNG图像。,
14、（五）知识讲解与操作示范（18）,（2）在“图像占位符”对话框中设置占位符的属性，在“名称”文本框中输入要插入图片的名称；在“宽度”和“高度”文本框中输入图片的宽度和高度的数值；在“颜色”选择器中设置占位符的颜色；在“替换文本”文本框中输入图片的替代文字。 （3）图像占位符的属性设置完成后，单击【确定】按钮，这样一幅实际上并不存在的图片将出现在页面上。 （4）用鼠标单击选中该图像占位符，然后在属性面板中单击【创建】按钮可以调用Fireworks生成PNG图像。,（五）知识讲解与操作示范（19）,1操作要求打开“课堂实践”网站中文件夹“03图像操作”中的网页文档“03.html”，然后在网页中插
15、入四幅图像，具体操作要求如下： （1）第一幅与第二幅图像插入的是普通图像，源文件分别为“01.jpg”和“02.jpg”，“替换文本”分别为“湘江谷景观之一”和“湘江谷景观之二”。 （2）第三幅插入的是“鼠标经过图像”，“原始图像”的源文件为“03.gif”，“鼠标经过图像”的源文件为“04.gif”，“替换文本”为“湘江谷景观之三”，“链接”为“03.html”。,（六）课堂模仿实践,（3）第四幅插入的是“导航条”的图像按钮，该图像按钮的项目名称为“button1”，“状态图像”的源文件为“05.jpg”，“鼠标经过图像”的源文件为“06.gif”，“按下图像”的源文件为“07.gif”，“
16、按下时鼠标经过图像”的源文件为“08.gif”，“替换文本”为“湘江谷景观之四”，“链接”为“03.html”。 （4）所有图像的“宽度”和“高度”都为“128”，“水平边距”都为“10”，边框都为“2”，“对齐”都为“默认值”。,（六）课堂模仿实践,2项目展示 网页文档“03.html”插入图像后的浏览效果如图所示。,图6-24 “课堂实践”网站的网页03.html的浏览效果,（六）课堂模仿实践,3制作要点提示 （1）所需的图像文件位于文件夹“03图像操作”的image子文件夹中。 （2）插入普通图像直接单击“常用”插入工具栏中的“图像”按钮，弹出“选择图像源文件”对话框，在该对话框中选择所
17、需的图像文件，单击【确定】按钮即可。 （3）插入“鼠标经过图像”时，必须在“插入鼠标经过图像”对话框中设置相应的参数，然后单击【确定】按钮即可。,（六）课堂模仿实践,（4）插入“导航条”时，必须在“插入导航条”对话框中设置相应的参数，然后单击【确定】按钮即可。 （5）图像插入到网页后，可以通过“图像属性面板”设置所插入图像的“宽度”、“高度”、“水平边距”、“边框”、“对齐”等属性。,（六）课堂模仿实践,在“湖铁职院学院网站”站点文件夹“03图像操作”中创建一个网页文档“03.html”，然后插入图片和文字，实现图文混排效果。,（七）课外拓展实践,图像和文本一样，也是网中最常用的元素，通过本章的学习，掌握图像的基本操作，掌握图像与文本的混合编排方法。,（八）本章总结,
