Fireworks网页设计综合实例5

2016-02-19 19:12 10 1 收藏

今天图老师小编给大家展示的是Fireworks网页设计综合实例5，精心挑选的内容希望大家多多支持、多多分享，喜欢就赶紧get哦！

【 tulaoshi.com - fireworks教程】

八、建立切片

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

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

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

九、创建拖拽翻转效果

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

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

来源:http://www.tulaoshi.com/n/20160219/1620327.html

看过《Fireworks网页设计综合实例5》的人还看了以下文章更多>>

CSS网页制作教程:网页首页设计实例

标签： Web开发

第一步下面是我们将要动手制作的设计图。在这篇教程里我们只制作首页，不过你可以以此为基础用相同的布局制作内页。第二步首先要做的是确定页面结构。随着你对CSS布局的逐步学习，这个过程会变得越来越简单。通过运用大量绝对定位和大幅背景图片，我们可以非常简单地完成这个设计。什么是绝对定位？一个HTML元素（比如di...

网页设计师谈网页代码设计流程实例

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

Fireworks中设计网页虚线的几个妙招

网页设计中我们会用到很多种样式的分隔线，下面我们就来看看在Fireworks中设计网页虚线有哪些妙招。方法一、用Fireworks中自带的虚线样式 Fireworks中自带的虚线样式有：三条破折线、加粗破折线、双破折线、基本破折线、实边破折线、点状线。在网页设计中，我通常的用的是实边破折线。因为它和网页CSS中border的dotted、...

使用 Fireworks 8 生成网页

案例说明此案例为使用Fireworks 8 制作网页效果图位图工具的姊妹篇，前面的案例地址可以点击这里。前面已经给大家介绍了网页效果图的制作，这里要介绍的内容是如何把效果图生成网页。这也是网站制作中最重要的一部分。主要介绍的Fireworks如何和Dreamweaver进行协同工作。本例主要分为4个部分，希望大家能够通过这个例子得到一...

国外网页按钮设计要点实例