本節學習重點：掌握使用fireworks4制作高級滾蓋圖的技巧。掌握firewroks4與dreamweaver4結合使用的方法。
1、打開fw，新建文件。大小為200*60像素，背景色采用透明（transparent）。分辨率保持默認大小。
2、制作按鈕并輸出相應html文件。請看具體步驟：
2、1 選取工具箱的矩形繪制工具，在編輯區繪制一個矩形，矩形的stroke（描邊）選項設為none（不要有描邊）；fill（填充）選項中填充類型選擇linear（線性填充），填充顏色的調配順序為“#000066--#ffffff--#8787cf”，其余的選項保持默認，（當然，你可以選擇相應的材質進行填充）填充效果請看圖01所示：
圖 01
2、2 默認情況下，線性填充的方向是按照填充顏色從左向右的方向進行填充，現在，我們要改變一下它的填充方向，選中該矩形，點取工具箱的油漆桶工具，然后在矩形上方由上向下拖動油漆桶，這樣，矩形的填充色就會變成由上向下的填充形式。如圖02所示：
圖 02
2、3 選中該矩形，打開info（信息）面板，將矩形的高度設為和畫布的高度相同：60像素，寬度可以根據需要，自行設定。如圖03：
圖 03
2、4 采用同樣的方法，在矩形的兩側各添加兩個修飾性的小矩形，高度比中間的矩形稍低，填充方式和顏色同中間矩形保持一致。效果如圖04所示：
2、5 好了，按鈕的主體已經做好了，現在我們就要把它轉化為按鈕型的symbol。使用快捷鍵“ctrl+a”選中所有的矩形對象，接著將這幾個矩形對象組合到一起（快捷鍵是“ctrl+g”），然后執行菜單命令insert--〉convert to symbole（快捷鍵是功能鍵f8），在隨后彈出的對話框中，將symbol的type（類型）選為“button（按鈕）”，可以給這個symbol起個名稱，也可以保持其默認名稱“symbol1”。
2、6 將組合對象轉化為symbol後，雙擊該symbol便可以進入其編輯區。對于按鈕的各個狀態的方式、意義這里我們不做多講，請參考其他的文章。你可以按照自己的需要對按鈕的各個狀態進行各種美化工作。不過現在請你先看完后面的步驟后，回頭再來美化。呵呵。這里我們添加了文字“動態按鈕”。如圖05：
圖 05
2、7 好了，按鈕制作完成，我們要將其輸出保存了，在輸出之前，執行菜單命令modify--trim canvas，使得按鈕恰好占滿整個畫布。然后打開file菜單，選擇export命令，在隨后彈出的輸出設置框內，將輸出的文件命名為button.htm，記得將put images in subfolder前面的復選框選中，這樣便于我們對輸出文件的圖片文件的保存。現在可以點擊save（保存）按鈕，但是，且慢，這里有一個和我們即將要制作的滾蓋按鈕的動畫關系密切的要點：點選輸出設定框上的“options（選項）”按鈕。如圖06所示：
圖 06
2、8 在隨后彈出的設定框中，選擇document specific選項卡，如圖07所示。需要我們注意的是file names（文件名稱）這一部分的相關設定，它是用來設定輸出圖片或者按鈕的相關圖片的文件名稱的，也就是說，一般我們輸出的按鈕圖片的文件名稱默認格式為"輸出html文件名稱+切片（不要忘了，只要一轉化為按鈕格式，就會在layer面板的web共享層上自動出現一個切片區，切片區的大小也就是按鈕的active areas區域大小）的行數_列數+幀數（只有圖片占據了一幀以上的幀數，否
新聞熱點
疑難解答
