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

FireWorks
巧用Fireworks渐变工具处理图片
放弃PS,Fireworks也能为黑白照片上色
Fireworks鼠绘CG性感美女
Fireworks三个案例教你使用涂抹工具
Fireworks打造草样年华gif动画
Fireworks 打造炫彩网点广告效果
Fireworks CS3切片工具的使用简述
Fireworks快速打造水晶图标
Fireworks 8打造精致指南针图标全过程
Fireworks绘制精致Rss图标
Fireworks快速简单打造网页“闪字”动画
Fireworks打造动态banner全过程
Fireworks教程:用FW自带滤镜打造动画效果
Fireworks教程:绘制可爱卡通Q版电视机图标
Fireworks教程:利用FW笔触工具绘制飘逸白云
Fireworks教程:打造雪花纷飞节日贺卡
Fireworks教程:利用“建立控点法”绘制炫彩画面
Fireworks教程:用滤镜打造漂亮极光字效果
fireworks教程:自制树叶笔触绘制一棵榕树
Fireworks教程:教你制作特殊的切角图形

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-22   浏览: 27 ::
收藏到网摘: 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)

最终效果图