当前位置: 首页 > 图文教程 > 平面设计 > FireWorks > 下拉菜单和交互图片

FireWorks
Fireworks MX 2004特效字系列教程:水粉文字特效制作
铬金图形效果制作
Fireworks MX 2004移除照片红眼
Fireworks制作破壳而出的美女
Fireworks MX 2004制作巧克力按钮
虚线的制作
圆角三角形的制作
动画小时钟
金属效果
圆形文字的环绕制作
自动颜色变换
Loading动画的制作
彩色线条的填充
用MASK做动画
卫星转动效果
空间环绕
使用热区和切割(Hotspots and Slices)(上)
使用热区和切割(Hotspots and Slices)
Fireworks4.0的新特性
Fireworks中邮票效果的制作

FireWorks 中的 下拉菜单和交互图片


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-22   浏览: 30 ::
收藏到网摘: n/a

本文为软晨学习网合作伙伴印象特别供稿,转载必须取得授权

  用FW做网页不仅和DW结合紧密,而且FW的交互功能也是非常强大的,今天来做一下很常见的2个实例,虽然很平凡
  但我希望加上大家创意以后会让你的灵感飞翔起来!

1,新建一个200*200的画布 画成如图样子 要注意的是 图上的橙色的条是由4个50象素宽的条组成,然后复制一帧,如图。(图1)


2.选中第2帧,把中间的条改变任意的颜色。(图2)

3.将图片进行切割,然后右键单击条声的切片,选择图中选项。(图3)

4.注意看图中红色的筐,用鼠标可以直接点上面的热区,也知道自己设定。(图4)

5.打开“文件”》》“导出”会出现如图面版。 注意HTML和切片的设置 关于FW的图象优化我以后会专门写一篇教程,因为针对web的图象输出是一个大问题。(图5)

6.现在让我们来做下拉菜单,同样的用右键点某个切片,选择下拉菜单会出现如图画面,在内容中,你先要想好一共有些什么栏目,他们的从属关系又是怎么样的,我建议自己先画一个这样的类似站点地图的图案,然后开始新建一系列的菜单。按图中的“+ -”号旁边的两个图标可以调整各栏目的隶属关系。在外观中可以设定下拉菜单的风格,大小,字体等。在高级中有关于下拉菜单的高度宽度等设定。(图6)

7.用鼠标可以拖动图中兰色热区的位置,而热区的位置是代表了下拉菜单执行的位置。
还有一点值得注意,如果你没有严格定位,而是随意的用鼠标拖动下拉菜单的位置导出为HTML后 在800*600和1024*768分辨率下下拉菜单的位置会改变。(图7)

最终效果图