您好,欢迎来到素彩网!

Fireworks教程用Fireworks做动态页

来源:sc115.com | 81 次浏览 | 2011-07-09

标签: Fireworks教程用Fireworks做动态页

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

搜索: Fireworks教程用Fireworks做动态页 

最热-Fireworks综合教程

Fireworks 打造 NOKIA8250 手机

Fireworks打造光盘效果的圆形照片

Fireworks照片分割图解教程

在Fireworks中打造淡入淡出动画效果

Fireworks打造环绕圆形文字

Fireworks打造昆虫

五色圆盘的打造

Fireworks 教程-文字蒙盖图像

简快速单几步搞定水晶字

Fireworks 中毛笔字条幅的打造

巧妙利用填充模拟条形码

使用 Fireworks 打造红墙砖头效果

教你用FW做酷LOGO

素材
古典书画艺术PPT模板古典书画艺术PPT模板
金鱼动态PPT模板金鱼动态PPT模板
个人简历PPT模板免费下载个人简历PPT模板免费下载
竹石古典文化PPT模板竹石古典文化PPT模板
静物物语PPT模板静物物语PPT模板
幽雅之夜黑色背景PPT模板幽雅之夜黑色背景PPT模板
清风蓝韵背景PPT模板清风蓝韵背景PPT模板
网络人物与博客PPT模板网络人物与博客PPT模板
工作汇报PPT模板免费下载工作汇报PPT模板免费下载