第10章切片和扩展插件1.pptVIP

第10章扩展dreamweaver 理解并应用下面几个问题 1.dreamweaver与fireworks的结合 2.使用扩展dreamweaver 10.1.dreamweaver与fireworks的结合 Fireworks与Dreamweaver具有强大的兼容性， 它们独特的集成功能使得在Fireworks与Dreamweaver之中交替处理文件变得十分容易。 Dreamweaver和Fireworks识别和共享许多相同的文件编辑结果，其中包括对链接、图像映射、表格切片等的更改。这两个应用程序共同为在HTML页面中编辑、优化和放置网页图形文件提供了一个优化的工作流程。 10.1.1用fireworks制作网页切片 1切片的定义和作用 切片定义：就是将一幅大图像分割为一些小的图像切片，然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼接起来，成为一幅完整的图像。 切片在网页制作中的作用 减少下载时间。图片较大时，浏览器下载整个图片的话需要花很长时间，使用切片使得整个图片分为多个不同的小图片分开下载，这样就大大缩短了下载的时间。 制作动态效果。利用切片可以制作出各种交互效果。 优化图像 。完整的图像只能使用一种文件格式，应用一种优化方式，而对于作为切片的各幅小图片我们就可以分别对其优化，并根据各幅切片的情况还可以存为不同的文件格式。这样既能够保证图片质量，有能够使得图片变小。 创建链接。可以对不同的切片制作不同的链接，而不需要在大的图片上创建热区了。 2创建切片 Fireworks工具箱上的切片工具有两类：“矩形切片”工具（Slice tool）和“多边形切片”工具（Polygon Slice tool）。 创建矩形切片首先打开图像，选择工具箱上的的切片工具，在图像的适当位置上按下鼠标左键并拖动绘制一个矩形区域，当矩形大小适当时释放鼠标，这样就生成了一个矩形切片。该切片区域被半透明的绿色所覆盖，称为切片对象，另外Fireworks根据切片对象的位置以红色分割线对图像进行了分割，称为切片向导。 创建多边形切片打开一幅图像，可以利用多边形切片工具，在多边形的每个顶点单击，制作多边形切片。实际上多边形切片的形状主要是用于设置相应的行为触发区域的。可以给切片对象设置链接。如下： 3编辑切片 如果要选取切片，可以利用指针工具、部分选定工具来选中它，也可以使用层面板来进行；选中切片之后，若要移动切片可以利用鼠标、方向键或者属性面板的位置值。 切片属性面板简介（参看课本p270图10-52） 4导出切片 　　选择“文件”-“导出”，会弹出导出对话框。选择需要保存的文件夹，在文件名中输入文件名称，再设置一下其他选项选择确定即可。 10.1.2Dreamweaver中插入Fireworks HTML 　　将Fireworks HTML插入到Dreamweaver中有许多不同的方法。 1.将图片从Fireworks复制到剪贴板上，然后直接粘贴到Dreamweaver文档的代码视图中的相应位置处。我们可以用两种方法在Fireworks中复制HTML代码到剪贴板。 一种是可以使用“编辑”-复制HTML代码； 另一种是在“导入”对话框中HTML选项中选择“复制到剪贴板”选项，。 然后可以在Dreamweaver中将该HTML粘贴到文档中。 2.直接将Fireworks HTML插入到Dw中 步骤是： 首先将Fireworks HTML文件导出到已定义的Dreamweaver站点中； 将光标放在文档中要插入的位置，选择“插入” - “图像对象”-“Fireworks HTML； 设置后就将HTML代码连同它的相关图像、切片和JavaScript 一起插入到Dw文档中了。如果插入后不再需要Fireworks HTML文件，请选择“插入后删除文件”选项。此选项不会影响与HTML文件关联的PNG源文件。 10.1.3在dw中编辑导入的图像切片 dw属性面板可以帮助识别fireworks生成的图像、表格切片和表格。 1编辑fireworks表格 在dw中完成切片的插入后，选择table标签，然后在dw属性面板选择“编辑”按钮，完成设置后进入fireworks编辑界面即可进行表格的编辑。 2编辑fireworks图像 在dw中完成切片的插入后，选择要做修改的图像，单击dw属性面板的fireworks 编辑按钮即可进入fireworks编辑界面即可进行表格的编辑。 10.2使用dreamweaver扩展 1.安装扩展插件（有2种方法） 开始—所有程序Macromedia—Macromedia Extension Manager命令,启动扩展管理器，在扩展管理器窗口中进行