第2章 Dreamweaver CS6的操作環(huán)境
　　本章主要介紹Dreamweaver CS6的工作環(huán)境，通過創(chuàng)建簡單的網(wǎng)頁，熟悉網(wǎng)頁制作的過程。描述站點(diǎn)的創(chuàng)建方法及站點(diǎn)的管理，另外，簡單地演示如何在“代碼”視圖中編輯HTML。
　　·Dreamweaver CS6工作環(huán)境；
　　·建立站點(diǎn)；
　　·在“代碼”視圖中創(chuàng)建HTML。
　　2.1初識(shí)Dreamweaver CS6
　　掌握Dreamweaver CS6的工作環(huán)境是學(xué)習(xí)網(wǎng)頁制作的基礎(chǔ)，而軟件的安裝與卸載、啟動(dòng)，Dreamweaver的工作界面以及幫助是學(xué)習(xí)軟件的首要任務(wù)。
　　2.1.1Dreamweaver CS6的安裝與卸載
　　1.Dreamweaver CS6的安裝
　　安裝Dreamweaver CS6，具體的操作步驟如下。
　　（1）步驟1雙擊Dreamweaver CS6的安裝文件，程序會(huì)自動(dòng)開始解壓縮，單擊“確定”按鈕，彈出如圖2-1所示的界面。
　�。�2）步驟2選擇文件解壓縮的路徑，單擊“下一步”按鈕，依次彈出如圖2-2至圖2-4所示的界面。
　　圖2-1安裝界面一
　　圖2-2安裝界面二
　�。�3）步驟3在圖2-4所示的界面單擊“接受”按鈕，彈出如圖2-5所示窗口，單擊“安裝”按鈕即可成功安裝Dreamweaver CS6，彈出如圖2-6所示的界面。
　　圖2-3安裝界面三
　　圖2-4安裝界面四
　　圖2-5安裝界面五
　　圖2-6安裝界面六
　�。�4）步驟4選擇“立即啟動(dòng)”，彈出如圖2-7所示的“默認(rèn)編輯器”對(duì)話框，單擊“確定”按鈕，即可進(jìn)入軟件界面。
　　圖2-7“默認(rèn)編輯器”對(duì)話框
　　2.Dreamweaver CS6的卸載
　　卸載Dreamweaver CS6與卸載其他的應(yīng)用程序一樣，具體的操作步驟如下。
　�。�1）步驟1在“控制面板”中選中“添加或刪除程序”列表項(xiàng)，打開“添加或刪除程序”窗口，如圖2-8所示。
　　（2）步驟2選擇“AdobeDreamweaver CS6”，單擊“卸載”按鈕，彈出“卸載選項(xiàng)”窗口，如圖2-9所示。
　�。�3）步驟3單擊“卸載”按鈕，彈出顯示卸載進(jìn)度窗口，如圖2-10所示，即可完成卸載工作，卸載完成窗口如圖2-11所示。
　　圖2-8卸載界面一
　　圖2-9卸載界面二
　　圖2-10卸載界面三
　　圖2-11卸載界面四
　　2.1.2Dreamweaver CS6的啟動(dòng)
　　選擇“程序”→“所有程序”→“AdobeDreamweaver CS6”命令，可以啟動(dòng)程序，彈出DW窗口，如圖2-12所示。在此窗口中顯示了一個(gè)開始頁，可以選擇以哪種方式使用Dreamweaver。
　　圖2-12DW窗口
　　2.1.3Dreamweaver CS6工作界面
　　在Dreamweaver CS6開始頁中，選擇“新建”列表中的“HTML”選項(xiàng)，啟動(dòng)Dreamweaver CS6的工作窗口，如圖2-13所示。Dreamweaver CS6所提供的工作區(qū)環(huán)境，將全部功能面板集成到了一個(gè)應(yīng)用程序窗口中，使用者可以自己選擇布局模式進(jìn)行開發(fā)，如圖2-14所示。
　　圖2-13Dreamweaver CS6的工作窗口
　　圖2-14“工作區(qū)切換器”下拉菜單
　　Dreamweaver CS6的工作窗口包含菜單欄、文檔工具欄、文檔窗口、屬性檢查器、標(biāo)簽選擇器、面板組。
　　·文檔窗口：用來顯示當(dāng)前創(chuàng)建和編輯的文檔內(nèi)容，是網(wǎng)站設(shè)計(jì)和開發(fā)的主要工作區(qū)。
　　·文檔工具欄：包含一系列的操作按鈕，使用這些按鈕可以在編輯文檔的不同視圖間快速切換，例如“代碼”視圖、“設(shè)計(jì)”視圖、同時(shí)顯示代碼視圖和設(shè)計(jì)視圖的“拆分”視圖。工具欄中還包括查看文檔、傳輸文檔相關(guān)的常用命令，如圖2-15所示。
　　圖2-15文檔工具欄
　　·屬性檢查器：一個(gè)用于查看和編輯所選對(duì)象或文本的各類屬性（如格式、樣式、字體等）的功能面板，如圖2-16所示。
　　圖2-16屬性檢查器
　　·標(biāo)簽選擇器：主要作用是標(biāo)簽導(dǎo)航功能，可以很方便地定位到插入至頁面中的任意標(biāo)簽。選中要編輯的插入對(duì)象，對(duì)其進(jìn)行相關(guān)的屬性設(shè)置。
　　·面板組：針對(duì)具體功能模塊，Dreamweaver CS6把一些相關(guān)面板進(jìn)行分組并集成在一起。單擊面板組名稱，就能展開相對(duì)應(yīng)的面板組，如圖2-17所示。另外，也可以通過“窗口”菜單打開所需要的面板。
　　默認(rèn)的面板組有以下面板。
　　1.“AdobeBrowserLab”面板
　　該面板可以使用CSS檢查工具進(jìn)行設(shè)計(jì)，使用多個(gè)查看、診斷和比較工具預(yù)覽動(dòng)態(tài)網(wǎng)頁和本地內(nèi)容，利用內(nèi)容管理系統(tǒng)進(jìn)行開發(fā)并實(shí)現(xiàn)快速、精確的瀏覽器兼容性測試。“AdobeBrowserLab”面板，如圖2-18所示。
　　圖2-17面板組
　　圖2-18“AdobeBrowserLab”面板
　　圖2-19“插入”面板
　　2.“插入”面板
　　“插入”面板包含用于創(chuàng)建和插入對(duì)象（例如表格、圖像和鏈接）的按鈕，這些按鈕按類別進(jìn)行組織，可以通過“類別”彈出菜單，選擇所對(duì)應(yīng)的類別來進(jìn)行切換。當(dāng)前文檔包含服務(wù)器代碼時(shí)（例如ASP或CFML文檔），還會(huì)顯示其他類別。圖2-19即為“插入”面板，圖2-20為“插入”面板在菜單欄下方的顯示效果，每個(gè)按鈕都對(duì)應(yīng)一段HTML代碼，允許在插入時(shí)設(shè)置不同的屬性。
　　圖2-20在“插入”面板菜單欄下方的顯示效果
　　3.“CSS樣式”面板
　　使用“CSS樣式”面板可以跟蹤影響當(dāng)前所選頁面元素的CSS規(guī)則和屬性，或影響整個(gè)文檔的規(guī)則和屬性。使用“CSS樣式”面板頂部的切換按鈕可以在兩種模式之間切換，即可以在“全部”和“當(dāng)前”模式下修改CSS屬性“CSS樣式”面板如圖2-21所示。
　　圖2-21“CSS樣式”面板
　　在“當(dāng)前”模式下，“CSS樣式”面板將顯示三個(gè)窗格：①“所選內(nèi)容的摘要”窗格，用于顯示文檔中當(dāng)前所選內(nèi)容的CSS屬性；②“規(guī)則”窗格，用于顯示所選屬性的位置；③“屬性”窗格，允許編輯定義所選內(nèi)容的規(guī)則的CSS屬性。在“全部”模式下，“CSS樣式”面板顯示兩個(gè)窗格：“所有規(guī)則”窗格（頂部）和“屬性”窗格（底部）�！八�有規(guī)則”窗格顯示當(dāng)前文檔中定義的規(guī)則以及附加到當(dāng)前文檔的樣式表中定義的所有規(guī)則的列表；使用“屬性”窗格可以編輯“所有規(guī)則”窗格中任何所選規(guī)則的CSS屬性。對(duì)“屬性”窗格所做的任何更改都將立即應(yīng)用，這就可以在操作的同時(shí)預(yù)覽效果。
　　4.“AP元素”面板
　　AP元素是分配有絕對(duì)位置的HTML頁面元素，可以包含文本、圖像或其他任何可放置到HTML文檔正文中的內(nèi)容。Dreamweaver中的AP元素都顯示在該面板中，在該面板中可以執(zhí)行選擇、命名和刪除等操作，如圖2-22所示。
　　5.“BusinessCatalyst”面板
　　使用Dreamweaver中集成的“BusinessCatalyst”面板連接并編輯利用AdobeBusinessCatalyst（需另外購買）建立的網(wǎng)站，利用托管解決方案建立電子商務(wù)網(wǎng)站，“BusinessCatalyst”面板如圖2-23所示。
　　6.“文件”面板
　　“文件”面板是用戶管理文件和文件夾的功能面板，通過這個(gè)面板可以訪問本地磁盤上的全部文件，或是服務(wù)器整個(gè)站點(diǎn)中的所有文件。操作模式類似于Windows的資源管理器，如圖2-24所示。
　　圖2-22“AP元素”面板
　　圖2-23“BusinessCatalyst”面板
　　7.“資源”面板
　　“資源”面板主要用于顯示站點(diǎn)或收藏中的資源信息，這些資源可以按類別顯示，如圖2-25所示。
　　圖2-24“文件”面板
　　圖2-25“資源”面板
　　2.1.4Dreamweaver CS6的幫助
　　“幫助”菜單中的聯(lián)機(jī)幫助系統(tǒng)提供了有關(guān)使用Dreamweaver CS6可執(zhí)行任務(wù)的詳細(xì)信息。初學(xué)者可以在幫助文件中執(zhí)行全文搜索，找到相關(guān)主題的幫助信息，具體步驟如下。
　　（1）步驟1選擇“幫助”→“Dreamweaver幫助”命令，打開“Dreamweaver幫助/幫助和教程”窗口，如圖2-26所示。
　　圖2-26“Dreamweaver幫助/幫助和教程”窗口
　　（2）步驟2單擊標(biāo)簽，查看該標(biāo)簽的相關(guān)信息，也可以通過窗口左側(cè)的搜索命令搜索相關(guān)信息，以獲得幫助信息。
　　……