Fireworks切片教程

应用Fireworks创建切片的方法介绍译者：王立群应用FW创建切片、鼠标滚动图和热区：在Fireworks中，切片是创建与网站交互功能的基本构件。

切片是不以图片格式存在的网页对象，基本上是以HTML代码的形式存在。

我们可以在图层面板的Web层上预览、选择、重命名这些切片。

本文讨论切片的核心概念以及组合切片的交互性到网页中的过程。

使用拖放滚动方法添加交互性给切片，在工作区中可以快速地创建鼠标滚动图和交换图像效果，可以在行为面板中设置这些交互组件的行为并使用这些面板创建更为复杂的交互功能。

我们可以把热区的交互性组合到网页中，热区可用于创建映像图，它们是在HTML文档中定义热区的HTML代码。

这些区域不一定存在链接，它们可能仅触发行为或定义替换文本。

热区也可以接收鼠标事件，允许用切片承担Java script 行为。

本文包含下列内容：1、创建和编辑切片：切片切割Fireworks文档为小的片并导出每一片为独立的文件。

当导出时，Fireworks也创建包含表代码（table code）的HTML文件以重新编译浏览器中的图形。

切割一个图像至少有三方面的主要优点：1）、优化：网站图形设计的一个重要条件是确保图像在不牺牲质量的情况下快速地下载，切片技术可以使我们用最适合的文件格式和压缩配置优化每一个独立的切片。

2）、交互性：可以用切片创建响应鼠标事件的区域。

3）、更新网页的一部分：切片技术允许我们将经常修改的网页部分进行更新。

例如某公司网页可能需要按月修改土豆的产地，切片技术允许我们仅快速地修改土豆产地的名称和照片而无需替换整个网页。

2、设置切片的交互性在Fireworks中创建交互性的基本构件是切片对象，Fireworks提供两种方法创建切片对象的交互性：1）、拖放滚动方法是创建切片交互性的最简单方法，只要拖动切片的行为手柄并放置它到目标切片上就可以快速地创建简单的交互。

2）、行为面板允许我们创建更为复杂的交互性。

fireworks特效教程制作分解
⼤家知道fireworks特效教程吗?下⾯我们就给⼤家详细介绍⼀下吧!我们积累了⼀些经验，在此拿出来与⼤家分享下，请⼤家互相指正。

1、⾸先准备好两张图，⼀张⽤来遮蔽⽤的(其实就是我们⽤的⼑⼦)，⼀张是底图
2、分别复制⼀份，然后按照下⾯的顺序排列好四个图层
3、上⾯两层进⾏裁切操作(同时选择1，2层，然后找到Fireworks菜单的.『修改』-『组合路径』-『裁切』)，下⾯的两层进⾏打孔操作(和裁切在⼀个地⽅)，由于这个例⼦的图形拥有多个颜⾊，你可能需要多次打孔或者裁切操作。

4、把两个被分解的图形再次重新组合到⼀个地⽅，然后全选这些路进，找到菜单的『修改』-『组合路径』-『分解』，好了，现在你已经把底图切的成薄⽚了，你可以按照你想象的⽅式去排列这些碎⽚让他更具有分解瞬间的动感
下⾯是源⽂件，
相信⼤家已经了解fireworks特效教程了吧!感谢⼤家对我们⽹站的⽀持!
【fireworks特效教程制作分解】。

Fireworks切片工具使用教程在fireworks或者是photoshop中设计好的网页效果图，需要导入到Dreamweaver中进行排版布局。

以下为大家介绍Fireworks切片工具使用教程，让我们一起来看看详细内容吧~ 1、在Fireworks CS3中打开制作好的网页效果图 在Fireworks CS3中打开制作好的效果图 【说明】效果图中的辅助线是在效果图设计之初就添加完毕的。

 2、选择Fireworks CS3中的【切片】工具，对效果图进行切片，切片完成后的效果。

 切片完成后的效果 【说明】切片的时候，尽量保证所有的切片和被切片的图像尺寸一致，不要切片大于或者小于被切片的图像，同时切片之间尽量保持不要重叠。

 3、几个特别需要注意的地方来详细给大家说一下，首先是在内容区域，文本的前方有小的黑色三角箭头，这是用图像来制作的，所以必须要切片，但是由于所有文本前方的箭头图标都是一样的，所以只需要切一张即可。

 切片小图标 4、同样的道理，在这个效果图中，有很多的圆角效果，但是在切片的时候同样的效果仍旧只切片一张即可。

 切片圆角图像 5、切片完成后，选择Fireworks CS3中的【2幅】窗口，如图1-27所示。

在这个窗口的左侧，是可编辑的原图，而在这个窗口的右侧，则是优化以后的图像。

在这个窗口的下方，可以看到详细的关于每一个切片的文件量和下载时间等信息。

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

 对切片进行优化 7、对每一张切片进行优化后，就可以导出所有的图像素材了。

选择【文件】@@【导出】命令(快捷键为【Ctrl+Shift+R】)，会弹出Fireworks CS3的【导出】对话框。

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

Fireworks网页切片应用详解Fireworks网页切片应用详解我们这里所说之切片（Slice）就是将一幅大图像分割为一些小之图像切片，然后在网页中通过没有间距和宽度之表格重新将这些小之图像没有缝隙之拼接起来，成为一幅完整之图像。

这样做可以减低图像之大小，减少网页之下载时间，并且能创造交互之效果，如翻转图像等，还能将图像之一些区域用html 来代替。

Fireworks在网页切片制作方面有很强之优势，今天我们就来仔细看看Fireworks网页切片全攻略。

一、切片在网页制作中之作用在网页上之图片较大之时候，浏览器下载整个图片之话需要花很长之时间，切片之使用使得整个图片分为多个不同之小图片分开下载，这样下载之时间就大大之缩短了，能够节约很多时间。

在目前互联网带宽还受到条件限制之情况下，运用切片来减少网页下载时间而又不影响图片之效果，这不能不说是一个两全其美之办法了。

除了减少下载时间之外，切片也还有其他一些优点：* 制作动态效果：利用切片可以制作出各种交互效果。

例如前面将之按钮之这种状态其实最后导出之文件实质上就是不同状态之切片。

* 优化图像：完整之图像只能使用一种文件格式，应用一种优化方式，而对于作为切片之各幅小图片我们就可以分别对其优化，并根据各幅切片之情况还可以存为不同之文件格式。

这样既能够保证图片质量，有能够使得图片变小。

* 创建链接：切片制作好了之后，就可以对不同之切片制作不同之链接了，而不需要在大之图片上创建热区了。

二、创建切片使用Fireworks工具箱上之切片工具可以为已经制作好之图片创建切片。

如图1所示，切片工具有两类，分别为“矩形切片”工具（Slice tool）和“多边形切片”工具（Polygon Slice tool）。

下面我们分别就这两类热区工具之使用作介绍。

图1 两类切片工具1. 创建矩形切片首先打开图像，选择工具箱上之之切片工具，在图像之适当位置上按下鼠标左键并拖动绘制一个矩形区域，当矩形大小适当时释放鼠标，这样就生成了一个切片，如图2所示。

如何使用Fireworks多边形工具？现在我们来看看如何使用Adobe Fireworks的多边形工具。

下面是小编为大家精心整理的关于如何使用Fireworks多边形工具？希望能够帮助到你们。

方法/步骤1在工具箱中，长按矩形工具，弹出来多边形后，然后点击。

2然后我们可以在页面中直接拖曳绘制。

3点击组合框，我们可以更改图形的混合模式。

4在这里可以输入精准的宽高。

5点击滤镜右边的小加号，我们可以添加各式各样的滤镜效果。

6点击边缘右侧的组合框，可设置实边和羽化等效果。

工具快捷键指针、选择后方对象【V】,【0】部分选定【A】,【1】选取框、椭圆选取框【M】套索、多边形套索【L】裁剪、导出区域【C】魔术棒【W】线条工具【N】钢笔工具【P】矩形、圆角矩形、椭圆、多边形【U】文本工具【T】铅笔、刷子【B】矢量路径、重绘路径【P】缩放、倾斜、扭曲【Q】自由变形、更改区域形状【O】滴管工具【I】油漆桶、渐变【G】橡皮擦工具【E】模糊、锐化、减淡、加深、涂抹【R】橡皮图章工具【S】刀子工具【Y】矩形热点、圆形热点、多边形热点【J】切片、多边形切片【K】手形工具【H】缩放工具【Z】隐藏/显示切片【2】设置默认笔触/填充色【D】交换笔触/填充色【X】切换屏幕模式【F】菜单命令快捷键新建文件(N) 【Ctrl】+【N】打开(O)... 【Ctrl】+【O】关闭(C) 【Ctrl】+【W】保存(S) 【Ctrl】+【S】另存为(A)... 【Ctrl】+【Shift】+【S】导入(I)... 【Ctrl】+【R】导出(E)... 【Ctrl】+【Shift】+【R】导出预览(R)... 【Ctrl】+【Shift】+【X】在浏览器中预览【F12】在辅助浏览器中预览【Ctrl】+【F12】,【Shift】+【F12】打印(P)... 【Ctrl】+【P】退出(X) 【Ctrl】+【Q】撤消【Ctrl】+【Z】重做【Ctrl】+Y,【Ctrl】+【Shift】+【Z】插入新建按钮(B)... 【Ctrl】+【Shift】+【F8】新建元件(Y)... 【Ctrl】+【F8】热点(H) 【Ctrl】+【Shift】+【U】切片(S) 【Alt】+【Shift】+【U】查找和替换(F)... 【Ctrl】+【F】剪切(T) 【Ctrl】+【X】复制(C) 【Ctrl】+【C】复制HTML代码(H)... 【Ctrl】+【Alt】+【C】粘贴(P) 【Ctrl】+【V】清除【退格】,【DEL】贴入内部(I) 【Ctrl】+【Shift】+【V】粘贴属性(A) 【Ctrl】+【Alt】+【Shift】+【V】重复(L) 【Ctrl】+【Alt】+【D】克隆(N) 【Ctrl】+【Shift】+【D】参数选择(F)... 【Ctrl】+【U】。

fireworks怎么切片
如何利用Fireworks 切片工具制作切片的效果，方法很简单也很实用，主要希望大家通过本教程，能熟练掌握多边形工具的使用方法。

下面店铺跟分享了更多关于fireworks怎么切片，希望你喜欢。

fireworks切片的方法步骤：
1、首先肯定是打开Fireworks，当然如果没有装的话可以先从百度下载然后安装下。

2、然后点击左上角的“文件”按钮，选择打开，让我们可以导入图片
3、我们导入图片之后，可以看到我们左边明显多了一个工具栏，我们可以在工具栏中找到我们需要的切片工具。

4、找到切片工具之后，我们点击它，然后放到我们需要的地方，例如百度经验的logo。

5、我们可以下面的属性设置中设置我们需要的长度和宽度，也可以在右边优化设计这设置我们需要的图片格式。

6、等我们全部设置完成之后，我们可以在我们选中的图标上右击，然后点击“到处切片”保存图片。

案例1_2 切割网页并修改页面一、切片的缘由切片可以将图像切割成为多个小的文件，并将这些切割后的文件单独输出。

当图像文件比较大的时候，由于受到网速的限制，浏览器下载整个图片（网页）则需要花很长的时间，如果使用了切片，那么这个图片（网页）就能分为多个不同的小图片分开下载，这样能够大大缩短图片（网页）的下载时间。

二、创建切片并导出为网页文件启动Fireworks CS4软件系统，在工具箱上有两类切片工具，分别为“切片”工具和“多边形切片”工具，如图1 所示，利用它们可以为图像创建矩形切片或者多边形的切片。

切片完成后，可将其切割的页面文件导出为网页文件。

图1 切片工具切片方法：1. 单击“文件”|“打开”命令，打开一个网页图片文件；2. 单击工具箱中的“切片”工具，在打开的图片文件上，根据实际需要拖动鼠标进行切片操作，每切割一个小片，在图片上会出现一个绿色小框，如图2所示。

图2 切片示例3. 切片完成后，单击右侧【层】面板上的“网页层”，即选中所有切割的切片，如图3所示。

然后点击切片窗口下方【属性】面板中的“切片导出设置”右侧的下拉箭头，在弹出的列表中选择“JPEG 较高品质”选项，如图4所示。

4. 导出网页。

单击“文件”|“导出”命令，将弹出“导出”对话框。

将导出对话框的参数设置如图5所示。

单击“确定”按钮，即可将切片后的图片导出为网页文件。

提示：1.页面切片原则：1）在页面中需要做菜单或按钮的地方，必须将其切割成相应的切片，以便做超链接；2）在页面中需要存放内容的地方，必须将其切割成相应的切片，以便添加网页内容；图3 “层”面板3）考虑到网页浏览速度的问题，在满足上述切片要求的基础上，应考虑页面的整体性，不要有太多的碎片。

也就是说：需要将一些太零小的碎片切割成一些较大整片。

2.在导出时，一定要注意一下几点：1）导出的位置：导出网页文件的位置一定要在创建的站点文件夹里；2）导出的文件名：如果是首页，应命名为index.html网页文件；如果是其他的网页文件，则根据实际需要进行命名。

Fireworks中一些切片方法
切片在制作网页的过程中占有很重要的地位，切片的成功与否直接决定日后网页制作的进度快慢和网站运行的速度，只有通过大量的练习才能体会切片的含义。

下面是店铺为大家整理的Fireworks中一些切片方法，希望大家喜欢~
网页切片方法
一、切片的作用：
1. 切片是将图片转换成可编辑网页的一座桥梁，通过切片才可以将普通图片变成Dreamweaver可以编辑的网页格式
2. 切片后的图像可以更快的在网络上传播
3. 切片后的图像也是网页中片的主要来源
三、切片的方法：
1. 切片首先保证切出网页中需要多次修改的区域，例如文字区域
2. 切片图像的大小尽量保持在15K以内(便于网络传输)
3. 充分利用Dreamweaver中的自动拼贴功能减少垃圾切片
Fireworks使切片具有简单的交互效果方法
拖放变换图像方法是创建变换图像和交换图像效果的快速而有效的方法。

具体说来，拖放变换图像方法使您可以确定指针经过一个切片时该切片所发生的变化。

最终结果通常称为变换图像。

变换图像是在网页浏览器中当指针经过其上方移动时，其外观发生更改的图形。

当选定切片时，一个带有十字的圆圈出现在切片的中央。

这称为行为手柄。

通过从触发切片拖动行为手柄并将其放置在目标切片上，可以轻松地创建变换图像和交换图像效果。

触发器和目标可以是同一切片。

热点也具有用于结合变换图像效果的行为手柄。

教程结束，以上就是Fireworks使切片具有简单的交互效果方法，希望大家看完本篇教程能熟练掌握拖放变换图像方法，。