[學(xué)習]動態(tài)網(wǎng)頁設(shè)計與製作實用教程

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)頁元素的

2、添加與編輯鏈接、庫與模板瀏覽器動態(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章 Flash MX基礎(chǔ)知識,2.1 認識 Flash MX 2.2 Flash

3、 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)用,

4、6.1 交互動畫的制作 6.2 動畫的輸出與優(yōu)化 6.3 動畫制作綜合實例,,第7章 Fireworks MX基礎(chǔ)知識,7.1 網(wǎng)頁圖像概述 7.2 認識 Fireworks MX 7.3 矢量圖像的繪制與編輯 7.4 修改對像,,第8章 位圖編輯與動畫制作,8.1 位圖的編輯 8.2 在Fireworks MX中建立動畫實例,,第9章 圖像的優(yōu)化與導(dǎo)出,9.1

5、圖像的優(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)頁元素的添加

6、與編輯,12.1 添加文本和設(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ǔ)

7、 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ù)查詢功能的實現(xiàn) 16.6 數(shù)據(jù)維護功能的實現(xiàn) 16.7 成績管理系統(tǒng)主頁的

8、建立,,第17章 服務(wù)器動態(tài)網(wǎng)頁的制作,17.1 網(wǎng)上新聞發(fā)布 17．2 網(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 手工編碼方

9、式1.1.2 利用可視化工具1.1.3 手工編碼與可視化工具結(jié)合,,1.2 網(wǎng)頁中的常見元素,1.2.1 文本1.2.2 圖象與動畫1.2.3 音頻與視頻 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.

10、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.2 工具欄和繪圖工具箱2.2.3 時間軸面板

11、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 花

12、朵的制作3.3.3 放大鏡繪制 3.3.4 水暈的制作3.3.5 放射齒輪的繪制 3.3.6 彎月的制作,,4.1 動畫制作的有關(guān)概念,4.1.1 場景4.1.2 時間軸4.1.3 幀4.1.4 元件,,4.2 三種基本動畫形式,4.2.1 逐幀動畫的制作4.2.2 位移動畫的制作4.2.3 變形動畫,,5.1 洋蔥皮效果的應(yīng)用,Flash MX 中有種專門的多幀編輯與對齊模式，叫

13、作"洋蔥皮效果"(Onion Skin)，它們位于時間軸下面。把"洋蔥皮"視圖模式打開，點按時間軸下面的圖標，時間軸會變成時間軸上出現(xiàn)了兩個圓圈，它們分別代表洋蔥皮的起始幀與終止幀，凡是在這個范圍內(nèi)的幀都可在同時間進行顯示?，F(xiàn)在我們把右邊的圓圈拉到第30 幀 工作區(qū)中的內(nèi)容也會有所變化，從第1幀到第30幀的內(nèi)容全顯示出來了。洋蔥皮模式的作用主要是用來進行多幀編輯，在進行起始幀與終止幀的

14、元素精確定位時，它常常是必不可少的工具。 元件有個中心點，它是縮放與旋轉(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 音頻文

15、件的導(dǎo)入5.3.3 給動畫加上聲音,,6.1 交互動畫的制作,6.1.1 交互動畫的原理6.1.2 簡單交互動畫的制作6.1.3 交互動畫實例6.1.4 交互性的檢測,,6.2 動畫的輸出與優(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.

16、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 矢

17、量圖像的繪制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

18、. 編輯運動路徑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.3 輸出切片9.2.4 輸出Flash格式9.2.5 使用“導(dǎo)出向?qū)А?,10.1 認識Dreamweaver MX,10.1.1 Dreamweaver MX的新增功能10.1.2

19、 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)頁格式 選擇“文件/新建”菜單或使用“標準工具欄”的新建按鈕，則

20、打開一個對話窗口。選擇“基本頁”中的“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)頁中加注

21、釋（1）選中插入注釋的位置。（2）選擇“插入/文本對象 / 注釋”菜單，在窗口中輸入注釋內(nèi)容。（3）編輯注釋：雙擊頁面中的注釋圖標即可進入編輯界面。5．保存網(wǎng)頁選擇“文件/保存”菜單，給網(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

22、 布局視圖的切換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 保存框架和框架集文件11.3

23、.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 添加圖像1

24、2.2.2 編輯圖像,,12.3 媒體的添加與編輯,12.3.1 添加 Flash 影片12.3.2 添加 Shockwave 影片12.3.3 向頁面添加視頻12.3.4 向頁面添加聲音,,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)

25、建和編輯庫項目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.2.

26、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ù)

27、庫簡介15.3.2 ACCESS 數(shù)據(jù)庫基本操作15.3.3 數(shù)據(jù)源的建立,,15.4 測試服務(wù)器的建立,ASP應(yīng)用程序的腳本代碼必須用腳本引擎來解釋執(zhí)行。因此運行Asp程序前應(yīng)該先安裝包含腳本引擎的服務(wù)器管理程序IIS或PWS，也就是建立一個測試服務(wù)器。任何一臺具有IP地址的計算機（沒有聯(lián)網(wǎng)的計算機管理程序默認一個IP地址127.0.0.1），安裝上服務(wù)器管理程序后就構(gòu)成了一臺服務(wù)器。常見的 Web 服務(wù)器管理軟件包括

28、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及Windows 2000以上中安裝IIS最為常用，在Windows95/98安

29、裝服務(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地址為“192.168.0.51”的測試服務(wù)器，則在瀏覽器地

30、址欄中輸入“192.168.0.51/站點虛擬目錄名/主頁名”即可訪問測試服務(wù)器上的站點。,,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è)計,

31、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 記錄的顯示16.4.2 動態(tài)顯示多條記錄16.4.3 記錄的計數(shù)和統(tǒng)計16.4.4 記錄集導(dǎo)航條的建立,,16.5 數(shù)據(jù)查詢功能的

32、實現(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

33、.2 數(shù)據(jù)表的結(jié)構(gòu) 17.1.3 建立數(shù)據(jù)庫連接 17.1.4 新聞提交功能的實現(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 測試本地站點

34、,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è)計備注功能介紹18.2.5 上傳網(wǎng)頁文件到局域網(wǎng),,18.3 站點的維護與管理,18.3.1 站點文件管理

35、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）超文本標記語言編碼的文本

36、文檔，設(shè)計制作網(wǎng)頁的過程就是生成HTML代碼的過程。在WWW（World Wide Web ）發(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、Dreamwea

37、ver等可視化的網(wǎng)頁編輯工具。利用這些工具人們在可視環(huán)境下編輯制作網(wǎng)頁元素，由編輯工具自動生成對應(yīng)的網(wǎng)頁代碼。如要在網(wǎng)頁上顯示圖1-1中的表格，就可以直接在工作區(qū)中繪制表格而不用考慮編碼的規(guī)則和語法。利用可視化工具編輯網(wǎng)頁操作簡單直觀，調(diào)試方便，是大眾化的網(wǎng)頁編輯方式。但利用可視化工具在制作一些特殊網(wǎng)頁效果上有一定的局限性。,,1.1.3 編碼和可視化工具結(jié)合方式,編碼和可視化工具結(jié)合是一種比較成熟的網(wǎng)頁制作方式。具體過程為：一般的網(wǎng)

38、頁元素通過可視化工具編輯制作，一些特殊的網(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)頁中的信息也以文本為主。與圖

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

40、頁中使用GIF, JPEG(JPG), PNG三種圖象格式，其中使用最 廣泛的是GIF和JPEG兩種格式。 說明：當用戶使用所見即所得的網(wǎng)頁設(shè)計軟件在網(wǎng)頁上添加其他非GIF, JPEG, 或PNG格式的圖片并保存時，這些軟件通常會自動將少于8位顏色的圖片轉(zhuǎn)化為GIF格式，或?qū)⒍嘤?位顏色的圖片轉(zhuǎn)化為JPEG. 在網(wǎng)頁中為了更有效地吸引瀏覽者的注意，許多網(wǎng)站的廣告都做成了動畫形式。圖1-2中的“無限情緣”，

41、就是一個動畫廣告。,,1.2.3 聲音和視頻,聲音是多媒體網(wǎng)頁的一個重要組成部分。當前存在著一些不同類型的聲音文件和格式，也有不同的方法將這些聲音添加到Web頁中。在決定添加聲音之前，需要考慮的因素包括其用途，格式，文件大小，聲音品質(zhì)和瀏覽器差別等。不同瀏覽器對于聲音文件的處理方法是非常不同的，彼此之間很可能不兼容。 用于網(wǎng)絡(luò)的聲音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。設(shè)計者在使用這些格式的文件

42、時，需要加以區(qū)別。很多瀏覽器不要插件也可以支持MIDI,WAV和AIF格式的文件，而MP3和RM格式的聲音文件則需要專門的瀏覽器播放。 一般來說，不要使用聲音文件作為背景音樂，那樣會影響網(wǎng)頁下載的速度。可以在網(wǎng)頁中添加一個打開聲音文件的鏈接，讓音樂播放變得可以控制。 視頻文件的格式也非常多，常見的有Realplay, MPEG, AVI和DivX等。視頻文件的采用讓網(wǎng)頁變得精彩而有動感。,,1.2.4 超級鏈

43、接,超級鏈接技術(shù)可以說是萬維網(wǎng)流行起來的最主要的原因。它是從一個網(wǎng)頁指向另一個目的端的鏈接，例如指向另一個網(wǎng)頁或者相同網(wǎng)頁上的不同位置。這個目的端通常是另一個網(wǎng)頁，但也可以是一幅圖片，一個電子郵件地址，一個文件，一個程序或者是本網(wǎng)頁中的其他位置。其熱點通常是文本，圖片或圖片中的區(qū)域，也可以是一些不可見的程序腳本。 當瀏覽者單擊超級鏈接熱點時，其目的端將顯示在Web瀏覽器上，并根據(jù)目的端的類型以不同方式打開。例如，當指向一個

44、AVI文件的超級鏈接被單擊后，該文件將在媒體播放軟件中打開；如果單擊的是指向一個網(wǎng)頁的超級鏈接，則該網(wǎng)頁將顯示在Web瀏覽器上。加下劃線的文字，就是已經(jīng)建立了超鏈接的文本。,,1.2.5 表格,在網(wǎng)頁中表格用來控制網(wǎng)頁中信息的布局方式。這包括兩方面：一是使用行和列的形式來布局文本和圖像以及其他的列表化數(shù)據(jù)；二是可以使用表格來精確控制各種網(wǎng)頁元素在網(wǎng)頁中出現(xiàn)的位置。圖1-2中“特色欄目”，就運用了表格進行布局定位。,,1.2.6

45、表單,使用超級鏈接，瀏覽者和Web站點便建立起了一種簡單的交互關(guān)系。網(wǎng)頁中的表單通常用來接受用戶在瀏覽器端的輸入，然后將這些信息發(fā)送到用戶設(shè)置的目標端。這個目標可以是文本文件，Web頁，電子郵件，也可以是服務(wù)器端的應(yīng)用程序。表單一般用來收集聯(lián)系信息、接受用戶要求、獲得反饋意見、設(shè)置來賓簽名簿、讓瀏覽者注冊為會員并以會員的身份登陸站點等。 表單由不同功能的表單域組成，最簡單的表單也要包含一個輸入?yún)^(qū)域和一個提交按鈕。站點瀏覽者填

46、寫表單的方式通常是輸入文本，選中單選按鈕或復(fù)選框，以及從下拉列表框中選擇選項等。 根據(jù)表單功能與處理方式的不同，通?？梢詫⒈韱畏譃橛脩舴答伇韱?，留言簿表單，搜索表單和用戶注冊表單等類型。 中右上角的“手機參與”就是一個手機號的提交表單。,,1.2.7 導(dǎo)航欄,導(dǎo)航欄是用戶在規(guī)劃好站點結(jié)構(gòu)，開始設(shè)計主頁時必須考慮的一項內(nèi)容。導(dǎo)航欄的作用就是引導(dǎo)瀏覽者游歷站點。事實上，導(dǎo)航欄就是一組超級鏈接，這組超級鏈接的目標就是本站點的

47、主頁以及其他重要網(wǎng)頁。在設(shè)計站點中的諸網(wǎng)頁時，可以在站點的每個網(wǎng)頁上顯示一個導(dǎo)航欄，這樣，瀏覽者就可以既快又容易的轉(zhuǎn)向站點的其他網(wǎng)頁。 一般情況下，導(dǎo)航欄應(yīng)放在網(wǎng)頁中較引人注目的位置，通常是在網(wǎng)頁的頂部或一側(cè)。導(dǎo)航欄既可以是文本鏈接，也可以是一些圖形按鈕。圖1-2中的導(dǎo)航欄就是一組文本鏈接。,,1.2.8 其他常見元素,網(wǎng)頁中除了以上幾種最基本的元素之外，還有一些其它的常用元素，包括懸停按鈕，Java特效，Active

48、X等各種特效。它們不僅能點綴網(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)頁圖像后將其輸出就會立即在Dreamweaver中更新

49、。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是一個功

50、能強大，有趣且好用的基于對象的圖像編輯軟件。在這個軟件中，所有要編輯的圖像都會向以獨立的對象形式存在，用戶可以一直對獨立的對象進行編輯，直到滿意后再將它合并到圖像上。,,1.3.2 動畫制作工具,1. Flash MX Flash MX也是Macromedia公司的產(chǎn)品，是目前最流行的矢量動畫制作軟件。與其它的動和軟件相比，它具有一些優(yōu)點： 制作的是矢量圖像。只有用少量矢量數(shù)據(jù)就可以描述一個復(fù)雜

51、的對象，而占有的存儲空間只是位圖的幾千分之一，非常適合在網(wǎng)絡(luò)上使用。同時，矢量圖像不會隨瀏覽器窗口大小的改變而改變畫面質(zhì)量。 使用插件方式工作。 提供了一些增強功能。例如，支持位圖，聲音，漸變色和Alpha透明等。擁有了這些功能，用戶就完全可以建立一個全部由Flash制作的站點。 Flash影片也是一種流式文件。這就是說，瀏覽者在觀看一個大動畫時，可以不必等到影片全部下做到本

52、地在觀看，而是可以隨時觀看，即使后面的內(nèi)容還沒有完全下載，也可以開始欣賞動畫。2. Director Director是Macromedia公司推出的多媒體開發(fā)工具，它為廣大多媒體制作人員提供了建立交互式應(yīng)用的強大功能。用戶可以在友好的界面下通過使用Director制作出令人滿意的多媒體作品。Director是一個簡單且直觀的軟件，即使是首次使用該軟件的用戶也能編出優(yōu)秀的程序。而且，Director又是一個高度面

53、向?qū)ο蟮墓ぞ?，非常適合圖像設(shè)計者使用。,,1.3.3 網(wǎng)頁編輯工具,1. FrontPage 2000 FrontPage 2000是Microsoft Office 2000家族中的一員，F(xiàn)rontPage 2000的界面，功能與Word 2000 都非常相似。FrontPage2000提供了相當數(shù)量的模版和向?qū)?，使初學(xué)者能夠非常容易的設(shè)計出美觀實用的網(wǎng)頁。FrontPage 2000最強大之處，是其站點管理

54、與遠程發(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)rontPage一樣，Dreamweaver也是“所見即所得”的網(wǎng)頁

55、編輯軟件。它能夠很好的支持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è)計者可以在不改變原有編輯習慣的同時，充分享受到“所見即所得”帶來的方便。Drea

56、mweaver 3. HotDog HotDog是較早基于代碼的網(wǎng)頁設(shè)計工具，其最具特色的地方是提供了許多向?qū)Чぞ?，能幫助設(shè)計者制作頁面中的復(fù)雜部分。HotDog的高級HTML支持插入marquee（動態(tài)文本標記），并能在預(yù)覽模式中以正常速度觀看。這點非常難得，因為即使首創(chuàng)這種標簽的Microsoft在FrontPage 98中也未提供這樣的功能。HotDog對plug－in的支持也遠遠超過其他產(chǎn)品，它提供的對話框

57、允許你以手動方式為不同格式的文件選擇不同的選項。但對中文的處理不很方便。HotDog是個功能強大的軟件，對于那些希望在網(wǎng)頁中加入CSS、Java、RealVideo等復(fù)雜技術(shù)的高級設(shè)計者，是個很好的選擇。,,1.4.1 HTML基本概念,1. HTML的概念 HTML是一種描述語言，對WEB頁面中顯示內(nèi)容的屬性以標簽的形式進行描述?？蛻魴C上的瀏覽器（browser）對這些描述進行解釋將相應(yīng)頁面內(nèi)容正確顯示在顯示器上。

58、一個WEB頁面就是一個HTML文檔 。2. HTML文檔的構(gòu)成 HTML文檔由三大元素構(gòu)成：HTML元素、HEAD元素和BODY元素。每個元素又包含各自相應(yīng)的標記（屬性）。HTML元素是最外層的元素，里面包含HEAD元素和BODY元素。 HEAD元素中包含對文檔基本信息（文檔標題，文檔搜索關(guān)鍵字、文檔生成器等）描述的標記。BODY元素是文檔的主體部分，包含有對網(wǎng)頁元素（文本、表格、圖片、動畫、鏈接等）描述的標記。H

59、TML中標記一般成對，如： 等，但也有一些不成對。 HTML文檔的結(jié)構(gòu)形式如下： 頁面信息的描述 頁面元素的描述 3. HTML 文檔的編輯 HTML 文檔是普通文本 ( ASCII) 文件, 它可以用任意編緝器(如windows中的記事本、寫字板, Macintosh 中的BBEdit等)生成。 你也可以使用字處理軟件, 不過要記住存文件時要存成“帶回車的

60、純文本”。早期網(wǎng)頁制作的過程就是直接書寫HTML代碼來定義頁面元素的過程。,,1.4.2 HTML的基本語法結(jié)構(gòu),1. HTML元素的標記 HTML標記 HTML標記是對整個文檔屬性的描述，即告訴瀏覽器HTML文檔的開始與結(jié)束 。2. HEAD元素 （1） HEAD標記 該標記用來表示HEAD元素的開始和結(jié)束。 （2）BASE標記 (不成對標記)。 （3）META標記（不成

61、對標記） （4）TITLE 標記 （5）SCRIPT 標記 記用來表示HEAD元素的開始和結(jié)束，其格式為： 。3．BODY元素(可見對象的描述) （1）BODY標記 該標記是BODY元素開始和結(jié)束的標志。 （2）DIV層標記 （3）文本標記 （4）段落標記 （5）表格標記 （6）圖象標記 （7）下拉表單標記 （8）鏈接 （Linking）標記

62、 （9）多媒體標記 （10）移動文字標記,,1.5.1 asp技術(shù),ASP （Microsoft Active Server Pages）是一套微軟開發(fā)的服務(wù)器端腳本環(huán)境， ASP 內(nèi)含于 IIS 3.0 和 4.0 之中 , 通過 ASP 我們可以結(jié)合 HTML 網(wǎng)頁、 ASP 指令和 ActiveX 元件建立動態(tài)、交互且高效的 WEB 服務(wù)器應(yīng)用程序。有了 ASP 你就不必擔心客戶的瀏覽器是否能運行你所編寫的代碼，

63、因為所有的程序都將在服務(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 技術(shù),PHP（Hypertext Preprocesso超文本預(yù)

64、處理器）是一種易于學(xué)習和使用的服務(wù)器端腳本語言。只需要很少的編程知識你就能使用PHP建立一個真正交互的WEB站點。PHP自從誕生以來，以其簡單的語法、強大的功能訊速得到了廣泛的應(yīng)用。PHP除了能夠操作頁面，還能發(fā)送HTTP的標題；它不需要特殊的開發(fā)環(huán)境和IDE；它不僅支持多種數(shù)據(jù)庫，還支持多種通信協(xié)議；另外，PHP還具有極強的兼容性。PHP是完全免費的，不用花錢，可以從PHP官方站點(http://www.php.net)自由下載。

65、 PHP在大多數(shù)Unix平臺，GUN/Linux和微軟Windows平臺上均可以運行。,,1.5.3 JSP技術(shù),JSP與Microsoft的ASP技術(shù)非常相似。兩者都提供在HTML代碼中混合某種程序代碼、由語言引擎解釋執(zhí)行程序代碼的功能。與 ASP 一樣， JSP 中的 Java 代碼均在服務(wù)器端執(zhí)行。因此，在瀏覽器中使用"查看源文件"菜單是無法看到 JSP 源代碼的，只能看到結(jié)果 HTML 代碼。

66、 JSP與ASP雖然有很多相識之處，但兩者也有重要區(qū)別：第一，ASP的編程語言是VBScript之類的腳本語言，JSP使用的是Java；第二，兩種語言引擎用完全不同的方式處理頁面中嵌入的程序代碼。在ASP下，VBScript代碼被ASP引擎解釋執(zhí)行；在JSP下，代碼被編譯成Servlet并由Java虛擬機執(zhí)行處理代碼。,,2.1.1 Flash MX的發(fā)展,Flash的前身是Future Splash，是早期網(wǎng)上流行的

67、矢量動畫插件。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)頁，必須在

68、用戶計算機中安裝一個Flash播放器，該播放器可通過安裝Flash軟件而得到，也可從相關(guān)網(wǎng)站上下載。如從“http：//www.Macromedia.com”上下載。,,2.1.2 Flash MX的新增功能,1.增強型顏色管理2. 屬性檢查器3. 擴展的視頻功能4. 像素級控制5. 創(chuàng)作時間共享庫6. Flash 組件 7. 增強型開發(fā)環(huán)境8. 增強型時間軸,,2.2.1 菜單欄,菜單欄包括 文件、編輯、查看、插入、修改