切片和扩展插件

1、切片和扩展插件第1页，共19页，2022年，5月20日，11点10分，星期一10.1.dreamweaver与fireworks的结合Fireworks与Dreamweaver具有强大的兼容性， 它们独特的集成功能使得在Fireworks与Dreamweaver之中交替处理文件变得十分容易。Dreamweaver和Fireworks识别和共享许多相同的文件编辑结果，其中包括对链接、图像映射、表格切片等的更改。这两个应用程序共同为在HTML页面中编辑、优化和放置网页图形文件提供了一个优化的工作流程。第2页，共19页，2022年，5月20日，11点10分，星期一10.1.1用fireworks制作

2、网页切片1切片的定义和作用切片定义：就是将一幅大图像分割为一些小的图像切片，然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼接起来，成为一幅完整的图像。切片在网页制作中的作用 减少下载时间。图片较大时，浏览器下载整个图片的话需要花很长时间，使用切片使得整个图片分为多个不同的小图片分开下载，这样就大大缩短了下载的时间。第3页，共19页，2022年，5月20日，11点10分，星期一制作动态效果。利用切片可以制作出各种交互效果。 优化图像 。完整的图像只能使用一种文件格式，应用一种优化方式，而对于作为切片的各幅小图片我们就可以分别对其优化，并根据各幅切片的情况还可以存为不同的文件格

3、式。这样既能够保证图片质量，有能够使得图片变小。创建链接。可以对不同的切片制作不同的链接，而不需要在大的图片上创建热区了。 第4页，共19页，2022年，5月20日，11点10分，星期一2创建切片 Fireworks工具箱上的切片工具有两类：“矩形切片”工具（Slice tool）和“多边形切片”工具（Polygon Slice tool）。第5页，共19页，2022年，5月20日，11点10分，星期一创建矩形切片首先打开图像，选择工具箱上的的切片工具，在图像的适当位置上按下鼠标左键并拖动绘制一个矩形区域，当矩形大小适当时释放鼠标，这样就生成了一个矩形切片。该切片区域被半透明的绿色所覆盖，称为

4、切片对象，另外Fireworks根据切片对象的位置以红色分割线对图像进行了分割，称为切片向导。第6页，共19页，2022年，5月20日，11点10分，星期一创建多边形切片打开一幅图像，可以利用多边形切片工具，在多边形的每个顶点单击，制作多边形切片。实际上多边形切片的形状主要是用于设置相应的行为触发区域的。可以给切片对象设置链接。如下： 第7页，共19页，2022年，5月20日，11点10分，星期一3编辑切片 如果要选取切片，可以利用指针工具、部分选定工具来选中它，也可以使用层面板来进行；选中切片之后，若要移动切片可以利用鼠标、方向键或者属性面板的位置值。切片属性面板简介（参看课本p270图10

5、-52）第8页，共19页，2022年，5月20日，11点10分，星期一4导出切片 选择“文件”-“导出”，会弹出导出对话框。选择需要保存的文件夹，在文件名中输入文件名称，再设置一下其他选项选择确定即可。第9页，共19页，2022年，5月20日，11点10分，星期一10.1.2Dreamweaver中插入Fireworks HTML 将Fireworks HTML插入到Dreamweaver中有许多不同的方法。 1.将图片从Fireworks复制到剪贴板上，然后直接粘贴到Dreamweaver文档的代码视图中的相应位置处。我们可以用两种方法在Fireworks中复制HTML代码到剪贴板。一种是可

6、以使用“编辑”-复制HTML代码；另一种是在“导入”对话框中HTML选项中选择“复制到剪贴板”选项，。 然后可以在Dreamweaver中将该HTML粘贴到文档中。第10页，共19页，2022年，5月20日，11点10分，星期一2.直接将Fireworks HTML插入到Dw中步骤是：首先将Fireworks HTML文件导出到已定义的Dreamweaver站点中；将光标放在文档中要插入的位置，选择“插入” - “图像对象”-“Fireworks HTML；设置后就将HTML代码连同它的相关图像、切片和JavaScript 一起插入到Dw文档中了。如果插入后不再需要Fireworks HTML

7、文件，请选择“插入后删除文件”选项。此选项不会影响与HTML文件关联的PNG源文件。第11页，共19页，2022年，5月20日，11点10分，星期一10.1.3在dw中编辑导入的图像切片dw属性面板可以帮助识别fireworks生成的图像、表格切片和表格。1编辑fireworks表格 在dw中完成切片的插入后，选择table标签，然后在dw属性面板选择“编辑”按钮，完成设置后进入fireworks编辑界面即可进行表格的编辑。2编辑fireworks图像在dw中完成切片的插入后，选择要做修改的图像，单击dw属性面板的fireworks编辑按钮即可进入fireworks编辑界面即可进行表格的编辑。

8、第12页，共19页，2022年，5月20日，11点10分，星期一10.2使用dreamweaver扩展1.安装扩展插件（有2种方法）开始所有程序MacromediaMacromedia Extension Manager命令,启动扩展管理器，在扩展管理器窗口中进行安装直接找到扩展插件的安装程序，双击即可快速安装。第13页，共19页，2022年，5月20日，11点10分，星期一第14页，共19页，2022年，5月20日，11点10分，星期一第15页，共19页，2022年，5月20日，11点10分，星期一2.使用扩展插件使用扩展插件主要有2个步骤：先安装插件，安装后扩展器窗口中将列出所有已经安装的

9、插件，请在扩展管理器中看清楚扩展的类型（命令、对象、行为），以便使用时快速找到位置。然后启动dreamweaver，在相应的位置找到调用扩展的命令即可。第16页，共19页，2022年，5月20日，11点10分，星期一在“类型”栏中显示扩展的类型含义：类型含义对象在dw界面的“插入”工具栏调用该扩展插件命令在dw的“命令”菜单中调用扩展行为在dw的“行为”面板中调用扩展第17页，共19页，2022年，5月20日，11点10分，星期一3.常用扩展插件的安装和使用Page transitions.mxp有超级链接时，页过渡（进入/退出）效果命令要选定整个页面（即body标签），再在命令菜单中找到该命

10、令即可实现（效果见实例站点中guodong1.html、 guodong2.html 、 guodong3.html ）Typewriter.mxp模拟打字行为先把要添加该效果的对象放入层中，然后在行为面板中找到yaromat|typewriter即可实现，文字的打印效果就显示在层中。 (guodong1.html中打印文字）Sound.mxp插入背景音乐对象要选定整个页面（即body标签），再在“常用”插入栏中找到sound按钮即可实现Marquee.mxp滚动文字插件对象要选定整个页面（即body标签），再在“常用”插入栏中找到marquee按钮即可实现Insert Greeting.mxp插入问候语对象把光标定位在页面的合适位置，然后选择“插入”栏中的“CN Insert Greeting”按钮即可实现Calander.mxp对象把光标定位在页面的合适位置，然后选择“插入”栏中的“calander”按钮即可实现Persistent layers滚动链接的层行为先把要添加该效果的对象放入层中，然后在行为面