網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目四

1、網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目四利用Fireworks CS6制作網(wǎng)頁(yè)認(rèn)識(shí)Fireworks CS61制作網(wǎng)站LOGO中的各類字體2制作網(wǎng)站LOGO中的各類圖形3添加濾鏡與制作動(dòng)畫4任務(wù)1認(rèn)識(shí)Fireworks CS6Fireworks CS6的主界面工作區(qū)工具條“屬性”面板組合面板任務(wù)1認(rèn)識(shí)Fireworks CS6一、Fireworks CS6的特色1面板部分工作界面的調(diào)整、變化2菜單部分菜單命令的增強(qiáng)、重組3實(shí)戰(zhàn)操作工作流程的快捷、輕松任務(wù)1認(rèn)識(shí)Fireworks CS6二、Fireworks CS6的主要面板“圖像編輯”面板“自動(dòng)形狀屬性”面板“層”面板123任務(wù)2制作網(wǎng)站LOGO中的各類字體立體

2、字體金屬字體透視文字特效環(huán)形字體印章文字立體字效果效果盡顯的金屬文字透視陰影效果圖環(huán)形文字效果圖印章效果圖任務(wù)3制作網(wǎng)站LOGO中的各類圖形制作圓角按鈕制作心形光暈圖制作奧林匹克五環(huán)旗示范按鈕光暈效果心形圖奧運(yùn)五環(huán)效果圖任務(wù)4添加濾鏡與制作動(dòng)畫一、制作旋轉(zhuǎn)文字動(dòng)畫(1)建立新文件。啟動(dòng)Fireworks CS6，按Ctrl+N組合鍵新建一個(gè)工作區(qū)，設(shè)置工作區(qū)的寬度為400，高度為300,顏色為藍(lán)色，其余為默認(rèn)值。(2)輸人文本。首先單擊文本工具，設(shè)置參數(shù)如下:字體為華文行楷，大小為20,顏色為紅色(#FF0000)，其余為默認(rèn)值。然后在文本框中輸入文字，單擊“確定”按鈕。用箭頭工具選擇并移動(dòng)文

3、本到工作區(qū)稍微靠上的位置，接著在濾鏡中選擇“陰影和光暈”一“光暈”命令，設(shè)置具體參數(shù)如下:寬度為2，柔化度為1，顏色為黃色(# FFFF00)，透明度為6500，如圖所示。此時(shí)文本效果如圖所示。發(fā)光屬性設(shè)置文本效果任務(wù)4添加濾鏡與制作動(dòng)畫一、制作旋轉(zhuǎn)文字動(dòng)畫(3)制作文本圖形的分布路徑。文本附加到路徑文本屬性設(shè)置任務(wù)4添加濾鏡與制作動(dòng)畫一、制作旋轉(zhuǎn)文字動(dòng)畫(4)開始制作動(dòng)畫。“轉(zhuǎn)化為元件”對(duì)話框文本轉(zhuǎn)化為元件任務(wù)4添加濾鏡與制作動(dòng)畫一、制作旋轉(zhuǎn)文字動(dòng)畫(5)克隆其他圖例?？寺〔⑿D(zhuǎn)多個(gè)元件任務(wù)4添加濾鏡與制作動(dòng)畫一、制作旋轉(zhuǎn)文字動(dòng)畫(6)創(chuàng)建動(dòng)畫。補(bǔ)間實(shí)例分散到各狀態(tài)任務(wù)4添加濾鏡與制作動(dòng)畫一

4、、制作旋轉(zhuǎn)文字動(dòng)畫(7)輸出動(dòng)畫。圖像預(yù)覽導(dǎo)出設(shè)置任務(wù)4添加濾鏡與制作動(dòng)畫一、制作旋轉(zhuǎn)文字動(dòng)畫旋轉(zhuǎn)文字的最終效果圖任務(wù)4添加濾鏡與制作動(dòng)畫二、制作閃字(1)打開Fireworks CS6軟件，新建一個(gè)白色背景的畫布，畫布大小設(shè)置為390 X 68像素，如圖所示。(2)使用左邊工具條中的文本工具在畫布中輸入文字，然后在下方“屬性”面板中調(diào)整文本的大小和字體，并將消除鋸齒級(jí)別設(shè)置為“強(qiáng)力消除鋸齒”，如圖所示。“新建文檔”對(duì)話框文字設(shè)置任務(wù)4添加濾鏡與制作動(dòng)畫二、制作閃字(3)在“狀態(tài)”面板中將狀態(tài)1拖到“新建/重制狀態(tài)”按鈕上，重復(fù)2次，共制作成3個(gè)狀態(tài)，如圖所示。一般是看閃底素材有多少個(gè)狀態(tài)，然

5、后就制作多少個(gè)狀態(tài)。(4)編輯閃底素材。一般的閃底并不是想要的大小，有時(shí)會(huì)比字小，所以就需要編輯一下。首先打開閃底素材，單擊下方“屬性”面板中的“畫布大小”按鈕，調(diào)整為閃字畫布大小，如圖所示。添加狀態(tài)更改畫布大小任務(wù)4添加濾鏡與制作動(dòng)畫二、制作閃字(5)在“狀態(tài)”面板中單擊洋蔥皮按鈕，勾選“多狀態(tài)編輯”，并將結(jié)束狀態(tài)滑塊拖到最后一個(gè)狀態(tài)上，框選所有圖像內(nèi)容，如圖所示。(6)框選中的是三個(gè)狀態(tài)中的對(duì)象，使用移動(dòng)工具將對(duì)象移到畫布最左邊，然后按Alt鍵并選擇“移動(dòng)復(fù)制對(duì)象至滿畫布”，閃底效果如圖所示，然后保存并關(guān)閉閃底。多狀態(tài)編輯閃底效果圖任務(wù)4添加濾鏡與制作動(dòng)畫二、制作閃字(7)回到閃字的制作畫

6、布中，選擇菜單中的“文件”“導(dǎo)人”命令或按Ctrl+R組合鍵，導(dǎo)入剛才修改并保存的閃底素材圖，如圖所示。導(dǎo)人圖片任務(wù)4添加濾鏡與制作動(dòng)畫二、制作閃字(8)導(dǎo)人后會(huì)看到動(dòng)畫元件布滿了整個(gè)畫布，如圖所示。選中閃圖，按Ctrl+X組合鍵剪切下來。任務(wù)4添加濾鏡與制作動(dòng)畫二、制作閃字(9)單擊狀態(tài)1中的文字并將其選中，選擇菜單中的“編輯”“粘貼于內(nèi)部”命令，如圖所示。將文字粘貼于內(nèi)部任務(wù)4添加濾鏡與制作動(dòng)畫二、制作閃字(10)這時(shí)閃字動(dòng)畫已經(jīng)制作好，預(yù)覽效果如圖所示。閃字動(dòng)畫預(yù)覽效果(11)閃字動(dòng)畫制作完成后，接下來就是將這個(gè)閃字圖像保存為GIF動(dòng)畫格式。任務(wù)4添加濾鏡與制作動(dòng)畫三、制作電視中的動(dòng)畫(

7、1)啟動(dòng)Fireworks CS6，在起始界面中選擇“文件”一“新建”命令，打開“新建文檔”對(duì)話框，設(shè)置畫布寬度為300像素，畫布高度為300像素，分辨率為72像素/英寸，畫布底色為白色，然后單擊“確定”按鈕，出現(xiàn)編輯文檔。(2)單擊工具箱中的圓角矩形工具，在“屬性”面板中選擇不使用填充顏色，線條顏色為黑色，并選擇“1像素柔化”類型，如圖所示。在畫布中某一點(diǎn)按下鼠標(biāo)并拖動(dòng)，畫出一個(gè)矩形，使矩形的中心大致在圖形文檔的中心偏上方一點(diǎn)，然后調(diào)整圓角矩形的調(diào)節(jié)點(diǎn)，直至達(dá)到滿意的效果。設(shè)置圓角矩形的屬性任務(wù)4添加濾鏡與制作動(dòng)畫三、制作電視中的動(dòng)畫(3)在畫布中的矩形框外單擊鼠標(biāo)，使鼠標(biāo)沒有選中任何圖形。

8、單擊工具箱中的圓角矩形工具，在畫布上畫出矩形，然后調(diào)整所畫的圓角矩形的調(diào)節(jié)點(diǎn)，使兩個(gè)圓角矩形在畫布中的位置如圖所示。(4)單擊工具箱中的矩形工具，在畫布上兩個(gè)圓角矩形的下方畫一個(gè)矩形，并使其上邊與原來大矩形的下邊重合。(5)單擊工具箱中的畫線工具，在步驟(4)中所畫的矩形的下方畫兩條斜線，然后利用矩形工具在斜線下方畫出作為底座的矩形，如圖所示。兩個(gè)圓角矩形的位置兩個(gè)矩形和兩條斜線的位置任務(wù)4添加濾鏡與制作動(dòng)畫三、制作電視中的動(dòng)畫(6)在屏幕的右下角畫一個(gè)開關(guān)，其操作為:在工具箱中選擇橢圓工具，畫出小圓后選擇漸變填充，填充的邊緣選擇放射狀填充，從白色向藍(lán)色過渡，從而增加立體效果，使小圓變成小球，

9、如圖所示。(7)在“圖層”面板中單擊層1的名字，用工具箱中的矩形切片工具在小的圓角矩形內(nèi)畫出一個(gè)矩形切片，這時(shí)畫布被分成很多部分，選中遮蓋矩形的四框，如圖所示。環(huán)形按鈕的位置和效果創(chuàng)建切片區(qū)域任務(wù)4添加濾鏡與制作動(dòng)畫三、制作電視中的動(dòng)畫(8)在“屬性”面板最左邊的文本框中顯示的是切片對(duì)象的缺省名稱，這里把它修改為“monitor，切片導(dǎo)出設(shè)置選擇“GIF接近網(wǎng)頁(yè)128色”，如圖所示。(9)同步驟(7)，在工具箱中選擇切片工具，然后畫出一個(gè)矩形切片，由左上角拖至右下角，使畫出的矩形將小球覆蓋，如圖所示。在如圖所示的“屬性”面板中，切片屬性設(shè)置切片繪制任務(wù)4添加濾鏡與制作動(dòng)畫三、制作電視中的動(dòng)畫(10)選中覆蓋小圓球的切片，此時(shí)切片中心會(huì)出現(xiàn)一個(gè)圓形手柄，在此處右擊鼠標(biāo)，會(huì)彈出如圖所示的菜單，選擇“添加交換圖像行為”選項(xiàng)。(11)彈出“交換圖像”對(duì)話框，選擇要替代的切片是電視屏幕所在的切片monitor，并選擇替代源為“圖像文件”，然后單擊文本框后面的瀏覽按鈕，打開資源管理器，選擇一個(gè)動(dòng)畫文件(用實(shí)例1中的