切片和扩展插件优秀课件.ppt

《切片和扩展插件优秀课件.ppt》由会员分享，可在线阅读，更多相关《切片和扩展插件优秀课件.ppt（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、切片和扩展插件第1页，本讲稿共19页10.1.dreamweaver与与fireworks的结合的结合Fireworks与与Dreamweaver具有强大的兼具有强大的兼容性，容性，它们独特的集成功能使得在它们独特的集成功能使得在Fireworks与与Dreamweaver之中交替处之中交替处理文件变得十分容易。理文件变得十分容易。Dreamweaver和和Fireworks识别和共享识别和共享许多相同的文件编辑结果，其中包括对许多相同的文件编辑结果，其中包括对链接、图像映射、表格切片等的更改。链接、图像映射、表格切片等的更改。这两个应用程序共同为在这两个应用程序共同为在HTML页面中编页面中

2、编辑、优化和放置网页图形文件提供了一辑、优化和放置网页图形文件提供了一个优化的工作流程。个优化的工作流程。第2页，本讲稿共19页10.1.1用用fireworks制作网页切片制作网页切片1切片的定义和作用切片的定义和作用切片定义：就是将一幅大图像分割为一些小切片定义：就是将一幅大图像分割为一些小的图像切片，然后在网页中通过没有间距和的图像切片，然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的宽度的表格重新将这些小的图像没有缝隙的拼接起来，成为一幅完整的图像。拼接起来，成为一幅完整的图像。切片在网页制作中的作用切片在网页制作中的作用 减少下载时间。图片较大时，浏览器下减少下载时间

3、。图片较大时，浏览器下载整个图片的话需要花很长时间，使用载整个图片的话需要花很长时间，使用切片使得整个图片分为多个不同的小图切片使得整个图片分为多个不同的小图片分开下载，这样就大大缩短了下载的片分开下载，这样就大大缩短了下载的时间。时间。第3页，本讲稿共19页制作动态效果。利用切片可以制作出各种制作动态效果。利用切片可以制作出各种交互效果。交互效果。优化图像优化图像。完整的图像只能使用一种文件。完整的图像只能使用一种文件格式，应用一种优化方式，而对于作为切格式，应用一种优化方式，而对于作为切片的各幅小图片我们就可以分别对其优化，片的各幅小图片我们就可以分别对其优化，并根据各幅切片的情况还可以存

4、为不同的并根据各幅切片的情况还可以存为不同的文件格式。这样既能够保证图片质量，有文件格式。这样既能够保证图片质量，有能够使得图片变小。能够使得图片变小。创建链接。可以对不同的切片制作不同的创建链接。可以对不同的切片制作不同的链接，而不需要在大的图片上创建热区了。链接，而不需要在大的图片上创建热区了。第4页，本讲稿共19页2创建切片创建切片 Fireworks工具箱上的切片工具有两类：工具箱上的切片工具有两类：“矩形切矩形切片片”工具（工具（Slice tool）和）和“多边形切片多边形切片”工具工具（Polygon Slice tool）。）。第5页，本讲稿共19页创建矩形切片创建矩形切片首先

5、打开图像，选择工具箱上的的切片工首先打开图像，选择工具箱上的的切片工具，在图像的适当位置上按下鼠标左键并具，在图像的适当位置上按下鼠标左键并拖动绘制一个矩形区域，当矩形大小适当拖动绘制一个矩形区域，当矩形大小适当时释放鼠标，这样就生成了一个矩形切片。时释放鼠标，这样就生成了一个矩形切片。该切片区域被该切片区域被半透明的绿色所覆盖，称为半透明的绿色所覆盖，称为切片对象切片对象，另外，另外Fireworks根据切片对象根据切片对象的位置以红色分割线对图像进行了分割，的位置以红色分割线对图像进行了分割，称为称为切片向导切片向导。第6页，本讲稿共19页创建多边形切片创建多边形切片打开一幅图像，可以利用

6、多边形切片工具，打开一幅图像，可以利用多边形切片工具，在多边形的每个顶点单击，制作多边形切在多边形的每个顶点单击，制作多边形切片。实际上多边形切片的形状主要是用于片。实际上多边形切片的形状主要是用于设置相应的行为触发区域的。可以给切片设置相应的行为触发区域的。可以给切片对象设置链接。如下：对象设置链接。如下：第7页，本讲稿共19页3编辑切片编辑切片 如果要选取切片，可以利用指针工具、部分选定工如果要选取切片，可以利用指针工具、部分选定工具来选中它，也可以使用层面板来进行；选中切片具来选中它，也可以使用层面板来进行；选中切片之后，若要移动切片可以利用鼠标、方向键或者之后，若要移动切片可以利用鼠标

7、、方向键或者属属性面板性面板的位置值。的位置值。切片属性面板简介切片属性面板简介（参看课本（参看课本p270图图10-52）第8页，本讲稿共19页4导出切片导出切片 选择选择“文件文件”-“导出导出”，会弹出导出对话框。，会弹出导出对话框。选择需要保存的文件夹，在文件名中输入文件名选择需要保存的文件夹，在文件名中输入文件名称，再设置一下其他选项选择确定即可。称，再设置一下其他选项选择确定即可。第9页，本讲稿共19页10.1.2Dreamweaver中插入中插入Fireworks HTML 将将Fireworks HTML插入到插入到Dreamweaver中有许中有许多不同的方法。多不同的方法。

8、1.将图片从将图片从Fireworks复制到剪贴板上，然后直接粘贴复制到剪贴板上，然后直接粘贴到到Dreamweaver文档的代码视图中的相应位置处。文档的代码视图中的相应位置处。我们可以用两种方法在我们可以用两种方法在Fireworks中复制中复制HTML代代码到剪贴板。码到剪贴板。一种是可以使用一种是可以使用“编辑编辑”-复制复制HTML代代码；码；另一种是在另一种是在“导入导入”对话框中对话框中HTML选项选项中选择中选择“复制到剪贴板复制到剪贴板”选项，。选项，。然后可以在然后可以在Dreamweaver中将该中将该HTML粘粘贴到文档中。贴到文档中。第10页，本讲稿共19页2.直接将

9、直接将Fireworks HTML插入到插入到Dw中中步骤是：步骤是：首先将首先将Fireworks HTML文件导出到已定文件导出到已定义的义的Dreamweaver站点中；站点中；将光标放在文档中要插入的位置，选择将光标放在文档中要插入的位置，选择“插入插入”-“图像对象图像对象”-“Fireworks HTML；设置后就将设置后就将HTML代码连同它的相关图像、代码连同它的相关图像、切片和切片和JavaScript 一起插入到一起插入到Dw文档中文档中了。如果插入后不再需要了。如果插入后不再需要Fireworks HTML文件，请选择文件，请选择“插入后删除文件插入后删除文件”选项。此选

10、项不会影响与选项。此选项不会影响与HTML文件关联文件关联的的PNG源文件。源文件。第11页，本讲稿共19页10.1.3在在dw中编辑导入的图像切片中编辑导入的图像切片dw属性面板可以帮助识别属性面板可以帮助识别fireworks生成的图像、生成的图像、表格切片和表格。表格切片和表格。1编辑编辑fireworks表格表格 在在dw中完成切片的插入后，选择中完成切片的插入后，选择table标签，然后标签，然后在在dw属性面板选择属性面板选择“编辑编辑”按钮，完成设置后进按钮，完成设置后进入入fireworks编辑界面即可进行表格的编辑。编辑界面即可进行表格的编辑。2编辑编辑fireworks图像

11、图像在在dw中完成切片的插入后，选择要做修改的图像，单中完成切片的插入后，选择要做修改的图像，单击击dw属性面板的属性面板的fireworks编辑按钮即可进入编辑按钮即可进入fireworks编辑界面即可进行表格编辑界面即可进行表格的编辑。的编辑。第12页，本讲稿共19页10.2使用使用dreamweaver扩展扩展1.安装扩展插件（有安装扩展插件（有2种方法）种方法）开始开始所有程序所有程序-MacromediaMacromedia Extension Manager命令命令,启动扩展管理器，在扩展管理启动扩展管理器，在扩展管理器窗口中进行安装器窗口中进行安装直接找到扩展插件的安装程序，双击

12、直接找到扩展插件的安装程序，双击即可快速安装。即可快速安装。第13页，本讲稿共19页第14页，本讲稿共19页第15页，本讲稿共19页2.使用扩展插件使用扩展插件使用扩展插件主要有使用扩展插件主要有2个步骤：个步骤：先安装插件，安装后扩展器窗口中将列出所有先安装插件，安装后扩展器窗口中将列出所有已经安装的插件，请在扩展管理器中看清楚扩已经安装的插件，请在扩展管理器中看清楚扩展的类型（命令、对象、行为），以便使用时展的类型（命令、对象、行为），以便使用时快速找到位置。快速找到位置。然后启动然后启动dreamweaver，在相应的位置找，在相应的位置找到调用扩展的命令即可。到调用扩展的命令即可。第1

13、6页，本讲稿共19页在在“类型类型”栏中显示扩展的类型含义：栏中显示扩展的类型含义：类型类型含义含义对象对象在在dw界面的界面的“插入插入”工具栏调用该扩展插工具栏调用该扩展插件件命令命令在在dw的的“命令命令”菜单中调用扩展菜单中调用扩展行为行为在在dw的的“行为行为”面板中调用扩展面板中调用扩展第17页，本讲稿共19页3.常用扩展插件的安装和使用常用扩展插件的安装和使用Page transitions.mxp有超级链接时，页过渡有超级链接时，页过渡（进入（进入/退出）效果退出）效果命命令令要选定整个页面（即要选定整个页面（即bodybody标签），再在命令菜单标签），再在命令菜单中找到该命

14、令即可实现中找到该命令即可实现（效果见实例站点中（效果见实例站点中guodong1.htmlguodong1.html、guodong2.html guodong2.html、guodong3.html guodong3.html）Typewriter.mxp模拟打字模拟打字行行为为先把要添加该效果的对象放入层中，然后在行为先把要添加该效果的对象放入层中，然后在行为面板中找到面板中找到yaromat|typewriteryaromat|typewriter即可实现，文字即可实现，文字的打印效果就显示在层中。的打印效果就显示在层中。(guodong1.htmlguodong1.html中打印中打

15、印文字）文字）Sound.mxp插入背景音乐插入背景音乐对对象象要选定整个页面（即要选定整个页面（即bodybody标签），再在标签），再在“常用常用”插入栏中找到插入栏中找到soundsound按钮即可实现按钮即可实现Marquee.mxp滚动文字插件滚动文字插件对对象象要选定整个页面（即要选定整个页面（即bodybody标签），再在标签），再在“常用常用”插入栏中找到插入栏中找到marqueemarquee按钮即可实现按钮即可实现Insert Greeting.mxp插入问候语插入问候语对对象象把光标定位在页面的合适位置，然后选择把光标定位在页面的合适位置，然后选择“插入插入”栏中的栏中的

16、“CN Insert GreetingCN Insert Greeting”按钮即可实现按钮即可实现Calander.mxp对对象象把光标定位在页面的合适位置，然后选择把光标定位在页面的合适位置，然后选择“插入插入”栏中的栏中的“calandercalander”按钮即可实现按钮即可实现Persistent layers滚动链接的层滚动链接的层行行为为先把要添加该效果的对象放入层中，然后在行为先把要添加该效果的对象放入层中，然后在行为面板中找到面板中找到ribbers zeewolde|Persistent ribbers zeewolde|Persistent layerslayers即可实现，一般用来显示广告信息。（即可实现，一般用来显示广告信息。（guodong1.htmlguodong1.html中的中的”送给你了送给你了“）第18页，本讲稿共19页本章作业：课后习题，第一、二题。本章作业：课后习题，第一、二题。本章到此结束！本章到此结束！第19页，本讲稿共19页