使用Fireworks創(chuàng)建Web對象

《使用Fireworks創(chuàng)建Web對象》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、第7章使用Fireworks創(chuàng)建Web對象Fireworks8提供了許多專門針對網(wǎng)頁制作的功能，可以直接制作與圖像有關(guān)的網(wǎng)頁對象，如GIF動畫、交互按鈕、彈出菜單、圖像地圖等，還可以生成可以方便頁面布局設(shè)計、提高網(wǎng)頁傳輸速度的切片網(wǎng)頁。另外，F(xiàn)ireworks8還能對圖形進(jìn)行優(yōu)化和導(dǎo)出，達(dá)到圖像顏色、壓縮和品質(zhì)的最佳組合。7.1制作GIF動畫動畫相當(dāng)于將連續(xù)的多幅圖像逐個顯示，網(wǎng)頁中常用的GIF89a格式的圖像動畫，這種動畫特別適合動作效果簡單、顏色不復(fù)雜的動畫。Fireworks8可以直接生成GIF動畫，還可以將動畫作為Flash的SWF

2、格式文件導(dǎo)出或直接導(dǎo)入到Flash中進(jìn)行編輯。創(chuàng)建動畫創(chuàng)建動畫前首先要將要產(chǎn)生運動效果的對象單獨放在一個層中。1．創(chuàng)建動畫2．查看和修改動畫效果使用“幀”面板使用“幀”面板可以設(shè)置更詳細(xì)的動畫效果，還可以方便地編輯動畫效果。1．編輯幀2．設(shè)置動畫播放次數(shù)3．同時查看多幀4．設(shè)置幀延時時間5．在幀間共享層【實例7.1】制作一個文字在畫面上由左到右沿曲線運動的動畫效果。將多個文件用作一個動畫Fireworks可基于一組圖像文件創(chuàng)建一個動畫。例如，打開幾個現(xiàn)有的圖形并將它們放在同一文檔中的不同幀中，就可以創(chuàng)建一個橫幅廣告?！緦嵗?.2】制作一個橫

3、幅廣告。導(dǎo)出動畫動畫制作完成后，可以將動畫文件導(dǎo)出為GIF格式的文件或Flash文件。1．導(dǎo)出為GIF2．導(dǎo)出為Flash動畫7.2切片和熱點使用熱點和切片可以直接制作網(wǎng)頁對象，生成HTML文件。使用切片切片將Fireworks文檔分割成多個較小部分，并將每部分導(dǎo)出為單獨的文件?！緦嵗?.3】將網(wǎng)頁設(shè)計效果圖使用切片處理。1．創(chuàng)建切片2．編輯切片3．添加超鏈接4．制作交換圖像5．添加行為導(dǎo)出切片包含切片的圖像可以導(dǎo)出為網(wǎng)頁文件，通過Dreamweaver等網(wǎng)頁編輯軟件編輯，或在瀏覽器中瀏覽。1．導(dǎo)出切片2．導(dǎo)出的文件3．編輯切片網(wǎng)頁創(chuàng)建熱點

4、使用Fireworks創(chuàng)建熱點類似于在制作圖像地圖，可使圖像的一部分成為超鏈接對象。1．創(chuàng)建熱點2．設(shè)置熱點3．編輯熱點4．添加行為5．導(dǎo)出熱點圖像7.3制作按鈕和彈出菜單按鈕和彈出菜單是網(wǎng)頁中最常見的兩種元素。按鈕在光標(biāo)移過、離開等狀態(tài)會呈現(xiàn)不同的外觀；彈出菜單在光標(biāo)移過一個區(qū)域時，出現(xiàn)一個菜單，可以進(jìn)行選擇。Fireworks會自動產(chǎn)生按鈕、彈出菜單所需的JavaScript，生成對應(yīng)的網(wǎng)頁。制作按鈕Fireworks通過定義一個對象在釋放、滑過、按下、按下時滑過等4種狀態(tài)下的圖像，生成一個具有動態(tài)效果的按鈕。1．創(chuàng)建按鈕2．導(dǎo)入按鈕3

5、．編輯按鈕4．設(shè)置交互按鈕屬性創(chuàng)建元件如果希望在文檔中重復(fù)使用某些圖形，可將該圖形創(chuàng)建為元件。定義元件后，將該元件拖入文檔便創(chuàng)建了該元件的一個實例。當(dāng)用戶編輯元件時，所有實例自動改變。Fireworks8提供3種類型的元件：圖形、動畫和按鈕。1．創(chuàng)建元件2．編輯元件3．編輯實例4．導(dǎo)入、導(dǎo)出元件制作彈出菜單利用Fireworks8的“彈出菜單編輯器”，可以在切片、熱點和按鈕上都可以創(chuàng)建彈出菜單，F(xiàn)ireworks8創(chuàng)建的彈出菜單的排列方式、位置、顏色等都可以隨意設(shè)置。1．制作文字按鈕2．制作導(dǎo)航欄3．制作菜單4．編輯彈出菜單5．導(dǎo)出彈出菜單

6、【實例7.5】制作一個有3個欄目的彈出菜單，其中有一個欄目的菜單中還包含子菜單。7.4優(yōu)化與導(dǎo)出網(wǎng)頁圖形設(shè)計的最終目標(biāo)是創(chuàng)建能夠盡可能快地下載的精美圖像，因此必須在最大限度地保持圖像品質(zhì)的同時，選擇壓縮質(zhì)量最高的文件格式。這種平衡就是優(yōu)化，即尋找顏色、壓縮和品質(zhì)的最佳組合。圖像的優(yōu)化1．圖像優(yōu)化的方法2．使用“優(yōu)化”面板進(jìn)行優(yōu)化使用導(dǎo)出向?qū)?．導(dǎo)出圖像2．使用導(dǎo)出向?qū)畛銯ireworks的填充可以將路徑變?yōu)閷嶋H應(yīng)用中的各種圖形效果。1．填充對象2．設(shè)置填充3．設(shè)置漸變填充4．調(diào)整填充效果5．為填充增加紋理和設(shè)置邊緣【實例6.7】制作一個立

7、體效果的按鈕。使用樣式和形狀Fireworks的“資源”面板組中提供了大量定義好的樣式和圖形，可以在制作圖像時直接使用。1．使用樣式2．使用形狀6.4編輯位圖位圖又稱點陣圖，其圖形是由屏幕上許多細(xì)微的小點組成，基于位圖的圖形程序?qū)嶋H上就是把圖形中的像素點作為處理的對象，所以圖形的分辨率取決于像素點的多少，增加分辨率可以使圖形顯得更加細(xì)膩。但分辨率越高，計算機(jī)需要記錄的像素越多，存儲圖形的文件就越大。位圖最顯著的優(yōu)點是它能夠真實地模擬現(xiàn)實生活中的色彩，缺點是放大后會失真。創(chuàng)建和編輯位圖1．繪制圖形2．導(dǎo)入外部圖像3．擦除位圖編輯選區(qū)在網(wǎng)頁制作

8、時對位圖的處理主要是進(jìn)行修飾處理，如改變大小、修改顏色、增加特效、去除紅眼和多余的色斑等。修飾圖像前一般先要選取要修飾的區(qū)域，形成一個閃爍虛線組成的選區(qū)。1．增加選區(qū)2．選區(qū)邊緣