Dreamweaver8案例教程 第5章 图像的使用.pptVIP

?2003. 苏玉雄 1-* 第 5 章  图像的使用 本章学习目标 Web图像格式简介 5.1 插入图像 5.2 设置图像属性 5.3 外部图像编辑器 5.5 动态图像 5.4 5.1 Web图像格式简介 图像通常用来添加图形界面、具有视觉感染力的内容或交互式设计元素， Web页中通常使用的只有三种，即GIF、JPEG和PNG。 返回 5.2插入图像 在“文档”窗口中，将插入点放置在您要显示图像的地方。 在插入面板中的常用面板单击图标，或在单击“插入”→“图像”菜单弹出如图5-1所示“选择图像源”对话框。 图5-1 “选择图像源”对话框 在“选择图像源”对话框中选择要插入的图像，或直接在URL：文本框中输入文件的链接地址。 选择好图像后，单击 “确定”按钮。图像插入在网页文档的相应位置中。 返回 5.3设置图像属性 选中图片，属性面板转为如图5-4所示图像面板。 图5-4 图像属性面板 单击面板右下角的按钮图像属性面板转为如图5-5所示图像属性面板。 图5-5图像属性面板 设置图像的相应的属性。 返回 5.4动态图像 在Dreamweaver 8中，可以利用系统自带的图片设置工具创建简单的动态图像。使鼠标经过图片时，可以产生一些类似按钮的动态效果来丰富网页，而不用过分地追求Flash的动态按钮或是JavaScript特效。 5.4.1图像热点 创建图像热点的步骤如下 用鼠标在文档窗口中选中要创建图片热点的图片。 选择 图片热点工具栏的任一热点工具。在图像上任意位置拖动鼠标，创建热点。 在热点工具栏中， 矩形热点，创建效果如图5-25所示； 圆形热点，创建效果如图5-26所示； 多边形热点，创建效果如图5-27所示。 图5-25矩形热点 图5-26圆形热点 图5-27多边形热点 创建图片热点后，在属性面板中出现如图5-28所示热点属性设置面板。可以对热点的链接等方面进行设置。 5.4.2轮替图像 具体步骤如下： 在文档窗口选择要轮替的主图像。 在菜单栏中选择选择“插入”→“交互式图像”→“鼠标经过图像”选项；或在“插入”面板中选择“常用”面板中的 “鼠标经过图像”图标，弹出如图5-34所示对话框。 图5-34鼠标经过图像 设定好各项参数之后，单击“确定”按钮完成替换图像的设置。 5.4.3占位图像 图像占位符是在准备好将最终图形添加到Web页之前使用的图形，使用图像占位还可以更方便地布局网页结构。下面，来介绍一下如何使用图像占位符。 5.4.3占位图像 插入图像占位符 在文档编辑窗口中，将鼠标放置到插入占位符图像的位置。 选择“插入”→“图像对象”→“图像占位符”选项；或在“插入”面板中选择“常用”面板中的 占位符图标。 弹出如图5-35所示图像占位符“对话框。设置图像占位符各属性（例名称、高度、宽度）后，单击 按钮完成替换图像的设置。当在浏览器窗口中查看时，不显示标签文字和大小文本。 5.4.3占位图像 设置占位符属性 选中图像占位符，属性面板变为占位符属性，如图5-37所示。 图5-37占位符属性设置 在点位符属性面板白色文本框中设置或修改占位符属性（如地图文本框等灰色 文本框表示属性不可设置） 5.4.3占位图像 替换占位符 在Dreamweaver 8的文档编辑窗口中双击图像占位符，或选中图像占位符，在占位符属性面板中，单击“源文件”文本框旁的 图标。 出现如图5-38所示的选择图像源窗口。选择要替换图像占位符的图像，单击“确定”按钮即可。 返回 5.5外部图像编辑器 用户可以使用外部图像编辑器（Fireworks 、photoshop等）来编辑Dreamweaver 8文档窗口中的图像，当在图像编辑器中编辑图像后保存并返回Dreamweaver 8时，文档编辑区中的图像也会随着被更新。 5.5.1设置外部图像编辑参数 在“编辑”菜单中选择使用“外部编辑器编辑”子菜单，弹出如图5-39所示的设置外部图像编辑窗口；也可以在“编辑”菜单中选择“参数选择”子菜单，在弱出的“参数选择”对话框的分类列表中选择“文件类型/编辑器”。 图5-39首选参数设置对话框 可以在代码视图中打开文本框架中添加要用Dreamweaver 8代码窗口打开的文件后缀名。 单击 按钮，可以选择其他的代码编辑器。当然前提是计算机里要装有编辑器。 在扩展名列表中可以选择需要设置外部编辑器的文件扩展名。可以通过单击 按钮添加、━按钮删除文件扩展名；