1、附錄A 網(wǎng)頁設(shè)計工具 Adobe Dreamweaver CS3,2,Dreamweaver原來是多媒體方面頗有建樹的Macromedia公司推出的可視化網(wǎng)頁制作工具，是網(wǎng)頁“三劍客”之一，由于Adobe公司與Macromedia公司已合并，其最新版本為Adobe Dreamweaver CS3。 Adobe Creative Suite 3.0 Web Standard：Adobe公司2007年3月新發(fā)布，是為 Web 設(shè)計人員和開發(fā)人員打造的基本工具包，包括： Adobe Dreamweaver CS3 Adobe Flash CS3 Adobe Firework CS3 Adobe Co

2、ntribute CS3,1.Adobe Dreamweaver CS3 介紹,3,下載免費試用版： 點擊setup.exe安裝即可 啟動Adobe Dreamweaver CS3,2.Adobe Dreamweaver CS3 安裝,4,A.“插入”欄 B.文檔工具欄 C.“文檔”窗口 D.面板組 E.標(biāo)簽選擇器 F.“屬性”檢查器 G.“文件”面板,3.Adobe Dreamweaver CS3 界面,5,規(guī)劃和設(shè)置站點 組織和管理站點文件 設(shè)計網(wǎng)頁布局 向頁面添加內(nèi)容 通過手動編碼創(chuàng)建頁面 針對動態(tài)內(nèi)容設(shè)置 Web 應(yīng)用程序 創(chuàng)建動態(tài)頁 測試和發(fā)布,4.Adobe Dreamweaver

3、 CS3工作流程概述,5.Dreamweaver CS3基礎(chǔ)應(yīng)用,創(chuàng)建 Dreamweaver CS3站點 創(chuàng)建和管理網(wǎng)頁文件 使用HTML“表格” 布局網(wǎng)頁 使用HTML“框架”布局網(wǎng)頁 使用CSS布局網(wǎng)頁 使用AP元素布局網(wǎng)頁 使用Spry構(gòu)件的網(wǎng)頁,6.創(chuàng)建 Dreamweaver CS3站點：,建立本地站點根文件夾 創(chuàng)建每一個網(wǎng)站的文件夾(由多個網(wǎng)站) 定義本地站點： 打開站點窗口：窗口-站點 站點窗口選擇站點-新建站點或菜單站點-新建站點,8,7.創(chuàng)建Dreamweaver CS3站點-管理站點窗口：,9,8.創(chuàng)建 Dreamweaver CS3站點-本地信息：,10,9.創(chuàng)建Dre

4、amweaver CS3站點-遠(yuǎn)程信息：,11,10.創(chuàng)建Dreamweaver CS3站點-測試服務(wù)器：,12,11.創(chuàng)建一個簡單的網(wǎng)頁：,主頁名稱：Index.html、Index.htm、default.htm、Index.jsp、Index.asp、Index.php。注意：大小寫敏感。 新建文件：在右側(cè)的站點窗格中，選擇“文件-新建文件”，窗格中新增untitled.htm，更改其名稱，例如Index.html?；蛘哌x擇“文件菜單-新建”或單擊工具欄“新建”命令按鈕，彈出“新建”文件對話框，如圖示：,13,12.創(chuàng)建文檔窗口：,14,13.創(chuàng)建一個最簡單：,15,14.預(yù)覽網(wǎng)頁：選擇

5、瀏覽器進行網(wǎng)頁預(yù)覽,16,15.使用HTML“表格”對頁面進行布局：,表格是用于在 HTML 頁上顯示表格式數(shù)據(jù)以及對文本和圖形進行布局的強有力的工具。 Dreamweaver 提供了“布局”模式和“標(biāo)準(zhǔn)”模式。在“布局”模式中，可以在添加內(nèi)容前使用布局單元格和表格來對頁面進行布局。要調(diào)整頁布局，可以通過對布局單元格和嵌套布局表格進行移動并調(diào)整它們的大小即可，（最外面的布局表格只能調(diào)整大小）。 在“標(biāo)準(zhǔn)”模式中，可以向表格內(nèi)添加內(nèi)容或?qū)Ρ砀襁M行編輯。,17,16.使用 CSS對頁面進行布局,CSS 頁面布局使用層疊樣式表格式（而不是傳統(tǒng)的 HTML 表格或框架），用于組織網(wǎng)頁上的內(nèi)容。 CSS

6、 布局的基本構(gòu)造塊是 div 標(biāo)簽，它是一個 HTML 標(biāo)簽，在大多數(shù)情況下用作文本、圖像或其它頁面元素的容器。 與表格單元格（被限制在表格行和列中的某個現(xiàn)有位置）不同，div 標(biāo)簽可以出現(xiàn)在 Web 頁上的任何位置?？梢杂媒^對定位方式或相對定位方式來定位 div 標(biāo)簽。 Dreamweaver CS3提供30多個預(yù)先設(shè)計的 CSS 布局，可以幫助用戶快速設(shè)計頁面并開始運行。,18,17.使用絕對定位(AP元素)來創(chuàng)建CSS布局,Dreamweaver CS3中的 AP 元素是分配有絕對位置的 HTML 頁面元素，具體地說，就是 div 標(biāo)簽或其它任何標(biāo)簽。 Dreamweaver CS3使用

7、“AP 元素”面板來管理文檔中的 AP 元素，使用“AP 元素”面板可選擇一個或多個 AP 元素，可防止重疊，更改 AP 元素的可見性，嵌套或堆疊 AP 元素。 使用“AP 元素”可精確調(diào)整各元素之間的位置，來達(dá)到精確調(diào)整圖像和文本之間的位置的目的。,19,18.可視化構(gòu)建 Spry 頁,Spry 框架是一個 JavaScript 庫，Web 設(shè)計人員使用它可以構(gòu)建能夠向站點訪問者提供更豐富體驗的 Web 頁。 Spry 框架中的每個構(gòu)件都與唯一的CSS和JavaScript文件相關(guān)聯(lián)。 當(dāng)使用 Dreamweaver CS3界面插入構(gòu)件時，會在當(dāng)前站點中創(chuàng)建一個 SpryAssets 目錄，并將相應(yīng)的 JavaScript 和 CSS 文件保存到其中。 Dreamweaver CS3提供了折疊構(gòu)件、菜單欄構(gòu)件、可折疊面板構(gòu)件、選項卡式面板構(gòu)件、驗證文本域構(gòu)件、文本區(qū)域構(gòu)件、驗證選擇