项目五 图像元素的应用ppt课件.pptx
项目五 图像元素的应用项目五 图像元素的应用学习目标学习目标熟练插入图像熟练插入背景图像熟练插入图像占位符熟练制作鼠标经过图像效果项目五 图像元素的应用项目项目简介简介网页中只有文本元素，难免网页会显得单调乏味，制作出丰富多彩、图文并茂的网页往往更易吸引浏览者。我们平时看到的各种网页都是由多种网页元素和谐地组合起来的。本项目通插入普通图像、背景图像、图像占位符和鼠标经过图像效果等对图像元素的操作，训练学生熟悉掌握对图像元素的操作与应用。本项目要完成的任务：任务一 插入普通图像任务二 插入背景图像任务三 插入图像占位符任务四 制作鼠标经过图像任务一 插入普通图像任务任务描述描述前一项目学习了在网页中插入文本信息，如果网页中只有文字元素，那么这样的网页就很单调，不会吸引浏览者。在网页中插入图像，使网页图文并茂，可以使网页更加生动，视觉上更直观，以给浏览者深刻印象。该任务要求学生掌握在页面中插入图像，并会对图像属性进行设置。该任务的需求如下所示：任务一 插入普通图像1.在“WebTest项目5”文件夹中新建5-1.html文档，并实现如图5-1所示的页面效果；2.网页设计要求（1）插入图像在5-1.html文档的第一行插入图像“WebTest/项目5/images/ pic.jpg”。（2）设置图像格式：对齐方式为“居中对齐”。（3）设置图像属性1）“替换文本”为“金鱼风景图”； 2）图像宽高不按“切换尺寸约束”，设置宽为450像素，高为210像素；3）图像边框为1像素；4）图像水平间距为5像素，垂直间距为5像素。图5-1 5-1.html页面浏览效果图任务一 插入普通图像知识储备知识储备1.图像标签图像标签是, 标签是单独呈现的，没有结束标签 标签有两个重要属性：src 属性 和 alt 属性。Src属性规定显示图像的 URL，alt 属性规定图像链接失败时的替代文本。目前所有的浏览器都支持 标签。任务一 插入普通图像2.图像格式网页上常用的图像格式有JPG、GIF和PNG等（1）JPG格式（2）GIF格式（3）PNG格式任务一 插入普通图像任务实施任务实施1.新建文档新建 5-1.html文档，并保存到“WebTest/项目5”文件夹中；任务一 插入普通图像2.插入插入图像图像在5-1.html文档的“设计”视图中，把光标定位到页面的第一行位置点击“插入”菜单点击“图像”命令打开“选择图像源文件”对话框，在“WebTest/项目5/images”文件夹中选择 pic.jpg点击“确定”按钮弹出“图像标签辅助功能属性”对话框，在“替换文本”中输入“金鱼风景图”（也可在属性面板中设置）点击“确定”按钮，完成图像的插入。提示：当图像不能正常显示时，才显示提示：当图像不能正常显示时，才显示“替换文本替换文本”中输中输入的文本信息。入的文本信息。任务一 插入普通图像3.设置图像居中设置图像居中显示显示选中图像点击“格式”菜单选择“对齐方式”点击“居中对齐”。任务一 插入普通图像4.设置图像宽和高设置图像宽和高属性属性选中图像在“属性面板”中，如图5-2所示，在“宽”文本框输入“450”，单位选择像素“px”点击“切换尺寸约束”按钮 成开锁状态 ，在“高”文本框输入“210”，单位选择像素“px”。（说明：属性面板中的“替换”与“图像标签辅助功能属性”对话框中的“替换文本”为同一设置）点击“提交图像大小”按钮图5-2 图像属性任务一 插入普通图像5.设置图像的边框、水平间距与垂直间距设置图像的边框、水平间距与垂直间距属性属性选中图像点击“修改”菜单点击“编辑标签”，打开“标签编辑器”如图5-3所示在“常规”选择中，“水平间距”文本框中输入“5”，“垂直间距”文本框中输入“5”，“边框”中输入“1”点击“确定”。图5-3 图像标签编辑器任务一 插入普通图像到此，整个页面制作完成。切换到“代码”视图查看生成的HTML代码如下所示。任务一 插入普通图像6.保存文档，按F12在浏览器中预览任务二 插入背景图像任务描述任务描述通过对前一个任务的学习，我们掌握了对普通图像的相关操作，在网页中，普通图像要占用页面空间，图像上是不允许输入文本或插入其它元素的，要想在图像上插入其它元素，就必须把图像设置为背景图像。该任务需要学生掌握插入背景图像的操作方法及背景图像的显示方式。该任务的需求如下所示：任务二 插入背景图像1.在“WebTest项目5”文件夹中新建5-2.html文档，并实现如图5-6所示的页面效果；图5-6 5-2.html页面浏览效果图任务二 插入背景图像2.网页设计要求（1）插入背景图像在5-2.html文档中插入背景图像“WebTest/项目5/images/ bg.jpg” ,要求实现横向重复显示。（2）插入普通图像在背景页面中插入图像“WebTest/项目5/images/ pic1.jpg”任务二 插入背景图像任务任务实施实施1.新建文档新建 5-2.html文档，并保存到“WebTest/项目5”文件夹中；任务二 插入背景图像2. 插入背景图片在5-2.html文档中单击“属性面板”上的“页面属性”按钮，打开“页面属性”对话框，如图5-7所示在分类中选择“外观”在“背景图像”中点击“浏览”按钮，在“WebTest/项目5/images”文件夹中选择背景图像bg.jpg 点击“确定”按钮在“重复”下拉框中选择图片横向重复“repeat-x”点击“确定”完成背景设置。图5-7 页面属性任务二 插入背景图像提示：“重复”各选项含义：（1）repeat是全屏平铺；（2）no-repeat是不重复，图片位于左上角；（3）repeat-x是图片横向重复, 从左上至右上进行重复；（4）repeat-y是图片纵向重复, 从左下至左下进行重复。任务二 插入背景图像3.插入普通图像插入普通图像在5-2.html文档中，把光标定位到页面的第一行位置点击“插入”菜单点击“图像”命令打开“选择图像源文件”对话框，在“WebTest/项目5/images”文件夹中选择 pic1.jpg点击“确定”按钮弹出“图像标签辅助功能属性”对话框，点击“确定”按钮，完成图像的插入选中图像点击“格式”菜单选择“对齐方式”点击“居中对齐，完成设置。任务二 插入背景图像到此，整个页面制作完成。切换到“代码”视图查看生成的HTML代码如下所示。4.保存文档，按F12在浏览器中预览图5-8 生成的代码任务三 插入图像占位符任务描述任务描述图像占位符是网站排版布局中经常用到的功能，在布局页面时，如果要在网页中插入一张图片，可以先不制作图片，而是使用占位符来代替图像位置，其大小可以随意定义，并可用自定义的颜色来替代图像的出现。该任务需要学生掌握图像占位符在网页布局中的作用以及操作技能，为后面复杂网页布局打下良好基础。该任务的需求如下所示：任务三 插入图像占位符1.在“WebTest项目5”文件夹中新建5-3.html文档，实现如图5-9所示的页面效果；图5-9 5-3.html页面浏览效果图任务三 插入图像占位符2.网页设计要求（1）插入“网页头部”图像占位符；在5-3.html文档的第一行插入图像占位符，要求宽900像素，高100像素 ，颜色代码为“#66CCFF”；（2）插入“左侧导航栏”图像占位符在5-3.html文档的左侧插入图像占位符，要求宽100像素，高300像素 ，颜色代码为“#FFFFCC”；（3）插入“页脚部分”图像占位符在5-3.html文档的底部插入图像占位符，要求宽800像素，高100像素 ，颜色代码为“#66CCFF”；任务三 插入图像占位符任务实施任务实施1.新建文档新建 5-3.html文档，并保存到“WebTest/项目5”文件夹中；2. 插入“网页头部”图像占位符任务三 插入图像占位符在5-3.html文档的“设计”视图中，把光标定位到页面的第一行位置单击“插入”菜单在“图像对象”菜单中选择子菜单图像占位符打开“图像占位符”对话框设置如图5-10所示，名称输入“head”，宽度输入900，高度输入100，颜色输入十六进制颜色值“#66FF99”，替换文本输入“网页头部”点击“确定”完成设置。图5-10 “网页头部”图像占位符对话框任务三 插入图像占位符3.插入插入“左侧导航栏左侧导航栏”图像占位符图像占位符光标定位到“网页头部”图像占位符后按Shitf+Enter换行（光标在第二行）单击“插入”菜单在“图像对象”菜单中选择子菜单图像占位符打开“图像占位符”对话框设置如图5-11所示，名称输入“left”，宽度输入100，高度输入300，颜色输入十六进制颜色值“#FFFFCC”，替换文本输入“左侧导航栏”点击“确定”完成设置。图5-11 “左侧导航栏”图像占位符对话框任务三 插入图像占位符4.插入插入“页脚部分页脚部分”图像占位图像占位符符光标定位到“左侧导航栏”图像占位符后单击“插入”菜单在“图像对象”菜单中选择子菜单图像占位符打开“图像占位符”对话框设置如图5-12所示，名称输入“foot”，宽度输入800，高度输入100，颜色输入十六进制颜色值“#66CCFF”，替换文本输入“页脚部分”点击“确定”完成设置。图5-12 “页脚部分”图像占位符对话框任务三 插入图像占位符到此，整个页面制作完成。切换到“代码”视图查看生成的HTML代码如下所示。图5-13 生成的代码任务三 插入图像占位符5.保存文档，按保存文档，按F12在浏览器中预在浏览器中预览览提示提示2：插入图像点位符的图像标签的：插入图像点位符的图像标签的src属性为空，而插入属性为空，而插入普通图像的图像标签的普通图像的图像标签的src属性为具体的图像链接地址。属性为具体的图像链接地址。任务四 制作鼠标经过图像效果任务任务描述描述鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像，给人一种动态图像的视觉效果。该任务需要学生掌握鼠标经过图像效果的制作方法。任务需求如下所示：任务四 制作鼠标经过图像效果1.在“WebTest项目5”文件夹中新建5-4.html文档，实现如图5-14所示的页面效果；图5-14 5-4.html页面浏览效果图任务四 制作鼠标经过图像效果知识知识储备储备鼠标经过图像是指当鼠标指针经过一幅图像时，图像的显示会变为另一幅图像。鼠标经过图像实际上是由两幅图像组成，初始图像也叫主图像（页面首次装载时显示的图像）和替换图像也叫次图像（当鼠标指针经过时显示的图像）。用于鼠标经过图像的两幅图像大小必须相同。如果图像的大小不同，Dreamweaver会自动调整第二幅图像的大小，使之与第一幅图像匹配。任务四 制作鼠标经过图像效果任务任务实施实施1.新建文档新建文档新建 5-4.html文档，并保存到“WebTest/项目5”文件夹中；任务四 制作鼠标经过图像效果2. 制作鼠标经过图像制作鼠标经过图像效果效果在5-4.html文档的“设计”视图中，把光标定位到页面的第一行位置单击“插入”菜单在“图像对象”菜单中选择子菜单鼠标经过图像打开“插入鼠标经过图像”对话框，如图5-15所示“原始图像”选择“WebTest项目5images1.gif”“鼠标经过图像”选择“WebTest项目5images2.gif”替换文本为“图片加载失败”，前往的URL为百度网址：点击“确定”任务四 制作鼠标经过图像效果图5-15 插入鼠标经过图像对话框3.保存文档，按保存文档，按F12在浏览器中预览在浏览器中预览知识拓展选中图像后，在属性面板中显示了图像的部分属性，如图5-16所示。在“修改”菜单中点击“编辑标签”，在“常规”选项中有更多的属性设置，如图5-17所示。图5-16 图像属性图5-17 图像标签编辑器对话框知识拓展在属性面板的左上角，显示当前图像的缩略图，同时显示图像的大小。在缩略图右侧有一个ID对应的文本框，在其中可以输入图像标记的名称。图像的大小是可以改变的，但是在DW里更改是极不好的习惯，如果电脑安装了Fireworks软件，单击属性面板的“编辑”旁边的小笔，即可启动Fireworks软件对图像进行各种处理。当图像的大小改变时，属性栏中“宽”和“高”的数值会以粗体显示，并在旁边出现一个弧形箭头，单击它可以恢复图像的原始大小。知识拓展“宽”、“高”用来设置图像显示的尺寸。“水平间距”和“垂直间距”用来设置图像左右和上下与网页或其它页面元素的距离。“边框”用来设置图像边框的宽度，默认的边框宽度为0。知识拓展“替代文本”用来设置图像的替代文本，可以输入一段文字，当图像无法显示时，将显示这段文字。“对齐”下拉列表框用来设置图像与文本的相互对齐方式，共有9个选项。通过对齐方式，我们可以将文字对齐到图像的上端、下端、左边和右边等，从而可以灵活地实现文字与图像的混排效果。“热点工具”包括矩形热点工具、圆形热点工具和多边热点工具，用来在图像上创建不同的超链接。
