网页设计与制作课件第6章[教学].pptVIP

第6章 切片与文件优化; ; 切片顾名思义就是将一幅大图像分割为一些小的图像切片，在网页中可以将这些小的图像切片放入一个表格，将表格的单元格之间的间距设为0，从而将这些小的图像切片没有缝隙的重新组合起来，还原为一幅完整的图像。 对图像采用切片以后，每一个切片上都可以采用不同的优化方式，达到兼顾减小整个图像文件的大小和保持图像的总体质量的效果。 使用切片还可以在切片上加各种动作，创造出交互的效果 。;6.1 切片的基本操作 6.1.1 创建切片 可以使用Fireworks 8工具箱里的【矩形切片工具】和【多边形切片工具】在图像上创建切片。切片的形状必定是矩形，尽管在Fireworks 8中可以使用【多边形切片工具】来创建较为复杂的切片，但是最终导出时，Fireworks 8都将其转换成矩形切片，也就是说在Fireworks 8中最终的切片都必须是矩形的。多边形切片的意义在于设置相应的行为触发区域，例如切片对象被设置了超链接，那么在浏览器中显示的时候，只有点击到多边形区域时才会实现链接跳转，而在这个切片的其他区域则不会出现链接跳转。;用切片工具创建矩形切片 创建矩形切片时可打开需要创建切片的图像，在工具箱中单击【切片工具】，在图像上用鼠标拖动出一个矩形后放开，该矩形区域即成为矩形切片，如图6-1(a)所示的图像上创建了三个切片。 切片创建好后，在【层】面板的网页层会产生相应的切片对象，如图6-1(b)所示。 ;图6-1 在图像上创建了三个矩形切片示意图;2. 多边形切片 使用【多边形切片工具】可以绘制出一个多边形的切片，但实际上输出的切片图像仍是矩形的。实际上多边形切片的形状主要是用于设置相应的行为触发区域的。例如切片对象被设置了超链接，那么在浏览器中显示的时候，只有点击到多边形区域时才会实现链接跳转，而在这个切片的其他区域则不会出现链接跳转。;多边形切片创建的具体操作如下。 （1）打开需要创建切片的图像，在工具箱中单击【多边形切片】按钮。 （2）在多边形切片的起点处单击鼠标，移动鼠标到多边形切片的下一个顶点处，再次单击鼠标，依此绘制好多边形切片的所有顶点，并回到???始点单击鼠标即可。 （3）从创建好多边形切片的图6-2可以看出在每个单击鼠标的地方都出现了一个蓝色的控制点，通过拖动这些控制点可以改变切片的形状。;图6-2 使用【多边形切片工具】创建选区;3. 使用菜单命令创建切片 用选区工具建一个选区，或在画布上选定对象。可以使用菜单插入矩形切片，正好把选区或对象包含在内，具体操如下。 （1）打开需要创建切片的图像，用选区工具建一个选区，或在画布上选定一个对象。 （2）选择【编辑】|【插入】|【矩形切片】命令，或选择【编辑】|【插入】|【多边形切片】命令，即可插入一个切片，正好把选区或对象包含在内。 （3）如果选定的是多个对象，则会打开对话框如图6-3所示。选择【单一】则会建立一个切片，把选中的所有对象都包含在内，如图6-4所示。选择【多重】则会为每个对象建立一个切片，分别包含选中的对象，如图6-5所示。;图6-3 选择如何为选定的多个对象建立切片 ;图6-4 选择【单一】建立一个切片 图6-5 选择【多重】建立多个切片;6.1.2 在切片上设置URL 可以给切片添加一个超链接，在网页上单击该切片就会跳转到另一个网页。具体操作如下。 （1）选中需要添加超级链接的切片对象。 （2）在切片的属性面板的【链接】文本框中输入URL。 （3）在【替代】文本框中输入的是替换文本。如果浏览器无法显示图像，将会在图像所在的位置显示替换文本。 （4）在【目标】的下拉列表中可以设置URL所指向的页面从哪个窗口打开，四个选项分别是。; _blank：选择该选项会在一个新建的窗口中打开URL所指向的页面。 _self：选择该选项会在当前窗口中打开URL所指向的页面。 _parent：如果是框架结构，选择该选项会在当前窗口的上一级窗口中打开URL所指向的页面。 _top：如果是框架结构，选择该选项会在最高级，即整个屏幕中打开URL所指向的页面。;6.1.3 导出切片 导出切片就是将每一个切片保存为一个图像文件，具体操作如下。 （1）选择菜单【文件】|【导出】命令，打开【导出】对话框 。 （2）在【保存在】文本框中选择保存路径。 （3）在【文件名】文本框中输入文件名，这文件名是一系列切片图像文件名的前面一部分，切片图像文件名的后面部分由Fireworks 8按一定的规则自动产生。如果选【HTML和图像】，输入的文件名同时是网页的文件名。;（4）在【保存类型】下拉列表中有很多选项，一般选【仅图像】或【HTML和图像