八、 建立切片

　　我们的基本导航及页面结构已经建立好了，现在到了增加切片的时候了。Fireworks中的切片是输出图形及产生交互的主要参考物件，导出的文档将根据切片来将图形切割成不同的部分，并在浏览器中通过表格组装到一起。同时，所有的交互行为也是通过切片之间的联系来产生的，如翻转图、弹出菜单等等。

　　1、 我们前面建立的按钮本身已经带有了自己的切片，因此我们需要对其他对象建立各自的切片。
　　2、 创建切片通常使用工具面板中的Slice工具直接绘制 ，但如果想创建精确大小的切片，我们可以选择对象并执行右键菜单中的Insert Slice自动插入切片。
　　3、 我们使用工具面板中的Slice工具在页面中间绘制一个信息显示切片，我们将在下一步把导航条的每个按钮相关信息显示在这里。

　　4、 我们增加的切片默认情况下是绿色的半透明对象，它们都放置在Web Layer层上.

　　九、 创建拖拽翻转效果

　　1、 单击"企业概况"按钮处的切片，此切片中心将出现一个圆形标志，用鼠标将其拖动到上一步创建的切片左上角，这将设置一个翻转效果，在弹出的对话框中设定鼠标滑过时交换为第二帧的内容，如下图所示：

　　2、 重复上述步骤，分别为"企业人才"、"产品展示"两个按钮增加翻转效果，并分别对应第三帧和第四帧。
　　3、 我们在后面各帧相同的位置出分别放置对应每个按钮的说明文字。
　　4、 最后的效果如下图所示：

　　十、 创建弹出菜单

　　通常我们站点里的导航信息必须非常的简练和实用，只有那些最重要的信息才出现在导航条中，而更多的导航和内容信息通常都隐藏起来。对于复杂的展点和多重信息组织，弹出菜单是分层导航的最有效工具，弹出菜单可以在很小的空间中设置大量的目标选项。Fireworks4新增的创建弹出菜单功能，可以非常容易的实现这种导航结构，我们只需将分层信息添加到弹出菜单编辑器中，程序会自动生成相应的交互式代码。

　　1、 选择导航栏上的"产品展示"按钮，确保Web Layer当前显示及切片可见。
　　2、 点击此按钮上切片中心的圆形标志，从弹出菜单中选择"Add Pop-up Menu"增加弹出菜单，如下图所示：

　　3、 在弹出的编辑器中输入如下图所示内容，在Text和Link输入框中输入内容后，点及上部的"+"即可添加新的菜单内容：

　　4、 继续输入二级菜单内容，选中一个条目后，点击上部的 可以使当前条目缩进，成为下一级菜单；点击 可以使当前的条目恢复为上一级菜单。最后的结果入图所示：

　　5、 点击Next进入下一个设置窗口，在这里我们可以设置文字的大小，菜单的样式等属性，您既可以选择最终的菜单外观是标准的HTML格式，或者是Image图片格式。我们选择图片格式，并设定文字大小为10。

网页设计综合实例(上) 特效字系列教程：马赛克文字