動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作教程第二版

動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作

實(shí)用教程（第二版）21世紀(jì)高等院校計(jì)算機(jī)系列教材第2章Flash8基礎(chǔ)知識(shí)本章學(xué)習(xí)導(dǎo)讀網(wǎng)頁(yè)動(dòng)畫(huà)是一種重要的網(wǎng)頁(yè)元素。一個(gè)合適的動(dòng)畫(huà)可使整個(gè)頁(yè)面生動(dòng)流暢，充滿(mǎn)生機(jī)。本章主要講Flash8的基礎(chǔ)知識(shí)，通過(guò)本章學(xué)習(xí)，讀者應(yīng)該掌握以下內(nèi)容：Flash8的新增功能Flash8的工作界面Flash8的浮動(dòng)面板第2章Flash8基礎(chǔ)知識(shí)2.1認(rèn)識(shí)Flash82.1.1Flash8的發(fā)展Flash的前身是FutureSplash，是早期網(wǎng)上流行的矢量動(dòng)畫(huà)插件。Macromedia公司收購(gòu)了FutureSplash以后便將其改名為Flash2，一直到現(xiàn)在的Flash8。用戶(hù)可以使用Flash創(chuàng)建導(dǎo)航欄、動(dòng)態(tài)指標(biāo)、帶有聲音的動(dòng)畫(huà)，甚至一個(gè)完整的、豐富多彩的網(wǎng)站。Flash動(dòng)畫(huà)是一種專(zhuān)為網(wǎng)絡(luò)而創(chuàng)建的交互式矢量圖形動(dòng)畫(huà)。由于Flash動(dòng)畫(huà)使用的是矢量圖形，所以下載速度快，而且能夠縮放，使瀏覽者能夠全屏幕觀看。第2章Flash8基礎(chǔ)知識(shí)2.1.2安裝Flash8Flash8可在Windows系列操作系統(tǒng)和Macintosh系列操作系統(tǒng)中運(yùn)行，本書(shū)主要在Windows系統(tǒng)下進(jìn)行講解。安裝Flash8的系統(tǒng)基本要求如下：（1）600MHzIntelPentiumIII處理器或同等處理器。（2）128MB內(nèi)存（建議256MB）。（3）190MB可用磁盤(pán)空間。（4）Windows98、Windows2000、Windows2003或WindowsXP操作系統(tǒng)。第2章Flash8基礎(chǔ)知識(shí)2.1.2Flash8的新增功能與FlashMX相比，F(xiàn)lash8增強(qiáng)和增加了一些新功能，這些新增功能提高了工作效率，增強(qiáng)了豐富的媒體支持，并簡(jiǎn)化了發(fā)布流程。下面對(duì)其簡(jiǎn)單介紹：（1）漸變?cè)鰪?qiáng)（2）對(duì)象繪制模型（3）FlashType。（4）腳本助手模式（5）文檔選項(xiàng)卡（6）自定義緩動(dòng)控制（7）圖形效果濾鏡（8）混合模式（9）位圖平滑（10）改進(jìn)的文本消除鋸齒功能（11）新的視頻編碼器（12）視頻Alpha通道支持第2章Flash8基礎(chǔ)知識(shí)2.2Flash8的工作界面2.2.1菜單欄2.2.2工具欄和繪圖工具箱1．工具欄2．繪圖工具箱繪圖工具箱通過(guò)“窗口/工具”菜單啟動(dòng)，默認(rèn)位置在啟動(dòng)界面的左側(cè)。繪圖工具欄集中了繪畫(huà)、文字及修改等常用工具，使用這些工具可以繪制、選取、噴涂及修改作品。在Flash8中，繪圖工具箱由工具區(qū)、視圖區(qū)、顏色區(qū)和工具選項(xiàng)區(qū)4個(gè)區(qū)域構(gòu)成，其中工具選項(xiàng)區(qū)的內(nèi)容隨著所選工具的不同而變化的，用于對(duì)繪圖工具進(jìn)行細(xì)節(jié)的設(shè)置。2.2.3時(shí)間軸一個(gè)動(dòng)畫(huà)可以看作是靜態(tài)圖片按照一定的時(shí)間順序先后播放的結(jié)果，而播放時(shí)間和順序的控制是通過(guò)時(shí)間軸來(lái)進(jìn)行的。由于牽扯到幀與圖層的概念，因此在這里，不做詳細(xì)解說(shuō)，大家只需了解時(shí)間軸窗口在哪里就行了在后面將會(huì)結(jié)合幀與圖層進(jìn)行綜合的講解，在后面將會(huì)結(jié)合幀與圖層進(jìn)行綜合講解。時(shí)間軸面板在“窗口/時(shí)間軸”菜單中啟動(dòng)。第2章Flash8基礎(chǔ)知識(shí)2.2.4“屬性”面板“屬性”面板用來(lái)顯示當(dāng)前所選對(duì)象的常用屬性。在舞臺(tái)中選中某一對(duì)象，選擇“窗口/屬性”菜單，啟動(dòng)屬性面板，在“屬性”面板上將顯示對(duì)象的屬性參數(shù)。如圖所示，是橢圓對(duì)象的屬性面板。2.2.5其他面板在Flash8中，還有幾類(lèi)設(shè)置面板，它們往往是進(jìn)行元件設(shè)置的關(guān)鍵，因此我們必須熟練地掌握它們。這些設(shè)置面板在“窗口”菜單中啟動(dòng)。1．“庫(kù)”面板“庫(kù)”面板是存放元件的地方，它用于存儲(chǔ)和組織導(dǎo)入的文件，包括位圖圖形、聲音文件和視頻剪輯等，可以在庫(kù)中建立文件夾對(duì)元件進(jìn)行管理。第2章Flash8基礎(chǔ)知識(shí)2．“信息”面板用來(lái)顯示選定對(duì)象的寬、高，以及鼠標(biāo)光標(biāo)處的顏色值、坐標(biāo)值等信息，如圖所示。3．“混色器”面板通過(guò)本面板可以選擇顏色和填充的樣式。顏色包括輪廓色、填充色、默認(rèn)黑白色、輪廓色與填充色對(duì)換等。右下角的紅、綠、藍(lán)3個(gè)輸入框，顯示了顏色的RGB值，可以通過(guò)直接輸入數(shù)值的方式指定某種顏色；左下方是色彩板，也可以直接用鼠標(biāo)點(diǎn)選自己中意的顏色。另外有填充樣式與填充顏色Alpha值兩種設(shè)置功能。第2章Flash8基礎(chǔ)知識(shí)4．“變形”面板“變形”面板主要用于縮放、選裝和傾斜所選的對(duì)象，只需在相應(yīng)的輸入框內(nèi)填入合適的數(shù)字，再單擊最下排兩個(gè)按鈕的第一個(gè)按鈕就可以了?！白冃巍泵姘逶凇按翱?變形”菜單中啟動(dòng)，如圖所示。5．“對(duì)齊”面板本面板用來(lái)處理多個(gè)物件的相應(yīng)位置關(guān)系，分別有左、中、右3種水平對(duì)齊，上、中、下3種垂直對(duì)齊和頂、中、底3種分散對(duì)齊方式。此外，還有寬度匹配、高度匹配、寬度與高度都匹配3種匹配方式；空白高度匹配、空白寬度匹配兩種間隔匹配方式。第2章Flash8基礎(chǔ)知識(shí)6．“顏色樣本”面板使用“顏色樣本”面板可以方便選取存放在其中的預(yù)設(shè)在其中的預(yù)設(shè)好的各種色彩和漸變色進(jìn)行填充，從而減少重復(fù)設(shè)置顏色，提高工作效率。7．“動(dòng)作”面板Flash8中的“動(dòng)作”面板用于為影片添加腳本，動(dòng)畫(huà)的交互性都是通過(guò)腳本實(shí)現(xiàn)的。要熟練地掌握腳本，就得有一定的Flash編程基礎(chǔ)。選擇“窗口/動(dòng)作”菜單，啟動(dòng)動(dòng)作面板。8．“組件”面板“組件”面板中提供了一些常用的組件。第2章Flash8基礎(chǔ)知識(shí)2.3創(chuàng)建與保存動(dòng)畫(huà)2.3.1創(chuàng)建與保存動(dòng)畫(huà)雙擊桌面上或“開(kāi)始”菜單中的Flash8圖標(biāo)，程序打開(kāi)工作界面。運(yùn)用工具欄上的繪圖工具創(chuàng)建和繪制圖形，制作完成后，單擊“文件”菜單中的“保存”菜單項(xiàng)就可以將你創(chuàng)建的動(dòng)畫(huà)保存。2.3.2文檔屬性設(shè)置文檔屬性包括動(dòng)畫(huà)尺寸等內(nèi)容。動(dòng)畫(huà)的尺寸就是動(dòng)畫(huà)在播放時(shí)畫(huà)面的大小，在設(shè)置動(dòng)畫(huà)之前，必須根據(jù)需求首先設(shè)置動(dòng)畫(huà)的尺寸，同時(shí)還可以設(shè)置動(dòng)畫(huà)的播放速度和背景色等屬性。操作如下：選擇“修改/文檔”菜單，打開(kāi)“文檔屬性”對(duì)話(huà)框，如圖所示。第3章動(dòng)畫(huà)角色的繪制與編輯本章學(xué)習(xí)導(dǎo)讀在制作動(dòng)畫(huà)之前我們應(yīng)該先掌握繪制、編輯動(dòng)畫(huà)角色的基本工具和技巧。在Flash8中繪制、編輯動(dòng)畫(huà)角色主要通過(guò)繪圖工具箱來(lái)進(jìn)行。本章主要講述繪圖工具的使用和圖形編輯過(guò)程。通過(guò)本章學(xué)習(xí)，讀者應(yīng)該掌握以下內(nèi)容：矢量圖形和位圖Flash8繪圖工具箱的使用Flash8的圖形編輯功能圖形繪制與編輯舉例第3章動(dòng)畫(huà)角色的繪制與編輯3.1矢量圖形和位圖在計(jì)算機(jī)中，圖形的顯示格式有兩種：矢量圖和位圖。學(xué)會(huì)區(qū)分兩種格式的圖形對(duì)于動(dòng)畫(huà)的創(chuàng)作非常有用，同時(shí)可以提高工作效率。3.1.1矢量圖矢量圖通過(guò)直線(xiàn)和曲線(xiàn)來(lái)描述圖形，這些直線(xiàn)和曲線(xiàn)稱(chēng)為矢量。矢量根據(jù)圖形（包括文字）的幾何特性來(lái)對(duì)其進(jìn)行描述。矢量圖的形狀是由曲線(xiàn)通過(guò)的點(diǎn)來(lái)描述的，而它的顏色則由曲線(xiàn)的顏色和曲線(xiàn)所包圍區(qū)域的顏色確定。在對(duì)一副矢量圖進(jìn)行編輯時(shí)，實(shí)際上修改的是其中曲線(xiàn)的屬性，可對(duì)曲線(xiàn)進(jìn)行移動(dòng)、縮放、改變形狀和顏色等操作而不影響它的顯示質(zhì)量。矢量圖具有分辨率無(wú)關(guān)行，換句話(huà)說(shuō)，用戶(hù)將它縮放到任意大小和以任意分辨率在輸出設(shè)備上打印出來(lái)，都不會(huì)遺漏細(xì)節(jié)或清晰度。因此，矢量圖是文字（尤其是文字）和粗略圖形的最佳選擇。第3章動(dòng)畫(huà)角色的繪制與編輯3.1.2位圖位圖通過(guò)把叫做像素的不同顏色的點(diǎn)安排在網(wǎng)格中而形成圖像。成像的原理是指定像素在網(wǎng)格中的位置和顏色值，方式與拼接而成的圖形十分類(lèi)似。對(duì)位圖文件進(jìn)行編輯時(shí)，對(duì)象是像素而不是曲線(xiàn)。所以位圖顯示的質(zhì)量與分辨率有關(guān)，因?yàn)閳D像的每一個(gè)數(shù)據(jù)是根據(jù)特定大小的網(wǎng)格的。對(duì)位圖進(jìn)行編輯有可能改變顯示的質(zhì)量，尤其是縮放操作可使圖形邊緣呈鋸齒狀，在一個(gè)比圖形本身分辨率低的輸出設(shè)備上顯示圖形時(shí)也會(huì)使現(xiàn)實(shí)質(zhì)量下降。第3章動(dòng)畫(huà)角色的繪制與編輯3.1.3位圖轉(zhuǎn)換為矢量圖在新建的Flash8文檔中導(dǎo)入一幅位圖圖片，從主菜單上選擇“修改/位圖/轉(zhuǎn)換位圖為矢量圖”，就會(huì)彈出“轉(zhuǎn)換位圖為矢量圖”對(duì)話(huà)框:（1）“顏色閥值”選項(xiàng)的參數(shù)范圍：1-500它的作用是在兩個(gè)像素相比時(shí)，顏色差低于設(shè)定的顏色閥值，則兩個(gè)像素被認(rèn)為是相同的。閥值越大轉(zhuǎn)換后的矢量圖的顏色減少。（2）“最小區(qū)域”選項(xiàng)的參數(shù)范圍：1-1000它的作用是在指定的像素顏色時(shí)需要考慮周?chē)南袼財(cái)?shù)量，最小區(qū)域是跟蹤位圖平均不同的顏色值。（3）“曲線(xiàn)擬合”選項(xiàng)的參數(shù)范圍：像素它是決定生成的矢量圖的輪廓和區(qū)域的粘合程度。（4）“角閥值”選項(xiàng)的參數(shù)范圍：較多轉(zhuǎn)角它是決定生成的矢量圖中保留銳利邊緣還是平滑處理。實(shí)踐表明，如果要?jiǎng)?chuàng)建最近原始位圖的矢量圖形，上圖中為最佳的設(shè)置。設(shè)置完成后單擊“確定”按鈕，就可以將位圖轉(zhuǎn)換為矢量圖形了。第3章動(dòng)畫(huà)角色的繪制與編輯3.2圖形角色的繪制與填充3.1.1圖形角色的繪制圖形繪制主要通過(guò)繪圖工具箱來(lái)完成，本節(jié)主要講述繪圖工具箱的使用。在圖形繪制過(guò)程中，可通過(guò)“屬性”面板調(diào)整繪制工具和繪制圖形的屬性。有些繪圖工具選中后，在工具箱的選項(xiàng)欄中會(huì)出現(xiàn)其模式選項(xiàng)。模式選項(xiàng)使繪圖更加靈活、準(zhǔn)確。鋼筆工具部分選取工具選擇性工具任意變形工具線(xiàn)條工具橢圓工具鉛筆工具墨水瓶工具滴管工具填充變形工具套索工具文本工具矩形工具刷子工具顏料桶工具橡皮擦工具第3章動(dòng)畫(huà)角色的繪制與編輯（1）直線(xiàn)工具：主要用于繪制線(xiàn)段。選中該工具后，可在屬性面板中調(diào)整線(xiàn)型和粗細(xì)。線(xiàn)條的屬性主要有筆觸顏色、筆觸高度和筆觸樣式3種。（2）鋼筆工具：主要用于繪制貝賽爾曲線(xiàn)，通過(guò)對(duì)貝賽爾曲線(xiàn)的調(diào)整，可以得到復(fù)雜的曲線(xiàn)圖形。（3）鉛筆工具：可以在舞臺(tái)上自由繪制線(xiàn)條和幾何圖形。（4）文本工具：該工具用來(lái)在場(chǎng)景中添加文本角色。（5）橢圓工具：可以在舞臺(tái)上繪制出橢圓或者圓形，繪制出的圖形包括輪廓線(xiàn)和填充色。（6）矩形工具：可以在舞臺(tái)上繪制矩形或者正方形圖形，操作方法與“橢圓工具”完全相同。（7）多角星形工具：“多角星形工具”與“矩形工具”占據(jù)同一位置，按住“矩形工具”按鈕不放，會(huì)彈出工具選擇列表，切換到“多角星形工具”，使用“多角星形工具”可以在舞臺(tái)上繪制等邊多邊形或者等邊星形圖形。第3章動(dòng)畫(huà)角色的繪制與編輯3.1.2顏色的填充（1）墨水瓶工具：本工具用來(lái)給圖形對(duì)象的線(xiàn)條或幾何圖形的筆畫(huà)邊框上色。（2）顏料桶工具：對(duì)圖像進(jìn)行填色，根據(jù)選項(xiàng)的不同可以采取多種填充方式。（3）筆刷工具：既然是“刷子”，它起著涂刷的功能。（4）滴管工具：本工具用來(lái)進(jìn)行顏色取樣，將一個(gè)圖形或線(xiàn)條的顏色復(fù)制到其他圖形或線(xiàn)條上。第3章動(dòng)畫(huà)角色的繪制與編輯3.2編輯圖形角色3.2.1選取角色利用魔術(shù)棒工具可在分離的位圖上選取相近色塊，操作步驟如下：（1）選擇位圖，通過(guò)“修改/分離”菜單，分離圖像。（2）選取套索工具選項(xiàng)中的魔術(shù)棒圖標(biāo)。（3）單擊“閥值”調(diào)節(jié)圖標(biāo)，設(shè)置閥值，閥值越大選取范圍越大。（4）在位圖上的任意處單擊，就會(huì)選取與單擊處顏色相近的區(qū)域。第3章動(dòng)畫(huà)角色的繪制與編輯3.2.2復(fù)制和刪除先選中要復(fù)制或刪除的對(duì)象，然后在對(duì)象上按右鍵，選擇復(fù)制或刪除功能菜單（也可通過(guò)“編輯”菜單進(jìn)行）。3.2.3擦除角色工具本工具用來(lái)擦除一些不需要的線(xiàn)條或區(qū)域。3.2.4變形工具（1）任意變形工具：本工具可實(shí)現(xiàn)對(duì)動(dòng)畫(huà)角色的大小和旋轉(zhuǎn)變形。（2）填充變形工具：本工具可實(shí)現(xiàn)對(duì)填充內(nèi)容的縮放和旋轉(zhuǎn)變形，像前面講過(guò)的位圖填充的變形。第3章動(dòng)畫(huà)角色的繪制與編輯3.3角色創(chuàng)作實(shí)例例1：人物的繪制制作思路：利用箭頭選取工具拉彎線(xiàn)條，組成簡(jiǎn)筆畫(huà)。制作步驟：（1）建立一個(gè)新文件（以后實(shí)例的第一步都是這個(gè)操作，就不再一一指明）。（2）用畫(huà)圓工具畫(huà)出空心圓，在眼睛和嘴巴部位畫(huà)出線(xiàn)條。（3）選取“黑色箭頭”工具，讓鼠標(biāo)逐漸靠近線(xiàn)段，當(dāng)鼠標(biāo)箭頭末端虛線(xiàn)框變?yōu)閳A弧時(shí)，按住左鍵拉彎線(xiàn)段，構(gòu)成簡(jiǎn)筆畫(huà)。第3章動(dòng)畫(huà)角色的繪制與編輯例2：水暈的制作制作思路：利用混色器面板制作透明的奇特效果。制作步驟如下：（1）建立Flash8文件，背景設(shè)為灰黑色。啟動(dòng)混色器面板，選擇“放射狀”填充模式。設(shè)置3個(gè)顏料桶，兩端桶的顏色為灰色（或淡紫色），中間桶的顏色為白色，選中左端的顏料桶，調(diào)整Alpha值為0，即將顏色設(shè)為透明。同樣將右端的顏料桶設(shè)為透明色。中間顏色的Alpha值不變，如圖3-20所示。（2）利用圖形繪制工具（不要邊框）繪出正圓，并將其變形，效果如圖3-21所示，圓圈中間為白色，向兩邊顏色逐漸過(guò)渡為透明，顯示出背景色。

圖3-20填充色設(shè)置圖3-21水暈圖效果第4章動(dòng)畫(huà)的基本形式本章學(xué)習(xí)導(dǎo)讀在Flash8中，動(dòng)畫(huà)的制作分為幀動(dòng)畫(huà)、移動(dòng)動(dòng)畫(huà)和形變動(dòng)畫(huà)3種基本形式。本章我們將分別講述有關(guān)動(dòng)畫(huà)制作的基本概念和3種動(dòng)畫(huà)形式的制作過(guò)程，通過(guò)本章學(xué)習(xí)讀者應(yīng)該掌握以下內(nèi)容：場(chǎng)景、時(shí)間軸、幀、元件在動(dòng)畫(huà)制作中的作用幀動(dòng)畫(huà)、移動(dòng)動(dòng)畫(huà)和形變動(dòng)畫(huà)的特點(diǎn)與制作過(guò)程第4章動(dòng)畫(huà)的基本形式4.1動(dòng)畫(huà)制作的有關(guān)概念4.1.1場(chǎng)景在Flash8動(dòng)畫(huà)中，場(chǎng)景是進(jìn)行Flash創(chuàng)作的工作區(qū)域。在場(chǎng)景中可以對(duì)當(dāng)前幀的內(nèi)容進(jìn)行編輯，只有在場(chǎng)景的矩形區(qū)域中的內(nèi)容才會(huì)最終被導(dǎo)出成為Flash作品。場(chǎng)景可以不止一個(gè)，多個(gè)場(chǎng)景可以集合在一起并按它們?cè)趫?chǎng)景面板上排列的先后順序進(jìn)行播放。下面是關(guān)于場(chǎng)景的幾個(gè)基本操作：（1）改變場(chǎng)景屬性。使用“修改/文檔”菜單或在工作區(qū)按右鍵選“文檔屬性”，彈出文檔屬性窗口，設(shè)置屬性參數(shù)。（2）場(chǎng)景的縮放與移動(dòng)。在動(dòng)畫(huà)制作中為了方便操作，可以通過(guò)菜單命令縮放工作區(qū)域。第4章動(dòng)畫(huà)的基本形式4.1.2時(shí)間軸時(shí)間軸是Flash中最重要、最核心的部分，如圖4-2所示。Flash是通過(guò)時(shí)間軸把一幅幅畫(huà)面組織起來(lái)的，所以，時(shí)間軸在Flash動(dòng)畫(huà)制作中扮演導(dǎo)演的角色。時(shí)間軸是進(jìn)行有關(guān)幀和層操作的地方，主要由圖層、幀和播放頭組成，可以分為左右兩部分，左邊部分用來(lái)對(duì)圖層進(jìn)行管理和操作，右邊部分用來(lái)對(duì)幀進(jìn)行操作。4.1.3幀前面我們講到了時(shí)間軸，隨著時(shí)間的推進(jìn)，動(dòng)畫(huà)會(huì)按照時(shí)間軸的橫軸方向播放，而時(shí)間軸正是對(duì)幀進(jìn)行操作的場(chǎng)所。在時(shí)間軸上，每一個(gè)小方格就是一個(gè)幀，每一幀相當(dāng)于場(chǎng)景中的一個(gè)鏡頭。在默認(rèn)狀態(tài)下，每隔5幀進(jìn)行數(shù)字標(biāo)示，如時(shí)間軸上的1、5、10、15等數(shù)字標(biāo)識(shí)，如圖4-3所示。第4章動(dòng)畫(huà)的基本形式4.1.4元件元件只是一種人為的規(guī)范，我們將動(dòng)畫(huà)中一些出現(xiàn)頻率比較高的物件對(duì)象作用定義以便引用，而這種被定義的物件就是“元件”。元件好像被儲(chǔ)備起來(lái)的演員，隨時(shí)可調(diào)出來(lái)扮演角色。使用元件，可以很方便地對(duì)動(dòng)畫(huà)元素進(jìn)行管理與修改，如顏色、亮度、透明度等。而且只需在庫(kù)窗口中對(duì)元件進(jìn)行修改，動(dòng)畫(huà)中所有被引用的該元件都會(huì)發(fā)生相應(yīng)的變化。動(dòng)畫(huà)制作，文件體積當(dāng)然越小越好，而使用元件，可以在很大程度上減小文件體積。如果動(dòng)畫(huà)中有很多重復(fù)的圖形而不使用元件，裝載時(shí)就要不斷地重復(fù)裝載圖形；如果使用元件，則只需裝載一次，以后就可以通過(guò)調(diào)用來(lái)直接播放了。第4章動(dòng)畫(huà)的基本形式1．新建一個(gè)元件選擇“插入/新建元件”菜單（也可以選中場(chǎng)景中已有的圖片，利用“插入/轉(zhuǎn)換為元件”），彈出“創(chuàng)建新元件”對(duì)話(huà)框。2．清除一個(gè)元件在庫(kù)窗口選中要?jiǎng)h除的元件，單擊窗口下邊框處的刪除圖標(biāo)；或者選中元件后，在右鍵菜單中選擇“刪除”。3．拷貝一個(gè)元件選中元件后，在右鍵菜單中選擇“復(fù)制”，并在彈出的窗口中設(shè)置元件屬性。4．元件的常規(guī)屬性元件有顏色、亮度、透明度等特殊效果，而這些效果可以通過(guò)屬性面板進(jìn)行設(shè)置。第4章動(dòng)畫(huà)的基本形式5．元件的應(yīng)用在場(chǎng)景中應(yīng)用元件包括應(yīng)用本影片元件庫(kù)中的元件和應(yīng)用其他影片元件庫(kù)中的元件。應(yīng)用本影片元件庫(kù)中的元件，應(yīng)先打開(kāi)元件庫(kù)面板，將相應(yīng)的元件用鼠標(biāo)拖入場(chǎng)景工作區(qū)。應(yīng)用其他影片中的元件應(yīng)該先通過(guò)菜單“文件/作為庫(kù)打開(kāi)”打開(kāi)相應(yīng)的元件庫(kù)，再應(yīng)用其中的元件。第4章動(dòng)畫(huà)的基本形式4.2三種基本動(dòng)畫(huà)形式幀動(dòng)畫(huà)、移動(dòng)動(dòng)畫(huà)和形變動(dòng)畫(huà)的制作過(guò)程各有特點(diǎn)，但制作原理是相通的，即要解決以下3個(gè)問(wèn)題：（1）什么在動(dòng)（確定運(yùn)動(dòng)對(duì)象）？（2）從哪里動(dòng)到哪里（運(yùn)動(dòng)的起止位置）？（3）怎么運(yùn)動(dòng)（設(shè)置運(yùn)動(dòng)的性質(zhì)）？4.2.1幀動(dòng)畫(huà)的制作幀動(dòng)畫(huà)是由一幀一幀的畫(huà)面組成的，要作出精美的動(dòng)畫(huà)需一幅一幅地繪制畫(huà)面，而后串接起來(lái)。幀動(dòng)畫(huà)的制作沒(méi)有什么特別之處，只是繪制不同的幀內(nèi)容時(shí)，適當(dāng)?shù)乩靡郧皫膬?nèi)容（洋蔥皮效果）可以大大簡(jiǎn)化、加快我們的動(dòng)畫(huà)制作進(jìn)程。第4章動(dòng)畫(huà)的基本形式4.2.2移動(dòng)動(dòng)畫(huà)的制作移動(dòng)動(dòng)畫(huà)是通過(guò)改變對(duì)象的位置、顏色、大小、旋轉(zhuǎn)角度、透明度等來(lái)實(shí)現(xiàn)的。改變以上屬性需要設(shè)置“屬性”和“混色器”面板等，該動(dòng)畫(huà)的運(yùn)動(dòng)對(duì)象必須是元件等實(shí)體。第4章動(dòng)畫(huà)的基本形式例4-3運(yùn)動(dòng)的小球（1）打開(kāi)Flash8程序，在場(chǎng)景編輯窗口的左邊用圓形工具繪制一個(gè)圓，內(nèi)部填色為“線(xiàn)性”漸變。（2）用黑箭頭工具選中剛剛繪制的圓，選擇“插入/轉(zhuǎn)換為元件”菜單，彈出元件命名對(duì)話(huà)框，我們給圓命名為Ball，元件的類(lèi)型選為“圖形”類(lèi)型。這樣場(chǎng)景中的圓就變成元件了。（3）在第30幀處單擊右鍵，在出現(xiàn)的彈出菜單中，選擇“插入關(guān)鍵幀”。插入新建關(guān)鍵幀后，系統(tǒng)自動(dòng)復(fù)制Ball元件在工作區(qū)的左邊緣處。用鼠標(biāo)直接按住Ball水平拖到工作區(qū)右邊緣處。（4）鼠標(biāo)單擊時(shí)間軸的第一幀（動(dòng)畫(huà)的開(kāi)始關(guān)鍵幀），然后在幀屬性面板“補(bǔ)間”標(biāo)簽后的文本框中，選擇動(dòng)畫(huà)形式為：動(dòng)畫(huà)，如下圖所示。第4章動(dòng)畫(huà)的基本形式（5）此時(shí)可以看到在時(shí)間軸上，從第1幀到第30幀處所有幀的顏色都變成淡藍(lán)色，并且有一個(gè)黑色的箭頭貫穿各幀。利用洋蔥皮效果切換按鈕，拖動(dòng)時(shí)間標(biāo)尺上的界標(biāo)，使之覆蓋所有幀。（6）測(cè)試動(dòng)畫(huà)。動(dòng)畫(huà)已經(jīng)制作完成，在場(chǎng)景編輯窗口敲回車(chē)鍵直接預(yù)覽，可以看到Ball元件從左到右飛過(guò)場(chǎng)景，如下圖所示。第4章動(dòng)畫(huà)的基本形式4.2.3形變動(dòng)畫(huà)創(chuàng)建Flash8動(dòng)畫(huà)，除了上面提到的位置變化外，還有形狀變化。形狀變化指的是運(yùn)動(dòng)對(duì)象的構(gòu)成進(jìn)行了重新組合。形變的運(yùn)動(dòng)對(duì)象與位移動(dòng)畫(huà)相反，必須是打散的實(shí)體，否則無(wú)法變形。在Flash8中實(shí)現(xiàn)圖形變形的途徑有多種，比如：通過(guò)選擇工具、變形工具、編輯工具等都可以實(shí)現(xiàn)變形第5章

洋蔥皮、圖層及聲音的應(yīng)用

5.1

洋蔥皮效果的應(yīng)用5.2圖層的應(yīng)用5.3聲音效果的應(yīng)用

5.1

洋蔥皮效果的應(yīng)用Flash8中有種專(zhuān)門(mén)的多幀編輯與對(duì)齊模式，叫作“洋蔥皮效果”（OnionSkin），它們位于時(shí)間軸下面。把“洋蔥皮”視圖模式打開(kāi)，點(diǎn)按時(shí)間軸下面的圖標(biāo),時(shí)間軸上出現(xiàn)了兩個(gè)圓圈，它們分別代表洋蔥皮的起始幀與終止幀，凡是在這個(gè)范圍內(nèi)的幀都可在同一時(shí)間進(jìn)行顯示。工作區(qū)中的內(nèi)容也會(huì)有所變化，從第1幀到第40幀的內(nèi)容全顯示出來(lái)了。洋蔥皮模式的作用主要是用來(lái)進(jìn)行多幀編輯，在進(jìn)行起始幀與終止幀的元素精確定位時(shí)，它常常是必不可少的工具。元件有個(gè)中心點(diǎn)，它是縮放與旋轉(zhuǎn)操作的參照點(diǎn)，因此在進(jìn)行多幀編輯時(shí)有必要先改變?cè)闹行狞c(diǎn)再進(jìn)行編輯。改變?cè)行狞c(diǎn)的操作是在元件的編輯窗口中進(jìn)行的。

5.2圖層的應(yīng)用

5.2.1圖層的狀態(tài)

在Flash8中，層有4種狀態(tài)。通過(guò)鼠標(biāo)單擊圖層名右側(cè)的圓點(diǎn)，可調(diào)整圖層的狀態(tài)。5.2.2圖層的基本操作圖層的基本操作可通過(guò)圖層窗口中的工具圖標(biāo)進(jìn)行。工具圖標(biāo)在圖層窗口的左下角，下面將結(jié)合操作過(guò)程講述他們的應(yīng)用。5.2.3圖層的屬性

隨便選中某個(gè)圖層，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“屬性”,本面板中，有圖層名稱(chēng)、顯示、鎖定、類(lèi)型、輪廓顏色、是否為外框模式等內(nèi)容。類(lèi)型中，除了普通圖層（Normal），還有“引導(dǎo)層”和“遮罩層”兩種。后面將介紹這兩種圖層的應(yīng)用。

5.2.4引導(dǎo)層

在Flash8圖層面板中，引導(dǎo)圖層的名稱(chēng)前有一個(gè)“小錘”或者“弧線(xiàn)”圖標(biāo),兩種圖標(biāo)表示兩種引導(dǎo)圖層，“小錘”圖標(biāo)表示的是普通的導(dǎo)向圖層，僅起到輔助靜態(tài)定位作用；弧線(xiàn)圖標(biāo)表示的引導(dǎo)圖層為運(yùn)動(dòng)引導(dǎo)圖層，在制作動(dòng)畫(huà)時(shí)起到引導(dǎo)對(duì)象沿指定路徑運(yùn)動(dòng)的作用。5.2.5遮罩層

從前面的知識(shí)我們知道：層是透明的，上面層的空白處可以透露出下面層的內(nèi)容，F(xiàn)lash8的遮罩層跟這個(gè)原理正好相反，遮罩層的內(nèi)容完全覆蓋在被遮罩的層上面，只有遮罩層內(nèi)有內(nèi)容的地區(qū)可以顯示下層圖像信息。就像探照燈似的，黑色的背景上，只有一個(gè)探照燈，燈光打到什么地方就顯示出該處的內(nèi)容。

5.3聲音效果的應(yīng)用

5.3.1

影響聲音質(zhì)量的因素在Flash8中使用聲音的時(shí)候，用戶(hù)必須了解影響聲音質(zhì)量和文件大小的幾個(gè)主要因素，其中最重要的就是采樣率（SampleRate）和位分辨率（BitResolution）。采樣率是指在進(jìn)行數(shù)字錄音時(shí)單位時(shí)間內(nèi)對(duì)音頻信號(hào)進(jìn)行采樣的次數(shù)。這個(gè)頻率的單位為赫茲（Hz）或千赫茲（KHz）。采樣率越高，聲音越好。例如，MP3音樂(lè)，一般都是以44.1kHz頻率采樣的聲音，每秒要對(duì)聲音進(jìn)行44100次分析，并記錄下每?jī)纱畏治鲋g的差別。高采樣率可以得到豐富完整的聲音信息。聲音的采樣越少，失真現(xiàn)象就越明顯。降低聲音文件的采樣率，文件的大小也會(huì)成比例減少。位分辨率（或叫位深度）是另外一個(gè)影響音頻質(zhì)量的因素。位分辨率指用于描述每個(gè)音頻采樣點(diǎn)的比特位數(shù)。它是一個(gè)指數(shù)，8位聲音采樣意味著2的8次方或者256級(jí)，16位聲音采樣表示2的16次方或者65536級(jí)。同等長(zhǎng)度的16位聲音比8位聲音描述的聲音信息要多得多。與8位聲音相比，16位音頻中的額外信息可以使得背景的噪音降至最小，而且更清晰更豐富。但16位的聲音比8位聲音文件大一倍。5.3.2音頻文件的導(dǎo)入

一般在Flash中使用的聲音格式是MP3和WAV，要將聲音添加到文檔中必須先導(dǎo)入，導(dǎo)入的方法有兩個(gè)：方法一：使用菜單欄中的“文件/導(dǎo)入/導(dǎo)入到庫(kù)”命令，可以將聲音導(dǎo)入到庫(kù)中。方法二：使用菜單欄中的“文件/導(dǎo)入/導(dǎo)入到場(chǎng)景”命令，同樣也可以導(dǎo)入聲音，但是聲音不會(huì)在場(chǎng)景上顯示，也是導(dǎo)入到庫(kù)中的。

5.3聲音效果的應(yīng)用

5.3.3聲音的同步方式

在時(shí)間軸上，可以設(shè)置聲音的4種同步方式，在實(shí)際的應(yīng)用中注意選擇合適的同步方式。

5.3.4給動(dòng)畫(huà)加上聲音

Flash8中你可以給某一幀加上聲音，即當(dāng)動(dòng)畫(huà)播放到這一幀時(shí)聲音就開(kāi)始播放，或者是給按鈕加上聲音，即可以給按鈕的4個(gè)狀態(tài)：“彈起”、“指針經(jīng)過(guò)”、“按下”、“點(diǎn)擊”中的某些狀態(tài)中加入聲音，當(dāng)你觸發(fā)按鈕的某一狀態(tài)時(shí)聲音就開(kāi)始播放。當(dāng)然加入的聲音文件必須先進(jìn)行導(dǎo)入操作。

5.3聲音效果的應(yīng)用

5.3.2音頻文件的導(dǎo)入

一般在Flash中使用的聲音格式是MP3和WAV，要將聲音添加到文檔中必須先導(dǎo)入，導(dǎo)入的方法有兩個(gè)：方法一：使用菜單欄中的“文件/導(dǎo)入/導(dǎo)入到庫(kù)”命令，可以將聲音導(dǎo)入到庫(kù)中。方法二：使用菜單欄中的“文件/導(dǎo)入/導(dǎo)入到場(chǎng)景”命令，同樣也可以導(dǎo)入聲音，但是聲音不會(huì)在場(chǎng)景上顯示，也是導(dǎo)入到庫(kù)中的。

5.3.3聲音的同步方式

在時(shí)間軸上，可以設(shè)置聲音的4種同步方式，在實(shí)際的應(yīng)用中注意選擇合適的同步方式。

5.3.4給動(dòng)畫(huà)加上聲音

Flash8中你可以給某一幀加上聲音，即當(dāng)動(dòng)畫(huà)播放到這一幀時(shí)聲音就開(kāi)始播放，或者是給按鈕加上聲音，即可以給按鈕的4個(gè)狀態(tài)：“彈起”、“指針經(jīng)過(guò)”、“按下”、“點(diǎn)擊”中的某些狀態(tài)中加入聲音，當(dāng)你觸發(fā)按鈕的某一狀態(tài)時(shí)聲音就開(kāi)始播放。當(dāng)然加入的聲音文件必須先進(jìn)行導(dǎo)入操作。

第6章

動(dòng)畫(huà)技術(shù)的綜合應(yīng)用

6.1交互動(dòng)畫(huà)的制作

6.2動(dòng)畫(huà)的輸出與優(yōu)化

6.3動(dòng)畫(huà)制作綜合實(shí)例

6.1交互動(dòng)畫(huà)的制作

6.1.1交互動(dòng)畫(huà)的原理交互動(dòng)畫(huà)就是觀眾能控制動(dòng)畫(huà)播放內(nèi)容的動(dòng)畫(huà)，動(dòng)畫(huà)的播放不僅僅是由自己決定的，還決定于播放者的操作，這樣觀眾就由被動(dòng)地接受變?yōu)橹鲃?dòng)地控制，將大大增強(qiáng)動(dòng)畫(huà)的感染力和吸引力。

6.1.2簡(jiǎn)單交互動(dòng)畫(huà)的制作

Flash8中交互功能是通過(guò)一個(gè)這樣的過(guò)程來(lái)實(shí)現(xiàn)的：事件→動(dòng)作→目標(biāo)，就是某一事件發(fā)生后將觸發(fā)相應(yīng)的行為，相應(yīng)的行為就會(huì)作用于目標(biāo)，產(chǎn)生出特定的效果。在動(dòng)畫(huà)中添加交互功能，可以通過(guò)兩種方式來(lái)觸發(fā)事件：一種是基于動(dòng)作事件（例如單擊鼠標(biāo)或鍵盤(pán)）來(lái)完成交互，這種交互也被稱(chēng)為按鈕事件交互，因?yàn)樗鼈兛偸峭ㄟ^(guò)按鈕來(lái)觸發(fā)動(dòng)作的；另外一種是基于時(shí)間的，當(dāng)動(dòng)畫(huà)播放到某一幀時(shí)就會(huì)觸發(fā)相應(yīng)的事件來(lái)完成交互功能，這就是幀事件交互。

6.1交互動(dòng)畫(huà)的制作

6.1.3交互動(dòng)畫(huà)實(shí)例下面通過(guò)兩個(gè)具體交互（Action）動(dòng)畫(huà)實(shí)例，來(lái)進(jìn)一步熟悉交互動(dòng)畫(huà)的制作技巧，讓大家對(duì)交互動(dòng)畫(huà)有一個(gè)比較具體的認(rèn)識(shí)。例6-1利用幀和按鈕事件實(shí)現(xiàn)播放跳轉(zhuǎn)

例6-2利用鍵盤(pán)事件控制聲音的播放6.1交互動(dòng)畫(huà)的制作

6.1.4

交互性的檢測(cè)在Flash8編輯環(huán)境中，播放電影可預(yù)覽電影中的動(dòng)畫(huà)和聲音，但要檢測(cè)全部的交互性，應(yīng)使用“控制/測(cè)試影片”菜單命令，或?qū)㈦娪拜敵鰹镾hockwaveFlash格式。檢測(cè)局部交互性，通過(guò)選擇“控制/啟用簡(jiǎn)單按鈕”或“控制/啟用簡(jiǎn)單幀動(dòng)作”菜單實(shí)現(xiàn)。檢測(cè)所有交互性和動(dòng)畫(huà)，通過(guò)選擇“控制/測(cè)試影片”或“控制/測(cè)試場(chǎng)景”菜單。以上兩個(gè)功能可以將電影或當(dāng)前場(chǎng)景輸出到一個(gè)臨時(shí)文件，然后在新窗口中播放此文件。當(dāng)檢測(cè)窗口被激活，用來(lái)控制電影的控制菜單中的命令和所有鍵盤(pán)快捷鍵繼續(xù)保持有效。你可以使用此窗口來(lái)檢測(cè)交互效果。

6.2動(dòng)畫(huà)的輸出與優(yōu)化

6.2.1Flash動(dòng)畫(huà)的輸出

Flash8動(dòng)畫(huà)的輸出，共有3種方式：①“保存”或“另存為”；②導(dǎo)出影片；③發(fā)布影片。如果最終文件要保留具體的圖層信息和后期的可編輯權(quán)，那就用“保存”或“另存為”方式；如果最終文件直接輸出成影片，就用導(dǎo)出影片方式；如果要用指定格式，如網(wǎng)頁(yè)的超文本協(xié)議（HTML）直接進(jìn)行發(fā)布，而不是另外添加代碼對(duì)最終結(jié)果進(jìn)行引用，則可以用發(fā)布影片方式。

6.2.2三種基本動(dòng)畫(huà)形式

1．影幀的優(yōu)化2．要養(yǎng)成使用元件的習(xí)慣

3．圖形的優(yōu)化

4．聲音的優(yōu)化

5．其他優(yōu)化

6.3動(dòng)畫(huà)制作綜合實(shí)例

通過(guò)以上學(xué)習(xí)，我們對(duì)Flash8動(dòng)畫(huà)制作技術(shù)有了較全面的了解，下面通過(guò)7個(gè)實(shí)例，演示以上技術(shù)綜合運(yùn)用的效果，希望能給讀者以啟示，達(dá)到舉一反三熟練應(yīng)用的目的。例6-3下落的彈性小球

例6-4放大鏡例6-5水中倒影

例6-6光筆寫(xiě)字

例6-7書(shū)本翻頁(yè)

例6-8電子琴

例6-9鼠標(biāo)跟隨效果的制作

例6-10秋雨連綿

第7章Fireworks8基礎(chǔ)知識(shí)

7.1網(wǎng)頁(yè)圖像概述7.2認(rèn)識(shí)Fireworks8

7.3矢量圖像的繪制與編輯

7.4修改對(duì)象

7.1網(wǎng)頁(yè)圖像概述

7.1.1圖像的格式在講解網(wǎng)頁(yè)圖像的處理之前，我們首先應(yīng)該了解一下網(wǎng)頁(yè)圖像的格式及特點(diǎn)。目前網(wǎng)絡(luò)支持的圖形格式主要有JPEG/JPG、GIF和PNG三種。由于這3種格式各有利弊，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，要根據(jù)實(shí)際情況來(lái)考慮選擇使用哪種圖像格式。

7.1.2矢量圖像和位圖圖像1．矢量圖像矢量圖像是用包含顏色和位置屬性的直線(xiàn)或曲線(xiàn)（即稱(chēng)為矢量）來(lái)描述圖像屬性的一種方法。比如，一個(gè)圓包括兩部分：由通過(guò)圓的邊緣的一些點(diǎn)組成的輪廓和輪廓內(nèi)的點(diǎn)。矢量圖形是具有獨(dú)立分辨率的，即它可以在不損失任何質(zhì)量的前提下，以各種各樣的分辨率顯示在輸出設(shè)備中。2．位圖圖像位圖圖像是對(duì)每一個(gè)柵格內(nèi)不同顏色的點(diǎn)進(jìn)行描述，這些點(diǎn)稱(chēng)為像素。例如，上面所說(shuō)的圓圖像，可以由所有組成該圓的像素點(diǎn)的位置和顏色來(lái)描述。因?yàn)榫庉嬑粓D圖像時(shí)，修改的是像素點(diǎn)，而不是直線(xiàn)和曲線(xiàn)，因而，不可能通過(guò)修改描述橢圓輪廓的直線(xiàn)或曲線(xiàn)來(lái)更改橢圓的性質(zhì)。7.2認(rèn)識(shí)Fireworks87.2.1Fireworks8的新增功能Fireworks8除了繼承了以往Fireworks其它版本的功能外，還具有以下的功能：（1）新增的“圖像編輯”面板。這個(gè)新面板是一個(gè)中軸位置，通過(guò)它可以訪(fǎng)問(wèn)常用的圖像編輯工具、濾鏡和菜單命令。（2）更多的導(dǎo)入文件格式?？梢灾С謱?dǎo)入QuickTime圖像、MacPaint、SCI和JPEG2000文件格式。（3）優(yōu)化的批處理工作流程。工作流程的優(yōu)化包括：簡(jiǎn)化的重命名功能，在批處理過(guò)程中進(jìn)行縮放時(shí)檢查文件尺寸的功能，以及增加了狀態(tài)欄和日志文件等。（4）矢量兼容性。在Flash和Fireworks之間移動(dòng)對(duì)象時(shí)，會(huì)保留矢量屬性（填充、筆觸、濾鏡和混合模式）。（5）更多的切片選項(xiàng)。當(dāng)所選對(duì)象是多邊形路徑時(shí)，將自動(dòng)插入多邊行切片。（6）CSS彈出菜單。Fireworks8使用CSS格式創(chuàng)建交互式的彈出菜單，可以幫助使用者輕松地自定義與使用Dreamweaver構(gòu)建的網(wǎng)站進(jìn)行代碼的完美集成。7.2認(rèn)識(shí)Fireworks8（7）透視陰影和純色陰影。為打開(kāi)的路徑和文本對(duì)象添加透視陰影，對(duì)多次所應(yīng)用到的對(duì)象印上標(biāo)記的新動(dòng)態(tài)濾鏡。（8）新增的圖像混合模式?；旌夏Ｊ皆黾拥?9種，功能更強(qiáng)大了。

7.2.2Fireworks8的工作界面進(jìn)入Fireworks8工作狀態(tài)之前，我們先要來(lái)熟悉Fireworks8的工作界面。Fireworks8的界面大致可以分為文檔窗口、工具欄、工具箱、面板和菜單等幾項(xiàng).7.2.3文檔的基本操作介紹了Fireworks8的工作環(huán)境之后，開(kāi)始介紹文檔的基本操作方法。文檔操作是Fireworks8中最基本的操作，包括新建文檔、打開(kāi)文檔、導(dǎo)入文檔等。在Fireworks8中，文檔圖像采用PNG格式。PNG是（PortableNetworkGraphic）便攜網(wǎng)絡(luò)圖像的首字母縮寫(xiě)，是一種新型的圖像格式。

7.3矢量圖像的繪制與編輯

7.3.1圖像的繪制模式

1．圖像繪制模式的種類(lèi)

2．圖像繪制模式的切換

7.3.2矢量圖像的繪制繪制矢量圖像就是繪制路徑的過(guò)程，主要通過(guò)如圖7-9所示的繪圖工具箱中的工具完成。在進(jìn)行路徑繪制時(shí)，可以在工具箱下方的筆畫(huà)顏色區(qū)域選擇需要的筆畫(huà)顏色，而在工具箱下方的填充區(qū)域選擇需要的填充顏色。在使用填充顏色時(shí)，只有在繪制矩形、橢圓和多邊形時(shí)，才會(huì)自動(dòng)填充設(shè)置的顏色，如果使用鉛筆、畫(huà)刷或鋼筆繪制路徑，路徑內(nèi)部不會(huì)填充顏色，必須在繪制完畢后選中對(duì)象，然后再?gòu)墓ぞ呦渲械奶畛漕伾珔^(qū)域選擇需要的顏色。路徑繪制工具按鈕右下角的小黑色箭頭，表示該工具包含有具體的選擇模式。鼠標(biāo)左鍵按住工具按鈕會(huì)彈出菜單以供選擇。

7.3.3布局工具的使用繪制對(duì)象時(shí)，經(jīng)常需要了解當(dāng)前的坐標(biāo)位置，F(xiàn)ireworks8提供了“標(biāo)尺”和“網(wǎng)格”等布局工具，幫助在文檔中精確定位。7.3矢量圖像的繪制與編輯

7.3.4標(biāo)題文字的制作1．編輯文本2．制作特效文本

3．路徑文字的編輯

7.4修改對(duì)象7.4.1選擇對(duì)象要修改對(duì)象，首先要了解選中對(duì)象的基本方法，在Fireworks8中，有4種選中對(duì)象的工具：“指針”工具、“部分選定”工具、“縮放”工具和“剪裁”工具.

7.4.2組織和管理對(duì)象

為了方便對(duì)對(duì)象的控制，合理組織對(duì)象是非常重要的。在Fireworks8中，可以移動(dòng)對(duì)象、設(shè)置對(duì)象的重疊順序、顯示或隱藏對(duì)象、復(fù)制、剪切或刪除對(duì)象，也可以將多個(gè)對(duì)象組合起來(lái)，作為一個(gè)對(duì)象看待。

7.4.3整形路徑前面介紹的主要是針對(duì)對(duì)象整體的操作方法，如果希望修改對(duì)象本身的形狀，也即修改路徑，則需要進(jìn)行更多更細(xì)致的操作。

1．通過(guò)編輯點(diǎn)整形路徑

2．直接整形路徑

第7章Fireworks8基礎(chǔ)知識(shí)

7.1網(wǎng)頁(yè)圖像概述7.2認(rèn)識(shí)Fireworks8

7.3矢量圖像的繪制與編輯

7.4修改對(duì)象

7.1網(wǎng)頁(yè)圖像概述

7.1.1圖像的格式在講解網(wǎng)頁(yè)圖像的處理之前，我們首先應(yīng)該了解一下網(wǎng)頁(yè)圖像的格式及特點(diǎn)。目前網(wǎng)絡(luò)支持的圖形格式主要有JPEG/JPG、GIF和PNG三種。由于這3種格式各有利弊，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，要根據(jù)實(shí)際情況來(lái)考慮選擇使用哪種圖像格式。

7.1.2矢量圖像和位圖圖像1．矢量圖像矢量圖像是用包含顏色和位置屬性的直線(xiàn)或曲線(xiàn)（即稱(chēng)為矢量）來(lái)描述圖像屬性的一種方法。比如，一個(gè)圓包括兩部分：由通過(guò)圓的邊緣的一些點(diǎn)組成的輪廓和輪廓內(nèi)的點(diǎn)。矢量圖形是具有獨(dú)立分辨率的，即它可以在不損失任何質(zhì)量的前提下，以各種各樣的分辨率顯示在輸出設(shè)備中。2．位圖圖像位圖圖像是對(duì)每一個(gè)柵格內(nèi)不同顏色的點(diǎn)進(jìn)行描述，這些點(diǎn)稱(chēng)為像素。例如，上面所說(shuō)的圓圖像，可以由所有組成該圓的像素點(diǎn)的位置和顏色來(lái)描述。因?yàn)榫庉嬑粓D圖像時(shí)，修改的是像素點(diǎn)，而不是直線(xiàn)和曲線(xiàn)，因而，不可能通過(guò)修改描述橢圓輪廓的直線(xiàn)或曲線(xiàn)來(lái)更改橢圓的性質(zhì)。7.2認(rèn)識(shí)Fireworks87.2.1Fireworks8的新增功能Fireworks8除了繼承了以往Fireworks其它版本的功能外，還具有以下的功能：（1）新增的“圖像編輯”面板。這個(gè)新面板是一個(gè)中軸位置，通過(guò)它可以訪(fǎng)問(wèn)常用的圖像編輯工具、濾鏡和菜單命令。（2）更多的導(dǎo)入文件格式。可以支持導(dǎo)入QuickTime圖像、MacPaint、SCI和JPEG2000文件格式。（3）優(yōu)化的批處理工作流程。工作流程的優(yōu)化包括：簡(jiǎn)化的重命名功能，在批處理過(guò)程中進(jìn)行縮放時(shí)檢查文件尺寸的功能，以及增加了狀態(tài)欄和日志文件等。（4）矢量兼容性。在Flash和Fireworks之間移動(dòng)對(duì)象時(shí)，會(huì)保留矢量屬性（填充、筆觸、濾鏡和混合模式）。（5）更多的切片選項(xiàng)。當(dāng)所選對(duì)象是多邊形路徑時(shí)，將自動(dòng)插入多邊行切片。（6）CSS彈出菜單。Fireworks8使用CSS格式創(chuàng)建交互式的彈出菜單，可以幫助使用者輕松地自定義與使用Dreamweaver構(gòu)建的網(wǎng)站進(jìn)行代碼的完美集成。7.2認(rèn)識(shí)Fireworks8（7）透視陰影和純色陰影。為打開(kāi)的路徑和文本對(duì)象添加透視陰影，對(duì)多次所應(yīng)用到的對(duì)象印上標(biāo)記的新動(dòng)態(tài)濾鏡。（8）新增的圖像混合模式?；旌夏Ｊ皆黾拥?9種，功能更強(qiáng)大了。

7.2.2Fireworks8的工作界面進(jìn)入Fireworks8工作狀態(tài)之前，我們先要來(lái)熟悉Fireworks8的工作界面。Fireworks8的界面大致可以分為文檔窗口、工具欄、工具箱、面板和菜單等幾項(xiàng).7.2.3文檔的基本操作介紹了Fireworks8的工作環(huán)境之后，開(kāi)始介紹文檔的基本操作方法。文檔操作是Fireworks8中最基本的操作，包括新建文檔、打開(kāi)文檔、導(dǎo)入文檔等。在Fireworks8中，文檔圖像采用PNG格式。PNG是（PortableNetworkGraphic）便攜網(wǎng)絡(luò)圖像的首字母縮寫(xiě)，是一種新型的圖像格式。

7.3矢量圖像的繪制與編輯

7.3.1圖像的繪制模式

1．圖像繪制模式的種類(lèi)

2．圖像繪制模式的切換

7.3.2矢量圖像的繪制繪制矢量圖像就是繪制路徑的過(guò)程，主要通過(guò)如圖7-9所示的繪圖工具箱中的工具完成。在進(jìn)行路徑繪制時(shí)，可以在工具箱下方的筆畫(huà)顏色區(qū)域選擇需要的筆畫(huà)顏色，而在工具箱下方的填充區(qū)域選擇需要的填充顏色。在使用填充顏色時(shí)，只有在繪制矩形、橢圓和多邊形時(shí)，才會(huì)自動(dòng)填充設(shè)置的顏色，如果使用鉛筆、畫(huà)刷或鋼筆繪制路徑，路徑內(nèi)部不會(huì)填充顏色，必須在繪制完畢后選中對(duì)象，然后再?gòu)墓ぞ呦渲械奶畛漕伾珔^(qū)域選擇需要的顏色。路徑繪制工具按鈕右下角的小黑色箭頭，表示該工具包含有具體的選擇模式。鼠標(biāo)左鍵按住工具按鈕會(huì)彈出菜單以供選擇。

7.3.3布局工具的使用繪制對(duì)象時(shí)，經(jīng)常需要了解當(dāng)前的坐標(biāo)位置，F(xiàn)ireworks8提供了“標(biāo)尺”和“網(wǎng)格”等布局工具，幫助在文檔中精確定位。7.3矢量圖像的繪制與編輯

7.3.4標(biāo)題文字的制作1．編輯文本2．制作特效文本

3．路徑文字的編輯

7.4修改對(duì)象7.4.1選擇對(duì)象要修改對(duì)象，首先要了解選中對(duì)象的基本方法，在Fireworks8中，有4種選中對(duì)象的工具：“指針”工具、“部分選定”工具、“縮放”工具和“剪裁”工具.

7.4.2組織和管理對(duì)象

為了方便對(duì)對(duì)象的控制，合理組織對(duì)象是非常重要的。在Fireworks8中，可以移動(dòng)對(duì)象、設(shè)置對(duì)象的重疊順序、顯示或隱藏對(duì)象、復(fù)制、剪切或刪除對(duì)象，也可以將多個(gè)對(duì)象組合起來(lái)，作為一個(gè)對(duì)象看待。

7.4.3整形路徑前面介紹的主要是針對(duì)對(duì)象整體的操作方法，如果希望修改對(duì)象本身的形狀，也即修改路徑，則需要進(jìn)行更多更細(xì)致的操作。

1．通過(guò)編輯點(diǎn)整形路徑

2．直接整形路徑

第8章位圖編輯與動(dòng)畫(huà)制作8.1

位圖的編輯

8.2在Fireworks8中建立動(dòng)畫(huà)實(shí)例8.1位圖的編輯

8.1.1位圖編輯工具

MacromediaFireworks是一款用于圖像設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)秀應(yīng)用軟件，是編輯矢量和位圖的綜合工具。與以前版本相比，F(xiàn)ireworks8增強(qiáng)了位圖的編輯處理功能，提供了更多的位圖編輯工具.8.1.2位圖編輯實(shí)例1．圖像變形2．位圖背景的編輯

8.2在Fireworks8中建立動(dòng)畫(huà)實(shí)例

8.2.1建立動(dòng)畫(huà)對(duì)象（1）新建一個(gè)文件，畫(huà)布長(zhǎng)為300像素，寬為150像素。（2）用矩形工具畫(huà)一個(gè)矩形，可以用任何顏色填充。8.2.2動(dòng)畫(huà)的設(shè)定（1）選中矩形，選擇“修改/動(dòng)畫(huà)/選擇動(dòng)畫(huà)”菜單，彈出如圖8-21所示的設(shè)置窗口。

（2）“幀”框中輸入動(dòng)畫(huà)的

幀數(shù)15，在位移一定的情況下幀數(shù)越多動(dòng)畫(huà)越平滑。（3）“移動(dòng)”框中輸入180，這是設(shè)定移動(dòng)的距離（以像素為單位）。（4）“方向”框中輸入45，設(shè)定移動(dòng)的角度。（5）單擊“確定”按鈕，將會(huì)出現(xiàn)系統(tǒng)提示框，問(wèn)你是否添加新的幀。單擊“確定”按鈕，將會(huì)自動(dòng)添加新的幀。

8.2在Fireworks8中建立動(dòng)畫(huà)實(shí)例

8.2.3動(dòng)畫(huà)預(yù)覽（1）如果幀面板不可見(jiàn)，選擇“窗口/幀”菜單，啟動(dòng)幀面板。

（2）單擊畫(huà)布下方的“播放/停止”按鈕，就可以播放動(dòng)畫(huà)。

（3）再次單擊這個(gè)按鈕可以停止。（4）在幀面板上可以看到每一幀的動(dòng)畫(huà)。8.2.4動(dòng)畫(huà)的編輯（1）選擇“窗口/屬性”菜單，打開(kāi)“屬性”面板（或選擇“修改/動(dòng)畫(huà)/設(shè)置”）。（2）單擊“幀”面板上的第一幀。（3）選中工作區(qū)中的動(dòng)畫(huà)對(duì)象，在屬性面板上就會(huì)顯示這個(gè)動(dòng)畫(huà)的設(shè)置。（4）對(duì)這個(gè)設(shè)定進(jìn)行修改，比如在“縮放”框內(nèi)輸入110，使從第一幀到最后一幀圖像放大10%。（5）在“不透明度”左邊的框內(nèi)輸入10，右邊的框內(nèi)輸入100，這將使動(dòng)畫(huà)產(chǎn)生透明度的漸變。（6）在“旋轉(zhuǎn)”中輸入180，將使動(dòng)畫(huà)產(chǎn)生180度的旋轉(zhuǎn)。（7）再次單擊“播放”按鈕就可以看到設(shè)置效果了。8.2在Fireworks8中建立動(dòng)畫(huà)實(shí)例

8.2.5編輯運(yùn)動(dòng)路徑（1）單擊工作區(qū)上的動(dòng)畫(huà)對(duì)象，運(yùn)動(dòng)路徑就可以顯示出來(lái)。（2）用鼠標(biāo)拖動(dòng)路徑上的第一幀（綠色的點(diǎn)）和最后一幀（紅色的點(diǎn)）來(lái)改變它們的位置。（3）也可以拖動(dòng)中間的幀（藍(lán)色的點(diǎn)），改變整條路徑。（4）預(yù)覽編輯效果。8.2.6輸出gif動(dòng)畫(huà)要在瀏覽器中看到這個(gè)動(dòng)畫(huà)，就必須輸出成gif動(dòng)畫(huà)格式或swf格式。（1）選擇“窗口/優(yōu)化”菜單，打開(kāi)“優(yōu)化”面板（參見(jiàn)圖7-8）。（2）輸出格式設(shè)為“gif動(dòng)畫(huà)”。（3）單擊菜單上的“文件/導(dǎo)出”命令。（4）保存類(lèi)型選擇“HTML和圖像”就可以輸出一個(gè)HTML文件。（5）用瀏覽器打開(kāi)這個(gè)動(dòng)畫(huà)，瀏覽動(dòng)畫(huà)效果。第9章圖像的優(yōu)化與導(dǎo)出本章學(xué)習(xí)導(dǎo)讀網(wǎng)頁(yè)圖像設(shè)計(jì)的最終目標(biāo)是創(chuàng)建能夠盡可能快地下載的優(yōu)美圖像。為此，必須在最大限度地保持圖像品質(zhì)的同時(shí)，選擇壓縮質(zhì)量最高的文件格式來(lái)對(duì)圖像進(jìn)行優(yōu)化、導(dǎo)出。本章主要講述Fireworks8優(yōu)化和導(dǎo)出圖像的基本操作，通過(guò)本章學(xué)習(xí)，讀者應(yīng)該掌握以下內(nèi)容：圖像優(yōu)化的基本方法圖像導(dǎo)出的基本方法第9章圖像的優(yōu)化與導(dǎo)出9.1圖像的優(yōu)化9.1.1優(yōu)化圖像應(yīng)考慮的因素1．文件格式每種文件格式都有不同的壓縮顏色信息的方法，為某些類(lèi)型的圖像選擇適當(dāng)?shù)母袷娇梢源蟠鬁p小文件大小。2．特定選項(xiàng)每種圖像文件格式都有一組惟一的選項(xiàng)，可以用諸如色階這樣的選項(xiàng)來(lái)減小文件大小，某些圖像格式（如GIF和JPEG）還具有控制圖像壓縮的選項(xiàng)。3．圖像顏色（僅限于8位文件格式）可以通過(guò)將圖像局限于一個(gè)稱(chēng)為調(diào)色板的特定顏色集來(lái)限制顏色。然后，修剪掉調(diào)色板中未使用的顏色。調(diào)色板中的顏色越少意味著圖像中的顏色也越少，使調(diào)色板圖像文件類(lèi)型的文件大小也越小。第9章圖像的優(yōu)化與導(dǎo)出9.1.2圖像優(yōu)化的途徑1．使用優(yōu)化面板選擇“窗口/優(yōu)化”菜單，啟動(dòng)優(yōu)化面板。通過(guò)優(yōu)化面板，可以很方便地在工作區(qū)內(nèi)進(jìn)行圖像優(yōu)化，并且同時(shí)看到優(yōu)化后的效果。在優(yōu)化面板上預(yù)先設(shè)置了幾種優(yōu)化設(shè)定可供選擇，也可以按照自己的需要進(jìn)行設(shè)定。優(yōu)化設(shè)置的操作過(guò)程如下：（1）在“設(shè)置”下拉列表中選擇文件格式。（2）設(shè)置格式特定的選項(xiàng)，如色版、顏色和抖動(dòng)。（3）根據(jù)需要選擇其他優(yōu)化設(shè)置，并可以命名并保存自定義優(yōu)化設(shè)置。第9章圖像的優(yōu)化與導(dǎo)出2．切片優(yōu)化可以對(duì)分割的圖像的每一個(gè)切片進(jìn)行不同的優(yōu)化設(shè)定，比如你可以將圖像上色彩豐富的部分設(shè)置為JPEG格式，色彩單一的部分設(shè)置為GIF格式。3．優(yōu)化效果預(yù)覽點(diǎn)擊文檔窗口上的“預(yù)覽”標(biāo)簽，可以預(yù)覽優(yōu)化后的效果。點(diǎn)擊“2幅”標(biāo)簽和“4幅”標(biāo)簽可以比較幾種不同的優(yōu)化設(shè)定所產(chǎn)生的效果，如圖所示。第9章圖像的優(yōu)化與導(dǎo)出9.2圖像的導(dǎo)出9.2.1常規(guī)輸出（1）選擇“文件/保存”可以直接進(jìn)行輸出。（2）選擇“文件/另存為”也可以直接進(jìn)行輸出。（3）選擇“導(dǎo)出”輸出圖像，如圖所示。第9章圖像的優(yōu)化與導(dǎo)出9.2.2輸出一個(gè)圖像的區(qū)域（1）選擇工具箱中“選擇”工具區(qū)里的導(dǎo)出區(qū)域工具，畫(huà)出需要輸出的區(qū)域范圍。（2）雙擊輸出區(qū)域，彈出輸出預(yù)覽窗口，在輸出預(yù)覽窗口內(nèi)可以調(diào)整圖像輸出的設(shè)置。（3）單擊“輸出”按鈕就可以輸出圖像了。9.2.3輸出切片將一幅大的圖像使用切割工具分成一個(gè)個(gè)小的切片以后，你就要把這些切片輸出。（1）選擇“文件/導(dǎo)出”菜單，彈出對(duì)話(huà)框。（2）在“切片”選項(xiàng)欄下有幾個(gè)選項(xiàng)：無(wú)：忽略所有的切片對(duì)象，輸出成當(dāng)前格式的整幅圖像。導(dǎo)出切片：該默認(rèn)的設(shè)置輸出切片包括所有的行為設(shè)置。沿引導(dǎo)線(xiàn)切片：輸出切片，但忽略所有該對(duì)象的行為設(shè)置。如果只輸出選中的一個(gè)或幾個(gè)切片，可以勾選下面的“僅已選切片”。第9章圖像的優(yōu)化與導(dǎo)出9.2.4輸出Flash格式可以將圖像和動(dòng)畫(huà)輸出為Flash的swf格式。（1）選擇“文件/導(dǎo)出”菜單，彈出設(shè)置對(duì)話(huà)框。（2）選擇保存類(lèi)型下拉列表中的MicrosoftFlashSwf，單擊“選項(xiàng)”按鈕彈出如圖所示的設(shè)置對(duì)話(huà)框，對(duì)導(dǎo)出的動(dòng)畫(huà)進(jìn)行設(shè)置。設(shè)置完成后保存導(dǎo)出文件。第9章圖像的優(yōu)化與導(dǎo)出9.2.5使用“導(dǎo)出向?qū)А比绻麑?duì)優(yōu)化和導(dǎo)出網(wǎng)頁(yè)圖像不太熟悉，可以使用“導(dǎo)出向?qū)А睅椭瓿蛇@些工作。“導(dǎo)出向?qū)А蓖ㄟ^(guò)問(wèn)題和建議逐步引導(dǎo)完成優(yōu)化和導(dǎo)出過(guò)程，即使你不了解優(yōu)化和導(dǎo)出的細(xì)節(jié)，也可以輕松導(dǎo)出圖像。使用“導(dǎo)出向?qū)А睂?dǎo)出文檔的過(guò)程如下：（1）選擇“文件/導(dǎo)出向?qū)А辈藛?，彈出設(shè)置對(duì)話(huà)框。（2）回答出現(xiàn)的任何問(wèn)題，并在每個(gè)面板中單擊“繼續(xù)”按鈕。（3）單擊“退出”按鈕?！皩?dǎo)出預(yù)覽”窗口打開(kāi)，其中顯示建議的導(dǎo)出選項(xiàng)?！皩?dǎo)出預(yù)覽”的預(yù)覽區(qū)域所顯示的文檔或圖像與導(dǎo)出時(shí)的完全相同，該區(qū)域還估計(jì)當(dāng)前導(dǎo)出設(shè)置下的文件大小和下載時(shí)間?？梢杂貌鸱忠晥D比較各種設(shè)置，以便在保持可接受的品質(zhì)級(jí)別的同時(shí)找到最小的文件大小。還可以用“優(yōu)化到指定大小”向?qū)拗莆募笮?。?dāng)導(dǎo)出GIF動(dòng)畫(huà)或JavaScript變換圖像時(shí)，預(yù)估的文件大小表示所有幀的總大小。（4）設(shè)置完成后，單擊“導(dǎo)出”按鈕，導(dǎo)出優(yōu)化后的圖像。第10章Dreamweaver8基礎(chǔ)知識(shí)本章學(xué)習(xí)導(dǎo)讀Dreamweaver8是Macromedia公司推出的可視化網(wǎng)頁(yè)編輯工具M(jìn)acromediaStudio8Web開(kāi)發(fā)套件的一個(gè)組成部分。它采用了多種先進(jìn)技術(shù)，能夠方便快捷地創(chuàng)建極具表現(xiàn)力和動(dòng)感效果的網(wǎng)頁(yè)。本章主要講解Dreamweaver8的基本知識(shí)和技巧。通過(guò)本章學(xué)習(xí)，讀者可以掌握以下內(nèi)容：Dreamweaver8的新增功能Dreamweaver8的工作界面Dreamweaver8本地站點(diǎn)的建設(shè)Dreamweaver8的文件操作第10章Dreamweaver8基礎(chǔ)知識(shí)10.1認(rèn)識(shí)Dreamweaver810.1.1Dreamweaver8的新增功能改進(jìn)的工作流程擴(kuò)展的CSS支持快速的文件傳輸對(duì)XML/XSLT的遠(yuǎn)景支持第10章Dreamweaver8基礎(chǔ)知識(shí)10.1.2Dreamweaver8的工作區(qū)1．工作區(qū)布局（1）設(shè)計(jì)器和編碼器（2）雙重屏幕2．工作區(qū)布局的切換選擇“窗口/工作區(qū)布局”菜單，可以在設(shè)計(jì)器、編碼器和雙重屏幕三種布局之間切換。第10章Dreamweaver8基礎(chǔ)知識(shí)3．Dreamweaver8設(shè)計(jì)器布局下的集成開(kāi)發(fā)環(huán)境第10章Dreamweaver8基礎(chǔ)知識(shí)10.2本地站點(diǎn)的建立10.2.1關(guān)于站點(diǎn)的規(guī)劃和設(shè)計(jì)在Dreamweaver8中，站點(diǎn)這個(gè)術(shù)語(yǔ)可以指Web站點(diǎn)，也可以指用來(lái)存儲(chǔ)屬于Web站點(diǎn)文檔的本地硬盤(pán)上的文件夾。當(dāng)開(kāi)始考慮創(chuàng)建Web站點(diǎn)時(shí)，應(yīng)該按照一系列的規(guī)劃步驟進(jìn)行，才能確保成功地使用站點(diǎn)。1．確定目標(biāo)確定站點(diǎn)的目標(biāo)是創(chuàng)建Web站點(diǎn)時(shí)應(yīng)該采取的第一步。明確的目標(biāo)使我們可以集中注意力，針對(duì)特定的需要來(lái)設(shè)計(jì)和規(guī)劃Web站點(diǎn)。2．選擇目標(biāo)用戶(hù)確定了站點(diǎn)實(shí)現(xiàn)的目標(biāo)之后，需要確定站點(diǎn)的瀏覽客戶(hù)。創(chuàng)建世界上每個(gè)人都能使用的Web站點(diǎn)是不可能的。人們使用不同的瀏覽器，以不同的速度連接，這些因素都會(huì)影響站點(diǎn)的使用。因此需要確定目標(biāo)用戶(hù)，根據(jù)用戶(hù)的特點(diǎn)來(lái)設(shè)計(jì)站點(diǎn)。第10章Dreamweaver8基礎(chǔ)知識(shí)3．組織站點(diǎn)結(jié)構(gòu)組織站點(diǎn)結(jié)構(gòu)時(shí)，應(yīng)注意以下3個(gè)問(wèn)題：（1）將站點(diǎn)分成類(lèi)別，把相關(guān)的頁(yè)面放在同一文件夾中。（2）將圖像和聲音文件等項(xiàng)目放在指定的文件夾中，以便于文件的查找定位。例如，將所有圖像放在Images文件夾中，當(dāng)在頁(yè)面中插入圖像時(shí)，就可以方便地找到它。（3）本地站點(diǎn)和遠(yuǎn)程Web站點(diǎn)應(yīng)該具有完全相同的結(jié)構(gòu)。如果使用Dreamweaver8創(chuàng)建本地站點(diǎn)，然后將全部?jī)?nèi)容上傳到遠(yuǎn)程站點(diǎn)，則Dreamweaver8確保在遠(yuǎn)程站點(diǎn)中精確拷貝本地結(jié)構(gòu)。4．設(shè)計(jì)外觀5．設(shè)計(jì)導(dǎo)航方案6．規(guī)劃和收集資料完成了設(shè)計(jì)和布局后，就可以創(chuàng)建和收集需要的資源了。資源可以是圖像、文本或媒體等項(xiàng)目。在開(kāi)始開(kāi)發(fā)站點(diǎn)前，請(qǐng)確保收集了所有這些項(xiàng)目并做好了準(zhǔn)備。否則，可能為找不到一幅圖像而中斷開(kāi)發(fā)過(guò)程。第10章Dreamweaver8基礎(chǔ)知識(shí)10.2.2本地站點(diǎn)的建立與編輯1．創(chuàng)建本地文件夾本地文件夾是Dreamweaver8站點(diǎn)的工作目錄。此文件夾可以位于本地計(jì)算機(jī)上，也可以位于網(wǎng)絡(luò)服務(wù)器上，它是為Dreamweaver8站點(diǎn)存儲(chǔ)“過(guò)程”文件的位置。本地文件夾的結(jié)構(gòu)要滿(mǎn)足站點(diǎn)的設(shè)計(jì)和規(guī)劃要求。2．定義本地站點(diǎn)本地文件夾創(chuàng)建完成后，要通過(guò)Dreamweaver8的站點(diǎn)管理工具對(duì)它進(jìn)行設(shè)置才能成為一個(gè)合法的Dreamweaver8本地站點(diǎn)。3．編輯Dreamweaver8站點(diǎn)第10章Dreamweaver8基礎(chǔ)知識(shí)10.3網(wǎng)頁(yè)的建立與保存（1）選擇網(wǎng)頁(yè)格式。選擇“文件/新建”菜單或使用“標(biāo)準(zhǔn)工具欄”的“新建”按鈕，則打開(kāi)一個(gè)對(duì)話(huà)窗口，如圖所示。選擇“基本頁(yè)”中的HTML模式。單擊右下角的“創(chuàng)建”按鈕，打開(kāi)一個(gè)新的文件窗口。第10章Dreamweaver8基礎(chǔ)知識(shí)（2）設(shè)置網(wǎng)頁(yè)屬性。在編輯新網(wǎng)頁(yè)前應(yīng)該先設(shè)置頁(yè)面屬性，也就是對(duì)頁(yè)面進(jìn)行整體規(guī)劃。選擇“修改/頁(yè)面屬性”或在工作區(qū)按鼠標(biāo)右鍵選擇彈出菜單中的“頁(yè)面屬性”選項(xiàng)，激活屬性設(shè)置面板，如圖所示，設(shè)置完畢單擊“確定”按鈕。第10章Dreamweaver8基礎(chǔ)知識(shí)（3）編輯網(wǎng)頁(yè)元素。在網(wǎng)頁(yè)上添加文本、圖片、表格等網(wǎng)頁(yè)元素。（4）在網(wǎng)頁(yè)中加注釋。1）選中插入注釋的位置。2）選擇“插入/注釋”菜單，在窗口中輸入注釋內(nèi)容。3）編輯注釋?zhuān)弘p擊頁(yè)面中的注釋圖標(biāo)即可進(jìn)入編輯界面。（5）保存網(wǎng)頁(yè)，選擇“文件/保存”菜單，給網(wǎng)頁(yè)命名并存入相應(yīng)文件夾。第11章設(shè)計(jì)頁(yè)面布局本章學(xué)習(xí)導(dǎo)讀在編輯網(wǎng)頁(yè)前應(yīng)該首先對(duì)網(wǎng)頁(yè)進(jìn)行整體布局設(shè)置。合理的布局使網(wǎng)頁(yè)看起來(lái)美觀大方，并且便于網(wǎng)頁(yè)元素的插入與編輯。本章主要講述在Dreamweaver8中利用表格、布局視圖、框架和層等可視化設(shè)計(jì)工具進(jìn)行頁(yè)面布局的過(guò)程。通過(guò)本章學(xué)習(xí)，讀者應(yīng)該掌握以下內(nèi)容：使用表格對(duì)頁(yè)面進(jìn)行布局在布局模式中對(duì)頁(yè)面進(jìn)行布局使用框架對(duì)頁(yè)面進(jìn)行布局使用層對(duì)頁(yè)面進(jìn)行布局第11章設(shè)計(jì)頁(yè)面布局11.1使用表格對(duì)頁(yè)面進(jìn)行布局表格是用在HTML頁(yè)上顯示表格式數(shù)據(jù)以及對(duì)文本和圖形進(jìn)行布局的強(qiáng)有力的工具。表格由一行或多行組成，每行又由一個(gè)或多個(gè)單元格組成。在創(chuàng)建表格之后，可以方便地修改其外觀和結(jié)構(gòu)。11.1.1創(chuàng)建表格1．插入表格可以使用“插入”欄或“插入”菜單來(lái)創(chuàng)建一個(gè)新表格，具體步驟如下：（1）在文檔窗口的設(shè)計(jì)視圖中，將插入點(diǎn)放在需要表格的位置。（2）單擊“插入”欄“常用”類(lèi)別中的“表格”按鈕，或選擇“插入/表格”菜單。（3）按需要設(shè)置表格參數(shù)，完成表格的創(chuàng)建。第11章設(shè)計(jì)頁(yè)面布局2．向單元格中添加內(nèi)容可以像Word等文本編輯器一樣在表格單元格中添加文本和圖像等元素。3．導(dǎo)入表格式數(shù)據(jù)可以將在另一個(gè)應(yīng)用程序（例如MicrosoftExcel）中創(chuàng)建的表格式數(shù)據(jù)導(dǎo)入到Dreamweaver8中并設(shè)置為表格的格式第11章設(shè)計(jì)頁(yè)面布局11.1.2表格的編輯1．選擇表格元素可以一次選擇整個(gè)表、行、列或在表格中選擇一個(gè)連續(xù)的單元格塊，還可以選擇表格中多個(gè)不相鄰的單元格并修改這些單元格的屬性。（1）選擇整個(gè)表格：?jiǎn)螕舯砀竦淖笊辖腔蛘邌螕粲疫吇虻撞窟吘壍娜我馕恢?。?）選擇行或列：首先定位鼠標(biāo)指針使其指向行的左邊緣或列的上邊緣，當(dāng)鼠標(biāo)指針變?yōu)檫x擇箭頭時(shí)，單擊選擇行或列，或拖動(dòng)選擇多個(gè)行或列。（3）選擇矩形的單元格塊：將鼠標(biāo)從一個(gè)單元格拖到另一個(gè)單元格。（4）選擇不相鄰的單元格：按住Ctrl鍵的同時(shí)單擊要選擇的單元格、行或列，則該單元格會(huì)被選中。如果它已經(jīng)被選中，則再次單擊會(huì)將它從選擇中刪除。第11章設(shè)計(jì)頁(yè)面布局2．設(shè)置表格和單元格的格式可以通過(guò)設(shè)置表格及表格單元格的屬性或?qū)㈩A(yù)先設(shè)置的設(shè)計(jì)應(yīng)用于表格來(lái)更改表格的外觀。若要設(shè)置表格中文本的格式，可以對(duì)所選的文本應(yīng)用格式設(shè)置或使用樣式。3．調(diào)整表格的大小通過(guò)拖動(dòng)選擇控制點(diǎn)可以調(diào)整整個(gè)表格或單個(gè)行和列的大小，當(dāng)調(diào)整整個(gè)表格的大小時(shí)，表格中的所有單元格按比例更改大小。4．更改列寬和行高通過(guò)使用屬性檢查器或拖動(dòng)列或行的邊框，可以更改列寬或行高。還可以使用代碼視圖直接在HTML代碼中更改單元格的寬度和高度。第11章設(shè)計(jì)頁(yè)面布局5．元件的應(yīng)用在場(chǎng)景中應(yīng)用元件包括應(yīng)用本影片元件庫(kù)中的元件和應(yīng)用其他影片元件庫(kù)中的元件。應(yīng)用本影片元件庫(kù)中的元件，應(yīng)先打開(kāi)元件庫(kù)面板，將相應(yīng)的元件用鼠標(biāo)拖入場(chǎng)景工作區(qū)。應(yīng)用其他影片中的元件應(yīng)該先通過(guò)菜單“文件/作為庫(kù)打開(kāi)”打開(kāi)相應(yīng)的元件庫(kù)，再應(yīng)用其中的元件。第11章設(shè)計(jì)頁(yè)面布局5．添加和刪除行和列添加、刪除行和列應(yīng)首先確定操作的位置，即選定當(dāng)前的行或列。（1）添加及刪除行和列，可以使用“修改/表格”子菜單中的命令。（2）若要一次添加多行或多列，或者在當(dāng)前單元格的下面添加行或在其右邊添加列，請(qǐng)選擇“修改/表格/插入行或列”菜單，此時(shí)會(huì)出現(xiàn)“插入行或列”對(duì)話(huà)框。在該對(duì)話(huà)框中輸入必要的信息，然后單擊“確定”按鈕。（3）清除完整的行或列時(shí)，可以直接按Delete鍵，整個(gè)行或列將從表格中刪除。6．拆分或合并單元格拆分或合并單元格可使用“修改/表格”子菜單中的命令。第11章設(shè)計(jì)頁(yè)面布局7．嵌套表格嵌套表格是放置在另一個(gè)表格的單元格中的表格，可以像對(duì)其他任何表格一樣對(duì)嵌套表格進(jìn)行格式設(shè)置，但是，其寬度受它所在單元格寬度的限制。8．剪切、拷貝和粘貼單元格可以一次剪切、拷貝或粘貼單個(gè)單元格或多個(gè)單元格，并保留單元格的格式設(shè)置。第11章設(shè)計(jì)頁(yè)面布局11.1.3對(duì)表格進(jìn)行排序可以根據(jù)單個(gè)列的內(nèi)容對(duì)表格中的行進(jìn)行排序，還可以根據(jù)兩個(gè)列的內(nèi)容執(zhí)行更加復(fù)雜的表格排序。但不能對(duì)包含COLSPAN或ROWSPAN屬性的表格（即包含合并單元格的表格）進(jìn)行排序。第11章設(shè)計(jì)頁(yè)面布局11.2在布局模式中對(duì)頁(yè)面進(jìn)行布局11.2.1布局模式簡(jiǎn)介在布局模式中，可以在添加內(nèi)容之前對(duì)頁(yè)面進(jìn)行布局。例如，可以沿頁(yè)的頂部繪制一個(gè)單元格放置標(biāo)題圖形，在頁(yè)的左邊繪制另一個(gè)單元格放置導(dǎo)航條，在右邊繪制第三個(gè)單元格放置內(nèi)容。當(dāng)不在布局表格中繪制布局單元格時(shí)，Dreamweaver8會(huì)自動(dòng)創(chuàng)建一個(gè)布局表格以容納該單元格。布局單元格不能存在于布局表格之外?？梢栽谝粋€(gè)布局表格中使用多個(gè)布局單元格對(duì)頁(yè)進(jìn)行布局，這是進(jìn)行Web頁(yè)布局最常用的方法，也可以使用多個(gè)布局表格進(jìn)行更復(fù)雜的布局。第11章設(shè)計(jì)頁(yè)面布局11.2.2布局模式的切換在繪制布局表格或布局單元格之前，必須先切換到布局模式。布局模式的切換操作如下：（1）如果“設(shè)計(jì)”視圖不可見(jiàn)，請(qǐng)選擇“查看/設(shè)計(jì)”或“查看/代碼和設(shè)計(jì)”菜單。在代碼視圖中不能啟用或禁用布局模式。（2）選擇“查看/表格模式/布局模式”菜單或單擊插入欄“布局”類(lèi)別中的“布局模式”按鈕。在“設(shè)計(jì)”視圖的頂部顯示一個(gè)標(biāo)有“布局模式”的綠色欄，指示當(dāng)前正處于“布局”模式中。如果頁(yè)面上存在表格，則它們顯示為布局表格。第11章設(shè)計(jì)頁(yè)面布局11.2.3繪制布局單元格和表格在布局模式中，可以在頁(yè)面上直接繪制布局單元格和布局表格。當(dāng)不在布局表格中繪制布局單元格時(shí)，Dreamweaver8會(huì)自動(dòng)創(chuàng)建一個(gè)布局表格以容納該單元格。布局單元格不能存在于布局表格之外。

說(shuō)明：當(dāng)Dreamweaver自動(dòng)創(chuàng)建布局表格時(shí)，該表格最初顯示為填滿(mǎn)整個(gè)設(shè)計(jì)視圖，即使我們更改文檔窗口的大小也是如此。這種全窗默認(rèn)布局表格使我們可以在設(shè)計(jì)視圖中的任意位置繪制布局單元格?？梢詫⒃摫砀裨O(shè)置為特定的大小，方法是單擊表格邊框，然后拖動(dòng)表格的調(diào)整大小控制點(diǎn)。第11章設(shè)計(jì)頁(yè)面布局11.2.4向布局單元格中添加內(nèi)容在布局模式中可以將文本、圖像和其他內(nèi)容添加到布局單元格中。但在布局模式中不能向布局表格的空白（灰色）區(qū)域插入內(nèi)容，因此在添加內(nèi)容之前，必須先創(chuàng)建布局單元格，當(dāng)添加內(nèi)容的寬度大于布局單元格時(shí)，該單元格自動(dòng)擴(kuò)展。11.2.5布局單元格的調(diào)整為了調(diào)整頁(yè)面布局，可以對(duì)布局單元格和嵌套布局表格進(jìn)行移動(dòng)并調(diào)整它們的大小，（最外面的布局表格只能調(diào)整大?。?。布局單元格不能重疊，對(duì)單元格進(jìn)行移動(dòng)或調(diào)整大小之后，該單元格不能跨越包含它的布局表格的邊框。11.2.6設(shè)置布局單元格的格式可以通過(guò)使用屬性檢查器來(lái)更改任何布局單元格或表格的多種屬性，包括寬度和高度、背景顏色以及單元格內(nèi)容的對(duì)齊方式。第11章設(shè)計(jì)頁(yè)面布局11.2.7設(shè)置布局視圖參數(shù)使用“編輯/首選參數(shù)”對(duì)話(huà)框中的“布局模式”分類(lèi)項(xiàng)可以指定有關(guān)間隔圖像文件和有關(guān)布局表格和布局單元格的顏色信息。第11章設(shè)計(jì)頁(yè)面布局11.3使用框架對(duì)頁(yè)面進(jìn)行布局11.3.1框架（集）概述1．框架（集）的作用就像“畫(huà)中畫(huà)”彩電一樣，框架提供了將一個(gè)瀏覽器窗口劃分為多個(gè)區(qū)域、每個(gè)區(qū)域都可以顯示不同HTML文檔的方法。使用框架的最常見(jiàn)的情況就是，一個(gè)框架顯示包含導(dǎo)航控件的文檔，而另一個(gè)框架顯示含有內(nèi)容的文檔，如圖11-4所示。2．什么是框架框架是瀏覽器窗口中的一個(gè)區(qū)域，它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無(wú)關(guān)的HTML文檔。第11章設(shè)計(jì)頁(yè)面布局3．什么是框架集框架集是HTML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個(gè)框架中初始顯示的頁(yè)面的URL?？蚣芗募旧聿话跒g覽器中顯示的HTML內(nèi)容，但noframes部分除外；框架集文件只是向?yàn)g覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔的有關(guān)信息。4．框架頁(yè)面的構(gòu)成文檔如果一個(gè)站點(diǎn)在瀏覽器中顯示為包含3個(gè)框架的單個(gè)頁(yè)面，則它實(shí)際上至少由4個(gè)單獨(dú)的HTML文檔組成：框架集文件和3個(gè)網(wǎng)頁(yè)文檔，這3個(gè)文檔包含在這些框架內(nèi)初始顯示的內(nèi)容。當(dāng)在Dreamweaver8中設(shè)計(jì)使用框架集的頁(yè)面時(shí)，必須保存全部這4個(gè)文件，以便該頁(yè)面可以在瀏覽器中正常工作。第11章設(shè)計(jì)頁(yè)面布局5．框架頁(yè)面的使用原則并不是所有的瀏覽器都提供良好的框架支持，框架對(duì)于無(wú)法導(dǎo)航的訪(fǎng)問(wèn)者而言難以顯示。所以，如果要使用框架，應(yīng)始終在框架集中提供noframes部分，以方便不能查看這些框架的訪(fǎng)問(wèn)者。最好還要提供指向站點(diǎn)的無(wú)框架版本的顯式鏈接，以用于那些雖然其瀏覽器支持框架但不喜歡使用框架的訪(fǎng)問(wèn)者。第11章設(shè)計(jì)頁(yè)面布局11.3.2創(chuàng)建框架和框架集在Dreamweaver8中有兩種創(chuàng)建框架集的方法：既可以自己設(shè)計(jì)框架集，也可以從若干預(yù)定義的框架集中選擇。選擇預(yù)定義的框架集將自動(dòng)設(shè)置創(chuàng)建布局所需的所有框架集和框架。預(yù)定義的框架集只能在“文檔”窗口的“設(shè)計(jì)”視圖中插入。11.3.3選擇框架和框架集要更改框架或框架集的屬性，首先要選擇框架或框架集?？梢栽凇拔臋n”窗口中選擇框架或框架集，也可以通過(guò)“框架”面板進(jìn)行選擇。當(dāng)選擇框架或框架集時(shí)，在“框架”面板和“文檔”窗口的“設(shè)計(jì)”視圖中都會(huì)在框架或框架集周?chē)@示一個(gè)選擇輪廓。第11章設(shè)計(jì)頁(yè)面布局1．在“框架”面板中選擇框架和框架集（1）選擇“窗口/其他/框架”菜單，顯示“框架”面板。（2）在“框架”面板中單擊選擇框架。（3）在“框架”面板中單擊環(huán)繞框架集的邊框，選擇一個(gè)框架集。2．在“文檔”窗口中選擇框架和框架集（1）要在當(dāng)前選定內(nèi)容的同一層次級(jí)別上選擇下一框架（框架集）或前一框架（框架集），請(qǐng)?jiān)诎醋lt鍵的同時(shí)按下左箭頭鍵或右箭頭鍵。（2）選擇父框架集（包含當(dāng)前選定內(nèi)容的框架集），請(qǐng)?jiān)诎醋lt鍵的同時(shí)按上箭頭鍵。（3）要選擇當(dāng)前選定框架集的第一個(gè)子框架或框架集（即按其在框架集文件中定義順序中的第一個(gè)），按住Alt鍵的同時(shí)按下箭頭鍵。第11章設(shè)計(jì)頁(yè)面布局11.3.4在框架