软件开发培训班 >> 创意设计 >> Fireworks


FIRWORKS中文教程-JSP按钮

B>◆ JavaScript 按钮

Fireworks 可以让您不用写一行 Javascript 代码就可以轻松的创建一个交互式的按钮。您只需要将一个矩形区域转换为一个按钮并使用按钮编辑器(Button Editor)来完成这个按钮。

创建一个按钮

1 选定这个矩形区域，从菜单中选择 Insert $#@62; Convert to Symbol。在 Fireworks中，按钮是对象(Object)的一个特殊类型被称作符号(Symbols),它们存储在文档的库(Library)中。

2 在名称(Name)栏中输入 Button 。 选择按钮(Button)选项，然后单击“确定”。
注意此时这个矩形区域将变成一个亮绿色并且在左下角有一个小箭头。这个填充无需改变，相反，这个亮绿色象征一个分割区(Slice)。而这个箭头表明这个矩形区域是一个按钮的例图(Instance)。这个按钮的原始作品被存储在文档的库(Library)中。

3 双击这个按钮打开按钮编辑器，或从菜单中选择 Modify $#@62; Symbol $#@62; Edit Symbol。 在按钮编辑器中，您可以为这个按钮建立它在各种状态下的图形。首先您将要为这个按钮添加一个文字标签。

4 选择文字工具(Text tool)然后在按钮编辑器中的矩形区域中心单击鼠标。

5 在文字编辑器(Text Editor)中从字体下拉菜单中选择一种字体，输入字体大小，从 吕说ブ醒≡褚桓鲅丈缓蟮セ骶又卸云?center alignment) 按钮，在这里我们使用 Arial，14 point，粗体，居中对齐。

6 在这个对话框下方的大文字栏中输入 our story 然后单击“确定”。
现在您将要使用对齐文字到矩形中心的命令。

7 使用指针(Pointer),选择这个矩形然后按下 Shift 键并单击 (Shift-click) 这个文字。

8 从菜单中选择 Modify $#@62; Align $#@62; Center Vertical 然后再选择 Modify $#@62; Align $#@62; Center Horizontal。


Fireworks 移动这个文字到矩形的中心且不会移动这个矩形。 这个对齐命令将保持第一次选择的对象的位置，移动第二次选择的对象实现对齐。

9 单击按钮编辑器的滑过(Over)标签然后单击复制弹起图像( Copy Up Graphic)按钮。在滑过(Over)标签中的图像是指在已完成的网页中当鼠标指针滑过这个按钮时显示的图像。为了使这个图像清楚的反映弹起的动作，您将需要从图像中选择另一种颜色改变这个填充色。

10 使用指针(Pointer)选定这个矩形。单击工具栏中的 Color Well，选择滴管(dropper)， 然后单击欢迎消息的棕褐色区域。这个滴管可以让您选取屏幕上的任何一种颜色。

您创建的每一个按钮都将连接到一个 Internet 地址。

11 单击按钮编辑器的激活区域( Active Area)标签然后单击右下方的连接向导(Link Wizard)按钮。

12 单击连接(Link)标签。在上端的文字栏中输入一个地址(URL)。 使用一个有效的地址(比如：http://togo.myrice.com)以便您能在浏览器中测试这个按钮。

13 单击确定。

14 关闭按钮编辑器。

复制按钮

Fireworks 可以很容易的建立一些外观相似但连接和文字不同的按钮。

1 按下 Alt 键(Windows) 或 Option 键(Macintosh) 然后拖动这个按钮。使用 Alt/Option-拖动您可以移动一个选定对象的副本。

2 如果您现在看不到对象面板(Object inspector)，从菜单中选择 Window $#@62; Object。

3 在按钮文字( Button Text)栏中输入 gifts 然后按下 Enter 键(Windows) 或 Return 键(Macintosh)。 这时将出现一个消息框询问您是希望编辑这个按钮的当前例图(Instance)还是所有例图(Instance)。因为您是复制的 Our Story 按钮，所以在同一个按钮就拥有了两个例图(Instance)。当您编辑一个按钮， Fireworks 将更新所有的例图(instance)。在当前的情况下，您已经拥有了两个例图，所以我们选择编辑当前按钮。

4 单击当前(Current)。

5 在对象面板中(Object inspector)单击连接向导(Link Wizard)。

6 单击连接(Link)标签修改这个连接地址。

7 单击确定。注意此时这个按钮上的文字已经更新了。