第10章切片和扩展插件.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,第,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,种方法）,开始,所有程序,-MacromediaMacromedia Extension Manager,命令,启动扩展管理器，在扩展管理器窗口中进行安装,直接找到扩展插件的安装程序，双击即可快速安装。,2.,使用扩展插件,使用扩展插件主要有,2,个步骤：,先安装插件，安装后扩展器窗口中将列出所有已经安装的插件，请在扩展管理器中看清楚扩展的类型（命令、对象、行为），以便使用时快速找到位置。,然后启动,dreamweaver,，在相应的位置找到调用扩展的命令即可。,在“类型”栏中显示扩展的类型含义：,类型,含义,对象,在,dw,界面的“插入”工具栏调用该扩展插件,命令,在,dw,的“命令”菜单中调用扩展,行为,在,dw,的“行为”面板中调用扩展,3.,常用扩展插件的安装和使用Page,transitions.mxp,有超级链接时，页过渡（进入,/,退出）效果,命令,要选定整个页面（即,body,标签），再在命令菜单中找到该命令即可实现,（效果见实例站点中,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,滚动链接的层,行为,先把要添加该效果的对象放入层中，然后在行为面板中找到,ribbers,zeewolde,|Persistent layers,即可实现，一般用来显示广告信息。（,guodong1.html,中的”送给你了“）,本章作业：课后习题，第一、二题。,本章到此结束！,