1、第二章 Fireworks CS3入門及制作實(shí)例 內(nèi)容提要Fireworks CS3概述Fireworks CS3工作界面Fireworks文檔操作Fireworks基本操作Fireworks制作實(shí)例Fireworks CS3概述Adobe Fireworks CS3是一款用來設(shè)計(jì)和制作網(wǎng)頁圖形的應(yīng)用程序。它所含的創(chuàng)新性解決方案解決了圖形設(shè)計(jì)人員和網(wǎng)站管理員所面臨的主要問題。使用Fireworks可以在一個(gè)專業(yè)化的環(huán)境中創(chuàng)建和編輯網(wǎng)頁圖形、對其進(jìn)行動(dòng)畫處理、添加高級(jí)交互功能以及優(yōu)化圖像。Fireworks中的工具種類齊全，使用這些工具，設(shè)計(jì)者可以在單個(gè)文件中創(chuàng)建和編輯矢量和位圖圖形。Firew

2、orks可生成JavaScript腳本，從而使用戶可以很輕松地創(chuàng)建變換圖像。除此之外，其高效的優(yōu)化功能可在不犧牲品質(zhì)的前提下縮減網(wǎng)頁圖形文件的大小。Fireworks CS3概述圖像也是網(wǎng)頁中不可缺少的部分，使用Macromedia公司開發(fā)的Fireworks 可以非常方便地處理網(wǎng)頁圖像。該軟件不僅結(jié)合了位圖以及矢量圖形處理的特點(diǎn)，具有處理復(fù)雜圖像的功能，而且還能為圖像創(chuàng)建各種交互式動(dòng)感效果。網(wǎng)頁中的各種圖像：產(chǎn)品圖片、背景圖片、按鈕圖片、廣告圖片。各種標(biāo)志：網(wǎng)站標(biāo)志、各種小圖標(biāo)。網(wǎng)頁動(dòng)畫：各種動(dòng)畫LOGO、動(dòng)畫Banner、動(dòng)畫廣告。網(wǎng)頁界面設(shè)計(jì)：網(wǎng)頁首頁設(shè)計(jì)、網(wǎng)站內(nèi)容頁面設(shè)計(jì)。輔助網(wǎng)頁制作

3、：導(dǎo)航條、按鈕、交換圖像、彈出菜單。優(yōu)化網(wǎng)頁圖像：減小圖像文件大小。Fireworks的工作界面Fireworks 的工作界面，主要由標(biāo)題欄、菜單欄、工具欄、工具箱、繪圖區(qū)域、屬性面板和功能面板等組成。Fireworks的工作界面標(biāo)題欄工具欄繪圖區(qū)域工具箱菜單欄功能面板屬性面板1）標(biāo)題欄標(biāo)題欄位于Fireworks 窗口的頂部，顯示了當(dāng)前編輯的文件名稱和縮放比率。2）菜單欄菜單欄位于標(biāo)題欄的下方，包括文件、編輯、視圖、選擇、修改、文本、命令、濾鏡、窗口、幫助10組不同功能的指令菜單。單擊各主菜單項(xiàng)都會(huì)彈出相應(yīng)的下拉菜單，有些下拉菜單還包括了下一級(jí)的子菜單。3）繪圖區(qū)域繪圖區(qū)域即編輯圖像的區(qū)域，

4、也被稱為畫布。它就是通過使用Fireworks的各種工具進(jìn)行編輯圖像的地方。在繪圖區(qū)域中上方有 、 、 或 4個(gè)按鈕，可以在原始界面和預(yù)覽界面之間進(jìn)行切換，單擊 按鈕返回原始界面，單擊 按鈕顯示預(yù)覽界面，單擊 按鈕顯示2幅圖的預(yù)覽界面，單擊 顯示4幅圖的預(yù)覽界面。繪圖區(qū)域單擊 按鈕將彈出快速導(dǎo)出的菜單，可以將Fireworks 中編輯的圖像快速導(dǎo)出為Macromedia公司的其他產(chǎn)品或者是其他圖像處理軟件的格式。在繪畫區(qū)域的下方是所編輯圖像文檔的狀態(tài)欄，分別用于控制Gif動(dòng)畫的播放、退出位圖編輯模式、顯示圖像的尺寸和控制圖像縮放比例。4）快捷工具欄快捷工具欄包含圖像編輯中經(jīng)常使用到的一些輔助工

5、具，如新建、打開、保存、導(dǎo)入、導(dǎo)出、打印、撤銷、剪切、復(fù)制、粘貼等一些功能按鈕。5）繪圖工具欄在繪圖工具欄中包含著繪制和編輯圖像的各種工具。選擇【窗口】【工具】命令或按【Ctrl+F2】快捷鍵可以打開或隱藏工具箱，它主要由選擇、位圖、矢量、網(wǎng)頁、顏色和視圖6個(gè)部分構(gòu)成。其中各個(gè)工具的作用如下。選擇工具主要用于選擇對象及對選擇的對象進(jìn)行變形操作，每個(gè)工具的作用如下。繪圖工具欄“指針”工具 ：用于選擇或者拖動(dòng)對象?！斑x擇后方對象”工具 ：用于選擇被其他對象覆蓋的對象。“部分選定”工具 ：可以選擇對象組中的某個(gè)對象，也可以選擇矢量圖像中的各個(gè)控制點(diǎn)?！翱s放”工具 ：用于縮放對象?！皟A斜”工具 ：用于

6、旋轉(zhuǎn)和傾斜對象。“扭曲”工具 ：用于扭曲和變形對象。“裁剪”工具 ：用于對圖像進(jìn)行裁剪?！皩?dǎo)出區(qū)域”工具 ：用于將選中的部分導(dǎo)出。位圖工具位圖工具主要用于繪制位圖和對位圖進(jìn)行處理?！斑x取框”工具 ：用于創(chuàng)建矩形選區(qū)?！皺E圓選取框”工具 ：用于創(chuàng)建橢圓或圓形選區(qū)?！疤姿鳌惫ぞ?：通過拖動(dòng)鼠標(biāo)的方式建立任意形狀的選區(qū)?！岸噙呅翁姿鳌惫ぞ?：用于創(chuàng)建多邊形選區(qū)?！澳g(shù)棒”工具 ：將顏色相近的區(qū)域創(chuàng)建為選區(qū)。“刷子”工具 ：用于創(chuàng)建具有填充效果的粗線條。位圖工具“鉛筆”工具 ：通過拖動(dòng)鼠標(biāo)的方式創(chuàng)建任意形狀的線條。“橡皮擦”工具 ：用于擦除不需要的區(qū)域或者對象?！澳：惫ぞ?：用于使編輯的區(qū)域或者圖像

7、具有模糊的效果?！颁J化”工具 ：用于使編輯的區(qū)域或者圖像具有銳化的效果?！皽p淡”工具 ：用于使編輯的區(qū)域或者圖像顏色減淡。位圖工具“加深”工具 ：用于使編輯的區(qū)域或者圖像顏色加深“涂抹”工具 ：用于在圖像中沿拖動(dòng)的方向推移圖像?！跋鹌D章”工具 ：用于把圖像的一個(gè)區(qū)域復(fù)制或克隆到另一個(gè)區(qū)域中。“替換顏色”工具 ：用一種顏色替換另外的一種顏色?！凹t眼消除”工具 ：用于除去照片中出現(xiàn)的紅眼。位圖工具“滴管”工具 ：用于吸取鼠標(biāo)所在位置的顏色?！坝推嵬啊惫ぞ?：利用已設(shè)置的顏色填充所選擇的區(qū)域。“漸變”工具 ：利用設(shè)置的漸變顏色填充所選中的區(qū)域。矢量工具矢量工具主要用于繪制矢量圖形和對矢量圖形進(jìn)行處

8、理。“直線”工具 ：在畫布中繪畫出直線?！颁摴P”工具 ：用于繪制直線路徑。“矢量路徑”工具 ：用于繪制各種形狀的矢量路徑。“重繪路徑”工具 ：重新繪制路徑。矩形、橢圓和多邊形工具：下拉菜單中的選項(xiàng)分別用于繪制相應(yīng)形狀矢量圖形。矢量工具“文本”工具 ：用于在圖像中插入并編輯文本?！白杂勺冃巍惫ぞ?：可以直接對矢量對象執(zhí)行彎曲和變形操作。“更改區(qū)域形狀”工具 ：主要用于拉伸變形區(qū)域指針外圓內(nèi)的所有選定路徑的區(qū)域?！奥窂较此ⅰ惫ぞ?：用于更改路徑的外觀。使用不斷變化的壓力或速度，可以更改路徑的筆觸屬性?！暗蹲印惫ぞ?：能夠?qū)⒁粋€(gè)路徑分割成兩個(gè)或多個(gè)路徑。Web工具Web工具主要用于創(chuàng)建熱點(diǎn)切片，每個(gè)

9、工具的作用如下?！熬匦螣狳c(diǎn)”工具 ：可以在圖像的目標(biāo)區(qū)域周圍繪制矩形熱點(diǎn)?！皥A形熱點(diǎn)”工具 ：可以在圖像的目標(biāo)區(qū)域周圍繪制圓形熱點(diǎn)?！岸噙呅螣狳c(diǎn)”工具 ：可以在圖像的目標(biāo)區(qū)域周圍繪制多邊形熱點(diǎn)?！扒衅惫ぞ?：實(shí)現(xiàn)圖像的矩形切片切割。Web工具“多邊形切片”工具 ：可以實(shí)現(xiàn)圖像的多邊形形狀的切片切割?！半[藏切片和熱點(diǎn)”工具 ：實(shí)現(xiàn)切片熱點(diǎn)視圖的隱藏?！帮@示切片和熱點(diǎn)”工具 ：實(shí)現(xiàn)切片熱點(diǎn)視圖的顯示。顏色工具顏色工具主要用于設(shè)置填充顏色和描邊顏色?！肮P觸顏色” ：用于設(shè)置描邊的顏色?！疤畛漕伾?：用于設(shè)置填充的顏色?！霸O(shè)置默認(rèn)筆觸/填充色” ：將筆觸顏色和填充顏色設(shè)置為默認(rèn)值，即筆觸顏色為黑色

10、，填充顏色為白色。“沒有描邊或填充” ：設(shè)置沒有描邊或填充。“交換筆觸/填充色” ：將筆觸顏色和填充顏色進(jìn)行交換。視圖工具視圖工具主要用于轉(zhuǎn)換屏幕的顯示模式?！皹?biāo)準(zhǔn)屏幕模式” ：將屏幕切換到“標(biāo)準(zhǔn)屏幕模式”顯示模式?！皫в胁藛蔚娜聊Ｊ健?：可以用來將屏幕切換到“帶有菜單的全屏模式”顯示模式?！叭聊Ｊ健?：將屏幕切換到“全屏模式”顯示模式?！笆中巍惫ぞ?：用于移動(dòng)畫布查看圖像?！翱s放”工具 ：放大或縮小畫布的顯示比例。6）“屬性”面板“屬性”面板位于繪畫區(qū)域的下方，用來設(shè)置繪圖區(qū)域中正在編輯的內(nèi)容的屬性?？梢赃x擇【窗口】【屬性】命令或按【Ctrl+F3】快捷鍵打開或關(guān)閉“屬性”面板，根據(jù)當(dāng)前

11、選擇工具和對象的不同，“屬性”面板中所顯示的選項(xiàng)也會(huì)不同。7）控制面板在Fireworks 中有多個(gè)控制面板，一般位于工作界面的右側(cè)。在默認(rèn)情況下有些面板沒有顯示，可以選擇“窗口”菜單中相應(yīng)的命令顯示或者隱藏這些面板。 Fireworks文檔操作 Fireworks文檔的基本操作包括文檔的新建、保存、打開和導(dǎo)入的操作。1）新建文檔在Fireworks中新建文檔的方法有以下幾種：在開始頁中單擊“新建”欄中“Fireworks文檔”鏈接。選擇【文件】【新建】命令或按【Ctrl+N】快捷鍵。單擊快捷工具欄中的“新建”按鈕 。 新建文檔執(zhí)行新建文檔操作后將打開 “新建文檔”對話框，其各項(xiàng)含義如下。寬度

12、：在文本框中輸入畫布寬度的數(shù)字，并選擇相應(yīng)的單位，包括“像素”、“英寸”和“厘米”三個(gè)選項(xiàng)。高度：在文本框中輸入畫布高度的數(shù)字，并選擇相應(yīng)的單位，包括“像素”、“英寸”和“厘米”三個(gè)選項(xiàng)。分辨率：在文本框中輸入畫布分辨率的數(shù)字。分辨率越高，則文件就越大，單位包括“像素英寸”和“像素厘米”兩個(gè)選項(xiàng)?！靶陆ㄎ臋n”對話框2）保存文檔在Fireworks中保存文檔有以下兩種方法完成：選擇【文件】【保存】命令或按【Ctrl+S】快捷鍵。單擊快捷工具欄中的“保存”按鈕 。如果文檔是第一次保存或選擇【文件】【另存為】命令，則會(huì)打開 “另存為”對話框。在對話框中可以選擇保存文檔的位置和輸入文件的名稱，設(shè)置完成

13、后單擊 按鈕進(jìn)行保存。3）打開文檔在Fireworks中打開文檔有以下兩種方法：單擊快捷工具欄中的“打開”按鈕 、選擇【文件】【打開】命令或按【Ctrl+O】快捷鍵，在打開的“打開”對話框選擇要打開的文檔，再單擊 按鈕打開。雙擊Fireworks圖標(biāo)的文檔即可打開該文檔。4）文件的導(dǎo)入在Fireworks中可以導(dǎo)入一幅圖像到當(dāng)前的文檔中，有以下幾種方法可以導(dǎo)入文檔：執(zhí)行【文件】【導(dǎo)入】命令或按【Ctrl+R】快捷鍵。單擊快捷工具欄中的“導(dǎo)入”按鈕 。執(zhí)行導(dǎo)入操作后，在打開的“導(dǎo)入”對話框中選擇需要導(dǎo)入的圖像文件，然后單擊“打開”按鈕即可。示例：新建一個(gè)Fireworks文檔本示例將新建一個(gè)Fi

14、reworks文檔，并在文檔中導(dǎo)入一幅圖像，然后保存文檔，主要練習(xí)新建文檔、導(dǎo)入圖像和保存文檔等操作。制作思路：1）啟動(dòng)Fireworks CS3。2）新建文檔。3）導(dǎo)入“鯊魚.psd”圖像。4）保存“鯊魚.png”文檔。Fireworks基本操作 設(shè)置文檔的屬性就是在對圖像的編輯過程中，對繪圖文檔的大小、顏色以及分辨率等進(jìn)行調(diào)整或者修改。圖像的基本概念包括像素、分辨率、顏色深度和Alpha通道等概念。像素和分辨率像素是組成位圖的最基本單元?？梢园严袼乜闯墒且粋€(gè)極小的方形的顏色塊，每個(gè)小方塊為一個(gè)像素。圖像的分辨率是指圖像在單位尺寸上所包含的像素?cái)?shù)量。圖像的分辨率與圖像的精細(xì)度和圖像文件的大小

15、有關(guān)。顏色深度和Alpha通道顏色深度是指圖像中可以顯示出的顏色數(shù)，在計(jì)算機(jī)中，通常采用顏色深度這一概念來說明其處理色彩的能力。Alpha通道使用不同灰度值表示透明度的大小，Alpha通道的作用主要用于合成不同的圖像，實(shí)現(xiàn)混合疊加。畫布操作 在Fireworks中，修改畫布的大小是通過在“畫布大小”對話框中來完成的?？梢酝ㄟ^選擇【修改】【畫布】【畫布大小】命令，或者在文檔的“屬性”面板中單擊 按鈕打開“畫布大小”對話框。改變畫布的背景顏色改變畫布的背景顏色是通過在“畫布顏色”對話框中完成的。選擇【修改】【畫布】【畫布顏色】命令，打開“畫布顏色”對話框。更改圖像大小 與改變畫布大小不同，調(diào)整圖像

16、的大小將同時(shí)改變畫布和畫布中對象的大小。選擇“修改”|“畫布”|“圖像大小”菜單命令，打開“圖像大小”對話框，在“像素尺寸”文本框中輸入新的水平和垂直尺寸。 旋轉(zhuǎn)畫布可以選擇【修改】【畫布】菜單下的命令對畫布進(jìn)行旋轉(zhuǎn)。菜單中各項(xiàng)命令的含義如下。旋轉(zhuǎn)180：執(zhí)行此命令，畫布將旋轉(zhuǎn)180。旋轉(zhuǎn)90順時(shí)針：執(zhí)行此命令，畫布將順時(shí)針旋轉(zhuǎn)90。旋轉(zhuǎn)90逆時(shí)針：執(zhí)行此命令，畫布將逆時(shí)針旋轉(zhuǎn)90。修剪畫布通過Fireworks中的修剪畫布命令，可以使畫布的大小同繪制圖像或者文字的大小相匹配，從而減少文件量。選擇【修改】【畫布】【修剪畫布】命令或按【Ctrl+Alt+T】快捷鍵，修剪畫布。示例練習(xí)圖像的基本操

17、作制作思路：新建一個(gè)500400像素的Fireworks文檔。導(dǎo)入“海浪.psd”、“魚1.psd”、“魚2.psd”、“魚3.psd”和“魚4.psd” 共五幅圖像。重新設(shè)置畫布大小旋轉(zhuǎn)畫布修剪畫布使用標(biāo)尺、輔助線和網(wǎng)格 使用標(biāo)尺和輔助線可以盡可能精確地對對象進(jìn)行布局以及執(zhí)行各種繪制操作。用戶可以將輔助線放在文檔中并使對象與這些輔助線對齊，或者啟用Fireworks網(wǎng)格并使對象與網(wǎng)格對齊。通過選擇“視圖”|“標(biāo)尺”菜單命令可以顯示和隱藏標(biāo)尺。如果打開標(biāo)尺，垂直和水平標(biāo)尺會(huì)出現(xiàn)在文檔窗口的邊緣。使用標(biāo)尺、輔助線和網(wǎng)格輔助線是從標(biāo)尺拖到文檔畫布上的線條。它們可作為幫助放置和對齊對象的輔助繪制工具

18、，也可以使用輔助線來標(biāo)記文檔的重要部分，如邊距、文檔中心點(diǎn)和要在其中精確地進(jìn)行工作的區(qū)域。創(chuàng)建水平或垂直輔助線的方法是：在水平或垂直標(biāo)尺上按下鼠標(biāo)左鍵進(jìn)行拖動(dòng)，在畫布上定位輔助線并釋放鼠標(biāo)按鈕。注意：可以通過反復(fù)拖動(dòng)輔助線來重新確定其位置。使用標(biāo)尺、輔助線和網(wǎng)格網(wǎng)格在畫布上顯示一個(gè)由橫線和豎線構(gòu)成的體系，網(wǎng)格對于精確放置對象非常有用。此外，用戶可以查看和編輯網(wǎng)格、調(diào)整網(wǎng)格大小以及更改網(wǎng)格的顏色。注意：網(wǎng)格既不駐留在層上，也不隨文檔一起導(dǎo)出。它只是一種設(shè)計(jì)工具。網(wǎng)格的主要設(shè)置方法如下。顯示和隱藏網(wǎng)格：選擇“視圖”|“網(wǎng)格”|“顯示網(wǎng)格”菜單項(xiàng)。 使對象與網(wǎng)格對齊：選擇“視圖”|“網(wǎng)格”|“對齊網(wǎng)

19、格”。 設(shè)置首選參數(shù)和快捷鍵 設(shè)置首選參數(shù)的方法如下：（1）選擇“編輯”|“首選參數(shù)”菜單命令，打開“首選參數(shù)”對話框。（2）選擇要修改的首選參數(shù)組：“常規(guī)”、“編輯”、“啟動(dòng)并編輯”、“文件夾”或“導(dǎo)入”。 （3）更改參數(shù)后單擊“確定”完成。 設(shè)置首選參數(shù)和快捷鍵“文件夾”參數(shù)為用戶提供了對來自外部源的其它Photoshop插件、紋理文件和圖案文件的訪問 設(shè)置首選參數(shù)和快捷鍵下圖所示效果是利用Photoshop插件EyeCandy 4.0 中的火焰效果制作的特殊文字。注意本示例中采用的插件和字體（方正活意簡體）均可從網(wǎng)上下載。操作的撤消與重復(fù) 使用“歷史記錄”面板可以查看、修改和重復(fù)操作文檔

20、過程中所進(jìn)行的動(dòng)作。在該面板中列出了最近在Fireworks中執(zhí)行的操作及次序，所列動(dòng)作個(gè)數(shù)最多不超過在 Fireworks“首選參數(shù)”對話框的“撤消步驟”域中指定的數(shù)值 修剪文檔操作方法如下：（1）從“工具”面板中選擇“裁切”工具，或者選擇“編輯”“裁剪所選位圖”菜單。（2）在畫布上拖動(dòng)鼠標(biāo)。并調(diào)整修剪手柄，直到邊框包圍要保留的文檔區(qū)域?yàn)橹埂?（3）在邊框中雙擊或者按下Enter鍵以修剪文檔。 Fireworks制作實(shí)例 我們將通過實(shí)例介紹如何利用Fireworks CS3制作網(wǎng)頁圖片，通過它們進(jìn)一步學(xué)習(xí)Fireworks CS3工具和面板的靈活使用。 個(gè)性化圖標(biāo) （1）啟動(dòng)Firework

21、s cs3，創(chuàng)建寬度為300像素，高度為200像素，顏色為白色，分辨率為72像素/英寸的畫布。（2）選擇工具欄中的“橢圓”工具，在“屬性”面板中設(shè)置填充類別為“放射狀”，單擊填充顏色旁邊的下拉按鈕，打開“編輯填充”對話框，分別選擇放射狀起始點(diǎn)顏色為#FFFF33，終止點(diǎn)的顏色為#FF3300。（3）按住Shift鍵拖動(dòng)鼠標(biāo)在畫布畫一個(gè)圓，然后拖動(dòng)圓“放射狀”手柄的二個(gè)控制點(diǎn)，顏色深的一方在上（方形手柄點(diǎn)），顏色淺的一方在下（圓形手柄點(diǎn)），使之正好平分圓。 個(gè)性化圖標(biāo)（4）選擇“橢圓”工具再繪制一個(gè)小橢圓，在“屬性”面板中設(shè)置填充類別為“線性”，在“編輯填充”對話框中選擇顏色均為白色，設(shè)置其中一

22、個(gè)不透明樣本的透明度為0。（5）接下來再調(diào)整“線性”手柄的位置，使透明的一邊在下方，白色部分在上方，這樣就能體現(xiàn)出球體的高光，讓球體呈現(xiàn)立體感。（6）將剛才畫出的小橢圓復(fù)制一份，并放置在大圓內(nèi)部下方區(qū)域。在“屬性”面板中設(shè)置其填充類別為“放射狀”，圖層的不透明度為80%。用戶可根據(jù)需要調(diào)整“放射狀”手柄。（7）利用“對齊”面板將兩個(gè)橢圓對齊。（8）在“層”面板中選中大圓，單擊“屬性”面板中的“添加效果”按鈕，選擇“陰影和光暈”|“內(nèi)側(cè)發(fā)光”，設(shè)置顏色為#FF3300、寬度為2、不透明度為80%、柔化為8、偏移為0。（9）選取工具箱中的“文本”工具，在“屬性”面板中選擇字體和文字大小，然后輸入自

23、己的英文名，如“David”。個(gè)性化圖標(biāo)（10）單擊“屬性”面板中的“添加效果”按鈕，選擇“陰影和光暈”|“投影”，設(shè)置距離為3、不透明度為65%、柔化為4、其他參數(shù)采用默認(rèn)值。（11）在畫布中再繪制一個(gè)橢圓，作為球體的陰影，在“屬性”面板中設(shè)置填充顏色為#66666、填充類別為實(shí)心、邊緣羽化為13，圖層的不透明度為70%。（12）將橢圓拖到球體下方，右擊打開快捷菜單，選擇“排列”|“下移一層”命令將它疊放到球體后面，效果如圖2-29所示。 （13）選擇工具箱中的“橢圓”工具，按住Shift鍵再畫一個(gè)圓形圖案，在“屬性”面板中設(shè)置填充類別為無，邊框顏色為無，其他參數(shù)采用默認(rèn)值。（14）選擇工具

24、箱中的“文本”工具，輸入自己的Email地址“”，在“屬性”面板中設(shè)置文字大小為16、顏色為#3399FF，其他參數(shù)采用默認(rèn)值。（15）將前面完成的球體部分放在圓形的中間。 個(gè)性化圖標(biāo)（16）同時(shí)選中文本和圓形，然后選擇“文本”|“附加到路徑”命令，將文字對象附加到路徑上，此時(shí)可以用“傾斜”工具旋轉(zhuǎn)文字，使之恰好放在圖標(biāo)底部。（17）將制作完成的水晶球個(gè)性化圖標(biāo)保存到文件中。網(wǎng)頁按鈕 按鈕是網(wǎng)頁中的重要元素，以下通過實(shí)例講解如何利用Fireworks 制作按鈕。（1）創(chuàng)建300200像素新文檔，繪制一個(gè)矩形，修改屬性檢查器面板中的矩形圓度值為100，將矩形四角轉(zhuǎn)換成圓角樣式。（2）將矩形寬度設(shè)

25、為150，高度設(shè)為48，并用顏色#FF6600填充。（3）為此圓角矩形增加效果，單擊屬性檢查器中增加效果按鈕，彈出效果快捷菜單，然后選擇“斜角和浮雕”|“內(nèi)斜角”命令，設(shè)置斜角邊緣形狀為平坦，寬度為7像素，其它參數(shù)采用默認(rèn)值，效果如下圖所示。網(wǎng)頁按鈕（4）在Fireworks中有相當(dāng)成熟的色彩層次調(diào)整工具。用戶可以執(zhí)行“濾鏡”|“調(diào)整色彩”菜單中的各項(xiàng)命令對圖形的色彩進(jìn)行全方位調(diào)整。（5）選擇“濾鏡”|“調(diào)整色彩”|“曲線”菜單命令，打開曲線對話框修改圖像的光影層次效果。（6）選擇“濾鏡”|“色彩調(diào)整”|“色相/飽和度”菜單命令，為按鈕上色。（7）在制作好的按鈕造型上，使用文本工具輸入文字“H

26、OME”，調(diào)整字體類型和大小，也可調(diào)整圓角矩形大小，并使二者居中對齊。（8）使用滴管工具吸取按鈕中間色調(diào)，并為字體填充該色。選擇效果菜單中的“斜角和浮雕”|“內(nèi)斜角”命令，為字體添加凹陷的立體化效果。 網(wǎng)頁按鈕（9）在屬性面板上調(diào)整字體的透明度為85，使文本的凹陷效果顯得更加自然逼真。（10）為按鈕添加投影，設(shè)置距離為7像素，不透明度為32%，其他參數(shù)采用默認(rèn)值。完成的按鈕如下圖所示。（11）將制作完成的網(wǎng)頁按鈕圖形保存到文件中。 彈出式菜單 當(dāng)用戶將鼠標(biāo)移動(dòng)到某些網(wǎng)頁對象上時(shí)，瀏覽器中將顯示彈出菜單。用戶可以將URL鏈接附加到彈出菜單項(xiàng)以便于導(dǎo)航。例如，可以使用彈出菜單來組織與導(dǎo)航欄中的某個(gè)按鈕相關(guān)的若干個(gè)導(dǎo)航選項(xiàng)，也可以根據(jù)需要在彈出菜單中創(chuàng)建任意多級(jí)子菜單。（1）利用繪圖工具欄中的鋼筆工具繪制菜單背景樣式，設(shè)置填充色為#FFFF66，沒有邊框線，并輸入文字“小雨的個(gè)人網(wǎng)站”，并將字體設(shè)置為“華文行楷” 。（2）繪制一個(gè)8825的矩形，設(shè)置填充色為#FFCC33，邊框線顏色為#FFFF66。選擇效果快捷菜單中的“斜角和浮雕”|“凹入浮雕”命令為矩形添加立體效果，設(shè)置寬度為2像素，其他參數(shù)采用默認(rèn)值。（3）按住Alt鍵移動(dòng)立體矩形，將其復(fù)制4個(gè)，為制作按鈕做準(zhǔn)備。彈出式菜單（4）將制作好的零部件水平排列整齊，在每一個(gè)立體矩形上輸入相應(yīng)文字，并為文字設(shè)置“凸起浮雕”效果，形成