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

FireWorks
Macromedia Fireworks MX的新特性一
Macromedia Fireworks MX的新特性二
Macromedia Fireworks MX的新特性三
Macromedia Fireworks MX的新特性四
Fireworks4 巧用无缝填充处理图片
Fireworks4 制作透明字
Fireworks中螺旋运动字的制作
Fireworks常见问题解答(7)
Fireworks常见问题解答(6)
Fireworks常见问题解答(5)
样式在FW MX 2004中的应用
用Fireworks轻松制作网页交互按钮
巧用Style制作立体感文字
Fireworks制作产品展示图
FireWorks象素按纽教程
Fireworks MX 之 初体验5-2
Fireworks MX 之初体验3-1
撕纸边缘效果制作方法详解
立体贴图字特效制作
Fireworks MX 2004特效字系列教程:晶莹文字制作

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


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

登陆 还没注册?