当前位置: 首页 > 图文教程 > 平面设计 > FireWorks > 用Fireworks轻松制作网页交互按钮

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

FireWorks 中的 用Fireworks轻松制作网页交互按钮


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

 

3. 在工具箱中选择矩形工具,在按钮编辑器窗口中拖动鼠标,画一个适当大小的矩形。

  4. 从填充面板中选择想要的填充特效(如果填充面板没有显示,可以从Windows菜单上选择Fill命令,打开填充面板),制作漂亮的按钮图像。本例选择Ripples(波纹)图案、Emerald Green(鲜绿色) ,如图3所示。

图3



  5. 输入按钮文本:选择文本工具,在按钮编辑器中单击矩形中心附近,弹出文本编辑对话框。从文本编辑对话框中的字体弹出菜单上选择一种字体,选择点大小,从颜色弹出菜单上选择一种颜色,单击居中对齐按钮(本例选用隶书,25点,红色,居中对齐),最后单击OK按钮(图4)。

图4

6. 完成上步操作后,得到按钮的Up状态 (正常状态),如图5所示。

图5


  7. 设计按钮的Over状态:按钮的Over状态是指在制作完成的网页中鼠标指针掠过按钮时显示的状态。单击按钮编辑器中的Over标签,按钮编辑器窗口的右下角增加了一个Copy Up Graphic(拷贝Up图像)按钮。单击该按钮,把Up状态的图像复制过来。此时,按钮的Up状态和Over状态相同。要使Over状态有别于Up状态,可以按照上述第4步的方法,改变按钮的填充特效。

  8. 设计按钮的Down状态:按钮的Down状态是指在制作完成的网页中按下按钮时显示的状态。单击Down标签,按照上述第7步的方法,可以设计出与前两种状态不同的Down状态。

  9. 为按钮建立链接:单击Active Area(激活区)标签,然后单击右下角的Link Wizard(链接向导)按钮,弹出Link Wizard对话框。单击Link(链接)标签,在对话框上部的文本框中输入URL,例如http://www.infosea.126.com,最后单击OK按钮。

图6
10. 关闭按钮编辑器窗口,回到文档编辑窗口(图7)。

图7


  11.单击Preview标签就可以预览交互按钮的效果。

  12.输出HTML文档:从File(文件)菜单上选择Export(输出)命令,弹出Export对话框,在Base Name文本框中输入文件名,选定HTML文档的风格(Style)和存放位置(Location),单击保存按钮(图8)。

图8


  13.用浏览器浏览生成的HTML文档,查看设计效果。

  附注:①Dreamweaver 提供了直接插入或粘贴Fireworks 生成的HTML文档的功能;

     ②通过按钮复制,改变按钮文本的方法,可以快速、高效地制作出一组外观一致只是文本不同的按钮。

评论 (0) All

登陆 还没注册?