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 單擊確定。注意此時這個按鈕上的文字已經更新了。