Fireworks 可以讓您不用寫(xiě)一行 Javascript 代碼就可以輕松的創(chuàng)建一個(gè)交互式的按鈕。您只需要將一個(gè)矩形區(qū)域轉(zhuǎn)換為一個(gè)按鈕并使用按鈕編輯器(Button Editor)來(lái)完成這個(gè)按鈕。

創(chuàng)建一個(gè)按鈕

1 選定這個(gè)矩形區(qū)域，從菜單中選擇 Insert $#@62; Convert to Symbol。在 Fireworks中，按鈕是對(duì)象(Object)的一個(gè)特殊類型被稱作符號(hào)(Symbols),它們存儲(chǔ)在文檔的庫(kù)(Library)中。


2 在名稱(Name)欄中輸入 Button 。 選擇按鈕(Button)選項(xiàng)，然后單擊“確定”。
注意此時(shí)這個(gè)矩形區(qū)域?qū)⒆兂梢粋�(gè)亮綠色并且在左下角有一個(gè)小箭頭。這個(gè)填充無(wú)需改變，相反，這個(gè)亮綠色象征一個(gè)分割區(qū)(Slice)。而這個(gè)箭頭表明這個(gè)矩形區(qū)域是一個(gè)按鈕的例圖(Instance)。這個(gè)按鈕的原始作品被存儲(chǔ)在文檔的庫(kù)(Library)中。

3 雙擊這個(gè)按鈕打開(kāi)按鈕編輯器，或從菜單中選擇 Modify $#@62; Symbol $#@62; Edit Symbol。 在按鈕編輯器中，您可以為這個(gè)按鈕建立它在各種狀態(tài)下的圖形。首先您將要為這個(gè)按鈕添加一個(gè)文字標(biāo)簽。


4 選擇文字工具(Text tool)然后在按鈕編輯器中的矩形區(qū)域中心單擊鼠標(biāo)。


5 在文字編輯器(Text Editor)中從字體下拉菜單中選擇一種字體，輸入字體大小，從顏色下拉菜單中選擇一個(gè)顏色，然后單擊居中對(duì)齊(center alignment) 按鈕，在這里我們使用 Arial，14 point，粗體，居中對(duì)齊。

6 在這個(gè)對(duì)話框下方的大文字欄中輸入 our story 然后單擊“確定”。
現(xiàn)在您將要使用對(duì)齊文字到矩形中心的命令。

7 使用指針(Pointer),選擇這個(gè)矩形然后按下 Shift 鍵并單擊 (Shift-click) 這個(gè)文字。


8 從菜單中選擇 Modify $#@62; Align $#@62; Center Vertical 然后再選擇 Modify $#@62; Align $#@62; Center Horizontal。


Fireworks 移動(dòng)這個(gè)文字到矩形的中心且不會(huì)移動(dòng)這個(gè)矩形。 這個(gè)對(duì)齊命令將保持第一次選擇的對(duì)象的位置，移動(dòng)第二次選擇的對(duì)象實(shí)現(xiàn)對(duì)齊。

9 單擊按鈕編輯器的滑過(guò)(Over)標(biāo)簽然后單擊復(fù)制彈起圖像( Copy Up Graphic)按鈕。在滑過(guò)(Over)標(biāo)簽中的圖像是指在已完成的網(wǎng)頁(yè)中當(dāng)鼠標(biāo)指針滑過(guò)這個(gè)按鈕時(shí)顯示的圖像。為了使這個(gè)圖像清楚的反映彈起的動(dòng)作，您將需要從圖像中選擇另一種顏色改變這個(gè)填充色。

10 使用指針(Pointer)選定這個(gè)矩形。單擊工具欄中的 Color Well，選擇滴管(dropper)， 然后單擊歡迎消息的棕褐色區(qū)域。這個(gè)滴管可以讓您選取屏幕上的任何一種顏色。

您創(chuàng)建的每一個(gè)按鈕都將連接到一個(gè) Internet 地址。

11 單擊按鈕編輯器的激活區(qū)域( Active Area)標(biāo)簽然后單擊右下方的連接向?qū)?Link Wizard)按鈕。

12 單擊連接(Link)標(biāo)簽。在上端的文字欄中輸入一個(gè)地址(URL)。 使用一個(gè)有效的地址(比如：http://togo.myrice.com)以便您能在瀏覽器中測(cè)試這個(gè)按鈕。


13 單擊確定。

14 關(guān)閉按鈕編輯器。

復(fù)制按鈕

Fireworks 可以很容易的建立一些外觀相似但連接和文字不同的按鈕。

1 按下 Alt 鍵(Windows) 或 Option 鍵(Macintosh) 然后拖動(dòng)這個(gè)按鈕。使用 Alt/Option-拖動(dòng)您可以移動(dòng)一個(gè)選定對(duì)象的副本。


2 如果您現(xiàn)在看不到對(duì)象面板(Object inspector)，從菜單中選擇 Window $#@62; Object。


3 在按鈕文字( Button Text)欄中輸入 gifts 然后按下 Enter 鍵(Windows) 或 Return 鍵(Macintosh)。 這時(shí)將出現(xiàn)一個(gè)消息框詢問(wèn)您是希望編輯這個(gè)按鈕的當(dāng)前例圖(Instance)還是所有例圖(Instance)。因?yàn)槟�是�?fù)制的 Our Story 按鈕，所以在同一個(gè)按鈕就擁有了兩個(gè)例圖(Instance)。當(dāng)您編輯一個(gè)按鈕， Fireworks 將更新所有的例圖(instance)。在當(dāng)前的情況下，您已經(jīng)擁有了兩個(gè)例圖，所以我們選擇編輯當(dāng)前按鈕。

4 單擊當(dāng)前(Current)。

5 在對(duì)象面板中(Object inspector)單擊連接向?qū)?Link Wizard)。

6 單擊連接(Link)標(biāo)簽修改這個(gè)連接地址。

7 單擊確定。注意此時(shí)這個(gè)按鈕上的文字已經(jīng)更新了。