软件的更新换代速度越来越快了,新软件一波接一波——首先是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还有许多功能,有机会大家一起探讨。