fireworks制作網(wǎng)頁(yè)交互按鈕
fireworks制作網(wǎng)頁(yè)交互按鈕
如何使用Fireworks的設(shè)計(jì)工具制作交互式按鈕呢。下面學(xué)習(xí)啦小編給大家整理了關(guān)于fireworks制作網(wǎng)頁(yè)交互按鈕的方法，希望你們喜歡。
fireworks制作網(wǎng)頁(yè)交互按鈕的方法步驟
fireworks制作交互按鈕的步驟1. 首先啟動(dòng)Fireworks ，單擊工具欄的新建文檔按鈕，彈出新文檔對(duì)話(huà)框。單擊該對(duì)話(huà)框中的OK按鈕，打開(kāi)一個(gè)新文檔頁(yè)面(圖1)。
圖1
fireworks制作交互按鈕的步驟2. 從Insert(插入)菜單上選擇New Button(新按鈕)命令，啟動(dòng)按鈕制作向?qū)?，彈出按鈕編輯器窗口(圖2)。
圖2
fireworks制作交互按鈕的步驟3. 在fireworks中的工具箱中選擇矩形工具，在按鈕編輯器窗口中拖動(dòng)鼠標(biāo)，畫(huà)一個(gè)適當(dāng)大小的矩形。
fireworks制作交互按鈕的步驟4. 從填充面板中選擇想要的填充特效(如果填充面板沒(méi)有顯示，可以從Windows菜單上選擇Fill命令，打開(kāi)填充面板)，制作漂亮的按鈕圖像。本例選擇Ripples(波紋)圖案、Emerald Green(鮮綠色) ，如圖3所示。
圖3
fireworks制作交互按鈕的步驟5. 輸入按鈕文本：選擇文本工具，在按鈕編輯器中單擊矩形中心附近，彈出文本編輯對(duì)話(huà)框。從文本編輯對(duì)話(huà)框中的字體彈出菜單上選擇一種字體，選擇點(diǎn)大小，從顏色彈出菜單上選擇一種顏色，單擊居中對(duì)齊按鈕(本例選用隸書(shū)，25點(diǎn)，紅色，居中對(duì)齊)，最后單擊OK按鈕(圖4)。
圖4
fireworks制作交互按鈕的步驟6. 完成上步操作后，得到按鈕的Up狀態(tài) (正常狀態(tài))，如圖5所示。
圖5
fireworks制作交互按鈕的步驟7. 設(shè)計(jì)按鈕的Over狀態(tài)：按鈕的Over狀態(tài)是指在制作完成的網(wǎng)頁(yè)中鼠標(biāo)指針掠過(guò)按鈕時(shí)顯示的狀態(tài)。單擊按鈕編輯器中的Over標(biāo)簽，按鈕編輯器窗口的右下角增加了一個(gè)Copy Up Graphic(拷貝Up圖像)按鈕。單擊該按鈕，把Up狀態(tài)的圖像復(fù)制過(guò)來(lái)。此時(shí)，按鈕的Up狀態(tài)和Over狀態(tài)相同。要使Over狀態(tài)有別于Up狀態(tài)，可以按照上述第4步的方法，改變按鈕的填充特效。
fireworks制作交互按鈕的步驟8. 設(shè)計(jì)按鈕的Down狀態(tài)：按鈕的Down狀態(tài)是指在制作完成的網(wǎng)頁(yè)中按下按鈕時(shí)顯示的狀態(tài)。單擊Down標(biāo)簽，按照上述第7步的方法，可以設(shè)計(jì)出與前兩種狀態(tài)不同的Down狀態(tài)。
fireworks制作交互按鈕的步驟9. 為按鈕建立鏈接：?jiǎn)螕鬉ctive Area(激活區(qū))標(biāo)簽，然后單擊右下角的Link Wizard(鏈接向?qū)?按鈕，彈出Link Wizard對(duì)話(huà)框。單擊Link(鏈接)標(biāo)簽，在對(duì)話(huà)框上部的文本框中輸入U(xiǎn)RL，例如，最后單擊OK按鈕。
圖6
fireworks制作交互按鈕的步驟10. 關(guān)閉按鈕編輯器窗口，回到文檔編輯窗口(圖7)。
圖7
fireworks制作交互按鈕的步驟11.單擊Preview標(biāo)簽就可以預(yù)覽交互按鈕的效果。
fireworks制作交互按鈕的步驟12.輸出HTML文檔：從File(文件)菜單上選擇Export(輸出)命令，彈出Export對(duì)話(huà)框，在Base Name文本框中輸入文件名，選定HTML文檔的風(fēng)格(Style)和存放位置(Location)，單擊保存按鈕(圖8)。
圖8
fireworks制作交互按鈕的步驟13.用瀏覽器瀏覽生成的HTML文檔，查看設(shè)計(jì)效果。
看過(guò)“ fireworks制作網(wǎng)頁(yè)交互按鈕“的認(rèn)還看了：