| 网站首页 | 新闻快报 | 软件教程 | 硬件教程 | 设计学院 | Q Q 专区 | 编程开发 | 网络安全 | 
您现在的位置: 浩扬网络 >> 设计学院 >> Fireworks >> 文章正文
用Fireworks轻松制作网页交互按钮
作者:49-SOHO 文章来源:酷页 点击数: 更新时间:2006-8-4 22:49:37

使用Fireworks的网页按钮制作向导(Step-by-step button maker),可以轻松制作出漂亮的网页交互按钮。下面以实例说明具体的制作步骤。

  1. 启动Fireworks ,单击工具栏的新建文档按钮,弹出新文档对话框。单击该对话框中的OK按钮,打开一个新文档页面(图1)。

图1


  2. 从Insert(插入)菜单上选择New Button(新按钮)命令,启动按钮制作向导,弹出按钮编辑器窗口(图2)。

图2


  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文档的功能;

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

【文章录入:残梦    责任编辑:残梦 】
发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
网友评论:(评论内容只代表网友观点,与浩扬网络立场无关!)
热门文章

赞助商


| 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告 |