fireworks cs4入門與提高教程第2章 Fireworks CS4的文檔

第2章FireworksCS4的文檔操作

本章重點(diǎn)在介紹了FireworksCS4的工作環(huán)境之后，本章開始介紹文檔的基本操作方法。文檔操作是Fireworks中最基本的操作，包括新建文檔、打開文檔、導(dǎo)入文檔等多個(gè)方面。從一個(gè)良好的設(shè)計(jì)基礎(chǔ)入手進(jìn)行創(chuàng)作，不僅能起到事半功倍的效果，而且能充分體現(xiàn)創(chuàng)作者的專業(yè)水平。學(xué)習(xí)目的通過(guò)本章的學(xué)習(xí)，用戶應(yīng)該了解Fireworks中各種文檔格式，并能根據(jù)需要?jiǎng)?chuàng)建自己需要的格式文檔，在其他開發(fā)環(huán)境下導(dǎo)入和導(dǎo)出相應(yīng)格式的文檔。2.1概述

文檔是指應(yīng)用程序中所操作的數(shù)據(jù)對(duì)象。不同的應(yīng)用程序，文檔中數(shù)據(jù)的組織方式也不同。例如，對(duì)于MicrosoftWord，文檔的類型是文書檔案；對(duì)于MicrosoftExcel，文檔的類型是電子表格；對(duì)于AdobeDreamweaver，文檔的類型是網(wǎng)頁(yè)；而對(duì)于AdobeFlash來(lái)說(shuō)，文檔的類型是矢量動(dòng)畫；Fireworks是一種用于進(jìn)行Web圖像處理的應(yīng)用程序，其文檔的類型是圖像。在Fireworks中，文檔圖像采用PNG格式。PNG圖像格式更加靈活，不僅可以在其中保存位圖信息，還可以保存矢量信息；不僅對(duì)圖層和幀提供了完美的支持，還可以綁定HTML和JavaScript代碼，構(gòu)建動(dòng)態(tài)的圖像。目前只有較高版本的瀏覽器，如InternetExplorer4.0、NetscapeNavigator4.0及它們的更高版本才支持PNG格式的圖像。同很多應(yīng)用程序一樣，F(xiàn)ireworksCS4可以打開多種格式的文檔。FireworksCS4還可以將Photoshop、Freehand、Illustrator、CorelDraw等圖像編輯軟件編輯的圖像導(dǎo)入。2.2使用文檔

2.2.1創(chuàng)建新文檔創(chuàng)建新文檔的具體操作如下所示：（1）選擇菜單欄“文件”|“新建”命令，打開“新建文檔”對(duì)話框，如圖所示。（2）設(shè)置完畢，單擊“確定”按鈕，即可在文檔工作區(qū)創(chuàng)建一個(gè)空白的PNG文檔。如圖所示。2.2.2打開、關(guān)閉、保存文檔

FireworksCS4中打開、關(guān)閉、保存文檔的方法與Windows中的文件操作相同。2.2.3圖像的導(dǎo)入導(dǎo)入文檔的具體操作如下所示：（1）選擇菜單欄“文件”|”導(dǎo)入”命令，打開“導(dǎo)入”對(duì)話框。如圖2-3所示。（2）選擇需導(dǎo)入的文件，單擊“打開”按鈕。此時(shí)“導(dǎo)入”對(duì)話框關(guān)閉，回到正在編輯的文檔，鼠標(biāo)指針變成一個(gè)直角符號(hào)。在文檔窗口拖動(dòng)導(dǎo)入指針，出現(xiàn)一個(gè)虛線矩形框，如圖所示。松開鼠標(biāo)，圖片被導(dǎo)入到矩形框中。導(dǎo)入圖片大小、位置和尺寸由拖動(dòng)產(chǎn)生的矩形框決定，如圖所示。2.2.4插入其他文件中的對(duì)象

插入方法有利用鼠標(biāo)拖放或采用復(fù)制粘貼兩種操作方式。1．利用鼠標(biāo)拖放這里以MicrosoftInternetExplorer6.0為例講解利用鼠標(biāo)拖放對(duì)象到Fireworks中。（1）同時(shí)打開MicrosoftInternetExplorer6.0和FireworksCS4，將鼠標(biāo)移到IE窗口中需導(dǎo)入的對(duì)象上。按住鼠標(biāo)左鍵不放，將光標(biāo)拖動(dòng)到FireworksCS4文檔編輯窗口上，此時(shí)鼠標(biāo)指針顯示為一個(gè)符號(hào)。（2）將對(duì)象拖放在文檔編輯窗口合適的位置，釋放鼠標(biāo)，即將對(duì)象插入到當(dāng)前編輯的文檔中。2．采用復(fù)制粘貼操作需要注意的是，矢量圖形與分辨率無(wú)關(guān)，可以在分辨率不同的輸出設(shè)備上顯示，而不會(huì)改變其外觀品質(zhì)。位圖圖形與分辨率有關(guān)。選擇“重新取樣”，會(huì)保持粘貼位圖的原始寬度和高度不變，并在必要時(shí)添加或去除一些像素。選擇“不要重新取樣”則維持全部原始像素，這可能會(huì)使粘貼圖像的相對(duì)大小比預(yù)想的要大或小一些。2.2.5從掃描儀或數(shù)碼相機(jī)中導(dǎo)入圖像

FireworksCS4支持從掃描儀或數(shù)碼相機(jī)中直接導(dǎo)入圖像，這是通過(guò)Windows系統(tǒng)的TWAIN模塊（或Macintosh系統(tǒng)的PhotoshopAcquire插件）實(shí)現(xiàn)的。直接導(dǎo)入的圖像是以新文檔的形式打開的。選擇菜單欄“文件”|”掃描”命令，就可以很方便地掃描所需的圖像。2.3顯示文檔文檔是顯示在文檔編輯窗口的，為了編輯的方便，我們需要采用不同的顯示模式及比例。

2.3.1直接調(diào)整文檔的顯示比例選擇菜單欄“視圖”|“縮放比例”命令，會(huì)彈出顯示比例清單，如圖所示。在清單中單擊所需的顯示比例后，圖像就會(huì)以該比例顯示在文檔編輯窗口。用戶也可以在文檔編輯窗口選取對(duì)象，然后單擊鼠標(biāo)右鍵，此時(shí)會(huì)彈出右鍵快捷菜單。選擇“縮放比例”命令，也會(huì)有一個(gè)顯示比例清單，如圖所示。除了顯示縮放比例外，還有“選區(qū)符合窗口大小”和“符合全部”兩個(gè)選項(xiàng)，分別表示將所選對(duì)象全窗口顯示和將圖像全窗口顯示。在FireworksCS4中，文檔的顯示比例可以在6%～6400%之間變化。2.3.2使用縮放工具

單擊縮放工具按鈕后，鼠標(biāo)指針會(huì)變成放大鏡形狀。在文檔窗口中單擊鼠標(biāo)后就可放大顯示文檔內(nèi)容；連續(xù)單擊鼠標(biāo)左鍵，還可以在當(dāng)前基礎(chǔ)上連續(xù)放大，每次放大的倍數(shù)為前一次的200%。用戶也可以放大文檔的指定區(qū)域。選中縮放工具后，在文檔編輯窗口拖動(dòng)鼠標(biāo)選擇要查看的區(qū)域，如圖所示。釋放鼠標(biāo)該區(qū)域就會(huì)放大顯示在全窗口中，如圖所示。選取了縮放工具后，按住鍵盤上的Alt鍵，鼠標(biāo)指針會(huì)編成縮小鏡形狀。單擊鼠標(biāo)左鍵，即可縮小顯示文檔內(nèi)容；連續(xù)單擊鼠標(biāo)左鍵，還可以在當(dāng)前基礎(chǔ)上連續(xù)縮小。用戶也可將文檔縮小顯示在指定區(qū)域。選取縮放工具，按住Alt鍵，在文檔編輯窗口拖出一個(gè)矩形框。釋放鼠標(biāo)文檔會(huì)在該矩形框中縮小顯示。此外，用鼠標(biāo)雙擊工具箱中的縮放工具按鈕，可以將文檔的顯示比例恢復(fù)到100%。2.3.3使用手形工具

當(dāng)文檔大小超出了文檔窗口的顯示范圍時(shí)，可以通過(guò)拖動(dòng)文檔窗口右側(cè)和下部的滾動(dòng)條查看文檔的各個(gè)部分。不過(guò)，F(xiàn)ireworksCS4提供了更為方便的查看工具——手形工具，它位于工具箱下部的”視圖”欄內(nèi)，在FireworksCS4的標(biāo)題欄上也添加了該工具。單擊手形工具按鈕，此時(shí)，鼠標(biāo)指針會(huì)變成手形，在文檔窗口上按住鼠標(biāo)左鍵后拖動(dòng)鼠標(biāo)，即可很方便地查看文檔的各個(gè)部分。如果雙擊手形工具按鈕，可以將當(dāng)前文檔全窗口顯示。2.3.4完全顯示和草圖顯示

在Fireworks中，文檔的顯示方式有兩種：完全顯示和草圖顯示。完全顯示就是在整個(gè)文檔窗口中顯示圖像的所有細(xì)節(jié)，包括矢量結(jié)構(gòu)和應(yīng)用到這些結(jié)構(gòu)上的各種效果，如圖所示。草圖顯示使用一個(gè)像素寬的路徑顯示矢量圖形，不顯示填充效果，對(duì)于圖像顯示一個(gè)“X”，如圖所示。選擇菜單欄“視圖”|“完整顯示”可以在兩種顯示方式之間切換。選項(xiàng)前有“√”標(biāo)記時(shí)，表示當(dāng)前采用完整顯示；選項(xiàng)前沒有“√”標(biāo)記時(shí)，表示當(dāng)前采用草圖顯示。2.3.5Macintosh灰度系數(shù)灰度預(yù)覽可使用戶看到一幅圖像在其他計(jì)算機(jī)平臺(tái)上的顯示效果。選擇菜單欄“視圖”|“Macintosh灰度系數(shù)”命令，即可在當(dāng)前文檔中查看該圖像在Macintosh計(jì)算機(jī)中的顯示效果。2.4標(biāo)尺、輔助線和網(wǎng)格

FireworksCS4提供了標(biāo)尺、輔助線、網(wǎng)格等定位工具，幫助用戶布局圖像，了解圖像當(dāng)前的坐標(biāo)位置。

2.4.1標(biāo)尺選擇菜單欄“視圖”|“標(biāo)尺”命令即可顯示標(biāo)尺。水平和垂直方向的標(biāo)尺都是從文檔編輯窗口左上角開始沿著文檔編輯窗口顯示出來(lái)，如圖2-17所示。在文檔編輯窗口拖動(dòng)鼠標(biāo)時(shí)，標(biāo)尺上能查看到當(dāng)前鼠標(biāo)位置的坐標(biāo)。再次選擇菜單欄“視圖”|“標(biāo)尺”命令可以隱藏標(biāo)尺。2.4.2輔助線

1．添加輔助線：將鼠標(biāo)移到標(biāo)尺上，按住鼠標(biāo)左鍵并拖動(dòng)到文檔中合適的位置釋放，即可添加一條輔助線。2．移動(dòng)輔助線：將鼠標(biāo)移到輔助線上，當(dāng)鼠標(biāo)指針變成雙箭頭時(shí)拖動(dòng)輔助線，即可改變輔助線的位置。3．鎖定輔助線：選擇菜單欄“視圖”|“輔助線”|“鎖定輔助線”命令即可鎖定輔助線，鎖定后的輔助線不能被移動(dòng)。再次選中該命令，即可解除對(duì)輔助線的鎖定。4．刪除輔助線：選擇菜單欄“視圖”|“輔助線”|“清除輔助線”命令，一次刪除畫布中的所有輔助線。5．顯示|隱藏輔助線：選擇菜單欄“視圖”|“輔助線”|“顯示輔助線”命令可以顯示或隱藏輔助線。6．對(duì)齊輔助線：選擇菜單欄“視圖”|“輔助線”|“對(duì)齊輔助線”命令。在文檔中創(chuàng)建或移動(dòng)對(duì)象時(shí)，就會(huì)自動(dòng)對(duì)齊距離最近的輔助線。2.4.3網(wǎng)格

1．顯示網(wǎng)格：選擇菜單欄“視圖”|“網(wǎng)格”|“顯示網(wǎng)格”命令即可在文檔編輯窗口中顯示網(wǎng)格，如圖所示。再次選擇該命令，清除前面的”√”標(biāo)記，即可隱藏網(wǎng)格。2．對(duì)齊網(wǎng)格選擇菜單欄“視圖”|“網(wǎng)格”|“對(duì)齊網(wǎng)格”命令。3．設(shè)置網(wǎng)格參數(shù)選擇菜單欄“編輯”|“首選參數(shù)”|“輔助線和網(wǎng)格”命令，彈出如圖所示的“首選參數(shù)”對(duì)話框。2.5畫布與文檔的屬性

（1）打開菜單“修改”|“畫布”|“畫布大小”命令，如圖所示。（2）打開“畫布大小”對(duì)話框，如圖所示。（3）在“當(dāng)前大小”區(qū)域，可以看到畫布在修改之前的大小。（4）在“新尺寸”區(qū)域可以輸入畫布新的高度和寬度值，從右方的下拉列表中可以選擇數(shù)值的單位。2.5.1改變畫布大小（5）在“錨定”區(qū)域中顯示了一些按鈕，每個(gè)按鈕上用圖表示了畫布擴(kuò)展或收縮的方向，默認(rèn)狀態(tài)下是中間的按鈕被按下，表明畫布向四周均勻擴(kuò)展或收縮，也可以根據(jù)需要，單擊相應(yīng)的方向按鈕。（6）FireworksCS4支持在單個(gè)PNG文件中創(chuàng)建多個(gè)頁(yè)面，所以，如果只要改變當(dāng)前頁(yè)面的大小，則須保留選中“僅當(dāng)前頁(yè)面”。如果要修改當(dāng)前文檔中所有頁(yè)的大小，則取消選中該復(fù)選框。（7）設(shè)置完畢，單擊“確定”按鈕，確定操作，即可完成對(duì)畫布大小的重設(shè)。此外，還可以使用工具欄中的裁切工具改變畫布的大小。2.5.2改變畫布顏色

改變畫布顏色的具體操作如下所示：（1）選擇菜單“修改”|“畫布”|“畫布顏色”命令，打開畫布顏色對(duì)話框。如圖所示。（2）根據(jù)需要在對(duì)話框中選擇新的畫布顏色?！鞍咨保哼x中該項(xiàng)，則將畫布顏色修改為白色?！巴该鳌保哼x中該項(xiàng)，則將畫布顏色修改為透明?！白远x”：選中該項(xiàng)，可以從右方的顏色選擇區(qū)域選擇需要的畫布顏色。（3）設(shè)置完畢，按下“確定”按鈕，完成修改畫布的顏色。2.5.3旋轉(zhuǎn)畫布

（1）選擇菜單“修改”|“畫布”命令。（2）根據(jù)需要選擇二級(jí)菜單中的不同選項(xiàng)：旋轉(zhuǎn)180°：選中該項(xiàng)，將畫布旋轉(zhuǎn)180°，也即上下顛倒。旋轉(zhuǎn)90°順時(shí)針：選中該項(xiàng)，將畫布順時(shí)針旋轉(zhuǎn)90°。旋轉(zhuǎn)90°逆時(shí)針：選中該項(xiàng)，將畫布逆時(shí)針旋轉(zhuǎn)90°。注意：旋轉(zhuǎn)畫布會(huì)導(dǎo)致在其中繪制的所有圖像對(duì)象同時(shí)被旋轉(zhuǎn)。如圖顯示了3種畫布旋轉(zhuǎn)的結(jié)果。第1幅是原始圖，第2幅是旋轉(zhuǎn)180°，第3幅為順時(shí)針旋轉(zhuǎn)90°，第4幅為逆時(shí)針旋轉(zhuǎn)90°。2.5.4修剪、符合畫布

Fireworks修剪畫布的具體操作如下所示：（1）選擇菜單“修改”|“畫布”|“修剪畫布”命令。（2）這時(shí)會(huì)看到：畫布的大小自動(dòng)被縮小，直至剛好容納圖像內(nèi)容。如圖所示。（3）選擇“符合畫布”命令可以使較小的畫布適應(yīng)較大的圖像范圍。如圖所示，左圖為在較小的畫布上移動(dòng)對(duì)象，而右圖顯示了“符合畫布”之后的效果。2.5.5改變圖像大小

（1）選擇菜單“修改”|“畫布”|“圖像大小”命令。（2）“像素尺寸”區(qū)域中可以重新輸入新的圖像寬度和