应用Fireworks创建切片的方法介绍

应用Fireworks创建切片的方法介绍译者：王立群应用FW创建切片、鼠标滚动图和热区：在Fireworks中，切片是创建与网站交互功能的基本构件。切片是不以图片格式存在的网页对象，基本上是以HTML代码的形式存在。我们可以在图层面板的Web层上预览、选择、重命名这些切片。本文讨论切片的核心概念以及组合切片的交互性到网页中的过程。使用拖放滚动方法添加交互性给切片，在工作区中可以快速地创建鼠标滚动图和交换图像效果，可以在行为面板中设置这些交互组件的行为并使用这些面板创建更为复杂的交互功能。我们可以把热区的交互性组合到网页中，热区可用于创建映像图，它们是在HTML文档中定义热区的HTML代码。这些区域不一定存在链接，它们可能仅触发行为或定义替换文本。热区也可以接收鼠标事件，允许用切片承担Javascript行为。本文包含下列内容：1、创建和编辑切片：切片切割Fireworks文档为小的片并导出每一片为独立的文件。当导出时，Fireworks也创建包含表代码（tablecode）的HTML文件以重新编译浏览器中的图形。切割一个图像至少有三方面的主要优点：1）、优化：网站图形设计的一个重要条件是确保图像在不牺牲质量的情况下快速地下载，切片技术可以使我们用最适合的文件格式和压缩配置优化每一个独立的切片。2）、交互性：可以用切片创建响应鼠标事件的区域。3）、更新网页的一部分：切片技术允许我们将经常修改的网页部分进行更新。例如某公司网页可能需要按月修改土豆的产地，切片技术允许我们仅快速地修改土豆产地的名称和照片而无需替换整个网页。2、设置切片的交互性在Fireworks中创建交互性的基本构件是切片对象，Fireworks提供两种方法创建切片对象的交互性：1）、拖放滚动方法是创建切片交互性的最简单方法，只要拖动切片的行为手柄并放置它到目标切片上就可以快速地创建简单的交互。2）、行为面板允许我们创建更为复杂的交互性。行为面板含有许多可添加给切片的交互行为。通过添加多行为给某个切片，可以创建有趣的效果，也可以从许多触发交互行为的鼠标事件中选择。Fireworks的行为与Dreamweaver的行为是兼容的。当我们导出Fireworks鼠标滚动图到Dreamweaver时，可以用Dreamweaver的行为面板编辑Fireworks行为。3、准备输出切片使用属性面板，我们可以赋值链接和目标给切片以创建切片的交互性，也可以指定替换文本在图像加载时显示于浏览器中，此外也可以对所选择的切片指定导出文件格式以优化图像。如果属性面板被最小化，那么单击左下角的展开箭头以显示所有切片的属性。使用属性面板或层面板，可以为切片赋予唯一的名称。在导出切片时，Fireworks使用切片创建过程中指定的名称，如果在属性面板中或层面板中没有输入切片的名称，那么Fireworks会在导出时自动地命名切片。用户可以通过使用HTML设置对话框修改自动命名规则。Fireworks将进行了切片的Fireworks文档导出为HTML文件和一系列图形文件，可以使用HTML设置对话框定义导出的HTML文件的属性。4、使用热区和映射图网站设计者可以使用热区以创建较大图形交互区的某个小区域、链接网站图形到URL。在Fireworks中，可以从含热区的文档中导出HTML代码以创建映射图。热区和映射图比做切片的图形往往节省大量的资源，但是处理切片的技术却要求占用Web浏览器的大量资源，这是因为在计算机处理过程中必须下载附加的HTML代码，而且处理程序要求重新编译切片的图形。注释：可以创建切片映像图，导出切片映像图一般会生成许多图形文件。当我们需要把图像区域链接到其他网页时，选择热区是一个理想的方法，但是我们不需要在响应鼠标事件时，未选择的图形区域高亮显示或产生滚动效果。当图形位于放置热区的某个对象上时，热区和映像图对于高质量地导出为单一图形文件来说是理想的方法，换句话说就是使用相同的文件格式和优化配置会高质量地导出全部的图形。在FW中创建切片对象：在Fireworks中，使用切片工具拖放或在所选的对象上插入切片以创建切片对象。约束切片对象的线就是切片的轮廓线，它决定被分割的某个独立的图像文件导出到文档时的边界，这些线在默认的情况下为红色。一、在所选对象上插入矩形切片的方法：1、选择“编辑|插入|切片”菜单命令，所创建的切片是包括所选对象最外边缘的矩形区域。2、如果选择了一个以上的对象，那么就选择应用切片的方式，有以下两种方式：1)、单：创建覆盖所有选择对象的单一对象。2）、多：为每个所选对象创建切片对象。绘制矩形切片的方法如下：1、选择切片工具。2、拖放切片对象，切片对象显示在层面板的Web层中，而切片线显示在文档中。注释：当我们拖动鼠标并绘制切片时，可以调整切片的位置，当按下鼠标按钮时，按住空格键的同时，拖放切片到画布中的其他位置，释放空格键可继续绘制切片。二、创建HTML切片的方法：HTML切片标注显示在浏览器中的普通HTML文本的区域。HTML切片不导出图像，它导出由切片定义的表格单元格中显示的HTML文本。如果我们需要在不创建新的图形的条件下，更新显示在网站中的文本，此时可以使用HTML切片。创建HTML切片的方法如下：1、绘制切片对象并保持它处于选中状态。2、在属性面板中，从类型弹出菜单中选择3、单击“编辑”。4、在“编辑HTML切片”窗口中输入文本，然后添加文本格式标记以格式化文本。注释：作为一个选项，可以在切片被导出之后，使用文本编辑器或如AdobeDreamweaver的HTML编辑器添加html文本格式的标记。单击“ok”以应用修改，然后关闭“编辑HTML切片”窗口。我们键入的文本和HTML标记显示在Fireworks的PNG文件中的切片内，构成源HTML代码。注释：当在不同的浏览器或不同的操作系统中浏览网页时，HTML在外观上可能有变化，因为字号和字体是在浏览器中设置的。创建非矩形切片的方法如下：当我们想添加交互性到非矩形图像时，矩形切片就变得无有意义，如果用户想要添加鼠标滚动图行为到切片上，但切片对象是叠加的或者形状不规则，这样使用矩形切片时，就可能与交换图像一起交换不需要的背景图像。Fireworks使用多边形切片工具绘制任意形状的多边形切片解决了这个问题。可以在矢量路径的顶部插入切片以创建不规则形状的切片。三、绘制多边形切片的方法如下：1、选择多边形切片工具。2、单击画布上的某一点以添加多边形的一个矢量节点，多边形切片工具只能绘制直线段。3、当围绕带软边缘的对象绘制多边形切片时，确认包括完整的对象以避免在切片图形中创建不需要的硬边缘。4、可以从工具面板中选择其它工具以停止使用多边形切片工具，不必再一次单击第一个矢量点以关闭多边形切片工具。注释：不要过多地使用多边形切片，因为与矩形切片相比，它们要求更多的Javascript代码。使用过多的多边形切片可能增加Web浏览器的处理时间。根据矢量对象或路径创建矩形切片或多边形切片：1、选择矢量路径。2、选择“编辑|插入|插入矩形切片或插入多边形切片”菜单命令（根据你的需要）。从上面的叙述中我们可以看出，切片技术与网页的紧密结合为网页的创作提供了一个新的途径，应用这种方法对于网页的布局以及进一步的网页设计带来了方便，在HTML切片所搭建的框架中可以设计出各种样式的网页效果，将各种网页元素有机地组合在一起，从而实现网页的动态和静态功能。在FW中浏览和显示切片及切片线：在文档中使用层面板和工具面板可以管理切片和其他网页对象的可视性，当我们对整个文档关闭切片的可视性时，切片线也被隐藏。使用属性面板，对每一个切片对象赋予唯一的颜色来组织切片。也可以在“预览”菜单中修改切片线的颜色。一、在层面板中浏览切片：Web层显示文档中的所有网页对象，通过Web层，用户可以选择和浏览每一个页面对象。在层面板中，浏览和选择切片的方法如下：1、选择“窗口|层”菜单命令打开层面板。2、单击层面板上的“+”按钮以展开Web层。Web层显示用户文档中当前网页对象的完整列表。在列表中，单击切片的名称以选择它。切片就会在Web层中高亮地显示，并在画布中处于选中状态。二、显示和隐藏切片在Fireworks的PNG文件中，隐藏切片可以关闭切片的可视性。可以关闭所有或某些网页对象。因为切片是网页对象，所以他们都被列在图层面板的Web层之下，在这里可以对所选的切片打开或关闭其可视性。也可以通过工具面板来管理切片的可视性。隐藏切片对象并不妨碍导出到HTML文档中的切片。要隐藏和显示指定切片和热区：1、单击层面板中单个网页对象行的眼睛图标。2、单击层面板中Web层的眼睛列图标可以在可视与不可视之间切换，眼睛图标在网页对象再一次可视时重新显示。要隐藏或显示所有热区、切片和引导线（切片线），进行下列操作之一:1、在工具面板的网页工具选区，单击相应的显示/隐藏切片按钮。2、单击层面板Web层的眼睛图标。要在任何文档视图下隐藏或显示切片线：选择“预览|切片线”菜单命令。三、修改切片和切片线的颜色：如果文档所使用的颜色与切片颜色相似，那么相对于文档对象来查看切片就变得困难。为了易于浏览，可以赋予新的颜色给所选的切片。赋予唯一的颜色给单个切片也有助于我们组织切片，也可以改变切片线的颜色。注释：在预览文档时，撤选的切片对象在叠加白色时可视。要修改所选对象的颜色：1、在层面板的Web层中选择切片。2、在属性面板的颜色框中指定一种颜色。要修改切片线的颜色：1、选择“预览|引导线|编辑引导线”菜单命令。2、从“引导线对话框”的切片颜色选区中选择一种新颜色，然后单击“ok”按钮。对切片属性的编辑，是应用切片创建网页的预先准备工作，对于进一步创建网页来说是非常重要的。在FW中编辑切片操作步骤介绍：在Fireworks中我们可以把切片布局当做字处理应用程序中的一种表格来进行编辑。当我们拖放切片的引导线以修改切片的尺寸时，Fireworks也同时自动地修改临近矩形切片的尺寸，此外我们也可以使用属性面板以修改切片的尺寸以及改变切片的形状成为所要求的矢量和位图对象。1、移动切片线以编辑切片切片线定义切片的边缘和位置，延伸到切片线之外的切片线定义被切割文档对象在导出时切片之外的部分如何排列。可通过拖放切片周围的切片线修改矩形切片对象的形状，非矩形的切片对象不能够通过移动切片线修改它的大小。注释：切片可成为Fireworks的按钮，如果我们拖动文档窗口中的Fireworks按钮周围的切片线，Fireworks就会修改定义按钮活动区域的切片尺寸。但是，我们不能以拖动切片线的方式删除Fireworks按钮的活动区域。如果多切片对象沿着单切片线对齐，那么我们就可以拖动切片线以同时重新修改所有切片对象的大小。此外，如果我们沿着给定的坐标拖动某个切片线，那么所有同一坐标的其他切片线会随之移动。要重新修改一个或多个切片的大小：1）、放置鼠标指针或子选工具指针到切片线上。指针就变成切片线移动指针形状。2）、拖放切片线到指定的位置。切片的尺寸就发生了变化，所有邻近的切片就会自动地同时发生变化。要重新定位切片线到画布的远边缘：使用鼠标指针或子选工具指针拖动切片线到画布的远边缘。要移动临近的切片线：1）、按住Shift键的同时，拖动切片线过邻近的切片线。2）、在所需的位置释放切片线。拖过去的所有切片线就会移动到这个位置。释放鼠标按钮之前松开Shift键可取消该操作，所有被选择的切片线就会回到它原来的位置。2、使用工具编辑切片对象我们可以应用鼠标指针、子选工具指针和变形工具以重新修改切片的形状或重新修改切片的尺寸。我们仅可以斜切和扭曲矩形切片。注释：使用这些工具重新修改切片的尺寸和重新修改切片的形状，可能产生叠加的切片，这是因为邻近的切片对象不自动调整的缘故。当切片叠加时，如果其中存在交互性功能，那么最顶部的切片具有优先权。要避免叠加切片而影响使用，请使用切片线编辑它们。要编辑所选切片的形状，请进行下列操作之一：1）、选择鼠标指针或子选工具然后拖动切片的角点以修改它的形状。2）、使用变形工具执行所需的变形操作。注释：对