《Dreamweaver CS5網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程》課件-第3章 Dreamweaver CS5基礎(chǔ)

第3章DreamweaverCS5基礎(chǔ)3.1DreamweaverCS5簡介3.2Dreamweaver的編輯環(huán)境3.2.1文檔窗口3.2.2面板

3.2.3設(shè)置工作參數(shù)3.3 建立和管理站點(diǎn)3.4 創(chuàng)建網(wǎng)頁思考題3.1DreamweaverCS5簡介作為網(wǎng)頁制作軟件，Dreamweaver提供了功能強(qiáng)大的可視化設(shè)計(jì)工具和簡練的代碼編輯環(huán)境，將“設(shè)計(jì)”和“代碼”編輯器合二為一，提供完整的集成開發(fā)環(huán)境，可以開發(fā)HTML、XHTML、XML、ASP、ASP.NET、JSP、PHP等類型的頁面，還可以通過插件定制和擴(kuò)展開發(fā)環(huán)境，提供強(qiáng)大的網(wǎng)站管理和跨瀏覽器兼容性檢查功能，使開發(fā)人員能夠快捷地創(chuàng)建規(guī)范的Web應(yīng)用程序，構(gòu)建功能強(qiáng)大的網(wǎng)絡(luò)服務(wù)體系。與早期的版本相比，DreamweaverCS5性能得到了明顯的提升。例如：

(1)集成AdobeBrowserLab。(2)集成了BusinessCatalyst,供web設(shè)計(jì)人員構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的基本web站點(diǎn)和功能強(qiáng)大的在線商店；(3)提供了增強(qiáng)的實(shí)時(shí)視圖功能，在實(shí)時(shí)視圖模式下激活視圖中的鏈接，允許您與服務(wù)器端程序和動(dòng)態(tài)數(shù)據(jù)交互,網(wǎng)頁的調(diào)試更方便；(4)CSS檢查。以可視化方式詳細(xì)顯示CSS框模型，包括填充、邊框等，不需要讀取代碼，也不需要其他實(shí)用程序。

(5)CSS起始布局。以更簡化和容易理解的類替代DreamweaverCS4布局中的子代選擇器。

(6)對(duì)CMS的支持。盡享對(duì)WordPress、Joomla!和Drupal等內(nèi)容管理系統(tǒng)框架的創(chuàng)作和測(cè)試支持。

(7)PHP自定義類代碼提示。PHP自定義類代碼提示顯示PHP函數(shù)、對(duì)象和常量的正確語法，有助于輸入更準(zhǔn)確的代碼。

(8)動(dòng)態(tài)相關(guān)文件。允許搜索所有必要的外部文件和腳本，以組合PHP的內(nèi)容管理系統(tǒng)(CMS)頁面，以及在“相關(guān)文件”工具欄中顯示其文件名。DreamweaverCS5易學(xué)、易用，只要掌握了其基本操作方法，即使初學(xué)者也能制作出具有專業(yè)水平的網(wǎng)頁。3.2Dreamweaver的編輯環(huán)境DreamweaverCS5安裝好后第一次啟動(dòng)時(shí)，會(huì)彈出如圖3-2所示的“工作區(qū)設(shè)置”窗口，可以根據(jù)用戶的開發(fā)習(xí)慣，在兩種編輯界面“設(shè)計(jì)器”和“編碼器”中任選其一。兩者的卻別是：“設(shè)計(jì)器”界面：可以在可視化界面中進(jìn)行網(wǎng)頁制作。建議初學(xué)者選擇“設(shè)計(jì)器”（默認(rèn)選擇）?！熬幋a器”界面：直接用代碼設(shè)計(jì)網(wǎng)頁，難度較大。本教材是基于“設(shè)計(jì)器”的界面進(jìn)行演示和講解的。如果日后想改變工作區(qū)設(shè)置，可以選擇“窗口”|“工作區(qū)布局”命令切換這兩種界面。3.2Dreamweaver的編輯環(huán)境3.2.1文檔窗口標(biāo)題欄菜單欄：提供系統(tǒng)功能的所有命令選項(xiàng)。3.2.1文檔窗口工具欄圖3-5多文檔文件名切換選項(xiàng)卡

圖3-6狀態(tài)欄圖3-73.2.2面板1．面板操作隱藏或折疊面板面板組自身可以被展開或折疊。菜單命令“窗口”|“隱藏面板”，可以隱藏全部面板；執(zhí)行“窗口”|“顯示面板”，又可以顯示全部面板。打開面板組右上角的選項(xiàng)菜單，執(zhí)行“關(guān)閉面板組”命令，可以關(guān)閉該面板組。拖動(dòng)面板組與文檔編輯區(qū)之間的分隔條，可以橫向擴(kuò)大或縮小面板組。3.2.3設(shè)置工作參數(shù)1.“常規(guī)”類移動(dòng)文件時(shí)更新鏈接允許多個(gè)連續(xù)的空格歷史步驟最多次數(shù)2.“字體”類字體設(shè)置：設(shè)置語種，應(yīng)選擇簡體中文（SimplifiedChinese）。代碼視圖：如果代碼窗口出現(xiàn)亂碼，應(yīng)修改該窗口的字體。3．“不可見元素”類3.3建立和管理站點(diǎn)1.建立站點(diǎn)的目的：把我們即將制作的網(wǎng)頁放在站點(diǎn)內(nèi)，形成一個(gè)整體。全部網(wǎng)頁制作完成后，是以“網(wǎng)站”為單位，整體地上傳給服務(wù)器。管理站點(diǎn)：只有先建立好站點(diǎn)，Dreamweaver才有可能施行對(duì)站點(diǎn)的管理。例如，修改模板后自動(dòng)更新所有網(wǎng)頁，分類管理站點(diǎn)內(nèi)所有資源（圖片、動(dòng)畫、庫等），管理并自動(dòng)更新超連接，管理并調(diào)用CSS樣式，進(jìn)行站內(nèi)查找與替換等?！纠?-1】為本課建立一個(gè)教學(xué)站點(diǎn)。3.3建立和管理站點(diǎn)2．管理站點(diǎn)多個(gè)站點(diǎn)的管理：站點(diǎn)/管理站點(diǎn)在DreamweaverCS5中創(chuàng)建站點(diǎn)后，在設(shè)計(jì)過程中就可以對(duì)站點(diǎn)進(jìn)行管理操作。選擇“站點(diǎn)”|“管理站點(diǎn)”命令，會(huì)彈出“