1.1 Dreamweaver CS6的工作界面

Dreamweaver CS6的工作區(qū)將多個(gè)文檔集中到一個(gè)窗口中，這不僅降低了系統(tǒng)資源的占用，而且更方便操作文檔。Dreamweaver CS6的工作窗口由5部分組成，分別是“插入”面板、“文檔”工具欄、“文檔”窗口、面板組和“屬性”面板。Dreamweaver CS6的操作界面簡(jiǎn)潔明快，可大大提高設(shè)計(jì)效率。

1.1.1 友善的開始頁(yè)面

啟動(dòng)Dreamweaver CS6后，首先看到的畫面是開始頁(yè)面，如圖1-1所示，在該頁(yè)面中，用戶可以選擇新建文件的類型，或打開已有的文檔等。

老用戶可能不太習(xí)慣開始頁(yè)面，可選擇“編輯 > 首選參數(shù)”命令，或按Ctrl+U組合鍵，彈出“首選參數(shù)”對(duì)話框，取消選擇“顯示歡迎屏幕”復(fù)選框，如圖1-2所示，單擊“確定”按鈕完成設(shè)置。當(dāng)用戶再次啟動(dòng)Dreamweaver CS6后，將不再顯示開始頁(yè)面。

1.1.2 不同風(fēng)格的界面

Dreamweaver CS6的操作界面新穎淡雅，布局緊湊，為用戶提供了一個(gè)輕松、愉悅的開發(fā)環(huán)境。

若用戶想修改操作界面的風(fēng)格，切換到自己熟悉的開發(fā)環(huán)境，可選擇“窗口 > 工作區(qū)布局”命令，彈出其子菜單，如圖1-3所示，在子菜單中選擇其中的一種界面風(fēng)格，頁(yè)面會(huì)相應(yīng)地發(fā)生改變。

1.1.3 伸縮自如的浮動(dòng)面板

在浮動(dòng)面板的右上方單擊按鈕，可以隱藏或展開浮動(dòng)面板，如圖1-4所示。

如果用戶覺得工作區(qū)不夠大，可以將鼠標(biāo)指針放在文檔編輯窗口右側(cè)與浮動(dòng)面板交界的框線處，當(dāng)鼠標(biāo)指針呈雙向箭頭時(shí)拖曳鼠標(biāo)，調(diào)整工作區(qū)的大小，如圖1-5所示。若用戶需要更大的工作區(qū)，可以將浮動(dòng)面板隱藏。

1.1.4 多文檔的編輯界面

Dreamweaver CS6提供了多文檔的編輯界面，將多個(gè)文檔整合在一起，方便用戶在各個(gè)文檔之間切換，如圖1-6所示。用戶可以單擊文檔編輯窗口上方的選項(xiàng)卡，切換到相應(yīng)的文檔。通過(guò)多文檔的編輯界面，用戶可以同時(shí)編輯多個(gè)文檔。

1.1.5 新穎的“插入”面板

Dreamweaver CS6的“插入”面板可放在菜單欄的下方，如圖1-7所示。

“插入”面板包括“常用”“布局”“表單”“數(shù)據(jù)”“Spry”“jQuery Mobile”“InContext Editing”“文本”“收藏夾”9個(gè)選項(xiàng)卡。在Dreamweaver CS6中，“插入”面板可用菜單和選項(xiàng)卡兩種方式顯示。如果需要菜單樣式，用戶可在“插入”面板選項(xiàng)卡中單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“顯示為菜單”命令，如圖1-8所示，更改后的效果如圖1-9所示。用戶如果需要選項(xiàng)卡樣式，可單擊“常用”按鈕上的黑色三角形，在下拉菜單中選擇“顯示為制表符”命令，如圖1-10所示，更改后的效果如圖1-11所示。

“插入”面板將一些相關(guān)的按鈕組合成菜單，當(dāng)按鈕右側(cè)有黑色三角形時(shí)，表示其為展開式按鈕，如圖1-12所示。

1.1.6 更完整的CSS功能

傳統(tǒng)的HTML所提供的樣式及排版功能非常有限，因此，現(xiàn)在復(fù)雜的網(wǎng)頁(yè)版面主要靠CSS樣式來(lái)實(shí)現(xiàn)。而CSS樣式表功能較多，語(yǔ)法比較復(fù)雜，需要一個(gè)很好的工具軟件有條不紊地整理復(fù)雜的CSS源代碼，并適時(shí)地提供輔助說(shuō)明。Dreamweaver CS6就提供了這樣方便有效的CSS功能。

“屬性”面板提供了CSS功能。用戶可以通過(guò)“屬性”面板中的“目標(biāo)規(guī)則”選項(xiàng)的下拉列表對(duì)所選的對(duì)象應(yīng)用樣式或創(chuàng)建和編輯樣式，如圖1-13所示。若某些文字應(yīng)用了自定義樣式，當(dāng)用戶調(diào)整這些文字的屬性時(shí)，會(huì)自動(dòng)生成新的CSS樣式。

“頁(yè)面屬性”按鈕也提供了CSS功能。單擊“頁(yè)面屬性”按鈕，彈出“頁(yè)面屬性”對(duì)話框，如圖1-14所示。用戶可以在左側(cè)的“分類”列表中選擇“鏈接”選項(xiàng)，在右側(cè)的“下劃線樣式”選項(xiàng)下拉列表中設(shè)置超鏈接的樣式，這個(gè)設(shè)置會(huì)自動(dòng)轉(zhuǎn)化成CSS樣式，如圖1-15所示。

Dreamweaver CS6除了提供如圖1-16所示的“CSS樣式”面板外，還提供如圖1-17所示的“CSS屬性”面板。“CSS屬性”面板可使用戶輕松查看規(guī)則的屬性設(shè)置，并可快速修改嵌入在當(dāng)前文檔或通過(guò)附加的樣式表鏈接的CSS樣式?？删庉嫷木W(wǎng)格使用戶可以更改顯示的屬性值。對(duì)選擇所做的更改都將立即應(yīng)用，這使用戶可以在操作的同時(shí)預(yù)覽效果。