1.7 認(rèn)識(shí)Dreamweaver CS4

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

下面我們一起來(lái)了解Dreamweaver CS4的基礎(chǔ)知識(shí)。

1.7.1 Dreamweaver CS4的特點(diǎn)

Dreamweaver是一款好的網(wǎng)頁(yè)制作軟件，相對(duì)于FrontPage、GoLive等其他類型的網(wǎng)頁(yè)制作軟件，Dreamweaver的優(yōu)勢(shì)明顯。

所見即所得

在制作網(wǎng)頁(yè)時(shí)，不需要通過(guò)瀏覽器就能預(yù)覽網(wǎng)頁(yè)，實(shí)時(shí)了解自己的工作進(jìn)度和效果。

制作效率高

Dreamweaver可以用最快速的方式將Fireworks或Photoshop文件移到網(wǎng)頁(yè)上，整體運(yùn)作流暢自然。設(shè)計(jì)者不需要離開Dreamweaver，就可以使用Dreamweaver自動(dòng)開啟Fireworks或Photoshop程序來(lái)進(jìn)行編輯。

網(wǎng)站管理方便

使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形，設(shè)計(jì)、更新和重組網(wǎng)頁(yè)。改變網(wǎng)頁(yè)位置或檔案名稱時(shí)，Dreamweaver會(huì)自動(dòng)更新所有鏈接。

兼容性好

使用Dreamweaver設(shè)計(jì)的網(wǎng)頁(yè)，可以呈現(xiàn)在任何平臺(tái)的瀏覽器上。使用瀏覽器的檢查功能，Dreamweaver可以告知用戶在不同瀏覽器上的執(zhí)行效果。

可擴(kuò)展性強(qiáng)

通過(guò)Dreamweaver的擴(kuò)展管理器，可以將一些行為、動(dòng)作和命令的插件整合到Dreamweaver中，提高Dreamweaver的設(shè)計(jì)和開發(fā)功能。

1.7.2 Dreamweaver CS4的新增功能

相對(duì)于Dreamweaver CS3來(lái)說(shuō)，Dreamweaver CS4又增加了一些新的功能。

全新的工作界面

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

實(shí)時(shí)視圖

借助Dreamweaver CS4新增的實(shí)時(shí)視圖功能，用戶可以在真實(shí)的瀏覽器環(huán)境中設(shè)計(jì)網(wǎng)頁(yè)，同時(shí)仍可以直接訪問(wèn)代碼，呈現(xiàn)的屏幕內(nèi)容會(huì)立即反映出對(duì)代碼所做的更改。

針對(duì)Ajax和JavaScript框架的代碼提示

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

相關(guān)文件和代碼導(dǎo)航器

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

InContext Editing

在Dreamweaver中設(shè)計(jì)頁(yè)面，使用戶無(wú)須幫助或使用其他軟件就可以使用Adobe InContext Editing在線服務(wù)編輯他們的網(wǎng)頁(yè)。Dreamweaver的設(shè)計(jì)人員可以限制對(duì)特定頁(yè)面、特殊區(qū)域的更改權(quán)，甚至可以自定義格式選項(xiàng)。

CSS最佳做法

Dreamweaver CS4的【屬性】檢查器使用戶能夠創(chuàng)建新的CSS規(guī)則，并對(duì)每個(gè)屬性所適合的層疊樣式提供簡(jiǎn)單明確的解釋。

HTML數(shù)據(jù)集

用戶不需要掌握數(shù)據(jù)庫(kù)或XML編碼，就可將動(dòng)態(tài)數(shù)據(jù)的強(qiáng)大功能融入網(wǎng)頁(yè)中。Spry數(shù)據(jù)集可以將簡(jiǎn)單HTML表中的內(nèi)容識(shí)別為交互式數(shù)據(jù)源。

Adobe Photoshop智能對(duì)象

在Dreamweaver中插入任何Adobe Photoshop PSD（Photoshop數(shù)據(jù)文件）文檔即可創(chuàng)建一個(gè)圖像智能對(duì)象。智能對(duì)象與源文件緊密鏈接，不需要啟動(dòng)Photoshop程序，就可以在Deamweaver中對(duì)源圖像進(jìn)行任何更改并更新圖像。

Subversion集成

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

Adobe AIR創(chuàng)作支持

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

1.7.3 Dreamweaver CS4的工作界面

啟動(dòng)Dreamweaver CS4后，進(jìn)入如圖1.38所示的界面。

Dreamweaver CS4的歡迎界面有3個(gè)分欄。

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

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

主要功能：該欄列出了Dreamweaver CS4的主要功能，單擊相關(guān)的文字超鏈接，可以了解該功能的具體應(yīng)用。

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

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

應(yīng)用程序欄：應(yīng)用程序欄包含幾個(gè)應(yīng)用程序控件和一個(gè)窗口切換器。

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

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

文檔窗口：顯示當(dāng)前創(chuàng)建和編輯的文檔。

標(biāo)簽選擇器：該選擇器位于文檔窗口底部的狀態(tài)欄中，顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。單擊該層次結(jié)構(gòu)中的任何標(biāo)簽可以選擇該標(biāo)簽及其全部?jī)?nèi)容。

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

面板組：幫助用戶監(jiān)控和修改設(shè)計(jì)工作，包括【插入】面板、【CSS樣式】面板和【文件】面板等。若要展開某個(gè)面板，在面板上單擊鼠標(biāo)即可。

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

1.7.4 Dreamweaver CS4的視圖模式

Dreamweaver CS4視圖模式可以分為5種：代碼視圖、拆分視圖、設(shè)計(jì)視圖、實(shí)時(shí)視圖及實(shí)時(shí)代碼視圖。

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

拆分視圖：該視圖是設(shè)計(jì)人員查看代碼是否錯(cuò)誤的窗口，使用該視圖可以將代碼與設(shè)計(jì)效果進(jìn)行對(duì)比，如圖1.43所示。

設(shè)計(jì)視圖：用于可視化頁(yè)面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計(jì)環(huán)境。在該視圖中，設(shè)計(jì)人員可以直接添加圖像、動(dòng)畫和文本等，設(shè)計(jì)者的思想能夠直觀地顯示在窗口中，如圖1.44所示。

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

實(shí)時(shí)代碼視圖：實(shí)時(shí)代碼視圖僅當(dāng)在實(shí)時(shí)視圖中查看代碼文檔時(shí)可用。實(shí)時(shí)代碼視圖顯示瀏覽器用于執(zhí)行該頁(yè)面的實(shí)際代碼，如圖1.46所示，當(dāng)在實(shí)時(shí)視圖中與該頁(yè)面進(jìn)行交互時(shí)，它可以動(dòng)態(tài)變化。實(shí)時(shí)代碼視圖不可編輯。

在Dreamweaver CS4的工作界面中，可以通過(guò)以下兩種方法來(lái)切換視圖：

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

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

1.7.5 Dreamweaver CS4的文件基本操作

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

1. Dreamweaver CS4的文件

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

2. 在Dreamweaver CS4中創(chuàng)建新文件

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

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

2 在對(duì)話框左側(cè)選擇【空白頁(yè)】選項(xiàng)卡，在【頁(yè)面類型】列表框中選擇【HTML】選項(xiàng)，在【布局】列表框中選擇【無(wú)】選項(xiàng)。

3 單擊【創(chuàng)建】按鈕，創(chuàng)建一個(gè)新文件。

3. 在Dreamweaver CS4中保存文件

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

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

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

4. 在Dreamweaver CS4中打開文件

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

1 執(zhí)行【文件】→【打開】命令，打開【打開】對(duì)話框，如圖1.50所示。

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