《動態(tài)網(wǎng)頁設(shè)計與制作實用教程》電子教案54.ppt

1、動態(tài)網(wǎng)頁設(shè)計與制作實用教程 電子教案,制 作：周文華,目 錄,網(wǎng)頁設(shè)計概述 Flash MX基礎(chǔ)知識 動畫角色的繪制與編輯 動畫的基本形式 洋蔥皮、圖層及聲音的應(yīng)用 動畫技術(shù)的綜合應(yīng)用 Fireworks MX基礎(chǔ)知識 位圖編輯與動畫制作 圖像的優(yōu)化與導(dǎo)出,Dreamweaver MX基礎(chǔ)知識 設(shè)計頁面布局 網(wǎng)頁元素的添加與編輯 鏈接、庫與模板 瀏覽器動態(tài)網(wǎng)頁的制作 服務(wù)器動態(tài)網(wǎng)頁知識基礎(chǔ) 服務(wù)器動態(tài)網(wǎng)頁的制作 動態(tài)網(wǎng)頁設(shè)計實例 站點管理,1.1 網(wǎng)頁設(shè)計的基本方式 1.2 網(wǎng)頁中的常見元素 1.3 網(wǎng)頁元素的創(chuàng)作與編輯工具 1.4 HTML基礎(chǔ)知識 1.5 動態(tài)網(wǎng)頁的支持技術(shù),第1章 網(wǎng)頁設(shè)

2、計概述,第2章 Flash MX基礎(chǔ)知識,2.1 認識 Flash MX 2.2 Flash MX 的工作界面 2.3 創(chuàng)建與保存動畫,第3章 動畫角色的繪制與編輯,3.1 圖形角色的繪制與填充 3.2 編輯圖形角色 3.3 角色創(chuàng)作實例,第4章 動畫的基本形式,4.1 動畫制作的有關(guān)概念 4.2 三種基本動畫形式,第5章 洋蔥皮、圖層及聲音的應(yīng)用,5.1 洋蔥皮效果的應(yīng)用 5.2 圖層的應(yīng)用 5.3 聲音效果的應(yīng)用,第6章 動畫技術(shù)的綜合應(yīng)用,6.1 交互動畫的制作 6.2 動畫的輸出與優(yōu)化 6.3 動畫制作綜合實例,第7章 Fireworks MX基礎(chǔ)知識,7.1 網(wǎng)頁圖像概述 7.2 認

3、識 Fireworks MX 7.3 矢量圖像的繪制與編輯 7.4 修改對像,第8章 位圖編輯與動畫制作,8.1 位圖的編輯 8.2 在Fireworks MX中建立動畫實例,第9章 圖像的優(yōu)化與導(dǎo)出,9.1 圖像的優(yōu)化 9.2 圖像的導(dǎo)出,第10章Dreamweaver MX基礎(chǔ)知識,10.1 認識Dreamweaver MX 10.2 本地站點的建立 10.3 網(wǎng)頁的建立與保存,第11章 設(shè)計頁面布局,11.1 使用表格對頁面進行布局 11.2 在布局視圖中對頁面進行布局 11.3 使用框架對頁面進行布局 11.4 使用層對頁面進行布局,第12章 網(wǎng)頁元素的添加與編輯,12.1 添加文本和

4、設(shè)置文本格式 12.2 圖像的添加與編輯 12.3 媒體的添加與編輯 12.4 表單的添加與編輯,第13章 鏈接、庫與模板,13.1 鏈接 13.2 庫項目 13.3 模板,第14章 瀏覽器動態(tài)網(wǎng)頁的制作,14.1 行為與行為面板 14.2 應(yīng)用行為制作動態(tài)網(wǎng)頁,第15章 服務(wù)器動態(tài)網(wǎng)頁知識基礎(chǔ),15.1 ASP 技術(shù)基礎(chǔ) 15.2 腳本語言簡介 15.3 數(shù)據(jù)庫基礎(chǔ)知識 15.4 測試服務(wù)器的建立 15.5 ASP 應(yīng)用程序舉例,第16章 服務(wù)器動態(tài)網(wǎng)頁的制作,16.1 動態(tài)站點的建立 16.2 后臺數(shù)據(jù)庫的設(shè)計 16.3數(shù)據(jù)提交功能的實現(xiàn) 16.4 數(shù)據(jù)顯示功能的實現(xiàn) 16.5 數(shù)據(jù)查詢功

5、能的實現(xiàn) 16.6 數(shù)據(jù)維護功能的實現(xiàn) 16.7 成績管理系統(tǒng)主頁的建立,第17章 服務(wù)器動態(tài)網(wǎng)頁的制作,17.1 網(wǎng)上新聞發(fā)布 172 網(wǎng)上投票系統(tǒng)的設(shè)計,第18章 站點管理,18.1 測試本地站點 18.2 站點文件的上傳 18.3 站點的維護與管理 18.4 宣傳自己的網(wǎng)站,附錄：經(jīng)典網(wǎng)頁賞析,經(jīng)典網(wǎng)頁賞析1 經(jīng)典網(wǎng)頁賞析2 經(jīng)典網(wǎng)頁賞析3 經(jīng)典網(wǎng)頁賞析4 經(jīng)典網(wǎng)頁賞析5 經(jīng)典網(wǎng)頁賞析6,1.1 網(wǎng)頁設(shè)計的基本方式,1.1.1 手工編碼方式 1.1.2 利用可視化工具 1.1.3 手工編碼與可視化工具結(jié)合,1.2 網(wǎng)頁中的常見元素,1.2.1 文本 1.2.2 圖象與動畫 1.2.3 音

6、頻與視頻 1.2.4 超級鏈接 1.2.5 表格 1.2.6 表單 1.2.7 導(dǎo)航欄 1.2.8 其他元素,1.3 網(wǎng)頁元素的創(chuàng)作與編輯工具,1.3.1 網(wǎng)頁圖像制作工具 1.3.2 動畫制作工具 1.3.3 網(wǎng)頁編輯工具,1.4 HTML基礎(chǔ)知識,1.4.1 HTML的基本概念 1.4.2 HTML的基本語法結(jié)構(gòu),1.5 動態(tài)網(wǎng)頁的支持技術(shù),1.5.1 ASP 技術(shù) 1.5.2 PHP 技術(shù) 1.5.3 JSP 技術(shù),2.1 認識 Flash MX,2.1.1 Flash MX的發(fā)展 2.1.2 Flash MX的新增功能,2.2 Flash MX 的工作界面,2.2.1 菜單欄 2.2.

7、2 工具欄和繪圖工具箱 2.2.3 時間軸面板 2.2.4 屬性面板 2.2.5 其他面板,2.3 創(chuàng)建與保存動畫,2.3.1 創(chuàng)建與保存動畫 2.3.2 文檔屬性設(shè)置,3.1 圖形角色的繪制與填充,3.1.1 圖形角色的繪制 3.1.2 顏色的填充,3.2 編輯圖形角色,3.2.1 選取角色 3.2.2 復(fù)制和刪除 3.2.3 擦除角色工具 3.2.4 變形工具,3.3 角色創(chuàng)作實例,3.3.1 笑臉/哭臉的繪制 3.3.2 花朵的制作 3.3.3 放大鏡繪制 3.3.4 水暈的制作 3.3.5 放射齒輪的繪制 3.3.6 彎月的制作,4.1 動畫制作的有關(guān)概念,4.1.1 場景 4.1.2

8、 時間軸 4.1.3 幀 4.1.4 元件,4.2 三種基本動畫形式,4.2.1 逐幀動畫的制作 4.2.2 位移動畫的制作 4.2.3 變形動畫,5.1 洋蔥皮效果的應(yīng)用,Flash MX 中有種專門的多幀編輯與對齊模式，叫作洋蔥皮效果(Onion Skin)，它們位于時間軸下面。把洋蔥皮視圖模式打開，點按時間軸下面的圖標，時間軸會變成時間軸上出現(xiàn)了兩個圓圈，它們分別代表洋蔥皮的起始幀與終止幀，凡是在這個范圍內(nèi)的幀都可在同時間進行顯示。現(xiàn)在我們把右邊的圓圈拉到第30 幀 工作區(qū)中的內(nèi)容也會有所變化，從第1幀到第30幀的內(nèi)容全顯示出來了。洋蔥皮模式的作用主要是用來進行多幀編輯，在進行起始幀與終

9、止幀的元素精確定位時，它常常是必不可少的工具。 元件有個中心點，它是縮放與旋轉(zhuǎn)操作的參照點，因此在進行多幀編輯時有必要先改變元件的中心點再進行編輯。改變元件中心點的操作是在元件的編輯窗口中進行的。,5.2 圖層的應(yīng)用,5.2.1 圖層的狀態(tài) 5.2.2 圖層的基本操作 5.2.3 圖層的屬性 5.2.4 引導(dǎo)層 5.2.5 遮罩層,5.3 聲音效果的應(yīng)用,5.3.1 影響聲音質(zhì)量的因素 5.3.2 音頻文件的導(dǎo)入 5.3.3 給動畫加上聲音,6.1 交互動畫的制作,6.1.1 交互動畫的原理 6.1.2 簡單交互動畫的制作 6.1.3 交互動畫實例 6.1.4 交互性的檢測,6.2 動畫的輸出

10、與優(yōu)化,6.2.1 Flash 動畫的輸出 6.2.2 Flash 動畫的優(yōu)化,6.3 動畫制作綜合實例,6.3.1 下落的彈性小球 6.3.2 放大鏡 6.3.3 水中倒影 6.3.4 光筆寫字 6.3.5 書本翻頁 6.3.6 電子琴6.3.7 鼠標跟隨效果的制作 6.3.8 秋雨連綿,7.1 網(wǎng)頁圖像概述,7.1.1 圖像的格式 7.1.2 矢量圖像和位圖圖像,7.2 認識 Fireworks MX,7.2.1 Fireworks MX的特點 7.2.2 Fireworks MX 的工作界面 7.2.3 文檔的基本操作,7.3 矢量圖像的繪制與編輯,7.3.1 圖像的繪制模式 7.3.2

11、 矢量圖像的繪制 7.3.3 布局工具的使用 7.3.4 標題文字的制作,7.4 修改對像,7.4.1 選擇對像 7.4.2 組織和管理對像 7.4.3 整形路徑,8.1 位圖的編輯,8.1.1 位圖編輯工具 8.1.2 位圖編輯實例,8.2 在Fireworks MX中建立動畫實例,8.2.1 建立動畫對象 8.2.2 動畫的設(shè)定 8.2.3 動畫預(yù)覽 8.2.4 動畫的編輯 8.2.5. 編輯運動路徑 8.2.6 輸出gif動畫,9.1 圖像的優(yōu)化,9.1.1 優(yōu)化圖像應(yīng)考慮的因素 9.1.2 圖像優(yōu)化的途徑,9.2 圖像的導(dǎo)出,9.2.1 常規(guī)輸出 9.2.2 輸出一個圖像的區(qū)域 9.2

12、.3 輸出切片 9.2.4 輸出Flash格式 9.2.5 使用“導(dǎo)出向?qū)А?10.1 認識Dreamweaver MX,10.1.1 Dreamweaver MX的新增功能 10.1.2 Dreamweaver Mx的工作區(qū) 10.1.3 常規(guī)參數(shù)的設(shè)置 10.1.4 在多用戶系統(tǒng)中自定義 Dreamweaver MX,10.2 本地站點的建立,10.2.1 關(guān)于站點規(guī)劃和設(shè)計 10.2.2 本地站點的建立與編輯,10.3 網(wǎng)頁的建立與保存,在完成了本地站點的定義之后，現(xiàn)在開始建立我們的第一個網(wǎng)頁，操作步驟如下： 1.選擇網(wǎng)頁格式 選擇“文件/新建”菜單或使用“標準工具欄”的新建按鈕，則打開

13、一個對話窗口。選擇“基本頁”中的“HTML”模式。點擊右下角的“創(chuàng)建”按鈕，打開一個新的文件窗口。 2. 設(shè)置網(wǎng)頁屬性 在編輯新網(wǎng)頁前應(yīng)該先設(shè)置頁面屬性，也就是對頁面進行整體規(guī)劃。頁面屬性的設(shè)置操作為：選擇“修改 / 頁面屬性”或在工作區(qū)按鼠標右鍵選擇彈出菜單中的“頁面屬性”選項激活屬性設(shè)置面板。 設(shè)置完畢點擊右上角的“確定”按鈕。 3.編輯網(wǎng)頁元素 在網(wǎng)頁上添加文本、圖片、表格等網(wǎng)頁元素。 4.在網(wǎng)頁中加注釋 （1）選中插入注釋的位置。 （2）選擇“插入/文本對象 / 注釋”菜單，在窗口中輸入注釋內(nèi)容。 （3）編輯注釋：雙擊頁面中的注釋圖標即可進入編輯界面。 5保存網(wǎng)頁 選擇“文件/保存”菜

14、單，給網(wǎng)頁命名并存入相應(yīng)文件夾。,11.1 使用表格對頁面進行布局,11.1.1 創(chuàng)建表格 11.1.2 表格的編輯 11.1.3 對表格進行排序,11.2 在布局視圖中對頁面進行布局,11.2.1 布局視圖簡介 11.2.2 布局視圖的切換 11.2.3 繪制布局單元格和表格 11.2.4 向布局單元格中添加內(nèi)容 11.2.5 布局單元格的調(diào)整 11.2.6 設(shè)置布局單元格的格式 11.2.7 設(shè)置布局視圖參數(shù),11.3 使用框架對頁面進行布局,11.3.1 框架（集）概述 11.3.2 創(chuàng)建框架和框架集 11.3.3 選擇框架和框架集 11.3.4 在框架中打開文檔 11.3.5 保存框架

15、和框架集文件 11.3.6 設(shè)置框架（集）屬性,11.4使用層對頁面進行布局,11.4.1 層的創(chuàng)建 11.4.2 層的基本操作 11.4.3 向?qū)犹砑觾?nèi)容 11.4.4 修改現(xiàn)有層的屬性 11.4.5 層和表的轉(zhuǎn)換,12.1 添加文本和設(shè)置文本格式,12.1.1 文本元素的添加和編輯 12.1.2 HTML 樣式的應(yīng)用 12.1.3 層疊樣式（CSS）的應(yīng)用,12.2 圖像的添加與編輯,12.2.1 添加圖像 12.2.2 編輯圖像,12.3 媒體的添加與編輯,12.3.1 添加 Flash 影片 12.3.2 添加 Shockwave 影片 12.3.3 向頁面添加視頻 12.3.4 向頁

16、面添加聲音,12.4 表單的添加與編輯,12.4.1 表單及表單對象,13.1 鏈接,13.1.1 鏈接的創(chuàng)建與管理 13.1.2 鏈接的應(yīng)用,13.2 庫項目,13.2.1 認識“庫“項目 13.2.2 創(chuàng)建和編輯庫項目 13.2.3. 使用庫項目,13.3 模板,13.3.1 創(chuàng)建編輯模板 13.3.2 應(yīng)用模板 13.3.3 更新模板,14.1 行為與行為面板,14.1.1 行為的工作原理 14.1.2 行為面板的應(yīng)用,14.2 應(yīng)用行為制作動態(tài)網(wǎng)頁,14.2.1 與層有關(guān)的行為 14.2.2 打開瀏覽器窗口 14.2.3 播放聲音 14.2.4 彈出消息 14.2.5 設(shè)置文本 14.

17、2.6 顯示彈出式菜單 14.2.7 檢查表單 14.2.8 制作時間線動畫 14.2.9 檢查瀏覽器 14.2.10 檢查插件,15.1 ASP 技術(shù)基礎(chǔ),15.1.1 ASP的概念與工作流程 15.1.2 ASP應(yīng)用程序 15.1.3 ASP的內(nèi)建對象,15.2 腳本語言簡介,15.2.1 VBscript基礎(chǔ)知識 15.2.2 VBScript控制結(jié)構(gòu),15.3 數(shù)據(jù)庫基礎(chǔ)知識,15.3.1 數(shù)據(jù)庫簡介 15.3.2 ACCESS 數(shù)據(jù)庫基本操作 15.3.3 數(shù)據(jù)源的建立,15.4 測試服務(wù)器的建立,ASP應(yīng)用程序的腳本代碼必須用腳本引擎來解釋執(zhí)行。因此運行Asp程序前應(yīng)該先安裝包含腳

18、本引擎的服務(wù)器管理程序IIS或PWS，也就是建立一個測試服務(wù)器。 任何一臺具有IP地址的計算機（沒有聯(lián)網(wǎng)的計算機管理程序默認一個IP地址），安裝上服務(wù)器管理程序后就構(gòu)成了一臺服務(wù)器。常見的 Web 服務(wù)器管理軟件包括IIS（Microsoft Internet Information Server）、PWS（Microsoft Personal Web Server）、Apache HTTP Server、Netscape Enterprise Server 和 iPlanet Web Server等。安裝哪一種Web服務(wù)軟件根據(jù)所用操作系統(tǒng)而定，在Windows NT及Wi

19、ndows 2000以上中安裝IIS最為常用，在Windows95/98安裝服務(wù)器軟件一般只能使用PWS。這里主要講述服務(wù)器管理軟的安裝與服務(wù)器站點的發(fā)布過程。 說明：與真正的INTERNET服務(wù)器相比，測試服務(wù)器不需要申請外部IP地址，不需要域名解析，主要用來測試本地機上的ASP應(yīng)用程序。測試服務(wù)器可以是局域網(wǎng)上的計算機，也可以是未連網(wǎng)的單機。如果是局域網(wǎng)內(nèi)的計算機設(shè)成了服務(wù)器，則它上面的站點可通過內(nèi)部IP地址進行訪問。如：在局域網(wǎng)上建立了內(nèi)部IP地址為“1”的測試服務(wù)器，則在瀏覽器地址欄中輸入“1/站點虛擬目錄名/主頁名”即可訪問測試服務(wù)器上的站

20、點。,15.5 ASP 應(yīng)用程序舉例,15.5.1 數(shù)據(jù)提交入庫的程序設(shè)計 15.5.2 查詢功能的實現(xiàn) 15.5.2 ASP程序的調(diào)試與糾錯,16.1 動態(tài)站點的建立,16.1.1 工作流程和程序結(jié)構(gòu) 16.1.2 建立、發(fā)布站點 16.1.3 在Dreamweaver MX中定義本地站點,16.2 后臺數(shù)據(jù)庫的設(shè)計,16.2.1 設(shè)計庫結(jié)構(gòu)，創(chuàng)建數(shù)據(jù)源 16.2.2 在Dreamweaver MX中建立數(shù)據(jù)庫 連接,16.3數(shù)據(jù)提交功能的實現(xiàn),16.3.1 表單網(wǎng)頁的建立 16.3.2 記錄集的建立 16.3.3 記錄集與表單的綁定,16.4 數(shù)據(jù)顯示功能的實現(xiàn),16.4.1 記錄的顯示

21、16.4.2 動態(tài)顯示多條記錄 16.4.3 記錄的計數(shù)和統(tǒng)計 16.4.4 記錄集導(dǎo)航條的建立,16.5 數(shù)據(jù)查詢功能的實現(xiàn),16.5.1 創(chuàng)建查詢頁面 16.5.2 構(gòu)建結(jié)果頁面 16.5.3 建立查詢顯示詳細面頁,16.6 數(shù)據(jù)維護功能的實現(xiàn),16.6.1 創(chuàng)建登錄頁面 16.6.2 數(shù)據(jù)維護,16.7 成績管理系統(tǒng)主頁的建立,通過上面的操作，我們已經(jīng)實現(xiàn)了成績管理的數(shù)據(jù)錄入、查詢顯示、數(shù)據(jù)護等功能。為了便于用戶操作使用，下面建立管理主頁，將各功能集成起來。,17.1 網(wǎng)上新聞發(fā)布,17.1.1 工作流程圖 17.1.2 數(shù)據(jù)表的結(jié)構(gòu) 17.1.3 建立數(shù)據(jù)庫連接 17.1.4 新聞提交

22、功能的實現(xiàn) 17.1.5 創(chuàng)建顯示頁面 17.1.6 在網(wǎng)頁上實現(xiàn)對數(shù)據(jù)庫的維護,17.2 網(wǎng)上投票系統(tǒng)的設(shè)計,17.2.1 工作流程圖 17.2.2 站點結(jié)構(gòu)圖 17.2.3 后臺數(shù)據(jù)庫設(shè)計 17.2.4 建立數(shù)據(jù)庫連接 17.2.5 投票頁面的設(shè)計 17.2.6 投票結(jié)果的柱狀顯示,18.1 測試本地站點,18.1.1 測試站點網(wǎng)頁與目標瀏覽器的兼容性 18.1.2 預(yù)覽自己的網(wǎng)頁 18.1.3 檢驗文件的大小及下在載時間,18.2 站點文件的上傳,18.2.1 文件傳輸?shù)幕A(chǔ)知識 18.2.2 在Dreamweaver MX中傳輸站點 18.2.3 存回/取出功能簡介 18.2.4 設(shè)計

23、備注功能介紹 18.2.5 上傳網(wǎng)頁文件到局域網(wǎng),18.3 站點的維護與管理,18.3.1 站點文件管理 18.3.2 遠程與本地站點同步 18.3.3 檢查與修正超級鏈接,18.4 宣傳自己的網(wǎng)站,18.4.1 注冊好記的域名 18.4.2 在各大搜索引擎上登陸注冊站點 18.4.3 在電子郵件簽名中添加站點地址 18.4.4 到BBS上公布站點信息 18.4.5 與相關(guān)站點彼此鏈接,1.1.1 手工編碼方式,網(wǎng)頁是由HTML（HYPER TEXT MARKUP LANGUAGE）超文本標記語言編碼的文本文檔，設(shè)計制作網(wǎng)頁的過程就是生成HTML代碼的過程。在WWW（World Wide We

24、b ）發(fā)展的初期人們制作網(wǎng)頁是通過直接編寫HTML代碼來實現(xiàn)的。 手工編碼制作網(wǎng)頁對網(wǎng)頁設(shè)計人員的要求較高，編碼效率低，調(diào)試過程復(fù)雜，因此，對大多數(shù)網(wǎng)頁設(shè)計人員來說采用這個方式比較困難。但手工編碼可以靈活地制作出豐富的網(wǎng)頁效果。,1.1.2 可視化工具方式,隨著網(wǎng)頁制作技術(shù)的不斷發(fā)展，出現(xiàn)了諸如FrontPage、Dreamweaver等可視化的網(wǎng)頁編輯工具。利用這些工具人們在可視環(huán)境下編輯制作網(wǎng)頁元素，由編輯工具自動生成對應(yīng)的網(wǎng)頁代碼。如要在網(wǎng)頁上顯示圖1-1中的表格，就可以直接在工作區(qū)中繪制表格而不用考慮編碼的規(guī)則和語法。利用可視化工具編輯網(wǎng)頁操作簡單直觀，調(diào)試方便，是大眾化的網(wǎng)頁編輯方式

25、。但利用可視化工具在制作一些特殊網(wǎng)頁效果上有一定的局限性。,1.1.3 編碼和可視化工具結(jié)合方式,編碼和可視化工具結(jié)合是一種比較成熟的網(wǎng)頁制作方式。具體過程為：一般的網(wǎng)頁元素通過可視化工具編輯制作，一些特殊的網(wǎng)頁效果通過插入代碼生成。這種方式效率高、調(diào)試方便而且可以實現(xiàn)豐富的網(wǎng)頁效果，但要求設(shè)計人員既要熟悉Html語言又能運用可視化工具。除了上面三種基本的網(wǎng)頁設(shè)計制作方式外，我們還可以通過修改已有的網(wǎng)頁代碼生成自己的網(wǎng)頁。在網(wǎng)頁編輯制作過程中具體采用何種方式要根據(jù)個人的具體情況而定，每必要拘泥于某種固定的模式。,1.2.1文本,文本一直是人類最重要的信息載體與交流工具，網(wǎng)頁中的信息也以文本為主

26、。與圖象相比，文字雖然不如圖象那樣能夠很快引起瀏覽者的注意，但卻能準確地表達信息的內(nèi)容和含義。為了克服文字固有的缺點，人們賦予了網(wǎng)頁中文本更多的屬性，如字體，字號，顏色，底紋和邊框等，通過不同格式的區(qū)別，突出顯示重要的內(nèi)容。此外，用戶還可以在網(wǎng)頁中設(shè)計各種各樣的文字列表，來清晰表達一系列項目。這些功能都給網(wǎng)頁中的文本賦予了新的生命力。,1.2.2圖像和動畫,圖像在網(wǎng)頁中具有提供信息，展示作品，裝飾網(wǎng)頁，表達個人情調(diào)和風(fēng)格的作用。用戶可以在網(wǎng)頁中使用GIF, JPEG(JPG), PNG三種圖象格式，其中使用最 廣泛的是GIF和JPEG兩種格式。 說明：當用戶使用所見即所得的網(wǎng)頁設(shè)計軟件在網(wǎng)頁上

27、添加其他非GIF, JPEG, 或PNG格式的圖片并保存時，這些軟件通常會自動將少于8位顏色的圖片轉(zhuǎn)化為GIF格式，或?qū)⒍嘤?位顏色的圖片轉(zhuǎn)化為JPEG. 在網(wǎng)頁中為了更有效地吸引瀏覽者的注意，許多網(wǎng)站的廣告都做成了動畫形式。圖1-2中的“無限情緣”，就是一個動畫廣告。,1.2.3 聲音和視頻,聲音是多媒體網(wǎng)頁的一個重要組成部分。當前存在著一些不同類型的聲音文件和格式，也有不同的方法將這些聲音添加到Web頁中。在決定添加聲音之前，需要考慮的因素包括其用途，格式，文件大小，聲音品質(zhì)和瀏覽器差別等。不同瀏覽器對于聲音文件的處理方法是非常不同的，彼此之間很可能不兼容。 用于網(wǎng)絡(luò)的聲音文件的格式非常多

28、，常用的有MIDI、WAV、MP3和AIF等。設(shè)計者在使用這些格式的文件時，需要加以區(qū)別。很多瀏覽器不要插件也可以支持MIDI,WAV和AIF格式的文件，而MP3和RM格式的聲音文件則需要專門的瀏覽器播放。 一般來說，不要使用聲音文件作為背景音樂，那樣會影響網(wǎng)頁下載的速度。可以在網(wǎng)頁中添加一個打開聲音文件的鏈接，讓音樂播放變得可以控制。 視頻文件的格式也非常多，常見的有Realplay, MPEG, AVI和DivX等。視頻文件的采用讓網(wǎng)頁變得精彩而有動感。,1.2.4 超級鏈接,超級鏈接技術(shù)可以說是萬維網(wǎng)流行起來的最主要的原因。它是從一個網(wǎng)頁指向另一個目的端的鏈接，例如指向另一個網(wǎng)頁或者相同

29、網(wǎng)頁上的不同位置。這個目的端通常是另一個網(wǎng)頁，但也可以是一幅圖片，一個電子郵件地址，一個文件，一個程序或者是本網(wǎng)頁中的其他位置。其熱點通常是文本，圖片或圖片中的區(qū)域，也可以是一些不可見的程序腳本。 當瀏覽者單擊超級鏈接熱點時，其目的端將顯示在Web瀏覽器上，并根據(jù)目的端的類型以不同方式打開。例如，當指向一個AVI文件的超級鏈接被單擊后，該文件將在媒體播放軟件中打開；如果單擊的是指向一個網(wǎng)頁的超級鏈接，則該網(wǎng)頁將顯示在Web瀏覽器上。加下劃線的文字，就是已經(jīng)建立了超鏈接的文本。,1.2.5 表格,在網(wǎng)頁中表格用來控制網(wǎng)頁中信息的布局方式。這包括兩方面：一是使用行和列的形式來布局文本和圖像以及其他

30、的列表化數(shù)據(jù)；二是可以使用表格來精確控制各種網(wǎng)頁元素在網(wǎng)頁中出現(xiàn)的位置。圖1-2中“特色欄目”，就運用了表格進行布局定位。,1.2.6 表單,使用超級鏈接，瀏覽者和Web站點便建立起了一種簡單的交互關(guān)系。網(wǎng)頁中的表單通常用來接受用戶在瀏覽器端的輸入，然后將這些信息發(fā)送到用戶設(shè)置的目標端。這個目標可以是文本文件，Web頁，電子郵件，也可以是服務(wù)器端的應(yīng)用程序。表單一般用來收集聯(lián)系信息、接受用戶要求、獲得反饋意見、設(shè)置來賓簽名簿、讓瀏覽者注冊為會員并以會員的身份登陸站點等。 表單由不同功能的表單域組成，最簡單的表單也要包含一個輸入?yún)^(qū)域和一個提交按鈕。站點瀏覽者填寫表單的方式通常是輸入文本，選中單選

31、按鈕或復(fù)選框，以及從下拉列表框中選擇選項等。 根據(jù)表單功能與處理方式的不同，通?？梢詫⒈韱畏譃橛脩舴答伇韱危粞圆颈韱?，搜索表單和用戶注冊表單等類型。 中右上角的“手機參與”就是一個手機號的提交表單。,1.2.7 導(dǎo)航欄,導(dǎo)航欄是用戶在規(guī)劃好站點結(jié)構(gòu)，開始設(shè)計主頁時必須考慮的一項內(nèi)容。導(dǎo)航欄的作用就是引導(dǎo)瀏覽者游歷站點。事實上，導(dǎo)航欄就是一組超級鏈接，這組超級鏈接的目標就是本站點的主頁以及其他重要網(wǎng)頁。在設(shè)計站點中的諸網(wǎng)頁時，可以在站點的每個網(wǎng)頁上顯示一個導(dǎo)航欄，這樣，瀏覽者就可以既快又容易的轉(zhuǎn)向站點的其他網(wǎng)頁。 一般情況下，導(dǎo)航欄應(yīng)放在網(wǎng)頁中較引人注目的位置，通常是在網(wǎng)頁的頂部或一側(cè)。導(dǎo)航欄

32、既可以是文本鏈接，也可以是一些圖形按鈕。圖1-2中的導(dǎo)航欄就是一組文本鏈接。,1.2.8 其他常見元素,網(wǎng)頁中除了以上幾種最基本的元素之外，還有一些其它的常用元素，包括懸停按鈕，Java特效，ActiveX等各種特效。它們不僅能點綴網(wǎng)頁，使網(wǎng)頁更活潑有趣，而且在網(wǎng)上娛樂，電子商務(wù)等方面也有著不可忽視的作用。,1.3.1 網(wǎng)頁圖像制作工具,1. Fireworks MX Firework MX是Macromedia公司的產(chǎn)品，是目前最流行的網(wǎng)頁圖像制作軟件。只有將Dreamweaver的默認圖像編輯器設(shè)為Fireworks ，那么在Fireworks 中制作完成網(wǎng)頁圖像后將其輸出就會立即在Dre

33、amweaver中更新。Fireworks還可以安裝使用所有的Photoshop濾鏡，并且可以直接導(dǎo)入PSD格式圖像。更方便的是它不僅結(jié)合了Photoshop位圖功能以及CorelDRAW矢量圖的功能，而且提供了大量的網(wǎng)頁圖像模板供用戶使用。其最方便之處是，它可以將圖像切割，圖像映射，懸停按鈕，圖像翻轉(zhuǎn)等效果直接生成HTML代碼，或者嵌入到現(xiàn)有的網(wǎng)頁中，或者作為單獨的網(wǎng)頁出現(xiàn)。 2. Photo Impact Photo Impact是一個功能強大，有趣且好用的基于對象的圖像編輯軟件。在這個軟件中，所有要編輯的圖像都會向以獨立的對象形式存在，用戶可以一直對獨立的對象進行編輯，直到滿意后再將它合

34、并到圖像上。,1.3.2 動畫制作工具,1. Flash MX Flash MX也是Macromedia公司的產(chǎn)品，是目前最流行的矢量動畫制作軟件。與其它的動和軟件相比，它具有一些優(yōu)點： 制作的是矢量圖像。只有用少量矢量數(shù)據(jù)就可以描述一個復(fù)雜的對象，而占有的存儲空間只是位圖的幾千分之一，非常適合在網(wǎng)絡(luò)上使用。同時，矢量圖像不會隨瀏覽器窗口大小的改變而改變畫面質(zhì)量。 使用插件方式工作。 提供了一些增強功能。例如，支持位圖，聲音，漸變色和Alpha透明等。擁有了這些功能，用戶就完全可以建立一個全部由Flash制作的站點。 Flash影片也是一種流式文件。這就是說，瀏覽者在觀看一個大動畫時，可以不必

35、等到影片全部下做到本地在觀看，而是可以隨時觀看，即使后面的內(nèi)容還沒有完全下載，也可以開始欣賞動畫。 2. Director Director是Macromedia公司推出的多媒體開發(fā)工具，它為廣大多媒體制作人員提供了建立交互式應(yīng)用的強大功能。用戶可以在友好的界面下通過使用Director制作出令人滿意的多媒體作品。Director是一個簡單且直觀的軟件，即使是首次使用該軟件的用戶也能編出優(yōu)秀的程序。而且，Director又是一個高度面向?qū)ο蟮墓ぞ?，非常適合圖像設(shè)計者使用。,1.3.3 網(wǎng)頁編輯工具,1. FrontPage 2000 FrontPage 2000是Microsoft Offic

36、e 2000家族中的一員，F(xiàn)rontPage 2000的界面，功能與Word 2000 都非常相似。FrontPage2000提供了相當數(shù)量的模版和向?qū)В钩鯇W(xué)者能夠非常容易的設(shè)計出美觀實用的網(wǎng)頁。FrontPage 2000最強大之處，是其站點管理與遠程發(fā)布功能。用戶只需在本地對網(wǎng)頁進行編輯，F(xiàn)rontPage 2000便會跟蹤用戶編輯過的文件，在發(fā)布時，自動將修改過的網(wǎng)頁進行發(fā)布，未編輯過的網(wǎng)頁可由用戶決定是否再次向服務(wù)器發(fā)送。 2. Dreamweaver MX Dreamweaver MX和Fireworks MX、Flash MX一起，被人們喻為“網(wǎng)頁制作三劍客”。同F(xiàn)rontPag

37、e一樣，Dreamweaver也是“所見即所得”的網(wǎng)頁編輯軟件。它能夠很好的支持ActiveX, JavaScript, Java, Flash和Shockwave等，而且還能通過鼠標拖動的方式從頭到尾制作動態(tài)的HTML效果。Dreamweaver還采用了Roundtrip HTML技術(shù)，使用這些技術(shù)，網(wǎng)頁可以在Dreamweaver和HTML代碼編輯器之間進行自由轉(zhuǎn)化，而HTML語法及結(jié)構(gòu)不變。這樣，專業(yè)設(shè)計者可以在不改變原有編輯習(xí)慣的同時，充分享受到“所見即所得”帶來的方便。 Dreamweaver 3. HotDog HotDog是較早基于代碼的網(wǎng)頁設(shè)計工具，其最具特色的地方是提供了許多

38、向?qū)Чぞ撸軒椭O(shè)計者制作頁面中的復(fù)雜部分。HotDog的高級HTML支持插入marquee（動態(tài)文本標記），并能在預(yù)覽模式中以正常速度觀看。這點非常難得，因為即使首創(chuàng)這種標簽的Microsoft在FrontPage 98中也未提供這樣的功能。HotDog對plugin的支持也遠遠超過其他產(chǎn)品，它提供的對話框允許你以手動方式為不同格式的文件選擇不同的選項。但對中文的處理不很方便。HotDog是個功能強大的軟件，對于那些希望在網(wǎng)頁中加入CSS、Java、RealVideo等復(fù)雜技術(shù)的高級設(shè)計者，是個很好的選擇。,1.4.1 HTML基本概念,1. HTML的概念 HTML是一種描述語言，對WEB

39、頁面中顯示內(nèi)容的屬性以標簽的形式進行描述?？蛻魴C上的瀏覽器（browser）對這些描述進行解釋將相應(yīng)頁面內(nèi)容正確顯示在顯示器上。一個WEB頁面就是一個HTML文檔 。 2. HTML文檔的構(gòu)成 HTML文檔由三大元素構(gòu)成：HTML元素、HEAD元素和BODY元素。每個元素又包含各自相應(yīng)的標記（屬性）。HTML元素是最外層的元素，里面包含HEAD元素和BODY元素。 HEAD元素中包含對文檔基本信息（文檔標題，文檔搜索關(guān)鍵字、文檔生成器等）描述的標記。BODY元素是文檔的主體部分，包含有對網(wǎng)頁元素（文本、表格、圖片、動畫、鏈接等）描述的標記。HTML中標記一般成對，如： 等，但也有一些不成對。

40、HTML文檔的結(jié)構(gòu)形式如下： 頁面信息的描述 頁面元素的描述 3. HTML 文檔的編輯 HTML 文檔是普通文本 ( ASCII) 文件, 它可以用任意編緝器(如windows中的記事本、寫字板, Macintosh 中的BBEdit等)生成。 你也可以使用字處理軟件, 不過要記住存文件時要存成“帶回車的純文本”。早期網(wǎng)頁制作的過程就是直接書寫HTML代碼來定義頁面元素的過程。,1.4.2 HTML的基本語法結(jié)構(gòu),1. HTML元素的標記 HTML標記 HTML標記是對整個文檔屬性的描述，即告訴瀏覽器HTML文檔的開始與結(jié)束 。 2. HEAD元素 （1） HEAD標記 該標記用來表示HEA

41、D元素的開始和結(jié)束。 （2）BASE標記 (不成對標記)。 （3）META標記（不成對標記） （4）TITLE 標記 （5）SCRIPT 標記 記用來表示HEAD元素的開始和結(jié)束，其格式為： 。 3BODY元素(可見對象的描述) （1）BODY標記 該標記是BODY元素開始和結(jié)束的標志。 （2）DIV層標記 （3）文本標記 （4）段落標記 （5）表格標記 （6）圖象標記 （7）下拉表單標記 （8）鏈接 （Linking）標記 （9）多媒體標記 （10）移動文字標記,1.5.1 asp技術(shù),ASP （Microsoft Active Server Pages）是一套微軟開發(fā)的服務(wù)器端腳本環(huán)境，

42、ASP 內(nèi)含于 IIS 3.0 和 4.0 之中 , 通過 ASP 我們可以結(jié)合 HTML 網(wǎng)頁、 ASP 指令和 ActiveX 元件建立動態(tài)、交互且高效的 WEB 服務(wù)器應(yīng)用程序。有了 ASP 你就不必擔心客戶的瀏覽器是否能運行你所編寫的代碼，因為所有的程序都將在服務(wù)器端執(zhí)行，包括所有嵌在普通 HTML 中的腳本程序。當程序執(zhí)行完畢后，服務(wù)器僅將執(zhí)行的結(jié)果返回給客戶瀏覽器，這樣也就減輕了客戶端瀏覽器的負擔，大大提高了交互的速度。 ASP應(yīng)用程序可以手工編碼制作，也可以通過Dreamweaver MX等可視化工具創(chuàng)作生成。 ASP的具體內(nèi)容將在后面的動態(tài)網(wǎng)頁設(shè)計中講解。,1.5.2 PHP

43、技術(shù),PHP（Hypertext Preprocesso超文本預(yù)處理器）是一種易于學(xué)習(xí)和使用的服務(wù)器端腳本語言。只需要很少的編程知識你就能使用PHP建立一個真正交互的WEB站點。PHP自從誕生以來，以其簡單的語法、強大的功能訊速得到了廣泛的應(yīng)用。PHP除了能夠操作頁面，還能發(fā)送HTTP的標題；它不需要特殊的開發(fā)環(huán)境和IDE；它不僅支持多種數(shù)據(jù)庫，還支持多種通信協(xié)議；另外，PHP還具有極強的兼容性。PHP是完全免費的，不用花錢，可以從PHP官方站點()自由下載。 PHP在大多數(shù)Unix平臺，GUN/Linux和微軟Windows平臺上均可以運行。,1.5.3 JSP技術(shù),JSP與Microsof

44、t的ASP技術(shù)非常相似。兩者都提供在HTML代碼中混合某種程序代碼、由語言引擎解釋執(zhí)行程序代碼的功能。與 ASP 一樣， JSP 中的 Java 代碼均在服務(wù)器端執(zhí)行。因此，在瀏覽器中使用查看源文件菜單是無法看到 JSP 源代碼的，只能看到結(jié)果 HTML 代碼。 JSP與ASP雖然有很多相識之處，但兩者也有重要區(qū)別：第一，ASP的編程語言是VBScript之類的腳本語言，JSP使用的是Java；第二，兩種語言引擎用完全不同的方式處理頁面中嵌入的程序代碼。在ASP下，VBScript代碼被ASP引擎解釋執(zhí)行；在JSP下，代碼被編譯成Servlet并由Java虛擬機執(zhí)行處理代碼。,2.1.1 Fl

45、ash MX的發(fā)展,Flash的前身是Future Splash，是早期網(wǎng)上流行的矢量動畫插件。Macromedia公司收購了Future Splash以后便將其改名為Flash2，一直到現(xiàn)在的Flash MX。用戶可以使用Flash創(chuàng)建導(dǎo)航欄、動態(tài)指標、帶有聲音的動畫，甚至一個完整的、豐富多彩的網(wǎng)站。 Flash動畫是一種專為網(wǎng)絡(luò)而創(chuàng)建的交互式矢量圖形動畫。由于Flash動畫使用的是矢量圖形，所以下載速度快，而且能夠縮放，使瀏覽者能夠全屏幕觀看。 瀏覽Flash制作的網(wǎng)頁，必須在用戶計算機中安裝一個Flash播放器，該播放器可通過安裝Flash軟件而得到，也可從相關(guān)網(wǎng)站上下載。如從“http

46、：/www.M”上下載。,2.1.2 Flash MX的新增功能,1.增強型顏色管理 2. 屬性檢查器 3. 擴展的視頻功能 4. 像素級控制 5. 創(chuàng)作時間共享庫 6. Flash 組件 7. 增強型開發(fā)環(huán)境 8. 增強型時間軸,2.2.1 菜單欄,菜單欄包括 文件、編輯、查看、插入、修改、文本、控制、窗口、幫助等菜單。通過菜單欄可完成動畫制作的全部操作。單擊每個菜單選項，可以看到相應(yīng)的下拉菜單選項，其具體功能將在后面應(yīng)用中講解。,2.2.2 工具欄和繪圖工具箱,1. 工具欄 工具欄是由主要欄、狀態(tài)欄、控制器等三部分組成，可以在菜單欄的 “窗口/工具欄”選項中進行啟動。 （1）主要欄 （2）

47、狀態(tài)欄 用來顯示相關(guān)命令、按鈕、大小寫，以及 Num 鎖定情況，位于工作區(qū)底端。 （3）控制器 用來控制動畫播放的動作，它們分別是停止、倒回最前、倒退、播放、快進、進到最后， 2. 繪圖工具箱 繪圖工具通過“窗口/工具”菜單啟動，默認位置在啟動界面的左側(cè)，可以用來繪畫、選取、噴涂及修改動畫作品中每一幀的內(nèi)容。在Flash MX 中，繪圖工具欄由工具、查看、顏色和選項4個部分組成。 繪圖工具的使用在后面詳細講解。,2.2.3 “時間軸”面板,一個動畫可以看作是靜態(tài)圖片按照一定的時間順序先后播放的結(jié)果，而播放時間和順序的控制是通過時間軸來進行的。由于牽扯到幀與圖層的概念，因此在這里，我們不做詳細解

48、說，在后面我們將會結(jié)合幀與圖層進行綜合的講解，大家只需了解時間軸窗口在哪里就行了。時間軸面板在“窗口/時間軸”菜單中啟動。,2.2.4 “屬性”面板,屬性面板是Flash MX的新增功能，在工作區(qū)中選中不同對象，在屬性面板上將動態(tài)顯示對象的屬性參數(shù)。 。,2.2.5 其他面板,在 Flash MX 中，還有幾類設(shè)置面板，它們往往是進行元件設(shè)置的關(guān)鍵，因此我們必須熟練地掌握它們。這些設(shè)置面板在“窗口”菜單中啟動。 1“信息”面板 2混色器 3“變形”面板 4“對齊”面板 5“場景”面板 6“動作”面板 7庫窗口,2.3.1 創(chuàng)建與保存動畫,雙擊桌面上或開始菜單中的 Flash MX 圖標，程序打

49、開工作界面。運用工具欄上的繪圖工具創(chuàng)建和繪制圖形，制作完成后。單擊“文件”菜單中的“保存”菜單項就可以將你創(chuàng)建的動畫保存。,2.3.2 文檔屬性設(shè)置,文檔屬性包括動畫尺寸等內(nèi)容。動畫的尺寸就是動畫在播放時畫面的大小，在設(shè)置動畫之前，必須根據(jù)需求首先設(shè)置動畫的尺寸，同時還可以設(shè)置動畫的播放速度和背景色等屬性。操作如下：選擇“修改/文檔”菜單，打開文檔屬性對話框。,3.1.1 圖形角色的繪制,圖形繪制主要通過繪圖工具箱來完成，本節(jié)主要講述繪圖工具箱的使用。繪圖工具箱。在圖形繪制過程中，可通過屬性面板調(diào)整繪制工具和繪制圖形的屬性。有些繪圖工具選中后，在工具箱的選項欄中會出現(xiàn)其模式選項。模式選項使繪圖

50、更加靈活、準確。 1. 直線工具 2. 方形工具 3. 鋼筆工具 4. 鉛筆工具 5. 筆刷工具 6文本工具,3.1.2 顏色的填充,1 墨水瓶工具：本工具用來給圖形對象的線條或幾何圖形的筆畫邊框上色。 2顏料桶工具：對圖像進行填色，根據(jù)選項的不同可以采取多種填充方式。 3、滴管工具：本工具用來進行顏色取樣，將一個圖形或線條的顏色復(fù)制到其他圖形或線條上。,3.2.1 選取角色,1箭頭選擇工具：用于選擇對象。對任何對象進行處理時，首先得選中它，然后才能對其進行操作。 2.套索工具：主要用來選擇具有復(fù)雜輪廓的對象，使用方法是先用此工具定下起始點，然后大致沿輪廓畫線，最后與起始點重合形成封閉路徑從而

51、選中此范圍內(nèi)的對象。,3.2.2 復(fù)制和刪除,先選中要復(fù)制或刪除的對象，然后在對象上按右鍵， 選擇復(fù)制或刪除功能菜單。（也可通過編輯菜單進行）,3.2.3 擦除角色工具,本工具用來擦除一些不需要的線條或區(qū)域。 標準擦除：凡橡皮經(jīng)過的地方都被清除；當然，不是當前層的內(nèi)容不能清除。 擦除填色：只擦除填色區(qū)域內(nèi)的信息，非填色區(qū)域，如邊框不能擦除。 擦除線條：專門用來擦除對象的邊框與輪廓。 擦除所選填色：清除選定區(qū)域內(nèi)的填充色。 內(nèi)部擦除：擦除情況跟開始點相關(guān)，如果起始點在 檫除模式某個物體外，如空白區(qū)域，那么這個內(nèi)部則是空白區(qū)域內(nèi)部，這時進行擦除不能抹掉物體信息；如果起始點在物體內(nèi)，那么這個“內(nèi)部”

52、則是物體內(nèi)部，這時可以擦除該物體的相關(guān)信息，而不能作用于外部區(qū)域。,3.2.4 變形工具,1任意變形工具：本工具可實現(xiàn)對動畫角色的大小和旋轉(zhuǎn)變形。 2填充變形工具：本工具可實現(xiàn)對填充內(nèi)容的縮放和旋轉(zhuǎn)變形，象前面講過的位圖填充的變形。,3.3.1 笑臉/哭臉的繪制,1、制作思路：利用箭頭選取工具拉彎線條，組成簡筆畫。 2、制作步驟 （1）建立一個新文件。(以后實例的第一步都是這個操作，就不再一一指明)。 （2）用畫圓工具畫出空心圓，在眼睛和嘴巴部位畫出線段。 （3）選取“黑色箭頭”工具，讓鼠標逐漸靠近線段，當鼠標箭頭末端虛線框變?yōu)閳A弧時，按住左鍵拉彎線段，構(gòu)成簡筆畫。,3.3.2 花朵的制作,1

53、制作思路：利用五個圓形進行疊加，組合出花朵圖案。 2制作步驟： （1）利用畫圓工具畫出一個填充色為黃色無邊框的圓（無邊框顯得邊界柔和）和四個填充色為紫色無邊框的圓（復(fù)制）。 （2）利用“修改/組合”菜單分別把五個圓組合起來，并把他們疊加成圖案。必要時可通過“修改/排列”菜單調(diào)整圓的排列層次，使黃色的圓在其他圓的上面。 （3）利用矩形工具、圓工具和箭頭的拖曳功能作出花托。然后，把花朵和花托組合起來，形成花朵圖案。,3.3.3 放大鏡繪制,1. 制作思路：此物件可由一個圓與一個弧角方形構(gòu)成，弧角方形應(yīng)用褐色的實心填充，圓則應(yīng)用由白到灰的放射狀填充。 2制作步驟： （1）用方形工具繪制一個 30度的

54、圓角方形，并用褐色進行填充。用箭頭工具拖拉弧角方形的兩條長邊，使其稍具弧形。 說明：給方形設(shè)置弧度，只需通過設(shè)置繪圖工具欄選項下的屬性就行了。 Flash 在處理矢量圖形時，可以任意改變圖像的大小與外觀，其處理方法就是用箭頭工具進行拉扯。 （2）繪制一個輪廓為黑色，填充為白色的圓，并將其移動到弧角方形上。 （3）在混色器中將填充方式設(shè)為“放射狀”填充，設(shè)置顏料桶。然后用顏料桶工具進行填充。,3.3.4 水暈的制作,1. 制作思路：利用混色器面板制作透明的奇特效果。 2. 制作步驟： （1）建立Flash文件，背景設(shè)為灰黑色。啟動混色器面板，選擇“放射狀”填充模式。設(shè)置三個顏料桶。兩端桶的顏色為

55、灰色（或淡紫色），中間桶的顏色為白色。選中左端的顏料桶，調(diào)整Alpha 值為0，即將顏色設(shè)為透明。同樣將右端的顏料桶設(shè)為透明色。中間顏色的Alpha 值不變。 （2）利用圓形繪圖工具（不要邊框），繪出正圓，并將其變形。圓圈中間為白色，向兩邊顏色逐漸過度為透明，顯示出背景色。,3.3.5 放射齒輪的繪制,1制作思路： 本物件由三圈齒輪構(gòu)成，只要做好了第一個齒輪，第二個、第三個齒輪只需通過復(fù)制再變小就行了。因此，關(guān)鍵是第一個齒輪的制作。要繪制一個齒輪，只需畫一個齒輪狀輪廓的圓就行了。 2制作步驟 (1) 選定畫圓工具，然后在屬性面板中將輪廓線形改成齒輪狀。為了讓齒輪清楚一些，我們將輪廓高度變得最大

56、，即10 ，顏色繼續(xù)用默認的黑色。 (2) 設(shè)定后在工作區(qū)繪出圓形。 (3) 選中繪制好的齒輪，用“編輯/拷貝”菜單，復(fù)制出兩個齒輪。調(diào)整他們的大小和位置即可制作出效果。,3.3.5 彎月的制作,1制作思路： 本圖形可由兩個圓圓疊合而成。 具體制作過程由讀者練習(xí)完成。,4.1.1 場景,在 Flash 動畫中，場景猶如一個舞臺，所有的演員與所有的情節(jié)，都在這個舞臺上進行。舞臺由大小、音響、燈光等條件組成，場景也有大小、色彩等的設(shè)置；跟多幕劇一樣，場景也可以不止一個，多個場景可以集合在一起并按它們在場景面板上排列的先后順序進行播放。 1改變場景屬性 使用“修改/文檔”菜單或在工作區(qū)按右鍵選“文檔

57、屬性”，彈出文檔屬性窗口，設(shè)置屬性參數(shù)。 2添加一個新場景 有兩種方法，第一種方法是通過場景面板中的“添加”按鈕來完成；第二種方法是調(diào)用菜單上“插入/場景”命令進行添加。通過選擇“窗口/場景”菜單可啟動場景面板,如圖4-1。 在場景面板右下角的3個按鈕功能依次為：復(fù)制場景、添加場景、刪除場景。 3清除某個場景 有兩種辦法：一種是通過場景面板中的“清除”按鈕完成，另一種辦法是調(diào)用菜單上“插入/ 清除場景”來清除。 4為場景改名： 選擇“修改/場景”菜單，然后在彈出的“場景面板”中雙擊該場景，并進行修改。,4.1.2 時間軸,一個演出，光有舞臺還不行，還必須要求演員按時間順序進行表演，應(yīng)用到 Fl

58、ash 動畫制作中，這種時間安排則由時間軸來完成。,4.1.3 幀,前面我們講到了時間軸，隨著時間的推進，動畫會按照時間軸的橫軸方向播放，而時間軸正是對幀進行操作的場所。在時間軸上，每一個小方格就是一個幀，每一幀相當于場景中的一個鏡頭。在默認狀態(tài)下，每隔5 幀進行數(shù)字標示，如時間軸上 1、5、10、15 等數(shù)字標識。 1. 關(guān)鍵幀的定義與操作 （1）定義：關(guān)鍵幀定義了一個過程的起始和終結(jié)，又可以是另外一個過程的開始，當幀內(nèi)容發(fā)生變化時應(yīng)當插入關(guān)鍵幀。關(guān)鍵幀具有延續(xù)功能，只要定義好了開始關(guān)鍵幀并加入了對象，那么在定義結(jié)束關(guān)鍵幀時就不需再添加該對象了，因為起始關(guān)鍵幀中的對象也延續(xù)到結(jié)束關(guān)鍵幀了。 （2）插入關(guān)鍵幀：將鼠標移到時間軸上表示幀的部分，并用左鍵單擊要定義為關(guān)鍵幀的方格，后單擊鼠標右鍵，在彈出菜單中選“插入關(guān)鍵幀”。 （3）復(fù)制關(guān)鍵幀：選中要進行復(fù)制的某個幀或某幾個幀，選擇“編輯/復(fù)制”菜單，然后在拷貝放置的位置選擇“編輯/粘貼”菜單。 （4）清除幀關(guān)鍵幀：選中欲清除的關(guān)鍵幀，擊鼠標右鍵并在彈出菜單中選擇“刪除幀”。 2過渡幀 兩個關(guān)鍵幀之間的部分就是過渡幀，它們是起始關(guān)鍵幀動作向結(jié)束關(guān)鍵幀動作變化的過渡部分。在進行動畫制作過程中，我們不必理會過渡幀的問題，只要定義好關(guān)鍵幀以及相應(yīng)的動作就行了。過渡幀用灰色表示。 3空白關(guān)鍵幀 在