关 键 词：

大学DREAMWEAVER 8案例教程-课件PPT 大学 dreamweaver 案例 教程 课件 ppt

资源描述：

大学DREAMWEAVER 8案例教程-课件PPT,大学DREAMWEAVER,8案例教程-课件PPT,大学,dreamweaver,案例,教程,课件,ppt

内容简介：

第 5 章 图像的使用本章学习目标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代码窗口打开的文件后缀名。单击 按钮，可以选择其他的代码编辑器。当然前提是计算机里要装有编辑器。在扩展名列表中可以选择需要设置外部编辑器的文件扩展名。可以通过单击 按钮添加、按钮删除文件扩展名；在编辑器列表中可以选择此文件所需要的外部编辑器。也可以通过单击 按钮添加、按钮删除所使用的外部编辑器。单击“确定”铵钮完成设置5.5.2使用外部图像编辑器方法一： 在文档窗口中选中要进行编辑的图片。在属性面板中单击 编辑按钮。方法二： 选中要进行编辑的图片，单击鼠标右键，选择“编辑方式”选项。也可以单击“编辑”选项。选择非默认的图片编辑器。方法三： 在“文件”面板中“站点”选项，直接双击要编辑的文件的图片文件。5.5.3在Dreamweaver 8中使用Fireworks 8插入Firework 8图像 与一般图像插入的方式一样，可以将Firework 8导出图形直接插入Dreamweaver文档，也可以利用Dreamweaver图像占位符创建新的Firework 8图形。 如果该Fireworks 8文件不在当前的Dreamweaver站点中，将显示询问是否要将该文件拷贝到根文件夹消息。编辑Fireworks 8图像 在Dreamweaver 8中可以启动Fireworks 8来编辑在Dreamweaver 8文档插入图像。 若设置了图像的默认编辑器为Fireworks 8后，启动并编辑图像或属于Fireworks 8表的一部分的图像切片时，Dreamweaver 8会自动启动Fireworks 8并从其中导出该图像的PNG文件。优化图像Dreamweaver 8中可以启动Fireworks8来对放置Fireworks 8图像和动画，并进行快速的导出和更改操作，利用Fireworks 8可以更改导出图像的优化设置、动画设置以及大小和区域等等。5.5.3在Dreamweaver 8中使用Fireworks 8插入Fireworks 8 HTML具体如下：在Dreamweaver8文档中，将光标放置在要插入Fireworks 8 HTML代码开始的地方。在选择“插入”“交互式图像”“Fireworks 8 HTML”选项；或在“插入”面板中选择常用面板中的按钮。弹出如图5-40所示“插入Fireworks HTML”对话框。单击浏览-按钮选择所需的Fireworks HTML文件地址。图5-40插入Fireoworks HTML对话框若插入Fireworks 8 HTML文件后不再需要该文件，可以选择 “插入后删除文件”选项，在Fireworks HTML在文件夹，此