網(wǎng)頁(yè)設(shè)計(jì)教程14fireworks cs3在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

1、2022-5-612022-5-62本章內(nèi)容本章內(nèi)容Fireworks cs3簡(jiǎn)介位圖圖像的創(chuàng)建與編輯矢量圖像的創(chuàng)建與編輯網(wǎng)頁(yè)圖像的切片、熱區(qū)與優(yōu)化圖層、幀與動(dòng)畫(huà)制作2022-5-63一、一、 Fireworks cs3簡(jiǎn)介簡(jiǎn)介1、新增功能、新增功能 創(chuàng)建豐富元件創(chuàng)建豐富元件 元件的智能縮放元件的智能縮放 向單個(gè)文檔添加多個(gè)頁(yè)面向單個(gè)文檔添加多個(gè)頁(yè)面 創(chuàng)建基于創(chuàng)建基于 Flash 的幻燈片放映的幻燈片放映 具有層次結(jié)構(gòu)的層具有層次結(jié)構(gòu)的層 使用使用 Photoshop 文件文件 將將Fireworks文件導(dǎo)入文件導(dǎo)入Adobe Flash Adobe Bridge 2022-5-64 2、Fi

2、reworks CS3的啟動(dòng)與退出的啟動(dòng)與退出 Fireworks CS3的啟動(dòng)（兩種方式）的啟動(dòng)（兩種方式） Fireworks CS3的退出（三種方式）的退出（三種方式）2022-5-65 3、Fireworks CS3 工作界面工作界面 菜單欄工具箱繪圖編輯區(qū)浮動(dòng)面板2022-5-66 4、Fireworks CS3 文檔操作文檔操作 新建文檔 保存文檔 打開(kāi)文檔 文檔的修改返回主菜單2022-5-67二、位圖圖像的創(chuàng)建與編輯位圖圖像的創(chuàng)建與編輯 1、位圖的概念 位圖圖像(bitmap)：亦稱為點(diǎn)陣圖像或繪制圖像，由“像素（圖片元素）”組成的。計(jì)算機(jī)屏幕就像是一個(gè)大的像素網(wǎng)格。這些點(diǎn)可以

3、進(jìn)行不同的排列和染色以構(gòu)成圖樣。2022-5-68位圖原圖及放大后的效果2022-5-69 2、位圖工具的使用2022-5-610 選取框工具 套索工具 魔術(shù)棒工具 鉛筆工具 刷子工具 橡皮擦工具 橡皮圖章工具 模糊工具返回主菜單2022-5-611三、矢量圖像的創(chuàng)建與編輯矢量圖像的創(chuàng)建與編輯 1、矢量圖的概念、矢量圖的概念 矢量圖使用直線和曲線來(lái)描述圖形，這矢量圖使用直線和曲線來(lái)描述圖形，這些圖形的元素是一些點(diǎn)、線、矩形、多邊形、些圖形的元素是一些點(diǎn)、線、矩形、多邊形、圓和弧線等，它們都是通過(guò)數(shù)學(xué)公式計(jì)算獲得圓和弧線等，它們都是通過(guò)數(shù)學(xué)公式計(jì)算獲得的。矢量圖形通過(guò)公式計(jì)算獲得，所以矢量圖的。

4、矢量圖形通過(guò)公式計(jì)算獲得，所以矢量圖形文件體積一般較小，因?yàn)檫@種類型的圖像文形文件體積一般較小，因?yàn)檫@種類型的圖像文件包含獨(dú)立的分離圖像，可以自由無(wú)限制的重件包含獨(dú)立的分離圖像，可以自由無(wú)限制的重新組合。新組合。 2022-5-612矢量原圖及放大后的效果2022-5-613 2、矢量工具 2022-5-614 直線工具 鋼筆工具 矩形工具 文本工具 矢量對(duì)象返回主菜單2022-5-615四、網(wǎng)頁(yè)圖像的切片、熱四、網(wǎng)頁(yè)圖像的切片、熱區(qū)與優(yōu)化區(qū)與優(yōu)化 1、切片 切片是網(wǎng)頁(yè)對(duì)象，它們不是以圖像的形式存在，而是以HTML代碼的形式出現(xiàn)。可以通過(guò)“層”面板中的“網(wǎng)頁(yè)層”查看、選擇和重命名它們。 202

5、2-5-616 基于所選對(duì)象插入切片 使用切片工具2022-5-617 2、網(wǎng)頁(yè)圖像的熱點(diǎn)區(qū)域、網(wǎng)頁(yè)圖像的熱點(diǎn)區(qū)域 在網(wǎng)頁(yè)中的，要求圖片上的一部在網(wǎng)頁(yè)中的，要求圖片上的一部分區(qū)域具有超鏈接功能，或者圖片上不分區(qū)域具有超鏈接功能，或者圖片上不同的部分有不同的鏈接。此時(shí)就需要在同的部分有不同的鏈接。此時(shí)就需要在圖片上建立熱點(diǎn)區(qū)。當(dāng)建立熱點(diǎn)區(qū)域后，圖片上建立熱點(diǎn)區(qū)。當(dāng)建立熱點(diǎn)區(qū)域后，鼠標(biāo)放在圖片上方時(shí)，由光標(biāo)變?yōu)槭中?。鼠?biāo)放在圖片上方時(shí)，由光標(biāo)變?yōu)槭中巍?022-5-618 矩形熱點(diǎn)工具 圓形熱點(diǎn)工具 多邊形熱點(diǎn)工具 2022-5-619 3、圖像的優(yōu)化、圖像的優(yōu)化 網(wǎng)頁(yè)圖像設(shè)計(jì)的最終目的是創(chuàng)建網(wǎng)頁(yè)

6、圖像設(shè)計(jì)的最終目的是創(chuàng)建優(yōu)美的圖像，同時(shí)能盡快下載。為了達(dá)優(yōu)美的圖像，同時(shí)能盡快下載。為了達(dá)到這樣的目的，就必須在最大限度地保到這樣的目的，就必須在最大限度地保持圖像品質(zhì)的同時(shí)，選擇壓縮質(zhì)量高的持圖像品質(zhì)的同時(shí)，選擇壓縮質(zhì)量高的文件格式。這種平衡的建立就是優(yōu)化，文件格式。這種平衡的建立就是優(yōu)化，也即是選擇顏色、壓縮和品質(zhì)的合適組也即是選擇顏色、壓縮和品質(zhì)的合適組合。合。2022-5-620 GIF圖片的優(yōu)化設(shè)置圖片的優(yōu)化設(shè)置 2022-5-621 JPG圖片的優(yōu)化設(shè)置圖片的優(yōu)化設(shè)置 返回主菜單2022-5-622五、圖層、幀與動(dòng)畫(huà)制作五、圖層、幀與動(dòng)畫(huà)制作 1、層 層就像是在一疊摞在一起的透明

7、紙上分別繪制不同的圖形。每個(gè)層可以看做是一張完全透明的膠片，文檔中的對(duì)象都存在層上。在繪制對(duì)象時(shí)，可以先創(chuàng)建層或者根據(jù)需要添加層。 2022-5-623 2、幀 動(dòng)畫(huà)是依靠多幅靜止圖片連續(xù)播放而形成，一幅靜止的圖片就是一幀。以一定的速率播放多幀圖片就形成了動(dòng)畫(huà)。2022-5-624 3、動(dòng)畫(huà) 打開(kāi)文件成為動(dòng)畫(huà) 導(dǎo)入現(xiàn)有的GIF動(dòng)畫(huà) 通過(guò)幀面板制作動(dòng)畫(huà) 利用元件和實(shí)例制作動(dòng)畫(huà) 補(bǔ)間動(dòng)畫(huà)返回主菜單2022-5-625本章小結(jié)本章小結(jié) 本章介紹了Fireworks CS3相關(guān)知識(shí)。 本章第1節(jié)主要介紹了Fireworks CS3的基本功能特點(diǎn)，針對(duì)該版本介紹了其新增功能。此外，還介紹了Fireworks CS3的工作界面及文檔操作。 第2節(jié)介紹了位圖相關(guān)概念，結(jié)合Fireworks CS3介紹位圖工