【正文】 第1章 Dreamweaver CS6簡(jiǎn)介第1章 Dreamweaver CS6簡(jiǎn)介Dreamweaver CS6是一款功能強(qiáng)大的可視化的網(wǎng)頁編輯與管理軟件。利用它，不僅可以輕松地創(chuàng)建跨平臺(tái)和跨瀏覽器的頁面，也可以直接創(chuàng)建具有動(dòng)態(tài)效果的網(wǎng)頁而不用自己編寫源代碼。Dreamweaver CS6 最主要的優(yōu)勢(shì)在于能夠進(jìn)行多任務(wù)工作，并且在操作方法、界面風(fēng)格方面更加人性化。用戶可以根據(jù)自己的喜好和工作方式，重新排列面板和面板組，自定義工作區(qū)。本章主要內(nèi)容l Dreamweaver CS6的新增功能。l Dreamweaver CS6的安裝、刪除和啟動(dòng)。l Dreamweaver CS6的工作界面。l Dreamweaver CS6的一般操作。本章重點(diǎn)l Dreamweaver CS6常用面板的使用方法。l Dreamweaver CS6的文件操作。 Dreamweaver CS6概述Dreamweaver CS6 是世界頂級(jí)軟件廠商Adobe推出的一套擁有可視化編輯界面，用于制作并編輯網(wǎng)站和移動(dòng)應(yīng)用程序的網(wǎng)頁設(shè)計(jì)軟件。在業(yè)界通常將Dreamweaver、Flash、Fireworks稱為“網(wǎng)頁三劍客”。由于它支持代碼、拆分、設(shè)計(jì)、實(shí)時(shí)視圖等多種方式來創(chuàng)作、編寫和修改網(wǎng)頁，因此對(duì)于初級(jí)人員，無須編寫任何代碼就能快速創(chuàng)建Web頁面。其成熟的代碼編輯工具更適用于Web開發(fā)高級(jí)人員的創(chuàng)作。CS6新版本使用了自適應(yīng)網(wǎng)格版面創(chuàng)建頁面，在發(fā)布前可使用多屏幕預(yù)覽審閱設(shè)計(jì),大大提高了用戶的工作效率，而改善的FTP性能可更高效地傳輸大型文件?！皩?shí)時(shí)視圖”和“多屏幕預(yù)覽”面板可呈現(xiàn)HTML5 代碼，用戶能更方便地檢查自己的工作。 Dreamweaver CS6的新增功能相對(duì)于以前的版本，Dreamweaver CS6的功能主要在以下方面進(jìn)行了增強(qiáng)。1. 可響應(yīng)的自適應(yīng)網(wǎng)格版面使用響應(yīng)迅速的 CSS 自適應(yīng)網(wǎng)格版面，可以創(chuàng)建跨平臺(tái)和跨瀏覽器的兼容網(wǎng)頁設(shè)計(jì)。利用簡(jiǎn)潔、業(yè)界標(biāo)準(zhǔn)的代碼可為各種不同設(shè)備和計(jì)算機(jī)開發(fā)項(xiàng)目，提高工作效率。用戶可直觀地創(chuàng)建復(fù)雜網(wǎng)頁設(shè)計(jì)和頁面版面，無須忙于編寫代碼。2. 改善的FTP性能利用重新改良的多線程 FTP 傳輸工具可節(jié)省上傳大型文件的時(shí)間。而快速高效地上傳網(wǎng)站文件可縮短制作時(shí)間。3. Adobe Business Catalyst 集成使用 Dreamweaver 中集成的 Business Catalyst 面板連接并編輯用戶利用 Adobe Business Catalyst(需另外購買)建立的網(wǎng)站。利用托管解決方案建立電子商務(wù)網(wǎng)站。4. 增強(qiáng)型 jQuery 移動(dòng)支持使用更新的 jQuery 移動(dòng)框架支持為 iOS 和 Android 平臺(tái)建立本地應(yīng)用程序。建立觸及移動(dòng)受眾的應(yīng)用程序，同時(shí)簡(jiǎn)化用戶的移動(dòng)開發(fā)工作流程。5. 更新的 PhoneGap 支持更新的 Adobe PhoneGap支持可輕松為 Android 和 iOS系統(tǒng)建立和封裝本地應(yīng)用程序。通過改編現(xiàn)有的 HTML 代碼來創(chuàng)建移動(dòng)應(yīng)用程序，并可使用 PhoneGap 模擬器檢查用戶的設(shè)計(jì)。6. CSS轉(zhuǎn)換將 CSS 屬性變化制成動(dòng)畫轉(zhuǎn)換效果，可使網(wǎng)頁設(shè)計(jì)栩栩如生，在用戶處理網(wǎng)頁元素和創(chuàng)建優(yōu)美效果時(shí)，能保持對(duì)網(wǎng)頁設(shè)計(jì)的精準(zhǔn)控制。7. 更新的實(shí)時(shí)視圖使用更新的“實(shí)時(shí)視圖”功能可在發(fā)布前測(cè)試頁面?！皩?shí)時(shí)視圖”現(xiàn)已使用最新版的 WebKit 轉(zhuǎn)換引擎，能夠提供絕佳的 HTML5 支持。8. 更新的多屏幕預(yù)覽面板可利用更新的“多屏幕預(yù)覽”面板檢查智能手機(jī)、平板電腦和臺(tái)式機(jī)所建立項(xiàng)目的顯示畫面。該增強(qiáng)型面板現(xiàn)在能夠幫助用戶檢查HTML5的內(nèi)容呈現(xiàn)。9. 瀏覽器兼容性檢查Dreamweaver CS6中新的瀏覽器兼容性檢查功能可生成報(bào)告(見圖11)，指出各種瀏覽器中與 CSS 相關(guān)的呈現(xiàn)問題。在代碼視圖中，這些問題以綠色下劃線來標(biāo)記，如圖12所示，因此可以準(zhǔn)確地知道產(chǎn)生問題的代碼位置。確定問題之后，如果知道解決方案，則可以快速解決問題；如果需要了解詳細(xì)信息，則可以訪問 Adobe CSS Advisor。圖11 瀏覽器兼容性檢查報(bào)告圖12 綠色下劃線標(biāo)記10. Adobe CSS AdvisorAdobe CSS Advisor 網(wǎng)站包含有關(guān)最新的CSS問題信息，在瀏覽器兼容性檢查過程中可通過 Dreamweaver 用戶界面直接訪問該網(wǎng)站。CSS Advisor 不止是一個(gè)論壇、一個(gè) WiKi頁面或一個(gè)討論組，它可以方便地為現(xiàn)有內(nèi)容提供建議和改進(jìn)意見，或者方便地添加新的問題，以使整個(gè)社區(qū)都能夠從中受益。11. CSS 布局Dreamweaver提供了一組預(yù)先設(shè)計(jì)的 CSS 布局，可以幫助用戶快速設(shè)計(jì)好頁面并開始運(yùn)行，并且在代碼中提供了豐富的內(nèi)聯(lián)注釋以幫助用戶了解CSS頁面布局，如圖13所示。Web 上的大多數(shù)站點(diǎn)設(shè)計(jì)都可以被歸類為一列、兩列或三列式布局，而且每種布局都包含許多附加元素(例如標(biāo)題和腳注)。Dreamweaver 提供了一個(gè)包含基本布局設(shè)計(jì)的綜合性列表，用戶可以自定義這些設(shè)計(jì)以滿足自己的需要。圖13 CSS布局12. 管理CSS借助管理CSS 功能，可以輕松地在文檔之間、文檔標(biāo)題與外部表之間、外部 CSS 文件之間以及更多位置之間移動(dòng) CSS 規(guī)則。此外，還可以將內(nèi)聯(lián) CSS 轉(zhuǎn)換為 CSS 規(guī)則，并且只需通過拖放操作即可將它們放置在所需位置。13. Adobe Device CentralAdobe Device Central 與 Dreamweaver 相集成，并且存在于整個(gè) Creative Suite 3 軟件產(chǎn)品系列中，使用它可以快速訪問每個(gè)設(shè)備的基本技術(shù)規(guī)范，還可以收縮 HTML 頁面的文本和圖像，以便使顯示效果與設(shè)備上出現(xiàn)的完全一樣，從而簡(jiǎn)化了移動(dòng)內(nèi)容的創(chuàng)建過程。14. Adobe Bridge CS6將 Adobe Bridge CS6 與 Dreamweaver 一起使用可以輕松、一致地管理圖像和資源。通過 Adobe Bridge 能夠集中訪問項(xiàng)目文件、應(yīng)用程序，以及設(shè)置 XMP 元數(shù)據(jù)標(biāo)記和搜索功能。15. CSS增強(qiáng)功能Dreamweaver 8具有HTML格式化功能，但沒有CSS格式化功能，而Dreamweaver CS6增加了CSS的格式化功能。 Dreamweaver CS6的安裝、卸載和啟動(dòng)本節(jié)主要介紹如何安裝和卸載Dreamweaver CS6，以及運(yùn)行Dreamweaver CS6的方法。 系統(tǒng)要求以下硬件和軟件是運(yùn)行Dreamweaver CS6所必需的。對(duì)Microsoft Windows系統(tǒng)的要求如下。l 處理器：Intel Pentium 4 或 AMD Athlon 64(或兼容處理器)。l 操作系統(tǒng)：Windows XP SP2 或更高版本，Windows Vista Home Premium、Business、Enterprise 或 Ultimate(僅提供對(duì)32位版本的認(rèn)證支持)。l RAM：512 MB。l 硬盤： GB以上可用空間。l 媒體：DVDROM驅(qū)動(dòng)器。l Internet 連接(用于激活)。對(duì)Macintosh系統(tǒng)的要求如下。l 處理器：GG5 或基于 Intel 的 Mac。l 操作系統(tǒng)：Mac OS 。l RAM：512 MB。l 硬盤： GB以上可用空間。l 媒體：DVDROM 驅(qū)動(dòng)器。l Internet 連接(用于激活)。 安裝Dreamweaver CS6安裝Dreamweaver CS6時(shí)，首先關(guān)閉系統(tǒng)中當(dāng)前正在運(yùn)行的所有應(yīng)用程序，包括其他 Adobe 應(yīng)用程序，然后執(zhí)行下列操作之一。l 將安裝光盤插入驅(qū)動(dòng)器中，然后按照屏幕說明進(jìn)行操作。注意：如果安裝程序沒有自動(dòng)啟動(dòng)，(Windows)或Setup文件(Mac OS)。l 如果用戶是從網(wǎng)上下載的軟件，(Windows) 或Setup文件(Mac OS)，然后按屏幕說明進(jìn)行操作。下面是安裝過程簡(jiǎn)介。(1) 在“Adobe軟件許可協(xié)議”界面(見圖14)中單擊“接受”按鈕，進(jìn)入安裝位置界面。圖14 “Adobe軟件許可協(xié)議”界面(2) 在安裝位置界面(見圖15)中單擊“安裝”按鈕，進(jìn)入“安裝”界面，如圖16所示。圖15 安裝位置界面圖16 “安裝”界面(3) 進(jìn)入“安裝完成”界面后，單擊“關(guān)閉”按鈕退出安裝，如圖17所示。圖17 “安裝完成”界面 卸載Dreamweaver CS6若要卸載Dreamweaver CS6軟件，首先關(guān)閉系統(tǒng)中當(dāng)前正在運(yùn)行的所有應(yīng)用程序，包括其他 Adobe 應(yīng)用程序，然后執(zhí)行下列操作之一。l 在Windows XP系統(tǒng)中，打開 Windows“控制面板”窗口，然后雙擊“添加或刪除程序”圖標(biāo)，打開“添加或刪除程序”窗口。選擇要卸載的產(chǎn)品，單擊“更改/刪除”按鈕，然后按屏幕說明進(jìn)行操作。 l 在 Windows Vista系統(tǒng)中，打開 Windows“控制面板”窗口，然后雙擊“程序和功能”圖標(biāo)，在彈出的界面中選擇要卸載的產(chǎn)品，單擊“更改/刪除”按鈕，然后按屏幕說明進(jìn)行操作。 l 在 Mac 系統(tǒng)中，請(qǐng)勿通過將應(yīng)用程序拖入廢紙簍的方式進(jìn)行卸載，應(yīng)安全卸載軟件，即選擇“應(yīng)用程序”|“實(shí)用程序”|“Adobe 安裝程序”命令中的產(chǎn)品安裝程序，以管理員身份通過身份驗(yàn)證，選擇“刪除組件”命令，然后按屏幕說明進(jìn)行操作。 啟動(dòng)與退出Dreamweaver CS6D