第4章 利用图像美化网页.ppt

第4章 利用图像美化网页 ;4.1 案例实现;图4-1 ;4.2 相关知识 ; 4.2.2 在网页中插入图像 （1）插入普通图像 在Dreamweaver文档中插入普通图像时，为了确保图像引用的正确性，该图像文件必须位于当前站点中。 1）在文档中插入图像，将光标置于要插入图像的位置后。 2）单击【插入】工具栏中【常用】类别中的【图像】按钮右侧的向下的箭头，从弹出的下拉菜单中选择【图像】命令。 3）在弹出【选择图像源文件】对话框中，选择一个将要插入的图像文件，然后单击【确定】。 （2）插入背景图像 使用背景图像，可以丰富页面效果改变单调的网页背景。定义页面背景的图像时要使用【页面属性】对话框。步骤如下： 1）在文档窗口中，选择【修改】│【页面属性】命令，或在属性面板中单击【页面属性】按钮，这时将弹出【页面属性】对话框。 2）在【背景图像】文本框中单击【浏览】按钮，从弹出的【选择图像源文件】对话框中选择背景图像文件。 3）单击【确定】按钮，文档中就添加上了背景图像。;4.2.3 设置图像属性 在图像的属性面板中设置图像的属性，点击文档中插入的图像时，在属性面板上将反映该图像的属性。 “图像”下面的文本框用于设置所选图像的名称，在使用行为或者脚本撰写语言时可以引用该图像。 “地图”文本框用来标注客户端图像地图名称。 “矩形热点工具、椭圆形特点工具和多边形热点工具”用来创建不同形状的客户端图像映射图。 “宽”和“高”这两个文本框用于指定图像的宽度和高度。 “重设图像大小” 用于清除已设置的图像大小，恢复原始值。 “垂直边距”文本框用于沿图像的顶部和底部添加边距。边距值以像素为单位。 “水平边距”文本框用于沿图像左侧和右侧添加边距。;“源文件”用于指定图像的源文件，可以在文本框中直接输入路径，也可以单击文件夹图标浏览源文件。 “链接”用于设置选定图像所链接的文件路径或网址。 “目标”用于指定链接的页面应当在其中载入的框架或窗口，是以下拉列表的形式出现的，当图像未添加链接时，此选项不可用。 “低解析度源”用于指定链接的页面应当在其中载入的框架或窗口，是以下拉列表的形式出现的，当图像未添加链接时，此选项不可用。 “替换”用于指定只显示文本的浏览器或已设置为手动下载图像的浏览器中替代图像所显示的文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。 “编辑”此按钮用于启动图像编辑程序，编辑选中的图像。 “使用Fireworks最优化 ”此按钮用于更改选中图像的优化设置。; “裁剪” 此按钮用于修剪图像的大小，删除图像中不需要的区域。 “重新取样” 此按钮用于调整重新取样的图像的大小，提高图片的品质。 “亮度和对比度” 此按钮用于调整图像的亮度和对比度设置。 “锐化” 此按钮用于调整图像的清晰度。 “边框”用于指定以像素为单位的图像边框的宽度。默认情况下为无边框。 “左对齐、居中对齐、右对齐”用于设置段落的对齐方式。 “对齐”此下拉列表框中的选项用于对齐同一行上的图像和文本。图像的对齐方式多达9种。 图像对齐选项“默认值”基线对齐方式。;“基线”将文本或同一段落中的其他元素的基线与选定对象的底部对齐。 “顶端”将图像的顶端与当前行中最高项元素的顶端对齐。 “居中”将图像的中部与当前行的基线对齐。 “底部”将文本的基线与选定图象或是同一段落中的其他元素的底部对齐。 “文本上方”将图像的顶端与文本行中最高字符的顶端对齐。 “绝对居中”将图像的中部与当前行中文本的中部对齐。 “绝对底部”将图像的底部与文本行的底部对齐。 “左对齐”所选图像在左边，文本在图像的右侧。 “右对齐”所选图像在右边，文本在图像的左侧。;4.2.4 插入其他图像元素 （1）插入图像占位符 图像占位符是准备将图形添加到网页之前使用的图形，在发布站点前，使用适合网页的图形文件替换添加的图像占位符。 1）在文档窗口中，将光标放置在选定位置后单击【插入】工具栏或【常用】类别中的【图像】按钮右边的箭头，选择【图像占位符】命令，弹出【图像占位符】对话框。 2）在【图像占位符】对话框中设置大小和颜色，指定文本标签后单击【确定】按钮。 （2）插入鼠标经过图像 鼠标经过图像是一种在浏览器中查看时鼠标指针滑过时发生变化的图像此实例是由主图像和次图像两幅图像组成。在制作时所选择的图像最好大小相同，否则将自动调整第二张的图像的属性大小同第一张图像相同。;1）在文档窗口中，将光标放置在选定位置。 2）单击【插入】工具栏或【常用】类别中的【图像】按钮右边的箭头，选择【鼠标经过图像】命令，或者选择【插入】/【图像对象】/【鼠标经过图像】命令，弹出【插入鼠标经过图像】对话框。设置好后，单击【确定】按钮。 【插入鼠标经过图像】对话框“图像名称”输入鼠标经过的图像名称。 “原始图像