学习Fireworks CS3的切片和优化功能

2010-01-07 16:09:54 作者：网友来源：互联网

6、按快捷键【F6】，打开Fireworks CS3的【优化】面板，使用【指针】工具，在【2幅】窗口的左侧依次选择切片，然后在【优化】面板中进行相应的优化操作，最终优化后的图像效果，可以在【2幅】窗口的右侧进行观察，如图6所示。

详解Fireworks CS3切片和优化功能!

图6 Fireworks CS3对切片进行优化

7、对每一张切片进行优化后，就可以导出所有的图像素材了。选择【文件】@@【导出】命令（快捷键为【Ctrl+Shift+R】），会弹出Fireworks CS3的【导出】对话框，如图7所示。

详解Fireworks CS3切片和优化功能!

图7 Fireworks CS3导出对话框

8、在【导出】对话框中的【导出】下拉列表中选择【HTML和图像】选项，这样可以激活面板右下角的【选项】按钮，单击【选项】按钮，打开【HTML设置】对话框，如图8所示。

详解Fireworks CS3切片和优化功能!

图8 Fireworks CS3执行HTML设置

9、切换到【文档特定信息】选项卡，设置导出后所有切片的命名规则，可以使用文档名称加切片序号的方式来命名，这样做的目的是为了尽量让切片的名称变得简短，如果切片名称太长，在网页中写脚本的时候字符数量就会增加，网页文件的文件量也就会随之增加，如图9所示。设置完毕后，点击【确定】按钮，返回【导出】对话框。

详解Fireworks CS3切片和优化功能!

图9 Fireworks CS3切片的命名规则设置

10、更改【导出】对话框中的【导出】类型为【仅图像】。这样导出以后只会根据切片来生成图像而不会生成网页，在【文件名】文本框中输入希望的文件名称，建议命名规则简单易记。

11、在【保存在】下拉列表中选择需要保存的位置，习惯上我们会把所有切片生成的图像保存到站点的图像文件夹内。在【切片】下拉列表中选择【导出切片】，但是不要勾选下方的【包含无切片区域】和【当前页面】复选框。

12、全部设置完毕后，点击【保存】按钮即可把这个页面中的所有切片导出到Dreamweaver的站点中去了，生成的图像如图10所示。

详解Fireworks CS3切片和优化功能!

图10 导出到站点中的切片

教程排行榜: 如何用Fireworks制作水晶效果的导航条？; Fireworks教程：制作闪光掠过的GIF动画; Fireworks教程：GIF动画效果的BANNER制作过程; 用Fireworks打造光芒四射背景的图片效果; 用Fireworks合成设计制作一个化妆品网站首页; Fireworks CS5抢先报道--值得期待的四大亮点！; 用Fireworks打造超酷质感的网页按钮; Fireworks新手教程：制作五彩炫光效果; 手把手教你用Fireworks CS3对图标进行细节刻画; Fireworks轻松制作渐隐线条; Abode Fireworks CS5、CS4、CS3版本的功能比较(图示); FireWorks教程：外发光效果的几种应用; Fireworks教程:立体质感水晶的制作图解; Fireworks图解教程：打造碳纤维风格图标; 用EyeCandy插件来制作3D旋转GIF动画; 学习Fireworks CS3的切片和优化功能

下载排行榜: jQuery图片特效代码带缩略图和文字标题简...; 仿淘宝商城天猫首页jQuery多格焦点幻灯图特...; 仿QQ商城焦点图jquery幻灯特效代码; 宽屏flash+xml焦点幻灯图特效代码; 效果媲美flash的jQuery幻灯代码支持多种切换效果; 3D立体效果的flash+xml照片墙相册展示代码; 带标题和数字导航的JS焦点幻灯特效代码; 31款简单实用的CSS+JS下拉菜单脚本; 漂亮的jquery+Lightbox灯箱效果图片展示特效代码; 基于mootools有7种效果的Gallery(画廊)幻灯相册代码; 超酷HTML5图片特效代码支持全屏显示; 漂亮的jquery画廊相册特效支持缩略图和键盘...; 可自动展开和折叠收起的QQ在线客服代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 基于jQuery的首页自动收缩全屏广告代码; 超酷3D摩天轮flash+xml幻灯相册特效源码