fireworks_网络页面设计综合实际示例(编辑修改稿)

fireworks_网络页面设计综合实际示例(编辑修改稿)内容摘要：

页导航条，并且可以分别设定每个按钮的外观和文字，但同时保持它们的相似性。 我们先对上面创建好的按钮实例增加一种特效，打开 Effect 面板，选择 Adjust ColorColor Fill，设定此特效的混合模式为 Hue 色调，如下图所示： 这样当我们想改变每个按钮实例的色彩时，只需修改此特效中的混合色彩即可，而不需对按钮符号作修改。 创建多个按钮实例。 选定上面的按钮实例，按住 Alt 键的同时，拖动并复制这个按钮实例，重复执行此步骤，创建五个按钮实例。 选中这五个按钮实例，打开 Modify 面板，选择水平居中对齐，如下图所示： 现在导航条的效果如下图： 我们需要对导航条中的每个按钮设定不同的色彩，打开 Effect 面板，分别改变每个按钮所加特效中的混合色彩设定，将其设为不同的色值，分别改为 CC9900， 663399， 33FF00，FF00FF。 此时的导航条效果如下图所示： 七、 设定按钮属性 上面我们做好的导航条外观虽然不同，但它们却有着相同的文字内容，我们需要将它们修改为各自的内容，并设定每个按钮对应的链接地址。 打开 Object 面板，选择第二个按钮实例，将 Object 面板上的 Button Text 改为 “企业人才 ”。 按下回车键后，会弹出下面的提示框： 我们选择 Current 使文字的改变只对当前按钮有效。 将其余的按钮文字分别修改为 “产品展示 ”、 “企业荣誉 ”、 “联系方式 ”。 切换导文档的预览窗口 Preview，可以看一下最终的效果。 打开 URL 面板，分别选择每一个按钮，在 URL 面板中设定它们对应的链接地址。 八、 建立切片 我们的基本导航及页面结构已经建立好了，现在到了增加切片的时候了。 Fireworks 中的切片是输出图形及产生交互的主要参考物件，导出的文档将根据切片来将图形切割成不同的部分，并在浏览器中通过表格组装到一起。 同时，所有的交互行为也是通过切片之间的联系来产生的，如翻转图、弹出菜单等等。 我们前面建立的按钮本身已经带有了自己的切片，因此我们需要对其他对象建立各自的切片。 创建切片通常使用工具面板中的 Slice 工具直接绘制 ，但如果想创建精确大小的切片，我们可以选择对象并执行右键菜单中的 Insert Slice 自动插入切片。 我们使用工具面板中的 Slice 工具在页面中间绘制一个信息显示切片，我们将在下一步把导航条的每个按钮相关信息显示在这里。 我们增加的切片默认情况下是绿色的半透明对象，它们都放置在 Web Layer 层上 . 九、 创建拖拽翻转效果 单击 “企业概况 ”按钮处的切片，此切片中心将出现一个圆形标志，用鼠标将其拖动到上一步创建的切片左上角，这将设置一个翻转效果，在弹出的对话框中设定鼠标滑过时交换为第二帧的内容，如下图所示： 重复上述步骤，分别为 “企业人才 ”、 “产品展示 ”两个按钮增加翻转效果，并分别对应第三帧和第四帧。 我们在后面各帧相 同的位置出分别放置对应每个按钮的说明文字。 最后的效果如下图所示： 十、 创建弹出菜单 通常我们站点里的导航信息必须非常的简练和实用，只有那些最重要的信息才出现在导航条中，而更多的导航和内容信息通常都隐藏起来。 对于复杂的展点和多重信息组织，弹出菜单是分层导航的最有效工具，弹出菜单可以在很小的空间中设置大量的目标选项。 Fireworks4 新增的创建弹出菜单功能，可以非常容易的实现这种导航结构，我们只需将分层信息添加到弹出菜单编辑器中，程序会自动生成相应的交互式代码。 选择导航栏上的 “产品 展示 ”按钮，确保 Web Layer 当前显示及切片可见。 点击此按钮上切片中心的圆形标志，从弹出菜单中选择 “Add Popup Menu”增加弹出菜单，如下图所示： 在弹出的编辑器中输入如下图所示内容，在 Text 和 Link输入框中输入内容后，点及上部的 “+”即可添加新的菜单内容： 继续输入二级菜单内容，选中一个条目后，点击上部的 可以使当前条目缩进，成为下 一级菜单；点击 可以使当前的条目恢复为上一级菜单。 最后的结果入图所示： 点击 Next进入下一个设置窗口，在这里我们可以设置文字的大小，菜单的样式等属性，您既可以选择最终的菜单外观是标准的 HTML 格式，或。