版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
1、8.1 圖像的制作與優(yōu)化,Fireworks是集創(chuàng)建、編輯和優(yōu)化網(wǎng)頁圖形為一體的應(yīng)用軟件,它不僅可以創(chuàng)建與編輯位圖和矢量圖,而且可以通過修剪和優(yōu)化圖形圖像來減小文件的大小。而在不影響圖形圖像質(zhì)量的情況下,文件的體積越小,網(wǎng)頁的下載速度就越快。這也是Fireworks大受歡迎的原因之一。,8.1.1 Fireworks簡介-1,Fireworks擁有與Dreamweaver相似的操作界面,同樣由編輯區(qū)域、屬性面板和浮動(dòng)面板等組成。,8.1.1 Fireworks簡介-2,單擊菜單欄上的“文件”,在下拉菜單中選擇“新建”命令,打開“新建文檔”對話框,在“新建文檔”對話框中,可以通過更改寬度和高度的
2、值,來更改畫布的大小,還可以對分辨率和畫布顏色進(jìn)行修改。最后單擊“確定”。,8.1.1 Fireworks簡介-3,窗口左邊的工具面板分為六個(gè)區(qū)域,分別有不同的功能。在該面板上集成了編輯圖像所需的各種工具,只需要在面板上選擇相應(yīng)的工具就可以對矢量圖、位圖進(jìn)行操作,這樣就省去了在位圖和矢量圖之間的切換操作。,8.1.1 Fireworks簡介-4,和Dreamweaver的屬性面板一樣,F(xiàn)ireworks的屬性面板也是一個(gè)包含各種選項(xiàng)的動(dòng)態(tài)面板。隨著操作內(nèi)容的變化,屬性面板上的內(nèi)容也隨著發(fā)生相應(yīng)的變化。如圖8.6所示是選中畫布時(shí),屬性面板的樣子。,8.1.1 Fireworks簡介-5,在默認(rèn)的
3、情況下,Dreamweaver的面板組停放在工作區(qū)的右側(cè)。我們可以取消面板組,以及疊放面板,排列面板順序等操作。在該面板組中可以完成許多高性能操作。如圖8.7所示該面板組中有“優(yōu)化”、“層”、“資源”、“幀和記錄”和“答案”等面板,其中“層”和“答案”面板是打開的。,8.1.1 Fireworks簡介-6,在窗口中間是畫布,它是對圖像進(jìn)行繪制、修改或編輯的地方。從圖8.8中可以發(fā)現(xiàn)它提供了四種預(yù)覽模式:原始、預(yù)覽、2幅和4幅。具體的使用可以在下面的實(shí)例中給予說明。,8.1.2 Fireworks中圖片的制作-1,更改畫布,單擊菜單欄上的“修改”,彈出其子菜單,然后移動(dòng)鼠標(biāo)指針到畫布上,在彈出其
4、子菜單后,單擊“畫布大小”命令。在對話框中輸入寬和高的值,單擊“確定”按鈕。,8.1.2 Fireworks中圖片的制作-2,畫出紅色的矩形區(qū)域,在工具面板的“矢量”區(qū)中單擊“矩形”工具,然后在工具面板的“顏色”區(qū)中單擊填充顏色塊,在彈出的調(diào)色板中選擇紅色。在畫布上,拖動(dòng)鼠標(biāo),畫出一個(gè)紅色的矩形區(qū)域。,8.1.2 Fireworks中圖片的制作-3,輸入字母,在工具面板的“矢量”區(qū)中單擊“文本”工具,然后在編輯區(qū)的紅色矩形塊中單擊鼠標(biāo),出現(xiàn)一個(gè)有光標(biāo)閃動(dòng)的文本框。在 文本框中輸入大寫的字母“JL”,然后拖動(dòng)鼠標(biāo)選中這兩個(gè)字母,接著在“屬性”面板中單擊“顏色”塊,在彈出的調(diào)色板中選擇“黃色”。在
5、屬性面板中單擊“字體”框,在下拉列表中選擇“Tahoma”字體,然后單擊字號框右邊的下拉按鈕,拖動(dòng)滑動(dòng)指針,設(shè)置字號為31,在編輯區(qū)域單擊鼠標(biāo),文字變成設(shè)置的效果。,8.1.2 Fireworks中圖片的制作-4,在工具面板的“選擇”區(qū)中單擊“選取”工具,然后在編輯區(qū)域中拖動(dòng)文本框到合適的位置,使兩個(gè)字母看起來更美觀。,8.1.2 Fireworks中圖片的制作-5,輸入漢字,重復(fù)上述操作,在紅色矩形塊的右邊輸入“杰力”兩個(gè)漢字,設(shè)置字體為“楷體”,字號為28。,單擊菜單欄上的“文件”,在彈出的文件菜單中單擊“保存”命令。對文件進(jìn)行保存。,8.1.2 Fireworks中圖片的制作-6,導(dǎo)出
6、圖片,單擊菜單欄上的“文件”,在文件菜單中單擊“導(dǎo)出”命令。 在對話框中輸入文件名,單擊“保存”按鈕。,8.1.3 Fireworks中圖片的優(yōu)化-1,除了可以直接制作圖片以外,F(xiàn)ireworks還可以對已有的圖片進(jìn)行優(yōu)化,使圖片在不影響視覺效果的情況下,體積更小,更有利于網(wǎng)絡(luò)傳輸。,8.1.3 Fireworks中圖片的優(yōu)化-2,打開圖片,單擊菜單欄上的文件,打開“文件”菜單,在下拉菜單中單擊“打開”命令,在“打開”對話框中,單擊“查找范圍”框,在下拉列表中找到存放圖片文件的文件夾,然后選種要優(yōu)化的文件,最后單擊“打開”按鈕。,8.1.3 Fireworks中圖片的優(yōu)化-3,在窗口右邊的面板
7、組中單擊“優(yōu)化”面板的“小三角”按鈕,將“優(yōu)化”面板展開。在“優(yōu)化”面板中單擊“設(shè)置”框,在下拉列表中選擇“GIF接近256”,將圖片優(yōu)化成GIF,文件,圖片顏色為256色。,優(yōu)化圖片,8.1.3 Fireworks中圖片的優(yōu)化-4,單擊文件菜單,在下拉菜單中選擇“導(dǎo)出”命令,打開“導(dǎo)出”對話框。在“導(dǎo)出”對話框中輸入文件名,單擊“保存”命令。,導(dǎo)出圖片,打開保存文件的文件夾,可以發(fā)現(xiàn)優(yōu)化的效果是非常明顯的。,8.1.4 Fireworks與Dreamweaver 整合應(yīng)用-1,網(wǎng)站的制作過程一般可分為網(wǎng)頁組件制作準(zhǔn)備、網(wǎng)頁制作和網(wǎng)頁管理三個(gè)階段。在網(wǎng)頁組件制作準(zhǔn)備階段主要使用Firework
8、s對圖片進(jìn)行處理,其他兩個(gè)階段主要采用Dreamweaver 進(jìn)行操作。通過兩個(gè)軟件的整合可以實(shí)現(xiàn)網(wǎng)站的決大部分操作。,除了這種整合應(yīng)用以外,在Dreamweaver中隨時(shí)可以打開Fireworks,對網(wǎng)頁中的圖片進(jìn)行編輯和優(yōu)化。,8.1.4 Fireworks與Dreamweaver 整合應(yīng)用-2,在Dreamweaver窗口中,選中圖片,然后在“屬性”面板中單擊“編輯”按鈕,打開Fireworks。,在Fireworks窗口中可以發(fā)現(xiàn),圖形文件被打開,特別是圖片編輯區(qū)有“編輯自Dreamwea”的字樣,表明該圖片來自Dreamweaver。對圖片進(jìn)行編輯或優(yōu)化后,單擊“完成”按鈕,F(xiàn)ire
9、works編輯窗口自動(dòng)關(guān)閉,同時(shí)Fireworks程序窗口最小化。Dreamweaver窗口中圖片顯示編輯后的樣子。,8.2 動(dòng)畫的制作與優(yōu)化,現(xiàn)在的網(wǎng)絡(luò)可以說是Flash時(shí)代,越來越多的人喜歡Flash動(dòng)畫;越來越多的網(wǎng)站使用Flash制作的動(dòng)畫。不知Flash為何物,會直接被人認(rèn)為是網(wǎng)絡(luò)盲,甚至是電腦盲。,Flash功能強(qiáng)大,不僅僅是制作動(dòng)畫,甚至有人直接用它來制作網(wǎng)頁。特別值得一提的是,它與Dreamweaver、Fireworks等軟件整合使用天衣無縫。,8.2.1 Flash簡介-1,Flash為廣大用戶提供了三種不同的使用模式,我們多采用一般用戶模式,設(shè)計(jì)者模式是專為動(dòng)畫設(shè)計(jì)師準(zhǔn)備
10、的;而開發(fā)者模式是給程序開發(fā)人員使用的。采用不同的模式可以屏蔽掉一些功能,為不同需求的用戶帶來極大的便利。單擊“,窗口”菜單,選擇“面板設(shè)置”下的不同命令可以在不同的模式下進(jìn)行切換。,8.2.1 Flash簡介-2,工具面板提供了一些常用的繪圖工具。使用這些工具可以很容易地繪制出各種圖形。該面板共分為4部分,工具部分主要用來創(chuàng)建或改變圖像或文本;查看部分用來調(diào)整編輯的舞臺;顏色部分選擇填充的顏色或線條的顏色;選項(xiàng)部分則隨著選取工具的不同,而出現(xiàn)相應(yīng)的修改工具。,8.2.1 Flash簡介-3,動(dòng)作-幀面板是提供內(nèi)嵌程序語言的編輯面板,作為初級使用者一般用不到。屬性面板則用處很大,它和Dream
11、weaver、Fireworks的屬性面板一樣,其內(nèi)容會根據(jù)所選對象的不同而發(fā)生變化。如圖是新建一個(gè)文件時(shí),屬性面板的樣子。,8.2.1 Flash簡介-4,在窗口中間的編輯區(qū)域,我們稱其為舞臺。它主要用于繪制或?qū)雸D片,添加文本或聲音以及添加附加行為作為導(dǎo)航按鈕等等操作。在沒有特殊效果的情況下,F(xiàn)lash動(dòng)畫都可以直接在舞臺上播放,而不必轉(zhuǎn)換成可播放的動(dòng)畫文件。,8.2.1 Flash簡介-5,Flash的時(shí)間軸主要用來組織和控制動(dòng)畫在一定時(shí)間內(nèi)播放的層數(shù)和幀數(shù)。我們知道一幀一幀靜止的圖片連續(xù)起來就形成了動(dòng)畫。所以最簡單的動(dòng)畫制作方法就是畫出一幀一幀的圖片,然后通過時(shí)間軸來控制他們的播放速度
12、來實(shí)現(xiàn)。,時(shí)間軸由圖層、幀和播放頭組成。,8.2.1 Flash簡介-6,在默認(rèn)的情況下,面板組包含“混色器”、“顏色樣本”、“組件”和“問題解答”四個(gè)。通過“窗口”菜單可以添加面板,當(dāng)然也可以隱藏面板。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫-1,補(bǔ)間動(dòng)畫是創(chuàng)建隨時(shí)間移動(dòng)或更改的動(dòng)畫的一種有效方法,并且最大程度地減小所生成的文件。在補(bǔ)間動(dòng)畫中,F(xiàn)lash能夠自動(dòng)地在兩個(gè)關(guān)鍵幀之間插入幀的值或形狀來創(chuàng)建動(dòng)畫,使動(dòng)畫變得生動(dòng)。,補(bǔ)間動(dòng)畫分為運(yùn)動(dòng)漸變與形狀漸變兩種動(dòng)畫。 運(yùn)動(dòng)漸變是指在一個(gè)時(shí)間點(diǎn)定義一個(gè)實(shí)例或文字塊的位置、大小等特性,在另一個(gè)時(shí)間點(diǎn)改變這些屬性,F(xiàn)lash自動(dòng)插入動(dòng)畫幀,形成兩者之
13、間平滑的過度。 形狀漸變是指在一個(gè)時(shí)間點(diǎn)繪制一個(gè)形狀,在另一個(gè)時(shí)間點(diǎn)更改該形狀,F(xiàn)lash自動(dòng)插入動(dòng)畫幀,形成兩者之間平滑的過渡。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫-2,修改舞臺大小,單擊菜單欄上的“修改”,在其下拉菜單中單擊“文檔”命令,在“文檔屬性”對話框中,修改尺寸值為圖片的大小,注意默認(rèn)單位為像素,單擊“確定”后,舞臺變?yōu)樵O(shè)置的大小。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫-3,將圖片導(dǎo)入到舞臺中,作為背景,單擊文件菜單,選擇“導(dǎo)入”命令。在“導(dǎo)入”對話框中,選擇查找范圍,找到要導(dǎo)入的圖片文件,單擊“打開”按鈕,單擊選擇工具,拖動(dòng)圖片,使它完全遮蓋住白色的舞臺背景。,8.2.2
14、使用Flash制作補(bǔ)間動(dòng)畫-4,使用鼠標(biāo)單擊第30幀,然后單擊“插入”菜單,在下拉菜單中單擊“幀”命令。這樣,從第1幀到第30幀都使用了該圖片作為背景。同時(shí),確定動(dòng)畫長度,也設(shè)定了整個(gè)動(dòng)畫為30幀。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫-5,插入圖層和文字,在時(shí)間軸面板中單擊“插入圖層”按鈕,在圖層1上插入一個(gè)新的圖層。選中圖層2的第1幀,然后單擊“工具”面板中的“文本工具”。,在圖片上方單擊鼠標(biāo),出現(xiàn)文本框,輸入一個(gè)字“歡”,然后選中這個(gè)字,在屬性面板中更改合適的字體和字號,并設(shè)置字體顏色為藍(lán)色。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫-6,選中圖層2的第30幀,單擊“插入”菜單,在下拉菜
15、單中選擇“關(guān)鍵幀”命令,在第30幀插入一個(gè)關(guān)鍵幀。,選擇“工具”面板中的選取工具,拖動(dòng)文字塊“歡”到圖片中的合適位置,,插入關(guān)鍵幀,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫-7,創(chuàng)建補(bǔ)間動(dòng)畫,選中圖層2上的第1幀,在屬性面板中,單擊“補(bǔ)間”右邊的下拉框,在下拉列表中選擇“運(yùn)動(dòng)”。為第1幀到第30幀之間設(shè)置上補(bǔ)間動(dòng)畫,可以發(fā)現(xiàn)兩者之間有一條黑色的箭頭。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫-8,創(chuàng)建補(bǔ)間動(dòng)畫,重復(fù)上述步驟,插入圖層3,在圖片下面插入一個(gè)文本框,輸入一個(gè)字“迎”,并設(shè)置字的字體、字號、字體顏色與“歡”相同。用同樣的方法在圖層3的第30幀插入一個(gè)關(guān)鍵幀,將,“迎”拖入圖片合適位置,并
16、設(shè)置補(bǔ)間動(dòng)畫。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫-9,創(chuàng)建補(bǔ)間動(dòng)畫,再次重復(fù)操作,在圖片上面插入“光”,在圖片下插入“臨”,并設(shè)置上動(dòng)畫。單擊“控制”菜單,在下拉菜單中選擇“播放”命令。,可以看到四個(gè)字分別進(jìn)入圖片上的動(dòng)畫效果。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫-10,導(dǎo)出動(dòng)畫,單擊“文件”菜單,在下拉菜單中選擇“導(dǎo)出”命令。,在“導(dǎo)出影片”對話框中,輸入文件名,單擊保存。將影片保存,將來可以隨時(shí)將他插入到網(wǎng)頁中。另外,也,可以更改保存類型為GIF文件,生成GIF動(dòng)畫。,8.2.3 使用Flash制作逐幀動(dòng)畫-1,逐幀動(dòng)畫是指更改每一幀中的內(nèi)容,來實(shí)現(xiàn)動(dòng)畫效果。它最適合于每一幀中的
17、圖像都在更改而不是僅僅簡單地在舞臺上移動(dòng)的復(fù)雜動(dòng)畫。逐幀動(dòng)畫增加文件大小的速度比補(bǔ)間動(dòng)畫快的多。,在逐幀動(dòng)畫中,F(xiàn)lash會保存每個(gè)完整幀的值。,8.2.3 使用Flash制作逐幀動(dòng)畫-2,在Flash中建立一個(gè)新的文件,修改文檔大小為圖片大小,然后導(dǎo)入圖片到圖層1中,并拖動(dòng)該圖片到合適的位置。選中圖層1中的第30幀,單擊“插入”菜單,選擇“幀”命令,,設(shè)置前30幀為相同的背景。,建立文件,8.2.3 使用Flash制作逐幀動(dòng)畫-3,在時(shí)間軸面板中單擊“插入圖層”按鈕,在圖層1上插入一個(gè)新的圖層。選中圖層2的第1幀,然后單擊“工具”面板的文字工具,在圖片上輸入“歡迎光臨”四個(gè)字。使用選取工具,
18、調(diào)整文字在圖片中的位置,并設(shè)置字體、字號和文字顏色等。,拖動(dòng)鼠標(biāo),選中圖層2中的第1幀到第30幀。保持選取狀態(tài),單擊鼠標(biāo)右鍵,在打開的快捷菜單中選擇“轉(zhuǎn)換為關(guān)鍵幀”命令。,8.2.3 使用Flash制作逐幀動(dòng)畫-4,選中第5幀,將文字框中的“迎光臨”幾個(gè)字刪除。,選中第10幀,將文字框中的“光臨”幾個(gè)字刪除。,選中第15幀,將文字框中的“臨”刪除。,拖動(dòng)鼠標(biāo),選中圖層2中的第1幀到第4幀。保持選取狀態(tài),單擊鼠標(biāo)右鍵,在打開的快捷菜單中選擇“清除關(guān)鍵幀”命令。如圖8.65所示。然后按下鍵盤上的“del”鍵,將圖層上的文字刪除。,8.2.3 使用Flash制作逐幀動(dòng)畫-5,單擊“控制”菜單,在下拉菜單中選擇“播放”命令,這時(shí)可以看到文字依次出現(xiàn)的效果。,與補(bǔ)間動(dòng)畫一樣,保存文件后選擇“文件”菜單下的“導(dǎo)出”命令,將Flash影片導(dǎo)出,可以隨時(shí),插入到Dreamweaver中。,8.2.4 Flash與Dreamweaver 整合應(yīng)用1,Flash也能夠與Dreamweaver整合使用。在網(wǎng)頁制作過程中,插入Flash文本與Flash按鈕就是整合使用的好例子。,Dreamweaver還可以直接調(diào)用Flash對網(wǎng)頁中已插入的圖
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 蘇少版四年級音樂教案下
- DB11-T 1945-2021 屋面防水技術(shù)標(biāo)準(zhǔn)
- 景觀河道磚塊運(yùn)輸服務(wù)協(xié)議
- 互聯(lián)網(wǎng)金融服務(wù)居間協(xié)議
- 教育機(jī)構(gòu)半包裝修合同樣本
- 保健用品居間合同樣本
- 農(nóng)產(chǎn)品冷鏈配送合同
- 家庭維修居間服務(wù)合同
- 醫(yī)藥用品個(gè)人承運(yùn)合同模板
- 商業(yè)規(guī)劃與運(yùn)營
- 學(xué)習(xí)科學(xué)與技術(shù)智慧樹知到期末考試答案章節(jié)答案2024年山東師范大學(xué)
- (正式版)SHT 3533-2024 石油化工給水排水管道工程施工及驗(yàn)收規(guī)范
- 30題藥品質(zhì)量檢測崗位常見面試問題含HR問題考察點(diǎn)及參考回答
- 金壇區(qū)蘇科版六年級上冊勞動(dòng)《05土培吊蘭》課件
- 天翼云-高級解決方案架構(gòu)師考前沖刺
- 工程變更聯(lián)絡(luò)單模板
- 倉庫物料標(biāo)識卡
- 國家、省、市級重點(diǎn)??聘啬c科匯報(bào)材料
- 食品安全自查、從業(yè)人員健康管理、進(jìn)貨查驗(yàn)記錄、食品安全事故處置保證食品安全的規(guī)章制度
- (完整版)監(jiān)理質(zhì)量保證體系
- 10以內(nèi)加法練習(xí)題直接打印(最新整理)
評論
0/150
提交評論