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

《网页设计与制作案例教程-电子教案7.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作案例教程-电子教案7.ppt（46页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第6 6章章 图像操作图像操作 图图像也是网像也是网页页中主要元素之一，中主要元素之一，图图像不像不但能美化网但能美化网页页，与文本相比能，与文本相比能够够更直更直观观地表地表达信息。在达信息。在页页面中恰到好面中恰到好处处地使用地使用图图像能使像能使网网页页更加地生更加地生动动、形象和美、形象和美观观，l 课程引导课程引导l 知识技能目标知识技能目标 （1 1）掌握）掌握图图像的插入方法。像的插入方法。（2 2）掌握）掌握图图像属性的像属性的设设置方法。置方法。（3 3）掌握）掌握图图像与文本混合像与文本混合编编排的方法。排的方法。（4 4）掌掌握握插插入入鼠鼠标标经经过过图图像像的的方方

2、法法，了了解解插插入入图图像占位符的方法。像占位符的方法。l 网页浏览效果展示网页浏览效果展示本章所制作的网本章所制作的网页页03.html03.html浏览浏览效果如效果如图图所示所示 图图6-1网网页页03.html的的浏览浏览效果效果l 本章操作任务本章操作任务 （1 1）打打开开“长长沙沙世世界界之之窗窗”网网站站文文件件夹夹“0303图图像像操操作作”中中的的网网页页“03.html03.html”，在在该该网网页页中中最最后一段文本与日期之后一段文本与日期之间间插入两幅插入两幅图图片。片。（2 2）按）按规规定要求定要求设设置所插入置所插入图图像的属性。像的属性。（3 3）在在已已

3、插插入入图图片片的的右右侧侧插插入入鼠鼠标标经经过过图图像。像。（4 4）制作包括一个）制作包括一个图图像按像按钮钮的的导导航条。航条。6.16.1图图像像概概述述6.26.2图图像像操操作作6.36.3插插 入入 相相 关关 图图 像像 元元 素素6.16.1图像概述图像概述 目前因特网上支持的目前因特网上支持的图图像格式主要有像格式主要有GIFGIF（Graphics Interchange FormatGraphics Interchange Format）、）、JPEGJPEG（Joint Photographic Experts Joint Photographic Experts

4、GroupGroup）、）、PNGPNG（Portable Network GraphicPortable Network Graphic）三种。其中三种。其中GIFGIF和和JPEGJPEG两格式的两格式的图图片文件由片文件由于文件于文件较较小、适合于网小、适合于网络络上的上的传输传输，而且能，而且能够够被大多数的被大多数的浏览浏览器完全支持，所以是网器完全支持，所以是网页页制作中最制作中最为为常用的文本格式。常用的文本格式。6.2.16.2.1插入图像插入图像6.26.2图像操作图像操作 打开打开“长长沙世界之窗沙世界之窗”网站文件网站文件夹夹“0303图图像像操作操作”中的网中的网页页“

5、03.html03.html”，在，在该该网网页页中最后一中最后一段文本与日期之段文本与日期之间间插入两幅插入两幅图图片。具体操作片。具体操作过过程如下。程如下。（1 1）切）切换换到到“长长沙世界之窗沙世界之窗”网站，打网站，打开文件开文件夹夹“0303图图像操作像操作”中网中网页页03.html03.html。（2 2）将光）将光标标放置在网放置在网页页03.html03.html正文文本正文文本最后一行的尾部，按最后一行的尾部，按EnterEnter键换键换行。行。（3 3）单击单击菜菜单单【插入插入】【图图像像】，或，或单击单击“常用常用”插入工具插入工具栏栏上的上的【图图像像】按按钮

6、钮，弹弹出出“选择图选择图像源文件像源文件”对话对话框。框。（4 4）在）在“选择图选择图像源文件像源文件”对话对话框中先框中先选选择择需要的需要的图图像文件的路径，然后像文件的路径，然后选择选择一个需要一个需要插入的插入的图图像文件。像文件。（5 5）单击单击【确定确定】按按钮钮，接着会，接着会弹弹出出“图图像像标签辅标签辅助功能属性助功能属性”对话对话框，提醒用框，提醒用户输户输入入替替换换文本和文本和详细说详细说明。明。6.2.26.2.2设置图像属性设置图像属性 图图像的属性像的属性设设置要求如下：置要求如下：（1 1）设设置置图图像的像的宽宽度度为为“150150”，高度，高度为为“

7、100100”。（2 2）调调整整图图像与其上方及下方文字的像与其上方及下方文字的间间距距为为“1010”。（3 3）设设置置图图像的替像的替换换文本文本为为“悉尼歌悉尼歌剧剧院院”。（4 4）为图为图像添加像添加边边框，框，边边框框宽宽度度为为“3 3”。（5 5）设设置置图图像与像与浏览浏览器器“左左对齐对齐”，设设置置图图像像与文本的与文本的对齐对齐方式方式为为“绝对绝对底部底部”。根据根据图图像的属性像的属性设设置要求完成置要求完成图图像属性的像属性的设设置：置：（1 1）在）在图图像位置的上部像位置的上部输输入入图图像的像的说说明信息明信息“悉尼歌悉尼歌剧剧院院”。（2 2）选选中中

8、刚刚插入的插入的图图像，在属性面板中像，在属性面板中显显示示出出图图像的属性。下方其他像的属性。下方其他页页面元素之面元素之间间的距离。的距离。（3 3）在）在“宽宽”文本框中文本框中输输入入150150，用来，用来设设置置图图像的像的宽宽度，在度，在“高高”文本框中文本框中输输入入100100，用来，用来设设置置图图像的高度。像的高度。图图像的像的宽宽度和高度的度和高度的单单位是位是像素。像素。（4 4）在）在“垂直垂直边边距距”文本框中文本框中输输入入“1010”，单单位位为为像素，用来像素，用来设设置置图图像像顶顶部与其上方其他部与其上方其他页页面元素之面元素之间间，以及，以及图图像底部

9、与其下方其他像底部与其下方其他页页面面元素之元素之间间的距离。的距离。（5 5）在）在“替替换换”文本框文本框输输入入“悉尼歌悉尼歌剧剧院院”，在，在显显示示图图像之前或者像之前或者图图像无法像无法显显示示时时，将，将显显示示这这段文字。段文字。（6 6）在）在“边边框框”文本框中文本框中输输入入“3 3”，单单位位为为像素。用来像素。用来设设置置图图像像边边框的框的宽宽度。度。（7 7）单击单击左左对齐对齐按按钮钮，把，把图图像像设设置成与置成与浏览浏览器左器左对齐对齐，在，在“对齐对齐”下拉列表框中下拉列表框中选选中中“绝对绝对底部底部”，用来，用来设设置置图图像与同一行文本的相像与同一行

10、文本的相互互对齐对齐方式。方式。插入鼠插入鼠标经过图标经过图像的具体像的具体过过程如下：程如下：1 1在在DreamweaverDreamweaver 8 8的文档窗口中，的文档窗口中，将光将光标标置于第二幅置于第二幅图图像的右像的右侧侧。6.36.3插入相关图像元素插入相关图像元素6.3.16.3.1插入鼠标经过图像插入鼠标经过图像 2 2在在“常用常用”插入工具插入工具栏栏中中单击单击【图图像像】按按钮钮旁旁边边的小三角形，在的小三角形，在弹弹出的菜出的菜单单中中单击单击【鼠鼠标经过图标经过图像像】按按钮钮。弹弹出一个出一个“插入鼠插入鼠标经标经过图过图像像”对话对话框。框。3 3在在“插

11、入鼠插入鼠标经过图标经过图像像”对话对话框中，框中，设设置各个置各个选项选项。（1 1）在）在“图图像名称像名称”文本框中文本框中输输入入“Image3Image3”，用来，用来设设置鼠置鼠标经过图标经过图像的名称。像的名称。（2 2）在）在“原始原始图图像像”文本框中文本框中输输入原始入原始图图像的路径及名称，或者像的路径及名称，或者单击单击文本框右文本框右侧侧【浏览浏览】按按钮钮打开打开“Original ImageOriginal Image”对话对话框，在其中框，在其中选择选择原始原始图图像，像，这这里里选择选择“3.jpg3.jpg”。及名称，。及名称，这这里里选择选择“4.jpg4

12、.jpg”。（3 3）在）在“鼠鼠标经过图标经过图像像”用来用来设设置当移置当移动动鼠鼠标标指指针针到鼠到鼠标经过图标经过图像像时时，原始，原始图图像替像替换换成的成的图图像，在其后的文本框中像，在其后的文本框中输输入入该该替替换换图图像的路径及名称，像的路径及名称，这这里里选择选择“4.jpg4.jpg”。（4 4）对对于于“预载预载鼠鼠标经过图标经过图像像”复复选选框，如框，如果果选选中复中复选选框，框，则则网网页页一打开即一打开即预预下下载载替替换图换图像到本地机，当移像到本地机，当移动动鼠鼠标标指指针针到鼠到鼠标经过图标经过图像像时时，能迅速切，能迅速切换换到替到替换图换图像；如果取消

13、像；如果取消对该对该复复选选框的框的选择选择，当移，当移动动鼠鼠标标指指针针到鼠到鼠标经过图标经过图像像时时才下才下载这载这个替个替换图换图像，替像，替换换的的时时候可能有画候可能有画面不面不连贯连贯的情况出的情况出现现。（5 5）“替替换换文本文本”文本框用来文本框用来设设置置该该鼠鼠标标经过图经过图像的替像的替换换文本，当文本，当图图像无法像无法显显示示时时，将，将显显示示这这些替些替换换文本，文本，这这果果输输入文字入文字“图图片三片三”。（6 6）“按下按下时时，前往的，前往的URLURL”用来用来设设置置该该鼠鼠标经过图标经过图像上像上应应用的超用的超级链级链接。接。这这里可先里可先

14、输输入入“03.html03.html”。单击单击【确定确定】按按钮钮，即可完成插入，即可完成插入“鼠鼠标经过标经过图图像像”的操作。的操作。4 4在在页页面中面中选选中中该该“鼠鼠标经过图标经过图像像”，利，利用用“属性属性”面板面板对对“鼠鼠标经过图标经过图像像”的属性的属性进进行必行必要的要的设设置，置，链链接也重新接也重新输输入，例如入，例如输输入入“http:/http:/”。5 5保存网保存网页页文档文档03.html03.html，浏览该浏览该网网页页。制作制作导导航条的具体航条的具体过过程如下：程如下：（1 1）打开网站）打开网站“长长沙世界之窗沙世界之窗”的网的网页页03.h

15、tml03.html，光，光标标置于置于“鼠鼠标经过图标经过图像像”的右的右侧侧，准准备备制作制作导导航条。航条。（2 2）在）在“常用常用”插入工具插入工具栏栏中，中，单击单击【图图像像】按按钮钮旁旁边边的小三角形，在的小三角形，在弹弹出的菜出的菜单单中中单单击击【导导航条航条】按按钮钮，弹弹出出“插入插入导导航条航条”对话对话框。框。然后在然后在该对话该对话框中框中设设置各个参数。置各个参数。6.3.26.3.2插入导航条插入导航条 （3 3）在）在导导航条中，每个航条中，每个图图像像链链接被称接被称为为一一个个项项目，所有的目，所有的项项目都目都显显示在示在“导导航条元件航条元件”列列表

16、框中，表框中，刚刚开始只存在一个默开始只存在一个默认认的的导导航条按航条按钮钮。在在“项项目名称目名称”文本框中文本框中输输入第一个入第一个导导航条元件航条元件的名称的名称为为“button1button1”。（4 4）在）在“状状态图态图像像”文本框中文本框中输输入入图图像文像文件的路径和名称，也可以通件的路径和名称，也可以通过单击过单击文本框右文本框右侧侧的的 【浏览浏览】按按钮钮，从磁，从磁盘盘上上选择选择已有的已有的图图像像文件。文件。这这里里选择选择5.jpg5.jpg，同插入，同插入图图像的操作一像的操作一样样，如果，如果图图像文件不在站点根文件像文件不在站点根文件夹夹内，会内，会

17、弹弹出出对话对话框框询问询问是否将是否将图图片复制到站点文件片复制到站点文件夹夹中。中。使用同使用同样样的方法，的方法，为为“鼠鼠标经过图标经过图像像”、“按下按下图图像像”、“按下按下时时鼠鼠标经过图标经过图像像”分分别选择别选择不同的不同的图图像，像，这这里所里所选择选择的的图图像文件名称分像文件名称分别别为为“6.jpg6.jpg”、“7.jpg7.jpg”、“8.jgp8.jgp”。（5 5）在）在“替替换换文本文本”文本框中文本框中输输入入“图图片片4 4”，在，在“按下按下时时，前往的，前往的URLURL”的文本框中的文本框中输输入入“http:/http:/”，当，当单击该图单击

18、该图像按像按钮钮时时，将会打开，将会打开对应对应网网页页。（6 6）对对于于“预预先先载载入入图图像像”复复选选框，如果框，如果选选中它，中它，访问访问者者浏览该浏览该网网页时页时，上述，上述设设置的四置的四幅幅图图像将在像将在页页面下面下载时载时全部下全部下载载；若取消；若取消对该对该复复选选框的框的选择选择，页页面下面下载载的同的同时时只下只下载载“状状态态图图像像”，其他的，其他的图图像在交互操作像在交互操作时时才开始下才开始下载载。这这里里选择该选择该复复选选框。框。（7 7）对对于于“页页面面载载入入时时就就显显示示鼠鼠标标按下按下图图像像”复复选选框，如果框，如果选选中它，中它，访

19、问访问者者浏览该浏览该网网页时页时，会先，会先显显示在示在“按下按下图图像像”文本框中文本框中设设置的置的图图像；如果取消像；如果取消对该对该复复选选框的框的选择选择，浏览该浏览该网网页时页时，会先，会先显显示在示在“状状态图态图像像”文本框中文本框中设设置的置的图图像。像。这这里不里不选择该选择该复复选选框。框。（8 8）在）在“插入插入”下拉列表框中可以下拉列表框中可以选择导选择导航航条的排列方式，有两个条的排列方式，有两个选项选项：“水平水平”和和“垂直垂直”。如果如果选择选择“水平水平”，则导则导航条将水平排列；如果航条将水平排列；如果选择选择“垂直垂直”，则导则导航条将垂直排列。航条

20、将垂直排列。这这里里选择选择“水平水平”。（9 9）对对于于“使用表格使用表格”复复选选框，如果框，如果选选中它，中它，则则使用表格来排列使用表格来排列导导航条中的元件。航条中的元件。（1010）单击单击【确定确定】按按钮钮关关闭闭“插入插入导导航航条条”对话对话框。框。（1111）在）在页页面中面中选选中中该该“导导航条航条”图图像，利像，利用用“属性属性”面板面板对对“导导航条航条”图图像的属性像的属性进进行必要行必要的的设设置，打开置，打开“页页面属性面属性”对话对话框适当框适当调调整左、整左、右右边边距，将左距，将左边边距和右距和右边边距距调调整整为为“50px50px”即可。即可。（

21、1212）保存网）保存网页页文档，然后按文档，然后按F12F12快捷快捷键键浏览该浏览该网网页页。插入插入图图像占位符的操作像占位符的操作过过程如下：程如下：（1 1）在）在“常用常用”插入工具插入工具栏栏中，中，单击单击“图图像像”按按钮钮旁旁边边的小三角形，在的小三角形，在弹弹出的下拉菜出的下拉菜单单中中单击单击【图图像占位符像占位符】，弹弹出出“图图像占位符像占位符”对话对话框。框。6.3.36.3.3插入图像占位符插入图像占位符 （2 2）在）在“图图像占位符像占位符”对话对话框中框中设设置占位置占位符的属性，在符的属性，在“名称名称”文本框中文本框中输输入要插入入要插入图图片片的名称

22、；在的名称；在“宽宽度度”和和“高度高度”文本框中文本框中输输入入图图片片的的宽宽度和高度的数度和高度的数值值；在；在“颜颜色色”选择选择器中器中设设置置占位符的占位符的颜颜色；在色；在“替替换换文本文本”文本框中文本框中输输入入图图片的替代文字。片的替代文字。（3 3）图图像占位符的属性像占位符的属性设设置完成后，置完成后，单单击击【确定确定】按按钮钮，这样这样一幅一幅实际实际上并不存在的上并不存在的图图片将出片将出现现在在页页面上。面上。（4 4）用鼠）用鼠标单击选标单击选中中该图该图像占位符，然像占位符，然后在属性面板中后在属性面板中单击单击【创创建建】按按钮钮可以可以调调用用Firew

23、orksFireworks生成生成PNGPNG图图像。像。课堂实践课堂实践 打开打开“课课堂堂实实践践”网站中文件网站中文件夹夹“0303图图像操像操作作”中的网中的网页页文档文档“03.html03.html”，然后在网，然后在网页页中插中插入四幅入四幅图图像，具体操作要求如下：像，具体操作要求如下：（1 1）第一幅与第二幅）第一幅与第二幅图图像插入的是普通像插入的是普通图图像，源文件分像，源文件分别为别为“01.jpg01.jpg”和和“02.jpg02.jpg”，“替替换换文本文本”分分别为别为“湘江谷景湘江谷景观观之一之一”和和“湘江谷景湘江谷景观观之二之二”。1 1操作要求操作要求

24、（2 2）第三幅插入的是）第三幅插入的是“鼠鼠标经过图标经过图像像”，“原始原始图图像像”的源文件的源文件为为“03.gif03.gif”，“鼠鼠标经过图标经过图像像”的源文件的源文件为为“04.gif04.gif”，“替替换换文本文本”为为“湘江湘江谷景谷景观观之三之三”，“链链接接”为为“03.html03.html”。（3 3）第四幅插入的是）第四幅插入的是“导导航条航条”的的图图像按像按钮钮，该图该图像按像按钮钮的的项项目名称目名称为为“button1button1”，“状状态图态图像像”的源文件的源文件为为“05.jpg05.jpg”，“鼠鼠标经过图标经过图像像”的源文件的源文件为为

25、“06.gif06.gif”，“按下按下图图像像”的源文件的源文件为为“07.gif07.gif”，“按下按下时时鼠鼠标经过图标经过图像像”的源文件的源文件为为“08.gif08.gif”，“替替换换文本文本”为为“湘江谷景湘江谷景观观之四之四”，“链链接接”为为“03.html03.html”。（4 4）所有）所有图图像的像的“宽宽度度”和和“高度高度”都都为为“128128”，“水平水平边边距距”都都为为“1010”，边边框都框都为为“2 2”，“对齐对齐”都都为为“默默认值认值”。网网页页文档文档“03.html03.html”插入插入图图像后的像后的浏览浏览效效果如果如图图所示。所示。

26、2 2项目展示项目展示图图6-24“课课堂堂实实践践”网站的网网站的网页页03.html的的浏览浏览效果效果3 3制作要点提示制作要点提示 （1 1）所需的）所需的图图像文件位于文件像文件位于文件夹夹“0303图图像像操作操作”的的imageimage子文件子文件夹夹中。中。（2 2）插入普通）插入普通图图像直接像直接单击单击“常用常用”插入插入工具工具栏栏中的中的“图图像像”按按钮钮，弹弹出出“选择图选择图像源文像源文件件”对话对话框，在框，在该对话该对话框中框中选择选择所需的所需的图图像文像文件，件，单击单击【确定确定】按按钮钮即可。即可。（3 3）插入）插入“鼠鼠标经过图标经过图像像”时

27、时，必，必须须在在“插插入鼠入鼠标经过图标经过图像像”对话对话框中框中设设置相置相应应的参数，的参数，然后然后单击单击【确定确定】按按钮钮即可。即可。（4 4）插入）插入“导导航条航条”时时，必，必须须在在“插入插入导导航航条条”对话对话框中框中设设置相置相应应的参数，然后的参数，然后单击单击【确确定定】按按钮钮即可。即可。（5 5）图图像插入到网像插入到网页页后，可以通后，可以通过过“图图像像属性面板属性面板”设设置所插入置所插入图图像的像的“宽宽度度”、“高度高度”、“水平水平边边距距”、“边边框框”、“对齐对齐”等属性。等属性。课外拓展实践课外拓展实践 在在“湖湖铁职铁职院学院网站院学院网站”站点文件站点文件夹夹“0303图图像操作像操作”中中创创建一个网建一个网页页文档文档“03.html03.html”，然后，然后插入插入图图片和文字，片和文字，实现图实现图文混排效果。文混排效果。本章小结本章小结 图图像和文本一像和文本一样样，也是网中最常用的元素，也是网中最常用的元素，通通过过本章的学本章的学习习，掌握，掌握图图像的基本操作，掌握像的基本操作，掌握图图像与文本的混合像与文本的混合编编排方法。排方法。