[學習]動態(tài)網頁設計與製作實用教程

1、《動態(tài)網頁設計與制作實用教程》 電子教案,,制 作：程偉淵 任俊杰,目 錄,網頁設計概述Flash MX基礎知識動畫角色的繪制與編輯動畫的基本形式洋蔥皮、圖層及聲音的應用動畫技術的綜合應用Fireworks MX基礎知識位圖編輯與動畫制作圖像的優(yōu)化與導出,Dreamweaver MX基礎知識設計頁面布局網頁元素的

2、添加與編輯鏈接、庫與模板瀏覽器動態(tài)網頁的制作服務器動態(tài)網頁知識基礎服務器動態(tài)網頁的制作動態(tài)網頁設計實例站點管理,,1.1 網頁設計的基本方式 1.2 網頁中的常見元素 1.3 網頁元素的創(chuàng)作與編輯工具 1.4 HTML基礎知識 1.5 動態(tài)網頁的支持技術,,第1章 網頁設計概述,第2章 Flash MX基礎知識,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 動畫制作的有關概念 4.2 三種基本動畫形式,,第5章 洋蔥皮、圖層及聲音的應用,5.1 洋蔥皮效果的應用 5.2 圖層的應用 5.3 聲音效果的應用,,第6章 動畫技術的綜合應用,

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

5、圖像的優(yōu)化 9.2 圖像的導出,,第10章　Dreamweaver MX基礎知識,10.1 認識Dreamweaver MX 10.2 本地站點的建立 10.3 網頁的建立與保存,,第11章 設計頁面布局,11.1 使用表格對頁面進行布局 11.2 在布局視圖中對頁面進行布局 11.3 使用框架對頁面進行布局 11.4 使用層對頁面進行布局,,第12章 網頁元素的添加

6、與編輯,12.1 添加文本和設置文本格式 12.2 圖像的添加與編輯 12.3 媒體的添加與編輯 12.4 表單的添加與編輯,,第13章 鏈接、庫與模板,13.1 鏈接 13.2 庫項目 13.3 模板,,第14章 瀏覽器動態(tài)網頁的制作,14.1 行為與行為面板 14.2 應用行為制作動態(tài)網頁,,第15章 服務器動態(tài)網頁知識基礎,15.1 ASP 技術基礎

7、 15.2 腳本語言簡介 15.3 數據庫基礎知識 15.4 測試服務器的建立 15.5 ASP 應用程序舉例,,第16章 服務器動態(tài)網頁的制作,16.1 動態(tài)站點的建立 16.2 后臺數據庫的設計 16.3數據提交功能的實現 16.4 數據顯示功能的實現 16.5 數據查詢功能的實現 16.6 數據維護功能的實現 16.7 成績管理系統(tǒng)主頁的

8、建立,,第17章 服務器動態(tài)網頁的制作,17.1 網上新聞發(fā)布 17．2 網上投票系統(tǒng)的設計,,第18章 站點管理,18.1 測試本地站點 18.2 站點文件的上傳 18.3 站點的維護與管理 18.4 宣傳自己的網站,,附錄：經典網頁賞析,經典網頁賞析1經典網頁賞析2經典網頁賞析3經典網頁賞析4經典網頁賞析5經典網頁賞析6,,1.1 網頁設計的基本方式,1.1.1 手工編碼方

9、式1.1.2 利用可視化工具1.1.3 手工編碼與可視化工具結合,,1.2 網頁中的常見元素,1.2.1 文本1.2.2 圖象與動畫1.2.3 音頻與視頻 1.2.4 超級鏈接1.2.5 表格1.2.6 表單1.2.7 導航欄1.2.8 其他元素,,1.3 網頁元素的創(chuàng)作與編輯工具,1.3.1 網頁圖像制作工具1.3.2 動畫制作工具1.3.3 網頁編輯工具,,1.4 HTML基礎知識,1.4.

10、1 HTML的基本概念1.4.2 HTML的基本語法結構,,1.5 動態(tài)網頁的支持技術,1.5.1 ASP 技術1.5.2 PHP 技術1.5.3 JSP 技術,,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 文檔屬性設置,,3.1 圖形角色的繪制與填充,3.1.1 圖形角色的繪制3.1.2 顏色的填充,,3.2 編輯圖形角色,3.2.1 選取角色3.2.2 復制和刪除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 動畫制作的有關概念,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 洋蔥皮效果的應用,Flash MX 中有種專門的多幀編輯與對齊模式，叫

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

14、元素精確定位時，它常常是必不可少的工具。 元件有個中心點，它是縮放與旋轉操作的參照點，因此在進行多幀編輯時有必要先改變元件的中心點再進行編輯。改變元件中心點的操作是在元件的編輯窗口中進行的。,,5.2 圖層的應用,5.2.1 圖層的狀態(tài)5.2.2 圖層的基本操作5.2.3 圖層的屬性5.2.4 引導層5.2.5 遮罩層,,5.3 聲音效果的應用,5.3.1 影響聲音質量的因素5.3.2 音頻文

15、件的導入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 網頁圖像概述,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 動畫的設定8.2.3 動畫預覽8.2.4 動畫的編輯8.2.5

18、. 編輯運動路徑8.2.6 輸出gif動畫,,9.1 圖像的優(yōu)化,9.1.1 優(yōu)化圖像應考慮的因素9.1.2 圖像優(yōu)化的途徑,,9.2 圖像的導出,9.2.1 常規(guī)輸出9.2.2 輸出一個圖像的區(qū)域9.2.3 輸出切片9.2.4 輸出Flash格式9.2.5 使用“導出向導”,,10.1 認識Dreamweaver MX,10.1.1 Dreamweaver MX的新增功能10.1.2

19、 Dreamweaver Mx的工作區(qū)10.1.3 常規(guī)參數的設置10.1.4 在多用戶系統(tǒng)中自定義 Dreamweaver MX,,10.2 本地站點的建立,10.2.1 關于站點規(guī)劃和設計10.2.2 本地站點的建立與編輯,,10.3 網頁的建立與保存,在完成了本地站點的定義之后，現在開始建立我們的第一個網頁，操作步驟如下：1.選擇網頁格式 選擇“文件/新建”菜單或使用“標準工具欄”的新建按鈕，則

20、打開一個對話窗口。選擇“基本頁”中的“HTML”模式。點擊右下角的“創(chuàng)建”按鈕，打開一個新的文件窗口。2. 設置網頁屬性 在編輯新網頁前應該先設置頁面屬性，也就是對頁面進行整體規(guī)劃。頁面屬性的設置操作為：選擇“修改 / 頁面屬性”或在工作區(qū)按鼠標右鍵選擇彈出菜單中的“頁面屬性”選項激活屬性設置面板。 設置完畢點擊右上角的“確定”按鈕。3.編輯網頁元素 在網頁上添加文本、圖片、表格等網頁元素。4.在網頁中加注

21、釋（1）選中插入注釋的位置。（2）選擇“插入/文本對象 / 注釋”菜單，在窗口中輸入注釋內容。（3）編輯注釋：雙擊頁面中的注釋圖標即可進入編輯界面。5．保存網頁選擇“文件/保存”菜單，給網頁命名并存入相應文件夾。,,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 向布局單元格中添加內容11.2.5 布局單元格的調整11.2.6 設置布局單元格的格式11.2.7 設置布局視圖參數,,11.3 使用框架對頁面進行布局,11.3.1 框架（集）概述11.3.2 創(chuàng)建框架和框架集11.3.3 選擇框架和框架集11.3.4 在框架中打開文檔11.3.5 保存框架和框架集文件11.3

23、.6 設置框架（集）屬性,,11.4使用層對頁面進行布局,11.4.1 層的創(chuàng)建11.4.2 層的基本操作11.4.3 向層添加內容11.4.4 修改現有層的屬性11.4.5 層和表的轉換,,12.1 添加文本和設置文本格式,12.1.1 文本元素的添加和編輯12.1.2 HTML 樣式的應用12.1.3 層疊樣式（CSS）的應用,,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 鏈接的應用,,13.2 庫項目,13.2.1 認識“庫“項目13.2.2 創(chuàng)

25、建和編輯庫項目13.2.3. 使用庫項目,,13.3 模板,13.3.1 創(chuàng)建編輯模板13.3.2 應用模板13.3.3 更新模板,,14.1 行為與行為面板,14.1.1 行為的工作原理14.1.2 行為面板的應用,,14.2 應用行為制作動態(tài)網頁,14.2.1 與層有關的行為14.2.2 打開瀏覽器窗口14.2.3 播放聲音14.2.4 彈出消息14.2.5 設置文本14.2.

26、6 顯示彈出式菜單14.2.7 檢查表單14.2.8 制作時間線動畫14.2.9 檢查瀏覽器14.2.10 檢查插件,,15.1 ASP 技術基礎,15.1.1 ASP的概念與工作流程15.1.2 ASP應用程序15.1.3 ASP的內建對象,,15.2 腳本語言簡介,15.2.1 VBscript基礎知識15.2.2 VBScript控制結構,,15.3 數據庫基礎知識,15.3.1 數據

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

28、IIS（Microsoft Internet Information Server）、PWS（Microsoft Personal Web Server）、Apache HTTP Server、Netscape Enterprise Server 和 iPlanet Web Server等。安裝哪一種Web服務軟件根據所用操作系統(tǒng)而定，在Windows NT及Windows 2000以上中安裝IIS最為常用，在Windows95/98安

29、裝服務器軟件一般只能使用PWS。這里主要講述服務器管理軟的安裝與服務器站點的發(fā)布過程。說明：與真正的INTERNET服務器相比，測試服務器不需要申請外部IP地址，不需要域名解析，主要用來測試本地機上的ASP應用程序。測試服務器可以是局域網上的計算機，也可以是未連網的單機。如果是局域網內的計算機設成了服務器，則它上面的站點可通過內部IP地址進行訪問。如：在局域網上建立了內部IP地址為“192.168.0.51”的測試服務器，則在瀏覽器地

30、址欄中輸入“192.168.0.51/站點虛擬目錄名/主頁名”即可訪問測試服務器上的站點。,,15.5 ASP 應用程序舉例,15.5.1 數據提交入庫的程序設計15.5.2 查詢功能的實現15.5.2 ASP程序的調試與糾錯,,16.1 動態(tài)站點的建立,16.1.1 工作流程和程序結構16.1.2 建立、發(fā)布站點16.1.3 在Dreamweaver MX中定義本地站點,,16.2 后臺數據庫的設計,

31、16.2.1 設計庫結構，創(chuàng)建數據源16.2.2 在Dreamweaver MX中建立數據庫 連接,,16.3數據提交功能的實現,16.3.1 表單網頁的建立16.3.2 記錄集的建立16.3.3 記錄集與表單的綁定,,16.4 數據顯示功能的實現,16.4.1 記錄的顯示16.4.2 動態(tài)顯示多條記錄16.4.3 記錄的計數和統(tǒng)計16.4.4 記錄集導航條的建立,,16.5 數據查詢功能的

32、實現,16.5.1 創(chuàng)建查詢頁面16.5.2 構建結果頁面16.5.3 建立查詢顯示詳細面頁,,16.6 數據維護功能的實現,16.6.1 創(chuàng)建登錄頁面16.6.2 數據維護,,16.7 成績管理系統(tǒng)主頁的建立,,通過上面的操作，我們已經實現了成績管理的數據錄入、查詢顯示、數據護等功能。為了便于用戶操作使用，下面建立管理主頁，將各功能集成起來。,,17.1 網上新聞發(fā)布,,17.1.1 工作流程圖 17.1

33、.2 數據表的結構 17.1.3 建立數據庫連接 17.1.4 新聞提交功能的實現 17.1.5 創(chuàng)建顯示頁面 17.1.6 在網頁上實現對數據庫的維護,,17.2 網上投票系統(tǒng)的設計,,17.2.1 工作流程圖 17.2.2 站點結構圖 17.2.3 后臺數據庫設計 17.2.4 建立數據庫連接 17.2.5 投票頁面的設計 17.2.6 投票結果的柱狀顯示,,18.1 測試本地站點

34、,18.1.1 測試站點網頁與目標瀏覽器的兼容性18.1.2 預覽自己的網頁18.1.3 檢驗文件的大小及下在載時間,,18.2 站點文件的上傳,18.2.1 文件傳輸的基礎知識18.2.2 在Dreamweaver MX中傳輸站點18.2.3 存回/取出功能簡介18.2.4 設計備注功能介紹18.2.5 上傳網頁文件到局域網,,18.3 站點的維護與管理,18.3.1 站點文件管理

35、18.3.2 遠程與本地站點同步18.3.3 檢查與修正超級鏈接,,18.4 宣傳自己的網站,18.4.1 注冊好記的域名18.4.2 在各大搜索引擎上登陸注冊站點18.4.3 在電子郵件簽名中添加站點地址18.4.4 到BBS上公布站點信息18.4.5 與相關站點彼此鏈接,,1.1.1 手工編碼方式,網頁是由HTML（HYPER TEXT MARKUP LANGUAGE）超文本標記語言編碼的文本

36、文檔，設計制作網頁的過程就是生成HTML代碼的過程。在WWW（World Wide Web ）發(fā)展的初期人們制作網頁是通過直接編寫HTML代碼來實現的。 手工編碼制作網頁對網頁設計人員的要求較高，編碼效率低，調試過程復雜，因此，對大多數網頁設計人員來說采用這個方式比較困難。但手工編碼可以靈活地制作出豐富的網頁效果。,,1.1.2 可視化工具方式,隨著網頁制作技術的不斷發(fā)展，出現了諸如FrontPage、Dreamwea

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

38、頁元素通過可視化工具編輯制作，一些特殊的網頁效果通過插入代碼生成。這種方式效率高、調試方便而且可以實現豐富的網頁效果，但要求設計人員既要熟悉Html語言又能運用可視化工具。除了上面三種基本的網頁設計制作方式外，我們還可以通過修改已有的網頁代碼生成自己的網頁。在網頁編輯制作過程中具體采用何種方式要根據個人的具體情況而定，每必要拘泥于某種固定的模式。,,1.2.1文本,文本一直是人類最重要的信息載體與交流工具，網頁中的信息也以文本為主。與圖

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

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

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

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

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

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

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

46、寫表單的方式通常是輸入文本，選中單選按鈕或復選框，以及從下拉列表框中選擇選項等。 根據表單功能與處理方式的不同，通常可以將表單分為用戶反饋表單，留言簿表單，搜索表單和用戶注冊表單等類型。 中右上角的“手機參與”就是一個手機號的提交表單。,,1.2.7 導航欄,導航欄是用戶在規(guī)劃好站點結構，開始設計主頁時必須考慮的一項內容。導航欄的作用就是引導瀏覽者游歷站點。事實上，導航欄就是一組超級鏈接，這組超級鏈接的目標就是本站點的

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

48、X等各種特效。它們不僅能點綴網頁，使網頁更活潑有趣，而且在網上娛樂，電子商務等方面也有著不可忽視的作用。,,1.3.1 網頁圖像制作工具,1. Fireworks MX Firework MX是Macromedia公司的產品，是目前最流行的網頁圖像制作軟件。只有將Dreamweaver的默認圖像編輯器設為Fireworks ，那么在Fireworks 中制作完成網頁圖像后將其輸出就會立即在Dreamweaver中更新

49、。Fireworks還可以安裝使用所有的Photoshop濾鏡，并且可以直接導入PSD格式圖像。更方便的是它不僅結合了Photoshop位圖功能以及CorelDRAW矢量圖的功能，而且提供了大量的網頁圖像模板供用戶使用。。其最方便之處是，它可以將圖像切割，圖像映射，懸停按鈕，圖像翻轉等效果直接生成HTML代碼，或者嵌入到現有的網頁中，或者作為單獨的網頁出現。2. Photo Impact Photo Impact是一個功

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

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

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

53、向對象的工具，非常適合圖像設計者使用。,,1.3.3 網頁編輯工具,1. FrontPage 2000 FrontPage 2000是Microsoft Office 2000家族中的一員，FrontPage 2000的界面，功能與Word 2000 都非常相似。FrontPage2000提供了相當數量的模版和向導，使初學者能夠非常容易的設計出美觀實用的網頁。FrontPage 2000最強大之處，是其站點管理

54、與遠程發(fā)布功能。用戶只需在本地對網頁進行編輯，FrontPage 2000便會跟蹤用戶編輯過的文件，在發(fā)布時，自動將修改過的網頁進行發(fā)布，未編輯過的網頁可由用戶決定是否再次向服務器發(fā)送。2. Dreamweaver MX Dreamweaver MX和Fireworks MX、Flash MX一起，被人們喻為“網頁制作三劍客”。同FrontPage一樣，Dreamweaver也是“所見即所得”的網頁

55、編輯軟件。它能夠很好的支持ActiveX, JavaScript, Java, Flash和Shockwave等，而且還能通過鼠標拖動的方式從頭到尾制作動態(tài)的HTML效果。Dreamweaver還采用了Roundtrip HTML技術，使用這些技術，網頁可以在Dreamweaver和HTML代碼編輯器之間進行自由轉化，而HTML語法及結構不變。這樣，專業(yè)設計者可以在不改變原有編輯習慣的同時，充分享受到“所見即所得”帶來的方便。Drea

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

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

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

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

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

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

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

63、因為所有的程序都將在服務器端執(zhí)行，包括所有嵌在普通 HTML 中的腳本程序。當程序執(zhí)行完畢后，服務器僅將執(zhí)行的結果返回給客戶瀏覽器，這樣也就減輕了客戶端瀏覽器的負擔，大大提高了交互的速度。 ASP應用程序可以手工編碼制作，也可以通過Dreamweaver MX等可視化工具創(chuàng)作生成。 ASP的具體內容將在后面的動態(tài)網頁設計中講解。,,1.5.2 PHP 技術,PHP（Hypertext Preprocesso超文本預

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

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

67、矢量動畫插件。Macromedia公司收購了Future Splash以后便將其改名為Flash2，一直到現在的Flash MX。用戶可以使用Flash創(chuàng)建導航欄、動態(tài)指標、帶有聲音的動畫，甚至一個完整的、豐富多彩的網站。 Flash動畫是一種專為網絡而創(chuàng)建的交互式矢量圖形動畫。由于Flash動畫使用的是矢量圖形，所以下載速度快，而且能夠縮放，使瀏覽者能夠全屏幕觀看。 瀏覽Flash制作的網頁，必須在

68、用戶計算機中安裝一個Flash播放器，該播放器可通過安裝Flash軟件而得到，也可從相關網站上下載。如從“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 菜單欄,菜單欄包括 文件、編輯、查看、插入、修改