JavaScript 按钮

Fireworks 让用户可以在不用写一行 JavaScript 代码的情况下轻而易举地创建出交互式的按钮。


 
创建按钮

用户可以把一个矩形转换成按钮,然后再用按钮编辑器完成按钮的创作。

1 在矩形工具被选取情况下,选择 Insert > Convert to Symbol。在 Fireworks 中,按钮属于对象中一种特殊类型,我们称之为符号,储存在文档的图库中。有关符号和图库面板的使用介绍,请参阅 符号和实体
2 在 Name 文本填框中输入 Button,选取 Button 选项,点击 OK。
这时用户可以注意到矩形的颜色成了淡绿色并且在矩形的左下角出现一个小的箭头。当然矩形的填色没有任何变化。实际上淡绿色只是代表了切割对象。小箭头表示该矩形是一个按钮的实体。制作按钮的原来的图形则储存在文档的图库中。
3 双击按钮打开按钮编辑器,或者选择 Modify > Symbol > Edit Symbol。利用按钮编辑器,用户可以为每一种按钮情景创建不同的图形。第一步需要做的修改是为按钮标签添加文本。
4 选取文本工具,点击文本编辑器上矩形的中心附近位置。
5 从文本编辑器对话框中的字体弹出菜单中选择字体,输入字体大小,从颜色弹出菜单中选择字体颜色,点击严重新排列按钮(我们使用的是 Arial, 14 point, boldface, center aligned)。
6 在对话框底部的文本框中输入 our story ,点击 OK。
现在你要使用 Align 命令来使文本在矩形内沿中心排列。
7 利用点选工具,选取矩形,按住 Shift 键点击文本。
8 选择 Modify > Align > Center Vertical,然后选择 Modify > Align > Center Horizontal。
Fireworks 会在矩形内移动文本进行排列,但并不会移动矩形本身。Align 命令会保持第一个选取对象的位置不变,然后对于后来选取的对象进行排列。
9 点击按钮编辑器上的 Over 标签,点击 Copy Up Graphic 按钮。这时 Over 标签上的图像就是以后出现在完成后的网页上当访问者用鼠标滑过按钮时所出现的图像。
要令这个图像和按钮的 Up 情景有区别,你要对填色进行修改。
10 使用点选工具选取矩形。点击工具箱上的选色表,选取滴管工具,点击欢迎信息后边的茶色矩形。滴管工具可以让用户选取屏幕上的任何颜色。
每个你所创建的按钮都必须和一个网上地址相链接。
11 点击按钮编辑器上的 Active Area 标签,然后点击右下角的 Link Wizard。
12 点击 Link 标签,在对话框上部出现的文本框中输入一个 URL。注意一定要使用有效的 URL (如 http://www.macromedia.com),这样你才可以在浏览器中测试按钮。
13 点击 OK。
14 关闭按钮编辑器。


 
复制按钮

Fireworks 对于帮助创建一系列外观相似但链接和文本不同的按钮是非常容易的。

1 按住 Alt (Windows) 或 Option (Macintosh) 键,在页面上拖拽按钮。这样就可以复制按钮了。
2 如果这时对象面板看不到,选择 Window > Object。
3 在 Button Text 文本框中,输入 gifts 并敲击回车键 (Windows) 或 Return (Macintosh) 键。
这时会出现一个信息框询问用户是否要编辑按钮的当前激活实体或所有实体。因为你所复制的是 Our Story 按钮,这时对于同一按钮用户有了两个实体。当你编辑按钮的时候,Fireworks 会自动更新所有该按钮的实体。由于这时你需要的是两个不同的按钮,所以你要选择的是编辑当前按钮。
4 点击 Current。
5 点击对象面板上的 Link Wizard 按钮。
6 点击 Link 标签,更换 URL。注意输入的 URL 要有效,这样你才可以在浏览器中对按钮进行测试。
7 点击 OK。可以看到按钮上的文本也已经更新过了。