• 鼠标经过图像：指鼠标经过图像时所显示的图像。 项目的外观发生变化，以便让用户知道可与这个 项目进行交互。
• 按下图像：指项目被单击后所显示的图像。
• 按下时鼠标经过图像：指在项目被单击后，鼠标 按下时所显示的图像。
首页
返回 结束 调音
• 替换文本：与图像属性中的替代功能相同。 • 按下时，前往的URL：输入单击导航条时要跳
• 边框：确定是否给图像加边框，没有值表示无边 框，值越大边框越粗。
• 对齐：对齐的下拉列表中包括默认值、基线、顶 端、居中、底部、文本上方、绝对居中、绝对底 部、左对齐、右对齐这10种方式。
首页
返回 结束 调音
• 5.4.4 插入图像占位符
在制作网页的时候，经常会使用图像占位符。通过 插入一个图像占位符，将需要放置图像的位置和 大小固定下来，排版完成后，再插入对应的图像。 图像占位符不会在浏览器中出现，以最终插入的 图像最为最终的显示效果。具体的操作步骤如下：
换原图像的替换图象的路径，或单击【浏览】按钮指定路 径。 • 预载鼠标经过图像：选取复选框，在加载页面时鼠标经过 图像预先载入到浏览器的缓存中，以使用户将鼠标指针滑 过图像时不发生延迟。 • 替换文本：该项与前面介绍的图像的替换相同。 • 按下时，前往的URL：输入当前鼠标单击交换图像时要打 开的文档路径。如果只需要交换图像，可以不设置该项； 如果需要交换图像并跳转到某一个页面，就需要指定该项。 • （5）单击【确定】按钮，就完成了插入鼠标经过图像的 设置。 • （6）保存文档后，按F12浏览制作的交换图像效果，在浏 览器中预览的效果如图5-39所示。
• 或者 按【Ctrl+Alt+I】键
首页
返回 结束 调音
首页
返回 结束 调音
• （3）单击【确定】按钮，如果图像文件在 站点外面，就会弹出一个对话框，如图5-23 所示。
首页
返回 结束 调音
• （4）单击【确定】按钮，图像就能插入到网页中 并将其复制到站点的根目录下。
• （5）打开【图像标签辅助功能属性】对话框，如 图5-24所示，在此对话框的【替换文本】下拉列 表框中可以替换替代图片的文字。
直接插入插5入.4图制像作图像页面
图像可以在Dreamweaver 8中的【设计】视图或者 【代码】视图中被插入到文档里。在Dreamweaver 8的文档中添加图像时，可以设置或者修改图像属 性并可直接在文档窗口中查看所作的修改，插入 图像的具体步骤如下：
• （1）用鼠标指针确定图像的插入点。
• （2）单击【插入》图像】菜单项，打开【选择图 像源文件】对话框，如图所示，在此对话框中选 择需要插入的图像文件。
• 在网页中，鼠标经过图像时经常被用来制作动态 效果。当鼠标移动到图像上时，该图像就变成另 外一个图像。这样的效果被广泛的应用到按钮、 导航条的制作中。具体操作步骤如下：
• （1）将光标定位到一个图的位置。
• （2）单击【插入》图像对象》鼠标经过图像】 菜单项，打开【插入鼠标经过菜单】对话框。
• （3）单击【浏览】按钮，分别设置原始图像和 鼠标经过的图像的路径。
右图片的轮廓越明显，如图5-29所示。
首页
返回 结束 调音
• 垂直边距：设置图像距上侧和下侧内容的间距。
• 水平边距：设置图像左侧和右侧内容的间距。
• 低解析度源：有些版本中为“低品质原”，其功 能是指定一个与当前图像画面内容一致，但图像 质量低、文件小的图像作为当前图像的载入前图 像。目的是使浏览器快速显示该图像。
首页
返回 结束 调音
网页图像来源
网页图像的素材有很多来源，如可 以使用图形处理软件（如Photoshop、 Fireworks和FreeHand等软件）制作；可 以购买网页素材光盘；可以从网络上下 载等。
首页
返回 结束 调音
插入图像
• 直接插入 • 占位符插入 • 图像的放大显示
首页
返回 结束 调音
• 在【图像占位符】对话框各种参数的含义如下：
• 名称：作为图像占位符的标签文本，可在应用行 为、编写脚本时引用。名称必须以字母开头，并 且只能包含字母和数字。不使用空格和特殊字符。
• 宽度和高度：设置占位符的大小，也就是将来插 入到占位符中的图像的大小。当然，如果图像比 占位符大或小，则占位符的大小以图像的大小为 准。
首页
返回 结束 调音
• （5）单击【确定】按钮，即插入一个图像占位符， 在编辑页面插入一个图像占位符的效果如图5-36 所示。
首页
返回 结束 调音
• （6）完成网页规划以后，用所设计的图像 替换图像站位符，按F12键可以预览图片的 效果。如图5-37所示。
首页
返回 结束 调音
• 5.4.5 插入鼠标经过图像
首页
返回 结束 调音
• （4）单击【浏览】按钮，打开【选择 图像源文件】对话框，选择要插入的 图片，如图5-42所示。
首页
返回 结束 调音
• （5）单击【确定】按钮，用相同的方法为 每种状态图像设置路径，如图5-43所示。
首页
返回 结束 调音
• （6）单击【确定】按钮，在选中的单元格中插入 一个导航条的按钮，如图5-44所示。
首页
返回 结束 调音
• （4）在【替换文本】文本框输入提示文字 “风景图”，如图5-38所示。
首页
返回 结束 调音
• 在【插入鼠标经过图像】对话框中各个参数的含义如下： • 原始图像：输入显示在当前窗口中的图像的路径，或单击
【浏览】按钮在弹出的对话框中指定原始图像的路径。 • 鼠标经过图像：输入在浏览时鼠标经过原始图像后用来替
首页
返回 结束 调音
首页
返回 结束 调音
• 5.4.6 插入导航条
• 导航条实际上是由一幅图像或一套图像组成的，每幅图像 分别链接到不同的目标文档上。浏览者在需要浏览的标题 上单击，就可跳转相应的网页并查看相关的内容。在 Dreamweaver 8中可以把导航条中的按钮设置为状态图像、 鼠标经过图像、按下图像和按下时鼠标经过图像四种状态。 下面就以制作一个网页的导航条为例进行讲解。首先准备 好素材图片，具体的操作步骤如下：
• 导航条元件：该列表中显示添加的导航条项目。 每个项目都对应一个具有一组状态图像的按钮， 状态最多可达4个。
• 项目名称：输入导航条项目的名称，只能输入英 文和数字，不能输入汉字。项目名称在【导航条 元件】列表中显示。单击右边的箭头按钮可排列 项目在导航条中位置。
• 状态图像：用户未单击或尚未与此项目交互时所 显示的图像。
• （1）在编辑页面中用鼠标选择需要插入图像占位 符的位置。
• （2）单击【插入】图像对象】图像占位符】菜单 项，如图5-34所示。
首页
返回 结束 调音
首页
返回 结束 调音
• （3）打开【图像占位符】对话框，输入占 位符的名称，如图5-35所示。
首页
返回 结束 调音
• （4）在【图像占位符】对话框中设置占位符的宽 度和高度，并为其选择一种颜色加以区别。
➢ 文本说明 ➢ 图像与文本的对齐 ➢ 图像边距 ➢ 图像边框
首页
返回 结束 调音
图像命名
为了在使用Dreamweaver行为 （如交换图像）或脚本撰写语言 （如JavaScript或VBScript）时可以 引用该图像，可在属性面板的“图 像”文本框中为图像命名。
首页
返回 结束 调音
图像大小
在Dreamweaver 8中插入图像后系统 会自动将图像的原始大小显示在“宽” 和“高”文本框（以像素为单位）中。
• 亮度与对比度：调整图像的明暗度与对比度，单 击【亮度/对比度】图标，打开【亮度/对比度】 对话框。在亮度项中拖动滑块即可调整图像的明 暗度，滑块越向右图片越亮；在对比度项中拖动 滑块即可调整图像的对比度，滑块越向右对比度 越强，如图5-28所示。
首页
返回 结束 调音
首页
返回 结束 调音
• 锐化：通过锐化图像，可使图像的边缘更加清晰。 单击【锐化】图标，打开【锐化】对话框，拖动 【锐化】滑块，可以调整图片的轮廓，滑块越向
（7）用同样的方法插入导航条的每一个按钮
，如图5-45所示。
首页
返回 结束 调音
• （8）完成后在浏览器中预览的效果如图5-46所示。
初始化时的效果：
鼠标经过时 结束 调音
设置图像属性
在网页中插入图像后可通过属性面板对其属性进 行修改等设置。
➢ 图像命名 ➢ 图像大小 ➢ 编辑图片 ➢ 源文件设置
第4课 为网页添加图像
• 课堂讲解 • 上机实战
首页
返回 结束 调音
课堂讲解
• 网页图像的格式及来源 • 插入图像 • 设置图像属性 • 图像高级设置
首页
返回 结束 调音
网页图像的格式及来源
• GIF格式 • JPEG格式 • PNG格式 • 网页图像来源
首页
返回 结束 调音
GIF格式
GIF全称为“Graphics Interchange Format”，意为 可交换图像格式，它是第一个支持网页的图像格 式，在PC机和苹果机上都能被正确识别。它最多 支G含IF持动图2态像5信6可种息以颜，在色即网，G页可IF中动以以画使透。图明像方变式得显容示量，相还当可小以。包
首页
返回 结束 调音
• 类：在类右边的下拉列表中存放的是图像样式，可以选择 需要的样式应用于当前的图像，现在该下拉列表中没有任 何东西，但在学习CSS样式后，它的作用就很明显的体现 出来了。
• 链接：是将当前图像与其他位置的内容链接，实现页面的 跳转。其下方的目标是对链接内容的打开方式的设定。
• 编辑：单击【编辑】按钮，启动Fireworks程序，在 Fireworks窗口中对当前的图像进行编辑。编辑完毕后，单 击Fireworks中的【完成】按钮，将保存所做的修改并应用 到Dreamweaver 8的当前图像中，通过该功能可使图像快速 得到修改。