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