網(wǎng)頁(yè)設(shè)計(jì)與Web編程chapter02

1、第二章第二章 Fireworks CS3入門及制入門及制作實(shí)例作實(shí)例 內(nèi)容提要內(nèi)容提要pFireworks CS3概述概述pFireworks CS3工作界面工作界面pFireworks文檔操作文檔操作pFireworks基本操作基本操作pFireworks制作實(shí)例制作實(shí)例Fireworks CS3概述概述p Adobe Fireworks CS3是一款用來(lái)設(shè)計(jì)和制作網(wǎng)頁(yè)圖形是一款用來(lái)設(shè)計(jì)和制作網(wǎng)頁(yè)圖形的應(yīng)用程序。它所含的創(chuàng)新性解決方案解決了圖形設(shè)計(jì)的應(yīng)用程序。它所含的創(chuàng)新性解決方案解決了圖形設(shè)計(jì)人員和網(wǎng)站管理員所面臨的主要問(wèn)題。使用人員和網(wǎng)站管理員所面臨的主要問(wèn)題。使用Fireworks可以

2、在一個(gè)專業(yè)化的環(huán)境中創(chuàng)建和編輯網(wǎng)頁(yè)圖形、對(duì)其可以在一個(gè)專業(yè)化的環(huán)境中創(chuàng)建和編輯網(wǎng)頁(yè)圖形、對(duì)其進(jìn)行動(dòng)畫處理、添加高級(jí)交互功能以及優(yōu)化圖像。進(jìn)行動(dòng)畫處理、添加高級(jí)交互功能以及優(yōu)化圖像。p Fireworks中的工具種類齊全，使用這些工具，設(shè)計(jì)者中的工具種類齊全，使用這些工具，設(shè)計(jì)者可以在單個(gè)文件中創(chuàng)建和編輯矢量和位圖圖形?？梢栽趩蝹€(gè)文件中創(chuàng)建和編輯矢量和位圖圖形。Fireworks可生成可生成JavaScript腳本，從而使用戶可以很輕腳本，從而使用戶可以很輕松地創(chuàng)建變換圖像。除此之外，其高效的優(yōu)化功能可在松地創(chuàng)建變換圖像。除此之外，其高效的優(yōu)化功能可在不犧牲品質(zhì)的前提下縮減網(wǎng)頁(yè)圖形文件的大小。不

3、犧牲品質(zhì)的前提下縮減網(wǎng)頁(yè)圖形文件的大小。Fireworks CS3概述概述p 圖像也是網(wǎng)頁(yè)中不可缺少的部分，使用圖像也是網(wǎng)頁(yè)中不可缺少的部分，使用Macromedia公司開(kāi)發(fā)的公司開(kāi)發(fā)的Fireworks 可以非常方便地處理網(wǎng)頁(yè)圖像。該軟件不僅結(jié)合了位圖可以非常方便地處理網(wǎng)頁(yè)圖像。該軟件不僅結(jié)合了位圖以及矢量圖形處理的特點(diǎn)，具有處理復(fù)雜圖像的功能，而且還能以及矢量圖形處理的特點(diǎn)，具有處理復(fù)雜圖像的功能，而且還能為圖像創(chuàng)建各種交互式動(dòng)感效果。為圖像創(chuàng)建各種交互式動(dòng)感效果。 網(wǎng)頁(yè)中的各種圖像：產(chǎn)品圖片、背景圖片、按鈕圖片、廣告圖片。 各種標(biāo)志：網(wǎng)站標(biāo)志、各種小圖標(biāo)。 網(wǎng)頁(yè)動(dòng)畫：各種動(dòng)畫LOGO、動(dòng)

4、畫Banner、動(dòng)畫廣告。 網(wǎng)頁(yè)界面設(shè)計(jì)：網(wǎng)頁(yè)首頁(yè)設(shè)計(jì)、網(wǎng)站內(nèi)容頁(yè)面設(shè)計(jì)。 輔助網(wǎng)頁(yè)制作：導(dǎo)航條、按鈕、交換圖像、彈出菜單。 優(yōu)化網(wǎng)頁(yè)圖像：減小圖像文件大小。Fireworks的工作界面的工作界面pFireworks 的工作界面，主要由標(biāo)題欄、的工作界面，主要由標(biāo)題欄、菜單欄、工具欄、工具箱、繪圖區(qū)域、屬菜單欄、工具欄、工具箱、繪圖區(qū)域、屬性面板和功能面板等組成。性面板和功能面板等組成。Fireworks的工作界面的工作界面 標(biāo)題欄工具欄繪圖區(qū)域工具箱菜單欄功能面板屬性面板1）標(biāo)題欄）標(biāo)題欄p標(biāo)題欄位于標(biāo)題欄位于Fireworks 窗口的頂部，顯示窗口的頂部，顯示了當(dāng)前編輯的文件名稱和縮放比率

5、。了當(dāng)前編輯的文件名稱和縮放比率。2）菜單欄）菜單欄p 菜單欄位于標(biāo)題欄的下方，包括文件、編輯、視圖、選擇菜單欄位于標(biāo)題欄的下方，包括文件、編輯、視圖、選擇、修改、文本、命令、濾鏡、窗口、幫助、修改、文本、命令、濾鏡、窗口、幫助10組不同功能的組不同功能的指令菜單。單擊各主菜單項(xiàng)都會(huì)彈出相應(yīng)的下拉菜單，有指令菜單。單擊各主菜單項(xiàng)都會(huì)彈出相應(yīng)的下拉菜單，有些下拉菜單還包括了下一級(jí)的子菜單。些下拉菜單還包括了下一級(jí)的子菜單。3）繪圖區(qū)域）繪圖區(qū)域p 繪圖區(qū)域即編輯圖像的區(qū)域，也被稱為畫布。它就是通過(guò)繪圖區(qū)域即編輯圖像的區(qū)域，也被稱為畫布。它就是通過(guò)使用使用Fireworks的各種工具進(jìn)行編輯圖像的

6、地方。的各種工具進(jìn)行編輯圖像的地方。p 在繪圖區(qū)域中上方有在繪圖區(qū)域中上方有 、 、 或或 4個(gè)按鈕，可以在個(gè)按鈕，可以在原始界面和預(yù)覽界面之間進(jìn)行切換，單擊原始界面和預(yù)覽界面之間進(jìn)行切換，單擊 按鈕返回原始按鈕返回原始界面，單擊界面，單擊 按鈕顯示預(yù)覽界面，單擊按鈕顯示預(yù)覽界面，單擊 按鈕顯示按鈕顯示2幅幅圖的預(yù)覽界面，單擊圖的預(yù)覽界面，單擊 顯示顯示4幅圖的預(yù)覽界面。幅圖的預(yù)覽界面。繪圖區(qū)域繪圖區(qū)域p 單擊單擊 按鈕將彈出快速導(dǎo)出的菜單，可以將按鈕將彈出快速導(dǎo)出的菜單，可以將Fireworks 中中編輯的圖像快速導(dǎo)出為編輯的圖像快速導(dǎo)出為Macromedia公司的其他產(chǎn)品公司的其他產(chǎn)品或者

7、或者是是其他圖像處理軟件其他圖像處理軟件的格式。的格式。p 在繪畫區(qū)域的下方是所編輯圖像文檔的狀態(tài)欄，分別用于在繪畫區(qū)域的下方是所編輯圖像文檔的狀態(tài)欄，分別用于控制控制Gif動(dòng)畫的播放、退出位圖編輯模式、顯示圖像的尺動(dòng)畫的播放、退出位圖編輯模式、顯示圖像的尺寸和控制圖像縮放比例。寸和控制圖像縮放比例。4）快捷工具欄）快捷工具欄p 快捷工具欄包含圖像編輯中經(jīng)常使用到的一些輔助工具，快捷工具欄包含圖像編輯中經(jīng)常使用到的一些輔助工具，如新建、打開(kāi)、保存、導(dǎo)入、導(dǎo)出、打印、撤銷、剪切、如新建、打開(kāi)、保存、導(dǎo)入、導(dǎo)出、打印、撤銷、剪切、復(fù)制、粘貼等一些功能按鈕。復(fù)制、粘貼等一些功能按鈕。5）繪圖工具欄）

8、繪圖工具欄p 在繪圖工具欄中包含著繪制和編輯圖像的各種工具。選擇在繪圖工具欄中包含著繪制和編輯圖像的各種工具。選擇【窗口窗口】【工具工具】命令或按命令或按【Ctrl+F2】快捷鍵可以打快捷鍵可以打開(kāi)或隱藏工具箱，它主要由選擇、位圖、矢量、網(wǎng)頁(yè)、顏開(kāi)或隱藏工具箱，它主要由選擇、位圖、矢量、網(wǎng)頁(yè)、顏色和視圖色和視圖6個(gè)部分構(gòu)成。其中各個(gè)工具的作用如下。個(gè)部分構(gòu)成。其中各個(gè)工具的作用如下。 選擇工具主要用于選擇對(duì)象及對(duì)選擇的對(duì)象進(jìn)行變形操作，每個(gè)工具的作用如下。繪圖工具欄繪圖工具欄 “指針”工具 ：用于選擇或者拖動(dòng)對(duì)象。 “選擇后方對(duì)象”工具 ：用于選擇被其他對(duì)象覆蓋的對(duì)象。 “部分選定”工具 ：可

9、以選擇對(duì)象組中的某個(gè)對(duì)象，也可以選擇矢量圖像中的各個(gè)控制點(diǎn)。 “縮放”工具 ：用于縮放對(duì)象。 “傾斜”工具 ：用于旋轉(zhuǎn)和傾斜對(duì)象。 “扭曲”工具 ：用于扭曲和變形對(duì)象。 “裁剪”工具 ：用于對(duì)圖像進(jìn)行裁剪。 “導(dǎo)出區(qū)域”工具 ：用于將選中的部分導(dǎo)出。位圖工具位圖工具位圖工具主要用于繪制位圖和對(duì)位圖進(jìn)行處理。l“選取框”工具 ：用于創(chuàng)建矩形選區(qū)。l“橢圓選取框”工具 ：用于創(chuàng)建橢圓或圓形選區(qū)。l“套索”工具 ：通過(guò)拖動(dòng)鼠標(biāo)的方式建立任意形狀的選區(qū)。l“多邊形套索”工具 ：用于創(chuàng)建多邊形選區(qū)。l“魔術(shù)棒”工具 ：將顏色相近的區(qū)域創(chuàng)建為選區(qū)。l“刷子”工具 ：用于創(chuàng)建具有填充效果的粗線條。位圖工具位

10、圖工具l“鉛筆”工具 ：通過(guò)拖動(dòng)鼠標(biāo)的方式創(chuàng)建任意形狀的線條。l“橡皮擦”工具 ：用于擦除不需要的區(qū)域或者對(duì)象。l“模糊”工具 ：用于使編輯的區(qū)域或者圖像具有模糊的效果。l“銳化”工具 ：用于使編輯的區(qū)域或者圖像具有銳化的效果。l“減淡”工具 ：用于使編輯的區(qū)域或者圖像顏色減淡。位圖工具位圖工具l“加深”工具 ：用于使編輯的區(qū)域或者圖像顏色加深l“涂抹”工具 ：用于在圖像中沿拖動(dòng)的方向推移圖像。l“橡皮圖章”工具 ：用于把圖像的一個(gè)區(qū)域復(fù)制或克隆到另一個(gè)區(qū)域中。l“替換顏色”工具 ：用一種顏色替換另外的一種顏色。l“紅眼消除”工具 ：用于除去照片中出現(xiàn)的紅眼。位圖工具位圖工具l“滴管”工具 ：

11、用于吸取鼠標(biāo)所在位置的顏色。l“油漆桶”工具 ：利用已設(shè)置的顏色填充所選擇的區(qū)域。l“漸變”工具 ：利用設(shè)置的漸變顏色填充所選中的區(qū)域。矢量工具矢量工具矢量工具主要用于繪制矢量圖形和對(duì)矢量圖形進(jìn)行處理。l“直線”工具 ：在畫布中繪畫出直線。l“鋼筆”工具 ：用于繪制直線路徑。l“矢量路徑”工具 ：用于繪制各種形狀的矢量路徑。l“重繪路徑”工具 ：重新繪制路徑。l矩形、橢圓和多邊形工具：下拉菜單中的選項(xiàng)分別用于繪制相應(yīng)形狀矢量圖形。矢量工具矢量工具l“文本”工具 ：用于在圖像中插入并編輯文本。l“自由變形”工具 ：可以直接對(duì)矢量對(duì)象執(zhí)行彎曲和變形操作。l“更改區(qū)域形狀”工具 ：主要用于拉伸變形區(qū)

12、域指針外圓內(nèi)的所有選定路徑的區(qū)域。l“路徑洗刷”工具 ：用于更改路徑的外觀。使用不斷變化的壓力或速度，可以更改路徑的筆觸屬性。l“刀子”工具 ：能夠?qū)⒁粋€(gè)路徑分割成兩個(gè)或多個(gè)路徑。Web工具工具Web工具主要用于創(chuàng)建熱點(diǎn)切片，每個(gè)工具的作用如下。l“矩形熱點(diǎn)”工具 ：可以在圖像的目標(biāo)區(qū)域周圍繪制矩形熱點(diǎn)。l“圓形熱點(diǎn)”工具 ：可以在圖像的目標(biāo)區(qū)域周圍繪制圓形熱點(diǎn)。l“多邊形熱點(diǎn)”工具 ：可以在圖像的目標(biāo)區(qū)域周圍繪制多邊形熱點(diǎn)。l“切片”工具 ：實(shí)現(xiàn)圖像的矩形切片切割。Web工具工具l“多邊形切片”工具 ：可以實(shí)現(xiàn)圖像的多邊形形狀的切片切割。l“隱藏切片和熱點(diǎn)”工具 ：實(shí)現(xiàn)切片熱點(diǎn)視圖的隱藏。l

13、“顯示切片和熱點(diǎn)”工具 ：實(shí)現(xiàn)切片熱點(diǎn)視圖的顯示。顏色工具顏色工具 顏色工具主要用于設(shè)置填充顏色和描邊顏色。l“筆觸顏色” ：用于設(shè)置描邊的顏色。l“填充顏色” ：用于設(shè)置填充的顏色。l“設(shè)置默認(rèn)筆觸/填充色” ：將筆觸顏色和填充顏色設(shè)置為默認(rèn)值，即筆觸顏色為黑色，填充顏色為白色。l“沒(méi)有描邊或填充” ：設(shè)置沒(méi)有描邊或填充。l“交換筆觸/填充色” ：將筆觸顏色和填充顏色進(jìn)行交換。視圖工具視圖工具 視圖工具主要用于轉(zhuǎn)換屏幕的顯示模式。l“標(biāo)準(zhǔn)屏幕模式” ：將屏幕切換到“標(biāo)準(zhǔn)屏幕模式”顯示模式。l“帶有菜單的全屏模式” ：可以用來(lái)將屏幕切換到“帶有菜單的全屏模式”顯示模式。l“全屏模式” ：將屏幕

14、切換到“全屏模式”顯示模式。l“手形”工具 ：用于移動(dòng)畫布查看圖像。l“縮放”工具 ：放大或縮小畫布的顯示比例。6）“屬性屬性”面板面板p “屬性屬性”面板位于繪畫區(qū)域的下方，用來(lái)設(shè)置繪圖區(qū)域中面板位于繪畫區(qū)域的下方，用來(lái)設(shè)置繪圖區(qū)域中正在編輯的內(nèi)容的屬性?？梢赃x擇正在編輯的內(nèi)容的屬性?？梢赃x擇【窗口窗口】【屬性屬性】命命令或按令或按【Ctrl+F3】快捷鍵打開(kāi)或關(guān)閉快捷鍵打開(kāi)或關(guān)閉“屬性屬性”面板，根面板，根據(jù)當(dāng)前選擇工具和對(duì)象的不同，據(jù)當(dāng)前選擇工具和對(duì)象的不同，“屬性屬性”面板中所顯示的面板中所顯示的選項(xiàng)也會(huì)不同。選項(xiàng)也會(huì)不同。7）控制面板）控制面板p在在Fireworks 中有多個(gè)控制面

15、板，一般位中有多個(gè)控制面板，一般位于工作界面的右側(cè)。于工作界面的右側(cè)。p在默認(rèn)情況下有些面板沒(méi)有顯示，可以選在默認(rèn)情況下有些面板沒(méi)有顯示，可以選擇擇“窗口窗口”菜單中相應(yīng)的命令顯示或者隱菜單中相應(yīng)的命令顯示或者隱藏這些面板。藏這些面板。 Fireworks文檔操作文檔操作 pFireworks文檔的基本操作包括文檔的新文檔的基本操作包括文檔的新建、保存、打開(kāi)和導(dǎo)入的操作。建、保存、打開(kāi)和導(dǎo)入的操作。1）新建文檔）新建文檔p在在Fireworks中新建文檔的方法有以下幾中新建文檔的方法有以下幾種：種：在開(kāi)始頁(yè)中單擊“新建”欄中“Fireworks文檔”鏈接。選擇【文件】【新建】命令或按【Ctrl

16、+N】快捷鍵。單擊快捷工具欄中的“新建”按鈕 。 新建文檔新建文檔p 執(zhí)行新建文檔操作后將打開(kāi)執(zhí)行新建文檔操作后將打開(kāi) “新建文檔新建文檔”對(duì)話框，其各項(xiàng)含義如下對(duì)話框，其各項(xiàng)含義如下。 寬度：在文本框中輸入畫布寬度的數(shù)字，并選擇相應(yīng)的單位，包括“像素”、“英寸”和“厘米”三個(gè)選項(xiàng)。 高度：在文本框中輸入畫布高度的數(shù)字，并選擇相應(yīng)的單位，包括“像素”、“英寸”和“厘米”三個(gè)選項(xiàng)。 分辨率：在文本框中輸入畫布分辨率的數(shù)字。分辨率越高，則文件就越大，單位包括“像素英寸”和“像素厘米”兩個(gè)選項(xiàng)。“新建文檔新建文檔”對(duì)話框?qū)υ捒?2）保存文檔）保存文檔p 在在Fireworks中保存文檔有以下兩種方法

17、完成：中保存文檔有以下兩種方法完成：選擇【文件】【保存】命令或按【Ctrl+S】快捷鍵。單擊快捷工具欄中的“保存”按鈕 。p 如果文檔是第一次保存或選擇如果文檔是第一次保存或選擇【文件文件】【另存為另存為】命命令，則會(huì)打開(kāi)令，則會(huì)打開(kāi) “另存為另存為”對(duì)話框。在對(duì)話框中可以選對(duì)話框。在對(duì)話框中可以選擇保存文檔的位置和輸入文件的名稱，設(shè)置完成后單擊擇保存文檔的位置和輸入文件的名稱，設(shè)置完成后單擊 按鈕進(jìn)行保存。按鈕進(jìn)行保存。3）打開(kāi)文檔）打開(kāi)文檔p 在在Fireworks中打開(kāi)文檔有以下兩種方法：中打開(kāi)文檔有以下兩種方法：?jiǎn)螕艨旖莨ぞ邫谥械摹按蜷_(kāi)”按鈕 、選擇【文件】【打開(kāi)】命令或按【Ctrl+

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

19、rks文檔文檔p 本示例將新建一個(gè)本示例將新建一個(gè)Fireworks文檔，并在文檔中導(dǎo)入一幅圖像，然文檔，并在文檔中導(dǎo)入一幅圖像，然后保存文檔，主要練習(xí)新建文檔、導(dǎo)入圖像和保存文檔等操作。后保存文檔，主要練習(xí)新建文檔、導(dǎo)入圖像和保存文檔等操作。p 制作思路：制作思路： 1）啟動(dòng)Fireworks CS3。 2）新建文檔。 3）導(dǎo)入“鯊魚(yú).psd”圖像。 4）保存“鯊魚(yú).png”文檔。Fireworks基本操作基本操作 p 設(shè)置文檔的屬性就是在對(duì)圖像的編輯過(guò)程中，對(duì)繪圖文檔設(shè)置文檔的屬性就是在對(duì)圖像的編輯過(guò)程中，對(duì)繪圖文檔的大小、顏色以及分辨率等進(jìn)行調(diào)整或者修改。的大小、顏色以及分辨率等進(jìn)行調(diào)整

20、或者修改。p 圖像的基本概念包括像素、分辨率、顏色深度和圖像的基本概念包括像素、分辨率、顏色深度和Alpha通通道等概念。道等概念。像素和分辨率像素和分辨率p 像素是組成位圖的最基本單元。可以把像素看成是一個(gè)極像素是組成位圖的最基本單元。可以把像素看成是一個(gè)極小的方形的顏色塊，每個(gè)小方塊為一個(gè)像素。小的方形的顏色塊，每個(gè)小方塊為一個(gè)像素。p 圖像的圖像的分辨率分辨率是指圖像在單位尺寸上所包含的像素?cái)?shù)量。是指圖像在單位尺寸上所包含的像素?cái)?shù)量。圖像的圖像的分辨率分辨率與圖像的與圖像的精細(xì)度精細(xì)度和和圖像文件的大小圖像文件的大小有關(guān)。有關(guān)。顏色深度和顏色深度和Alpha通道通道p 顏色深度是指圖像中

21、可以顯示出的顏色數(shù)，在計(jì)算機(jī)中顏色深度是指圖像中可以顯示出的顏色數(shù)，在計(jì)算機(jī)中，通常采用顏色深度這一概念來(lái)說(shuō)明其處理色彩的能力，通常采用顏色深度這一概念來(lái)說(shuō)明其處理色彩的能力。p Alpha通道使用不同灰度值表示透明度的大小，通道使用不同灰度值表示透明度的大小，Alpha通通道的作用主要用于合成不同的圖像，實(shí)現(xiàn)混合疊加。道的作用主要用于合成不同的圖像，實(shí)現(xiàn)混合疊加。畫布操作畫布操作 p 在在Fireworks中，修改畫布的大小是通過(guò)在中，修改畫布的大小是通過(guò)在“畫布大小畫布大小”對(duì)話框中來(lái)完成的?？梢酝ㄟ^(guò)選擇對(duì)話框中來(lái)完成的?？梢酝ㄟ^(guò)選擇【修改修改】【畫布畫布】【畫布大小畫布大小】命令，或者在

22、文檔的命令，或者在文檔的“屬性屬性”面板中單擊面板中單擊 按鈕打開(kāi)按鈕打開(kāi)“畫布大小畫布大小”對(duì)話框。對(duì)話框。 改變畫布的背景顏色改變畫布的背景顏色p改變畫布的背景顏色是通過(guò)在改變畫布的背景顏色是通過(guò)在“畫布顏色畫布顏色”對(duì)話框中對(duì)話框中完成的。選擇完成的。選擇【修改修改】【畫布畫布】【畫布顏色畫布顏色】命命令，打開(kāi)令，打開(kāi)“畫布顏色畫布顏色”對(duì)話框。對(duì)話框。更改圖像大小更改圖像大小 p與改變畫布大小不同，調(diào)整圖像的大小將與改變畫布大小不同，調(diào)整圖像的大小將同時(shí)改變畫布和畫布中對(duì)象的大小。選擇同時(shí)改變畫布和畫布中對(duì)象的大小。選擇“修改修改”|“畫布畫布”|“圖像大小圖像大小”菜單命令菜單命令，

23、打開(kāi)，打開(kāi)“圖像大小圖像大小”對(duì)話框，在對(duì)話框，在“像素尺像素尺寸寸”文本框中輸入新的水平和垂直尺寸。文本框中輸入新的水平和垂直尺寸。 旋轉(zhuǎn)畫布旋轉(zhuǎn)畫布p 可以選擇可以選擇【修改修改】【畫布畫布】菜單下的命令對(duì)畫布進(jìn)行旋轉(zhuǎn)。菜單下的命令對(duì)畫布進(jìn)行旋轉(zhuǎn)。p 菜單中各項(xiàng)命令的含義如下。菜單中各項(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。修剪畫布修剪畫布p 通過(guò)通過(guò)Fireworks中的修剪畫布命令，可以使畫布的大小同繪中的修剪畫布命令，可以使畫布的大小同繪制圖像或者文字的大小相

24、匹配，從而減少文件量。制圖像或者文字的大小相匹配，從而減少文件量。p 選擇選擇【修改修改】【畫布畫布】【修剪畫布修剪畫布】命令或按命令或按【Ctrl+Alt+T】快捷鍵，修剪畫布?？旖萱I，修剪畫布。示例示例練習(xí)圖像的基本操作練習(xí)圖像的基本操作p 制作思路：制作思路： 新建一個(gè)500400像素的Fireworks文檔。 導(dǎo)入“海浪.psd”、“魚(yú)1.psd”、“魚(yú)2.psd”、“魚(yú)3.psd”和“魚(yú)4.psd” 共五幅圖像。 重新設(shè)置畫布大小 旋轉(zhuǎn)畫布 修剪畫布使用標(biāo)尺、輔助線和網(wǎng)格使用標(biāo)尺、輔助線和網(wǎng)格 p使用標(biāo)尺和輔助線可以盡可能精確地對(duì)對(duì)使用標(biāo)尺和輔助線可以盡可能精確地對(duì)對(duì)象進(jìn)行布局以及執(zhí)

25、行各種繪制操作。用戶象進(jìn)行布局以及執(zhí)行各種繪制操作。用戶可以將輔助線放在文檔中并使對(duì)象與這些可以將輔助線放在文檔中并使對(duì)象與這些輔助線對(duì)齊，或者啟用輔助線對(duì)齊，或者啟用Fireworks網(wǎng)格并網(wǎng)格并使對(duì)象與網(wǎng)格對(duì)齊。使對(duì)象與網(wǎng)格對(duì)齊。p通過(guò)選擇通過(guò)選擇“視圖視圖”|“標(biāo)尺標(biāo)尺”菜單命令可以菜單命令可以顯示和隱藏標(biāo)尺。如果打開(kāi)標(biāo)尺，垂直和顯示和隱藏標(biāo)尺。如果打開(kāi)標(biāo)尺，垂直和水平標(biāo)尺會(huì)出現(xiàn)在文檔窗口的邊緣。水平標(biāo)尺會(huì)出現(xiàn)在文檔窗口的邊緣。使用標(biāo)尺、輔助線和網(wǎng)格使用標(biāo)尺、輔助線和網(wǎng)格p 輔助線是從標(biāo)尺拖到文檔畫布上的線條。它們可作為幫輔助線是從標(biāo)尺拖到文檔畫布上的線條。它們可作為幫助放置和對(duì)齊對(duì)象的

26、輔助繪制工具，也可以使用輔助線助放置和對(duì)齊對(duì)象的輔助繪制工具，也可以使用輔助線來(lái)標(biāo)記文檔的重要部分，如邊距、文檔中心點(diǎn)和要在其來(lái)標(biāo)記文檔的重要部分，如邊距、文檔中心點(diǎn)和要在其中精確地進(jìn)行工作的區(qū)域。中精確地進(jìn)行工作的區(qū)域。p 創(chuàng)建水平或垂直輔助線的方法是：在水平或垂直標(biāo)尺上創(chuàng)建水平或垂直輔助線的方法是：在水平或垂直標(biāo)尺上按下鼠標(biāo)左鍵進(jìn)行拖動(dòng)，在畫布上定位輔助線并釋放鼠按下鼠標(biāo)左鍵進(jìn)行拖動(dòng)，在畫布上定位輔助線并釋放鼠標(biāo)按鈕。注意：可以通過(guò)反復(fù)拖動(dòng)輔助線來(lái)重新確定其標(biāo)按鈕。注意：可以通過(guò)反復(fù)拖動(dòng)輔助線來(lái)重新確定其位置。位置。使用標(biāo)尺、輔助線和網(wǎng)格使用標(biāo)尺、輔助線和網(wǎng)格p 網(wǎng)格在畫布上顯示一個(gè)由橫線

27、和豎線構(gòu)成的體系，網(wǎng)格網(wǎng)格在畫布上顯示一個(gè)由橫線和豎線構(gòu)成的體系，網(wǎng)格對(duì)于精確放置對(duì)象非常有用。此外，用戶可以查看和編對(duì)于精確放置對(duì)象非常有用。此外，用戶可以查看和編輯網(wǎng)格、調(diào)整網(wǎng)格大小以及更改網(wǎng)格的顏色。輯網(wǎng)格、調(diào)整網(wǎng)格大小以及更改網(wǎng)格的顏色。p 注意：網(wǎng)格既不駐留在層上，也不隨文檔一起導(dǎo)出。它注意：網(wǎng)格既不駐留在層上，也不隨文檔一起導(dǎo)出。它只是一種設(shè)計(jì)工具。只是一種設(shè)計(jì)工具。p 網(wǎng)格的主要設(shè)置方法如下。網(wǎng)格的主要設(shè)置方法如下。 顯示和隱藏網(wǎng)格：選擇“視圖”|“網(wǎng)格”|“顯示網(wǎng)格”菜單項(xiàng)。 使對(duì)象與網(wǎng)格對(duì)齊：選擇“視圖”|“網(wǎng)格”|“對(duì)齊網(wǎng)格”。 設(shè)置首選參數(shù)和快捷鍵設(shè)置首選參數(shù)和快捷鍵 p

28、設(shè)置首選參數(shù)的方法如下：設(shè)置首選參數(shù)的方法如下：（1）選擇“編輯”|“首選參數(shù)”菜單命令，打開(kāi)“首選參數(shù)”對(duì)話框。（2）選擇要修改的首選參數(shù)組：“常規(guī)”、“編輯”、“啟動(dòng)并編輯”、“文件夾”或“導(dǎo)入”。 （3）更改參數(shù)后單擊“確定”完成。 設(shè)置首選參數(shù)和快捷鍵設(shè)置首選參數(shù)和快捷鍵p“文件夾文件夾”參數(shù)為用戶提供了對(duì)來(lái)自外部參數(shù)為用戶提供了對(duì)來(lái)自外部源的其它源的其它Photoshop插件、紋理文件和圖插件、紋理文件和圖案文件的訪問(wèn)案文件的訪問(wèn) 設(shè)置首選參數(shù)和快捷鍵設(shè)置首選參數(shù)和快捷鍵p下圖所示效果是利用下圖所示效果是利用Photoshop插件插件EyeCandy 4.0 中的火焰效果制作的特殊中

29、的火焰效果制作的特殊文字。注意本示例中采用的插件和字體（文字。注意本示例中采用的插件和字體（方正活意簡(jiǎn)體）均可從網(wǎng)上下載。方正活意簡(jiǎn)體）均可從網(wǎng)上下載。操作的撤消與重復(fù)操作的撤消與重復(fù) p使用使用“歷史記錄歷史記錄”面板可以查看、修改和面板可以查看、修改和重復(fù)操作文檔過(guò)程中所進(jìn)行的動(dòng)作。在該重復(fù)操作文檔過(guò)程中所進(jìn)行的動(dòng)作。在該面板中列出了最近在面板中列出了最近在Fireworks中執(zhí)行的中執(zhí)行的操作及次序，所列動(dòng)作個(gè)數(shù)最多不超過(guò)在操作及次序，所列動(dòng)作個(gè)數(shù)最多不超過(guò)在 Fireworks“首選參數(shù)首選參數(shù)”對(duì)話框的對(duì)話框的“撤消步撤消步驟驟”域中指定的數(shù)值域中指定的數(shù)值 修剪文檔修剪文檔p 操作

30、方法如下：操作方法如下：p （1）從）從“工具工具”面板中選擇面板中選擇“裁切裁切”工具，或者選擇工具，或者選擇“編編輯輯”“裁剪所選位圖裁剪所選位圖”菜單。菜單。p （2）在畫布上拖動(dòng)鼠標(biāo)。并調(diào)整修剪手柄，直到邊框包圍）在畫布上拖動(dòng)鼠標(biāo)。并調(diào)整修剪手柄，直到邊框包圍要保留的文檔區(qū)域?yàn)橹埂ＲＡ舻奈臋n區(qū)域?yàn)橹埂?p （3）在邊框中雙擊或者按下）在邊框中雙擊或者按下Enter鍵以修剪文檔。鍵以修剪文檔。 Fireworks制作實(shí)例制作實(shí)例 p我們將通過(guò)實(shí)例介紹如何利用我們將通過(guò)實(shí)例介紹如何利用Fireworks CS3制作網(wǎng)頁(yè)圖片，通過(guò)它們進(jìn)一步學(xué)習(xí)制作網(wǎng)頁(yè)圖片，通過(guò)它們進(jìn)一步學(xué)習(xí)Firewor

31、ks CS3工具和面板的靈活使用。工具和面板的靈活使用。 個(gè)性化圖標(biāo)個(gè)性化圖標(biāo) p （1）啟動(dòng)）啟動(dòng)Fireworks cs3，創(chuàng)建寬度為，創(chuàng)建寬度為300像素，高度為像素，高度為200像素，像素，顏色為白色，分辨率為顏色為白色，分辨率為72像素像素/英寸的畫布。英寸的畫布。p （2）選擇工具欄中的）選擇工具欄中的“橢圓橢圓”工具，在工具，在“屬性屬性”面板中設(shè)置填充面板中設(shè)置填充類別為類別為“放射狀放射狀”，單擊填充顏色旁邊的下拉按鈕，打開(kāi)，單擊填充顏色旁邊的下拉按鈕，打開(kāi)“編輯編輯填充填充”對(duì)話框，分別選擇放射狀起始點(diǎn)顏色為對(duì)話框，分別選擇放射狀起始點(diǎn)顏色為#FFFF33，終止點(diǎn)的，終止點(diǎn)

32、的顏色為顏色為#FF3300。p （3）按?。┌醋hift鍵拖動(dòng)鼠標(biāo)在畫布畫一個(gè)圓，然后拖動(dòng)圓鍵拖動(dòng)鼠標(biāo)在畫布畫一個(gè)圓，然后拖動(dòng)圓“放射狀放射狀”手柄的二個(gè)控制點(diǎn)，顏色深的一方在上（方形手柄點(diǎn)），顏色手柄的二個(gè)控制點(diǎn)，顏色深的一方在上（方形手柄點(diǎn)），顏色淺的一方在下（圓形手柄點(diǎn)），使之正好平分圓。淺的一方在下（圓形手柄點(diǎn)），使之正好平分圓。 個(gè)性化圖標(biāo)個(gè)性化圖標(biāo)p （4）選擇）選擇“橢圓橢圓”工具再繪制一個(gè)小橢圓，在工具再繪制一個(gè)小橢圓，在“屬性屬性”面板中設(shè)置填充面板中設(shè)置填充類別為類別為“線性線性”，在，在“編輯填充編輯填充”對(duì)話框中選擇顏色均為白色，設(shè)置其中對(duì)話框中選擇顏色均為白色，設(shè)

33、置其中一個(gè)不透明樣本的透明度為一個(gè)不透明樣本的透明度為0。p （5）接下來(lái)再調(diào)整）接下來(lái)再調(diào)整“線性線性”手柄的位置，使透明的一邊在下方，白色部手柄的位置，使透明的一邊在下方，白色部分在上方，這樣就能體現(xiàn)出球體的高光，讓球體呈現(xiàn)立體感。分在上方，這樣就能體現(xiàn)出球體的高光，讓球體呈現(xiàn)立體感。p （6）將剛才畫出的小橢圓復(fù)制一份，并放置在大圓內(nèi)部下方區(qū)域。在）將剛才畫出的小橢圓復(fù)制一份，并放置在大圓內(nèi)部下方區(qū)域。在“屬性屬性”面板中設(shè)置其填充類別為面板中設(shè)置其填充類別為“放射狀放射狀”，圖層的不透明度為，圖層的不透明度為80%。用。用戶可根據(jù)需要調(diào)整戶可根據(jù)需要調(diào)整“放射狀放射狀”手柄。手柄。p

34、（7）利用）利用“對(duì)齊對(duì)齊”面板將兩個(gè)橢圓對(duì)齊。面板將兩個(gè)橢圓對(duì)齊。p （8）在）在“層層”面板中選中大圓，單擊面板中選中大圓，單擊“屬性屬性”面板中的面板中的“添加效果添加效果”按按鈕，選擇鈕，選擇“陰影和光暈陰影和光暈”|“內(nèi)側(cè)發(fā)光內(nèi)側(cè)發(fā)光”，設(shè)置顏色為，設(shè)置顏色為#FF3300、寬度為、寬度為2、不透明度為不透明度為80%、柔化為、柔化為8、偏移為、偏移為0。p （9）選取工具箱中的）選取工具箱中的“文本文本”工具，在工具，在“屬性屬性”面板中選擇字體和文字面板中選擇字體和文字大小，然后輸入自己的英文名，如大小，然后輸入自己的英文名，如“David”。個(gè)性化圖標(biāo)個(gè)性化圖標(biāo)p （10）單擊

35、）單擊“屬性屬性”面板中的面板中的“添加效果添加效果”按鈕，選擇按鈕，選擇“陰影和陰影和光暈光暈”|“投影投影”，設(shè)置距離為，設(shè)置距離為3、不透明度為、不透明度為65%、柔化為、柔化為4、其他、其他參數(shù)采用默認(rèn)值。參數(shù)采用默認(rèn)值。p （11）在畫布中再繪制一個(gè)橢圓，作為球體的陰影，在）在畫布中再繪制一個(gè)橢圓，作為球體的陰影，在“屬性屬性”面面板中設(shè)置填充顏色為板中設(shè)置填充顏色為#66666、填充類別為實(shí)心、邊緣羽化為、填充類別為實(shí)心、邊緣羽化為13，圖層的不透明度為圖層的不透明度為70%。p （12）將橢圓拖到球體下方，右擊打開(kāi)快捷菜單，選擇）將橢圓拖到球體下方，右擊打開(kāi)快捷菜單，選擇“排列排

36、列”|“下移一層下移一層”命令將它疊放到球體后面，效果如圖命令將它疊放到球體后面，效果如圖2-29所示。所示。 p （13）選擇工具箱中的）選擇工具箱中的“橢圓橢圓”工具，按住工具，按住Shift鍵再畫一個(gè)圓形鍵再畫一個(gè)圓形圖案，在圖案，在“屬性屬性”面板中設(shè)置填充類別為無(wú)，邊框顏色為無(wú)，其面板中設(shè)置填充類別為無(wú)，邊框顏色為無(wú)，其他參數(shù)采用默認(rèn)值。他參數(shù)采用默認(rèn)值。p （14）選擇工具箱中的）選擇工具箱中的“文本文本”工具，輸入自己的工具，輸入自己的Email地址地址“”，在，在“屬性屬性”面板中設(shè)置文字大小為面板中設(shè)置文字大小為16、顏色、顏色為為#3399FF，其他參數(shù)采用默認(rèn)值。，其他參

37、數(shù)采用默認(rèn)值。p （15）將前面完成的球體部分放在圓形的中間。）將前面完成的球體部分放在圓形的中間。 個(gè)性化圖標(biāo)個(gè)性化圖標(biāo)p（16）同時(shí)選中文本和圓形，然后選擇）同時(shí)選中文本和圓形，然后選擇“文本文本”|“附加到路徑附加到路徑”命令，將文字對(duì)象命令，將文字對(duì)象附加到路徑上，此時(shí)可以用附加到路徑上，此時(shí)可以用“傾斜傾斜”工具工具旋轉(zhuǎn)文字，使之恰好放在圖標(biāo)底部。旋轉(zhuǎn)文字，使之恰好放在圖標(biāo)底部。p（17）將制作完成的水晶球個(gè)性化圖標(biāo)保）將制作完成的水晶球個(gè)性化圖標(biāo)保存到文件中。存到文件中。網(wǎng)頁(yè)按鈕網(wǎng)頁(yè)按鈕 p 按鈕是網(wǎng)頁(yè)中的重要元素，以下通過(guò)實(shí)例講解如何利用按鈕是網(wǎng)頁(yè)中的重要元素，以下通過(guò)實(shí)例講解如

38、何利用Fireworks 制作按鈕。制作按鈕。p （1）創(chuàng)建）創(chuàng)建300200像素新文檔，繪制一個(gè)矩形，修改屬性檢查器像素新文檔，繪制一個(gè)矩形，修改屬性檢查器面板中的矩形圓度值為面板中的矩形圓度值為100，將矩形四角轉(zhuǎn)換成圓角樣式。，將矩形四角轉(zhuǎn)換成圓角樣式。p （2）將矩形寬度設(shè)為）將矩形寬度設(shè)為150，高度設(shè)為，高度設(shè)為48，并用顏色，并用顏色#FF6600填充。填充。p （3）為此圓角矩形增加效果，單擊屬性檢查器中增加效果按鈕，）為此圓角矩形增加效果，單擊屬性檢查器中增加效果按鈕，彈出效果快捷菜單，然后選擇彈出效果快捷菜單，然后選擇“斜角和浮雕斜角和浮雕”|“內(nèi)斜角內(nèi)斜角”命令，設(shè)命令，

39、設(shè)置斜角邊緣形狀為平坦，寬度為置斜角邊緣形狀為平坦，寬度為7像素，其它參數(shù)采用默認(rèn)值，效像素，其它參數(shù)采用默認(rèn)值，效果如下圖所示。果如下圖所示。網(wǎng)頁(yè)按鈕網(wǎng)頁(yè)按鈕p （4）在）在Fireworks中有相當(dāng)成熟的色彩層次調(diào)整工具。中有相當(dāng)成熟的色彩層次調(diào)整工具。用戶可以執(zhí)行用戶可以執(zhí)行“濾鏡濾鏡”|“調(diào)整色彩調(diào)整色彩”菜單中的各項(xiàng)命令菜單中的各項(xiàng)命令對(duì)圖形的色彩進(jìn)行全方位調(diào)整。對(duì)圖形的色彩進(jìn)行全方位調(diào)整。p （5）選擇）選擇“濾鏡濾鏡”|“調(diào)整色彩調(diào)整色彩”|“曲線曲線”菜單命令，打菜單命令，打開(kāi)曲線對(duì)話框修改圖像的光影層次效果。開(kāi)曲線對(duì)話框修改圖像的光影層次效果。p （6）選擇）選擇“濾鏡濾鏡”

40、|“色彩調(diào)整色彩調(diào)整”|“色相色相/飽和度飽和度”菜單菜單命令，為按鈕上色。命令，為按鈕上色。p （7）在制作好的按鈕造型上，使用文本工具輸入文字）在制作好的按鈕造型上，使用文本工具輸入文字“HOME”，調(diào)整字體類型和大小，也可調(diào)整圓角矩形，調(diào)整字體類型和大小，也可調(diào)整圓角矩形大小，并使二者居中對(duì)齊。大小，并使二者居中對(duì)齊。p （8）使用滴管工具吸取按鈕中間色調(diào)，并為字體填充）使用滴管工具吸取按鈕中間色調(diào)，并為字體填充該色。選擇效果菜單中的該色。選擇效果菜單中的“斜角和浮雕斜角和浮雕”|“內(nèi)斜角內(nèi)斜角”命命令，為字體添加凹陷的立體化效果。令，為字體添加凹陷的立體化效果。 網(wǎng)頁(yè)按鈕網(wǎng)頁(yè)按鈕p （

41、9）在屬性面板上調(diào)整字體的透明度為）在屬性面板上調(diào)整字體的透明度為85，使文本的，使文本的凹陷效果顯得更加自然逼真。凹陷效果顯得更加自然逼真。p （10）為按鈕添加投影，設(shè)置距離為）為按鈕添加投影，設(shè)置距離為7像素，不透明度像素，不透明度為為32%，其他參數(shù)采用默認(rèn)值。完成的按鈕如下圖所示，其他參數(shù)采用默認(rèn)值。完成的按鈕如下圖所示。p （11）將制作完成的網(wǎng)頁(yè)按鈕圖形保存到文件中。）將制作完成的網(wǎng)頁(yè)按鈕圖形保存到文件中。 彈出式菜單彈出式菜單 p 當(dāng)用戶將鼠標(biāo)移動(dòng)到某些網(wǎng)頁(yè)對(duì)象上時(shí)，瀏覽器中將顯示彈出菜單。用戶當(dāng)用戶將鼠標(biāo)移動(dòng)到某些網(wǎng)頁(yè)對(duì)象上時(shí)，瀏覽器中將顯示彈出菜單。用戶可以將可以將URL鏈

42、接附加到彈出菜單項(xiàng)以便于導(dǎo)航。例如，可以使用彈出菜單鏈接附加到彈出菜單項(xiàng)以便于導(dǎo)航。例如，可以使用彈出菜單來(lái)組織與導(dǎo)航欄中的某個(gè)按鈕相關(guān)的若干個(gè)導(dǎo)航選項(xiàng)，也可以根據(jù)需要在來(lái)組織與導(dǎo)航欄中的某個(gè)按鈕相關(guān)的若干個(gè)導(dǎo)航選項(xiàng)，也可以根據(jù)需要在彈出菜單中創(chuàng)建任意多級(jí)子菜單。彈出菜單中創(chuàng)建任意多級(jí)子菜單。p （1）利用繪圖工具欄中的鋼筆工具繪制菜單背景樣式，設(shè)置填充色為）利用繪圖工具欄中的鋼筆工具繪制菜單背景樣式，設(shè)置填充色為#FFFF66，沒(méi)有邊框線，并輸入文字，沒(méi)有邊框線，并輸入文字“小雨的個(gè)人網(wǎng)站小雨的個(gè)人網(wǎng)站”，并將字體設(shè)置，并將字體設(shè)置為為“華文行楷華文行楷” 。p （2）繪制一個(gè)）繪制一個(gè)88

43、25的矩形，設(shè)置填充色為的矩形，設(shè)置填充色為#FFCC33，邊框線顏色為，邊框線顏色為#FFFF66。選擇效果快捷菜單中的。選擇效果快捷菜單中的“斜角和浮雕斜角和浮雕”|“凹入浮雕凹入浮雕”命令為矩命令為矩形添加立體效果，設(shè)置寬度為形添加立體效果，設(shè)置寬度為2像素，其他參數(shù)采用默認(rèn)值。像素，其他參數(shù)采用默認(rèn)值。p （3）按?。┌醋lt鍵移動(dòng)立體矩形，將其復(fù)制鍵移動(dòng)立體矩形，將其復(fù)制4個(gè)，為制作按鈕做準(zhǔn)備。個(gè)，為制作按鈕做準(zhǔn)備。彈出式菜單彈出式菜單p （4）將制作好的零部件水平排列整齊，在每一個(gè)立體）將制作好的零部件水平排列整齊，在每一個(gè)立體矩形上輸入相應(yīng)文字，并為文字設(shè)置矩形上輸入相應(yīng)文字，并為文字設(shè)置“凸起浮雕凸起浮雕”效果效果，形成靜態(tài)按鈕，也就做好了網(wǎng)頁(yè)的水平菜單條。，形成靜態(tài)按鈕，也就做好了網(wǎng)頁(yè)的水平菜單條。p （5）單擊）單擊Web工具箱中的工具箱中的“矩形熱點(diǎn)矩形熱點(diǎn)”工具，為其中工具，為其中一個(gè)按鈕繪制熱區(qū)。一個(gè)按鈕繪制熱區(qū)。p （6）選擇）選擇“修改修改”|“彈出菜單彈出菜單”|“添加彈出菜單添加彈出菜單”命令命令，為指定的按鈕設(shè)置下拉菜單。，為指定的按鈕設(shè)置下拉菜單。彈出式菜單彈出式菜單p （7）在打開(kāi)的）在