Dreamweaver 8案例教程教学课件苏玉雄第5章.ppt

《Dreamweaver 8案例教程教学课件苏玉雄第5章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5章图像的使用本章学习目标Web图像格式简介5.1插入图像5.2设置图像属性5.3外部图像编辑器5.5动态图像5.45.1Web图像格式简介图像通常用来添加图形界面、具有视觉感染力的内容或交互式设计元素，Web页中通常使用的只有三种，即GIF、JPEG和PNG。返回5.2插入图像在“文档”窗口中，将插入点放置在您要显示图像的地方。在插入面板中的常用面板单击图标，或在单击“插入”→“图像”菜单弹出如图5-1所示“选择图像源”对话框。图5-1“选择图像源”对话框在“选择图像源”对话框中选择要插入的图像，或直接在URL：文本框中输入文件的链接地址。选择好图像后，单击“确定”按钮。图像插入在网页

2、文档的相应位置中。返回5.3设置图像属性选中图片，属性面板转为如图5-4所示图像面板。图5-4图像属性面板单击面板右下角的按钮图像属性面板转为如图5-5所示图像属性面板。图5-5图像属性面板设置图像的相应的属性。返回5.4动态图像在Dreamweaver8中，可以利用系统自带的图片设置工具创建简单的动态图像。使鼠标经过图片时，可以产生一些类似按钮的动态效果来丰富网页，而不用过分地追求Flash的动态按钮或是JavaScript特效。5.4.1图像热点创建图像热点的步骤如下用鼠标在文档窗口中选中要创建图片热点的图片。选择图片热点工具栏的任一热点工具。在图像上任意位置拖动鼠标，创建热点。在热点

3、工具栏中，矩形热点，创建效果如图5-25所示；圆形热点，创建效果如图5-26所示；多边形热点，创建效果如图5-27所示。图5-25矩形热点图5-26圆形热点图5-27多边形热点创建图片热点后，在属性面板中出现如图5-28所示热点属性设置面板。可以对热点的链接等方面进行设置。5.4.2轮替图像具体步骤如下：在文档窗口选择要轮替的主图像。在菜单栏中选择选择“插入”→“交互式图像”→“鼠标经过图像”选项；或在“插入”面板中选择“常用”面板中的“鼠标经过图像”图标，弹出如图5-34所示对话框。图5-34鼠标经过图像设定好各项参数之后，单击“确定”按钮完成替换图像的设置。5.4.3占位图像图像占位符

4、是在准备好将最终图形添加到Web页之前使用的图形，使用图像占位还可以更方便地布局网页结构。下面，来介绍一下如何使用图像占位符。5.4.3占位图像插入图像占位符在文档编辑窗口中，将鼠标放置到插入占位符图像的位置。选择“插入”→“图像对象”→“图像占位符”选项；或在“插入”面板中选择“常用”面板中的占位符图标。弹出如图5-35所示图像占位符“对话框。设置图像占位符各属性（例名称、高度、宽度）后，单击按钮完成替换图像的设置。当在浏览器窗口中查看时，不显示标签文字和大小文本。5.4.3占位图像设置占位符属性选中图像占位符，属性面板变为占位符属性，如图5-37所示。图5-37占位符属性设置在点位符属

5、性面板白色文本框中设置或修改占位符属性（如地图文本框等灰色文本框表示属性不可设置）5.4.3占位图像替换占位符在Dreamweaver8的文档编辑窗口中双击图像占位符，或选中图像占位符，在占位符属性面板中，单击“源文件”文本框旁的图标。出现如图5-38所示的选择图像源窗口。选择要替换图像占位符的图像，单击“确定”按钮即可。返回5.5外部图像编辑器用户可以使用外部图像编辑器（Fireworks、photoshop等）来编辑Dreamweaver8文档窗口中的图像，当在图像编辑器中编辑图像后保存并返回Dreamweaver8时，文档编辑区中的图像也会随着被更新。5.5.1设置外部图像编辑参数在

6、“编辑”菜单中选择使用“外部编辑器编辑”子菜单，弹出如图5-39所示的设置外部图像编辑窗口；也可以在“编辑”菜单中选择“参数选择”子菜单，在弱出的“参数选择”对话框的分类列表中选择“文件类型/编辑器”。图5-39首选参数设置对话框可以在代码视图中打开文本框架中添加要用Dreamweaver8代码窗口打开的文件后缀名。单击按钮，可以选择其他的代码编辑器。当然前提是计算机里要装有编辑器。在扩展名列表中可以选择需要设置外部编辑器的文件扩展名。可以通过单击按钮添加、━按钮删除文件扩展名；在编辑器列表中可以选择此文件所需要的外部编辑器。也可以通过单击按钮添加、━按钮删除所使用的外部编辑器。单击“确定

7、”铵钮完成设置5.5.2使用外部图像编辑器方法一：在文档窗口中选中要进行编辑的图片。在属性面板中单击编辑按钮。方法二：选中要进行编辑的图片，单击鼠标右键，选择“编辑方式”选项。也可以单击“编辑”选项。选择非默认的图片编辑器。方法三：在“文件”面板中“站点”选项，直接双击要编辑的文件的图片文件。5.5.3在Dreamweaver8中使用Fireworks8插入Firework8图像与一般图像插入的方式一样，可以将Firew