1.7 認識Dreamweaver CS4

Dreamweaver是一款專業的網頁制作工具，它不僅擁有“所見即所得”的可視化編輯環境，還提供了強大的HTML代碼編寫功能。無論是使用HTML語言，還是使用可視化編輯器， Dreamweaver都為我們提供了良好的工具，豐富了我們的創作。

下面我們一起來了解Dreamweaver CS4的基礎知識。

1.7.1 Dreamweaver CS4的特點

Dreamweaver是一款好的網頁制作軟件，相對于FrontPage、GoLive等其他類型的網頁制作軟件，Dreamweaver的優勢明顯。

所見即所得

在制作網頁時，不需要通過瀏覽器就能預覽網頁，實時了解自己的工作進度和效果。

制作效率高

Dreamweaver可以用最快速的方式將Fireworks或Photoshop文件移到網頁上，整體運作流暢自然。設計者不需要離開Dreamweaver，就可以使用Dreamweaver自動開啟Fireworks或Photoshop程序來進行編輯。

網站管理方便

使用網站地圖可以快速制作網站雛形，設計、更新和重組網頁。改變網頁位置或檔案名稱時，Dreamweaver會自動更新所有鏈接。

兼容性好

使用Dreamweaver設計的網頁，可以呈現在任何平臺的瀏覽器上。使用瀏覽器的檢查功能，Dreamweaver可以告知用戶在不同瀏覽器上的執行效果。

可擴展性強

通過Dreamweaver的擴展管理器，可以將一些行為、動作和命令的插件整合到Dreamweaver中，提高Dreamweaver的設計和開發功能。

1.7.2 Dreamweaver CS4的新增功能

相對于Dreamweaver CS3來說，Dreamweaver CS4又增加了一些新的功能。

全新的工作界面

借助共享型用戶設計界面，設計者可在Adobe Creative Suite 4的不同組件之間更快、更便捷地工作。使用工作區切換器可以從一個工作環境快速切換到另一個工作環境。

實時視圖

借助Dreamweaver CS4新增的實時視圖功能，用戶可以在真實的瀏覽器環境中設計網頁，同時仍可以直接訪問代碼，呈現的屏幕內容會立即反映出對代碼所做的更改。

針對Ajax和JavaScript框架的代碼提示

借助改進的JavaScript核心對象和基本數據類型支持，可以更有效地編寫JavaScript。通過集成包括jQuery、Prototype和Spry在內的流行JavaScript框架，充分利用Dreamweaver CS4的擴展編碼功能。

相關文件和代碼導航器

Dreamweaver CS4使用戶能夠有效地管理組成當今網頁的各種文件。單擊任何相關文件，即可在代碼視圖中查看其源代碼，并同時在設計視圖中查看其頁面。新增的代碼導航器功能可顯示影響當前所選內容的所有代碼源，如CSS（層疊樣式表）規則、服務器端包括、外部JavaScript函數、Dreamweaver模板、iFrame源文件等。

InContext Editing

在Dreamweaver中設計頁面，使用戶無須幫助或使用其他軟件就可以使用Adobe InContext Editing在線服務編輯他們的網頁。Dreamweaver的設計人員可以限制對特定頁面、特殊區域的更改權，甚至可以自定義格式選項。

CSS最佳做法

Dreamweaver CS4的【屬性】檢查器使用戶能夠創建新的CSS規則，并對每個屬性所適合的層疊樣式提供簡單明確的解釋。

HTML數據集

用戶不需要掌握數據庫或XML編碼，就可將動態數據的強大功能融入網頁中。Spry數據集可以將簡單HTML表中的內容識別為交互式數據源。

Adobe Photoshop智能對象

在Dreamweaver中插入任何Adobe Photoshop PSD（Photoshop數據文件）文檔即可創建一個圖像智能對象。智能對象與源文件緊密鏈接，不需要啟動Photoshop程序，就可以在Deamweaver中對源圖像進行任何更改并更新圖像。

Subversion集成

Dreamweaver CS4集成了Subversion軟件（開源的版本控制系統），提供更為可靠的存回/取出體驗，可以直接從Dreamweaver中更新站點并存回修改。

Adobe AIR創作支持

在Dreamweaver中直接創建基于HTML和JavaScript的Adobe AIR應用程序，在Dreamweaver中即可預覽AIR應用程序，使Adobe AIR應用程序隨時可與AIR打包及代碼簽名功能一起部署。

1.7.3 Dreamweaver CS4的工作界面

啟動Dreamweaver CS4后，進入如圖1.38所示的界面。

Dreamweaver CS4的歡迎界面有3個分欄。

打開最近的項目：在該欄中顯示了近期打開的文檔，單擊【打開】超鏈接可以打開其他文件。

新建：該欄列出了Dreamweaver中可存在的各類文件，單擊【更多】超鏈接打開【新建文檔】對話框，如圖1.39所示，可以創建其他類型的文件。單擊【Dreamweaver站點】超鏈接可以新建一個站點。

主要功能：該欄列出了Dreamweaver CS4的主要功能，單擊相關的文字超鏈接，可以了解該功能的具體應用。

Dreamweaver CS4的工作界面如圖1.40所示，包括應用程序欄、菜單欄、文檔工具欄、文檔窗口、標簽選擇器、【屬性】檢查器及面板組（【文件】面板等）等組成部分。

Dreamweaver CS4的工作界面中各元素介紹如下：

應用程序欄：應用程序欄包含幾個應用程序控件和一個窗口切換器。

菜單欄：菜單欄涵蓋了幾乎所有Dreamweaver CS4中的功能。通過菜單欄可以進行對象的任意操作與控制。

文檔工具欄：包含一些按鈕和彈出式菜單，這里提供了各種文檔窗口視圖（如設計視圖和代碼視圖）的切換按鈕、各種查看選項和一些常用操作（如在瀏覽器中預覽）。

文檔窗口：顯示當前創建和編輯的文檔。

標簽選擇器：該選擇器位于文檔窗口底部的狀態欄中，顯示環繞當前選定內容的標簽的層次結構。單擊該層次結構中的任何標簽可以選擇該標簽及其全部內容。

【屬性】檢查器：用于查看和更改所選對象或文本的各種屬性。不同的對象具有不同的屬性。在編碼器工作窗口中，【屬性】檢查器默認是不展開的，如圖1.41所示。

面板組：幫助用戶監控和修改設計工作，包括【插入】面板、【CSS樣式】面板和【文件】面板等。若要展開某個面板，在面板上單擊鼠標即可。

【文件】面板：用于管理文件和文件夾，不管它們是Dreamweaver站點的一部分還是位于遠程服務器上的一部分。通過【文件】面板，用戶可以訪問本地磁盤上的全部文件，類似于Windows資源管理器（Windows）或Finder（Macintosh）。

1.7.4 Dreamweaver CS4的視圖模式

Dreamweaver CS4視圖模式可以分為5種：代碼視圖、拆分視圖、設計視圖、實時視圖及實時代碼視圖。

代碼視圖：用于編寫和編輯HTML、JavaScript、服務器語言代碼（如PHP或ColdFusion標記語言CFML），以及作為任何其他類型代碼的手工編碼環境，如圖1.42所示。

拆分視圖：該視圖是設計人員查看代碼是否錯誤的窗口，使用該視圖可以將代碼與設計效果進行對比，如圖1.43所示。

設計視圖：用于可視化頁面布局、可視化編輯和快速應用程序開發的設計環境。在該視圖中，設計人員可以直接添加圖像、動畫和文本等，設計者的思想能夠直觀地顯示在窗口中，如圖1.44所示。

實時視圖：實時視圖更逼真地顯示文檔在瀏覽器中的表示形式，如圖1.45所示，并能像在瀏覽器中那樣與文檔交互。實時視圖不可編輯，不過可以在代碼視圖中進行編輯，然后刷新實時視圖來查看所做的更改。

實時代碼視圖：實時代碼視圖僅當在實時視圖中查看代碼文檔時可用。實時代碼視圖顯示瀏覽器用于執行該頁面的實際代碼，如圖1.46所示，當在實時視圖中與該頁面進行交互時，它可以動態變化。實時代碼視圖不可編輯。

在Dreamweaver CS4的工作界面中，可以通過以下兩種方法來切換視圖：

使用【查看】菜單中的相關命令，如圖1.47所示。

單擊文檔工具欄中的相應按鈕，如圖1.48所示。

1.7.5 Dreamweaver CS4的文件基本操作

下面介紹如何在Dreamweaver CS4中新建、保存和打開文件。

1. Dreamweaver CS4的文件

Dreamweaver CS4支持多種文件類型，主要文件類型是HTML文件，可以使用html或htm作為擴展名來保存HTML文件。默認情況下，Dreamweaver CS4使用html作為擴展名來保存文件。Dreamweaver CS4中可能會用到的其他一些文件類型如表1.6所示。

2. 在Dreamweaver CS4中創建新文件

啟動Dreamweaver CS4之后，用戶可以自歡迎界面中創建新文件，也可以使用【文件】菜單創建新文件，具體操作步驟如下：

1 執行【文件】→【新建】命令，打開【新建文檔】對話框（參見圖1.39）。

2 在對話框左側選擇【空白頁】選項卡，在【頁面類型】列表框中選擇【HTML】選項，在【布局】列表框中選擇【無】選項。

3 單擊【創建】按鈕，創建一個新文件。

3. 在Dreamweaver CS4中保存文件

在Dreamweaver CS4中保存文件的具體操作步驟如下：

1 執行【文件】→【保存】命令，打開【另存為】對話框，如圖1.49所示。

2 設置文件的保存類型和文件名稱，然后單擊【保存】按鈕即可。

4. 在Dreamweaver CS4中打開文件

在Dreamweaver CS4中打開文件的具體操作步驟如下：

1 執行【文件】→【打開】命令，打開【打開】對話框，如圖1.50所示。

2 在該對話框的【查找范圍】下拉列表中選擇文件路徑，然后在下方的列表框中選擇一個需要打開的文件，然后單擊【打開】按鈕，即可打開所需的文件。