网页设计第7单元.pptVIP

在广东纺院网站的“03图像操作”文件夹中制作“我与计算机”网页，页面效果见下一张幻灯片 完成后将网页以文件名me.htm保存 上交到“第3次作业”文件夹中 （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）插入“导航条”时，必须在“插入导航条”对话框中设置相应的参数，然后单击【确定】按钮即可。 * * * 第6章 图像操作 图像也是网页中主要元素之一，图像不但能美化网页，与文本相比能够更直观地表达信息。在页面中恰到好处地使用图像能使网页更加地生动、形象和美观， 课程引导 知识技能目标 （1）掌握图像的插入方法。 （2）掌握图像属性的设置方法。 （3）掌握图像与文本混合编排的方法。 （4）掌握插入鼠标经过图像的方法，了解插入图像占位符的方法。 网页浏览效果展示 本章所制作的网页03.html浏览效果如图所示 图6-1　　网页03.html的浏览效果 本章操作任务 （1）打开“长沙世界之窗”网站文件夹“03图像操作”中的网页“03.html”，在该网页中最后一段文本与日期之间插入两幅图片。 （2）按规定要求设置所插入图像的属性。 （3）在已插入图片的右侧插入鼠标经过图像。 （4）制作包