首页 > 办公 > Fireworks > 正文

Fireworks教程——用Fireworks做动态页

2024-09-11 13:32:18
字体:
来源:转载
供稿:网友
  软件的更新换代速度越来越快了,新软件一波接一波——首先是flash5.0开始,然后有photoshop6.0,再到最近的dreamweaver4.0和fireworks4.0,真有点吃不消的感觉。firewoks4.0令我感到最方便的,就是它加强的behaviour功能,只用鼠标的简单拖动,就可以做出眩目的效果来。今天要讲的是用fireworks4.0做出来的一个效果(具体可以看:http://981622.class.netbig.com)。
  首先的第一步当然就是创意,我这里讲的主要是技术上的问题,所以略去构思不讲。版面构造如图一。我这里用的是wmp7.0版本的一个skin,你也可以找一个一模一样的来。
  版面构造好以后,就是用slice工具切割了。注意的是必须切换到slice view。我是这样切割的:首先是五个按钮,因为一共有五个栏目;然后是显示栏目内容的黄色背景,我预置了981622几个艺术字。要注意把其他的空白地方也要搞切图,这样整体文件小一些。效果如图一。


  单击frame标签,在三角形中拉出菜单,选择add frames,在当前frame后添加5个frames(因为一共有5个栏目),然后在每一个frame的黄色背景下添加栏目简介内容。如图二。


  好了,回到frame1,单击第一个按钮,按钮中间出现一个符号,然后是最关键的一步:把符号拖到黄色背景中,在随后出现的对话框中选择frame2。如图三所视。按钮到所视区域出现了一条蓝色曲线,表示behaviour添加成功。其他的按钮也是这么做,依次选择frame2,3,4,5。


  好了,做了这么久,应该保存一下,预览了。按f12(就和dreamweaver一样),就可以看到作品在浏览器中的样子了。
  怎么输出到dreamweaver中修改呢?选择file/export,在对话框中选择export html file,建议选择“put images to subfolder”,并把子目录设置成images,这样图片就不会全部保存在根目录下了。(图四)


  好了,作为专门设计网页图形的fireworks,有这样的功能比起photoshop已经强大很多了。当然,firewoks还有许多功能,有机会大家一起探讨。

 

 
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表