1、第6章網頁設計工具，講座：牙齒章節(jié)要點，網頁創(chuàng)作工具Dreamweaver 8圖形圖像處理工具Fireworks 8動畫制作工具Flash 8，6.1網頁創(chuàng)作工具，6.1.1 Dreamweaver 8工作環(huán)境6.1.2網站設置6.1.3新網頁6.1.4輸入文本6.1.5插入圖像6.1在牙齒對話框中，可以選擇兩個茄子操作界面：設計器和編碼器。Dreamweaver 8任務窗格圖表(標題欄位于Dreamweaver 8的頂部)顯示Dreamweaver徽標和網頁名稱，其作用類似于Windows操作系統(tǒng)標題欄。標題欄下方的菜單欄提供了全面的Dreamweaver命令，包括“檔案”、“剪輯”、“視圖

2、”、“插入”、“修改”、“文本”、“命令”和“網站”“屬性”面板用于設置頁面內容的屬性。內容不同，“屬性”面板中顯示的屬性也不同。面板組默認包含四個茄子面板：CSS、應用程序節(jié)目、標簽檢查器和文件。6.1.2網站，使用網站向導設置網站步驟(1)在Dreamweaver窗口中，選擇“網站”“新建網站”命令，然后在新網站對話框彈出菜單、對話框字段中輸入要設置的站點的名稱。(2)單擊單擊的“下一步”按鈕，然后從打開的對話框中選擇是否使用服務器技術。此處保留不使用服務器技術的默認設置。使用網站向導設置網站，(3)單擊使用以下按鈕選擇打開的對話框中的檔案存儲位置：(4)單擊單擊的“下一步”按鈕，在“打開

3、的對話框”下，選擇服務器連接方法“本地/網絡”，然后設置要將文件保存在服務器中的地址。(5)單擊“下一步”按鈕，然后單擊“完成”按鈕，以完成網站新建。網站管理，使用Dreamweaver附帶的網站管理器，網站管理非常方便。這與Windows操作系統(tǒng)資源管理器非常相似，具有本地網站管理功能，如檔案和文件夾設置。另一方面，您可以管理遠程站點，如上傳和更新檔案。6.1.3新建網頁，您可以通過在Dreamweaver窗口中選擇“新建檔案”命令并打開“新建文檔”對話框來創(chuàng)建新文檔。創(chuàng)建新文檔，設置頁面屬性，然后在Dreamweaver窗口中選擇“修改”“頁面屬性”命令，或者在文檔頁面上單擊鼠標右鍵，然后

4、從彈出快捷菜單中選擇“頁面屬性”命令以打開“頁面屬性”對話框。要輸入、6.1.4文本并在網頁中添加文本，有兩種茄子方法：(1)直接在文檔中輸入文本。(2)從其他位置復制文本后，在文檔窗口的“設計”視圖中選擇插入點，單擊鼠標右鍵，然后從彈出快捷菜單中選擇“粘貼”命令。添加文本，設置文本格式，在Dreamweaver 8中，可以通過“文本”菜單中的命令和文本的“屬性”面板設置文本屬性。(1)設置字體：首先選擇要更改字體的文本，然后從“屬性”面板的“字體”下拉列表框中選擇所需的字體。(2)設置字體大小：首先選擇要尺寸更改的文本，然后從“屬性”面板的“大小”下拉列表框中選擇所需的大小值，或直接輸入“大

5、小”文本框數(shù)值。(3)設定文字顏色：首先選取要設定顏色的文字，然后選取文字顏色指令以開啟顏色對話框。在牙齒對話框中設置顏色，完成設置后，單擊單擊“確定”按鈕即可。，(4)設定文字對齊方式Dreamweaver 8中可用的文字對齊方式為靠左對齊、置中對齊、靠右對齊和齊行。單擊要設置對齊方式的段落，然后從“文本對齊方式”子菜單中選擇對齊命令以設置對齊方式。插入6.1.5圖像、插入圖像的位置單擊、選擇插入圖像命令(快捷鍵Ctrl Alt I)、選擇圖像源對話框彈出窗口、選擇要插入的圖像后確定按鈕單擊。插入圖片，設置圖像屬性，以及在圖像的“屬性”面板中設置圖像屬性。6.1.6創(chuàng)建表格，在要插入表格的位

6、置單擊，然后選擇插入表格命令以彈出表格對話框。在牙齒對話框中設置西餐屬性，完成設置后，單擊“確定”按鈕單擊。如果插入表格，設置表格屬性，然后選擇表格，則可以在表格的“屬性”面板中設置表格的相應屬性。可以通過以下方法創(chuàng)建常規(guī)層：使用6.1.7層，然后選擇“插入布局對象層”命令。您可以創(chuàng)建圖層，并在圖層的屬性面板中設置圖層的默認屬性。設置層屬性、層的基本操作、層的基本操作包括選擇層、向層添加內容、層大小曹征、移動層和更改層。(1)在操作層選擇層之前，第一步是通過選擇層、單擊層的選擇控制柄來選擇層。(2)向圖層添加內容可以向圖層添加內容，如文字、圖像、表、Flash動畫、多媒體對象等。您可以先在圖層

7、內單擊內容，然后單擊“插入”面板組中的相應按鈕，將其它內容插入到圖層中。(3)在層大小曹征層的“屬性”面板上，輸入高度和寬度值以曹征層大小。(4)移動圖層以在文檔窗口中自由調整位置是圖層的突出特征。您可以在圖層的屬性面板中，為左和上文本框輸入適當?shù)闹?，變更圖層在文件頁面中的位置。(5)更改圖層可以在一頁上創(chuàng)建多個圖層。每個層都是第1層、第2層的默認名稱，可以修改層名稱以使每個層的內容更清楚；更改層名稱也是在“層編號”文本框中輸入以在“屬性”面板中實現(xiàn)的；6 . 2圖形圖像處理工具、6.2.1 Fireworks 8工作環(huán)境6.2.2文檔的默認操作6.2.3矢量圖形操作6.2.4位圖操作6.1、

8、6菜單欄包含10個：“檔案”、“剪輯”、“視圖”、“選擇”、“修改”、“文本”、“命令”、“濾鏡”、“窗口”和“幫助文檔”剪輯窗口位于節(jié)目介面的中間，文檔剪輯窗口的頂部有四個按鈕：“原始”、“預覽”、“兩個預覽”和“四個預覽”。工具箱默認位于剪輯窗口的左側，分為六個部分：“選擇”、“位圖”、“矢量”、“web”、“顏色”和“視圖”。面板組Fireworks 8具有各種浮動面板，通常停靠在浮動面板框架中，并作為選項卡存在。牙齒機制可以在有限的書桌空間中放置大量浮動面板。您可以通過選擇、工具箱圖表、6.2.2文檔的基本操作、新建檔案命令或單擊工具欄中的新建按鈕打開新建文檔對話框。創(chuàng)建文檔、合成文檔

9、完成后，必須保存文檔。可以另存為PNG文檔，也可以導出為JPG或GIF等格式。，儲存文件，(1)選擇儲存檔案指令。如果文件尚未儲存，您可以在開啟另存新檔對話框、選取儲存路徑和輸入檔案名稱后，將單擊的儲存按鈕儲存為PNG格式。(2)通過打開要存儲的文檔，然后選擇“窗口”“最優(yōu)化”命令打開“最優(yōu)化”面板，然后進行設置，可以導出和存儲為其他格式。6.2.3矢量圖形操作、位圖圖像通過每個具有特定位置和顏色值的像素顯示圖像，因此處理位圖圖像時處理的對象是像素而不是形狀。矢量圖形通過圖形的形狀來描述圖形，主要由直線和曲線組成，一般矢量圖形不受分辨率的影響，因此矢量圖形應用牙齒應用更廣泛。矢量圖形和位圖圖像

10、、繪制矢量圖形矢量圖形是通過路徑定義圖形的計算機圖形學。矢量路徑的形狀由路徑上繪制的點決定。矢量圖形描邊顏色與路徑匹配，并矢量圖形填充路徑內的區(qū)域。工具箱中的矢量對象繪制工具允許您逐點繪制基本形狀、自由變形路徑和復雜形狀。(1)繪制直線的方法很簡單。選取工具箱中的筆畫工具，然后拖移滑鼠以繪制筆畫。要繪制水平或垂直線條，請在拖動鼠標時按住Shift鍵。(2)要執(zhí)行矢量圖形繪制(如矩形)，如繪制矩形和繪制線條，只需從工具箱中選擇矩形工具，然后拖動鼠標繪制。要獲取標準正方形或圓，請按住Shift鍵并拖動鼠標。當然，您也可以選擇工具，然后在“屬性”面板中進行設置。6.2.4位圖操作，亮度/對比度功能修

11、改像素的對比度或亮度。調整亮度和對比度。“色相/飽和度”功能調整圖像中顏色的顏色陰影、色相、強度、顏色飽和度和亮度。調整色相和飽和度，然后模糊圖像，以平滑位圖圖像的外觀。Fireworks 8中的“模糊”命令包含六個子命令：(1)徑向模糊：生成旋轉圖像的視覺效果。(2)模糊：平滑選定像素的焦點。(3)縮放模糊：生成圖像朝觀察者或原理觀察者移動的視覺效果。(4)動態(tài)模糊：生成圖像移動的視覺效果。(5)進一步模糊：模糊效果大約是模糊效果的3倍。(6)高斯模糊：對每個像素應用加權平均模糊，產生模糊效果?！颁J化圖像”用于校正模糊圖像，并提供三個茄子命令。(1)銳化：通過增加相鄰像素的對比度來調整模糊圖

12、像的焦點。(2)進一步銳化：會將相鄰像素的對比度增加到銳化效果的3倍。(3)遮色片鈍化：調整像素邊緣的對比，使影像銳利化。通常最適合銳化圖像。6.3動畫制作工具、6.3.1 Flash 8工作環(huán)境6.3.2 Flash的基本概念6.3.3示例6.3.4作品測試和發(fā)布、6.2、6.1、6.3.1 ff、6.3.2 Flash的基本概念；Flash文檔將時間長度劃分為幀。幀是Flash中的時間單位之一，是Flash動畫中最重要的功能，它位于“時間軸”面板中，每個幀屏幕都包含動畫播放內容。插入幀和關鍵幀，(1)常規(guī)幀。插入常規(guī)幀會增加影片的長度。您可以選取插入時間軸影格指令，或使用快速鍵F5來處理牙

13、齒。(2)插入關鍵幀?？梢允褂藐P鍵幀存儲其他對象和控制代碼?？旖萱I為F6?？梢詫⒊Ｒ?guī)幀轉換為關鍵幀，也可以創(chuàng)建自己的關鍵幀。(3)插入空框架。插入空白幀相當于插入關鍵幀，然后清除關鍵幀的內容。該操作的快捷鍵為F7。元件元件是存儲在庫中的各種圖形、動畫、按鈕或外部導入的聲音和外部電影文件。此處的圖形可以是內部創(chuàng)建的矢量圖形，也可以是各種支持Flash 8的圖形格式文件，如外部導入的位圖文件。有些元件可以先創(chuàng)建或導入，然后保存到庫中。元件是動畫制作過程中不可或缺的渡邊杏部分，可以重復使用。圖層技術是圖形處理軟件中更常用的術語。Flash動畫中也有多個需要處理編輯的對象，因此，F(xiàn)lash引用圖層技術

14、是為了便于控制各個對象的出現(xiàn)順序以及它們在時間軸中的停留時間。在Flash中，您可以將圖層視為重疊的透明膠片，當該圖層上沒有對象時，您可以查看下一圖層上的對象。因此，可以根據(jù)需要在徐璐不同的層上徐璐進行不同的動畫編輯，并在放映時實現(xiàn)合成的效果。庫分為“庫”和“公用庫”。庫包含用戶創(chuàng)建的元件，公用庫包含系統(tǒng)提供的元件，包括各種格式的按鈕等。可以通過選擇“窗口”“其他面板”“庫/公用庫”命令打開“庫”面板。時間軸時間軸是Flash中動畫制作和編輯的重要工具，用于確定動畫播放順序，它是動畫中每個幀的排列順序以及指示每個圖層疊加關系的主要線條。6.3.3實例、移動的文本主要應用以下知識來創(chuàng)建文字的運動

15、效果：插入關鍵幀、延長動畫播放時間、將舞臺上的對象變?yōu)樵?。選擇特定步驟(1)“檔案”“新建”(new)命令創(chuàng)建場景文件。(2)在彈出“文檔屬性”對話框中，選擇“修改文檔”命令將頁面的背景顏色更改為黑色顏色。(3)在工具箱中選擇“文字”工具，然后在頁面上輸入文字，將文字顏色設置為白色。(4)在工具箱中，使用“選擇”工具在舞臺上選擇文本，然后選擇“修改”“轉換為元件”命令以在彈出對話框中進行設置。(5)在圖層中，選擇第25幀，單擊鼠標右鍵，然后從彈出快捷菜單中選擇“插入關鍵幀”命令，以添加關鍵幀。(6)在圖層中，選擇第1幀，選擇“變換窗口”命令，然后在彈出轉換面板中選擇并修改“變換”復選框。(7)確保折疊的字符仍處于選定狀態(tài)，選擇“窗口屬性”命令，從彈出“屬性”面板的“顏色”下拉列表框中選擇alpha選項，然后將alpha值設置為0%。(8)在圖層上，選擇第1幀，然后選擇“窗口”“屬性”命令，以便在彈出“屬性”面板中進行相應的設置。(9)在圖層中選擇第35幀，單擊鼠標右鍵，然后從彈出快捷菜單中選擇“插入幀”命令，以增加幀播放時間。(10)按Ctrl Enter鍵可以看到文字的運動效果。6.3.4測試和發(fā)布作品、測試作品、(1)測試動畫播放效果可以按Ctrl Enter鍵查看動畫播放。(2)選擇測試動