快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

Fireworks网页设计综合实例5

    八、 建立切片 

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

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


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

    九、 创建拖拽翻转效果 

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


    2、 重复上述步骤,分别为“企业人才”、“产品展示”两个按钮增加翻转效果,并分别对应第三帧和第四帧。 
    3、 我们在后面各帧一样的位置出分别放置对应每个按钮的说明文字。 
    4、 最后的效果如下图所示:
    Fireworks网页设计综合实例  
 


返回类别: Fireworks教程
上一教程: 体验Fireworks MX 2004 绘图新功能(2)
下一教程: Fireworks4做一个按钮(下)

您可以阅读与"Fireworks网页设计综合实例5"相关的教程:
· Fireworks 网页设计综合实例-4
· Fireworks网页设计综合实例4
· Fireworks 网页设计综合实例-1
· Fireworks网页设计综合实例2
· Fireworks 网页设计综合实例-3
    微笑服务 优质保证 索取样品