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