1.1 Dreamweaver CC 2018的工作界面

Dreamweaver CC 2018的工作區將多個文檔集中到一個窗口中，不僅降低了系統資源的占用率，還使用戶可以更加方便地操作文檔。Dreamweaver CC 2018的工作窗口由6個部分組成，分別是菜單欄、“插入”面板、“通用”工具欄、文檔窗口、面板組和“屬性”面板。Dreamweaver CC 2018的操作環境簡潔明快，可大大提高設計效率。

1.1.1 友善的開始頁面

啟動Dreamweaver CC 2018后，首先看到的畫面就是開始頁面，供用戶選擇新建文件或打開已有的文檔等，如圖1-1所示。

老用戶可能不太習慣開始頁面，可選擇“編輯 > 首選項”命令，或按Ctrl+U組合鍵，彈出“首選項”對話框，取消勾選“顯示開始屏幕”復選框，如圖1-2所示。單擊“應用”按鈕完成設置，單擊“關閉”按鈕關閉對話框。當用戶再次啟動Dreamweaver CC 2018時，將不再顯示開始頁面。

1.1.2 不同風格的界面

Dreamweaver CC 2018的操作界面新穎淡雅，布局緊湊，為用戶提供了一個輕松、愉悅的開發環境。

若用戶想修改操作界面的風格，切換到自己熟悉的開發環境，可選擇“窗口 > 工作區布局”命令，彈出相應的子菜單，如圖1-3所示，在子菜單中選擇“開發人員”或“標準”命令。選擇其中一種界面風格，界面會發生相應的改變。

1.1.3 伸縮自如的功能面板

在功能面板的右上方單擊按鈕，可以隱藏功能面板，如圖1-4所示。隱藏功能面板后，單擊按鈕，可以展開功能面板。

如果用戶覺得工作區不夠大，可以將鼠標指針放在文檔編輯窗口右側與功能面板交界的框線處，當鼠標指針呈雙向箭頭形狀時拖曳鼠標，可調整工作區的大小，如圖1-5所示。若用戶需要更大的工作區，可以將功能面板隱藏。

1.1.4 多文檔的編輯界面

Dreamweaver CC 2018提供了多文檔的編輯界面，可以將多個文檔整合在一起，方便用戶在各個文檔之間切換，如圖1-6所示。用戶可以單擊文檔編輯窗口上方的選項卡，切換到相應的文檔。通過多文檔的編輯界面，用戶可以在多個文檔之間切換并編輯。

1.1.5 新穎的“插入”面板

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

“插入”面板包括“HTML”“表單”“模板”“Bootstrap組件”“jQuery Mobile”“jQuery UI”“收藏夾”7個選項卡，將不同功能的按鈕分門別類地放在不同的選項卡中。在Dreamweaver CC 2018中，“插入”面板可用菜單和選項卡兩種樣式顯示。如果需要菜單樣式，可用鼠標右鍵單擊“插入”面板的選項卡，在彈出的菜單中選擇“顯示為菜單”命令，如圖1-8所示，更改后的效果如圖1-9所示。用戶如果需要選項卡樣式，可單擊“HTML”選項右側的按鈕，在下拉菜單中選擇“顯示為制表符”命令，如圖1-10所示，更改后的效果如圖1-11所示。

“插入”面板將一些功能相關的按鈕組合成了菜單，當按鈕右側有黑色倒三角符號時，表示其為展開式按鈕，如圖1-12所示。

1.1.6 更完整的CSS功能

傳統的HTML所提供的樣式及排版功能非常有限，因此，現在復雜的網頁版面主要靠CSS樣式來實現。而CSS樣式的功能較多，語法比較復雜，需要一個很好的工具軟件有條不紊地整理復雜的CSS源代碼，并適時地提供輔助說明。Dreamweaver CC 2018就提供了這樣方便有效的CSS功能。

“屬性”面板提供了CSS功能。用戶可以通過“屬性”面板中的“目標規則”下拉列表為所選的對象應用樣式或創建和編輯樣式，如圖1-13所示。若某些文字應用了自定義樣式，當用戶調整這些文字的屬性時，會自動生成新的CSS樣式。

“頁面屬性”按鈕也提供了CSS功能。單擊“屬性”面板中的“頁面屬性”按鈕，彈出“頁面屬性”對話框，如圖1-14所示。用戶可以在左側的“分類”列表中選擇“鏈接（CSS）”選項，在右側的“下劃線樣式”下拉列表中設置超鏈接的樣式，這個設置會自動轉化成CSS樣式，如圖1-15所示。

Dreamweaver CC 2018提供了“CSS設計器”面板，如圖1-16所示。“CSS設計器”面板使用戶能夠輕松查看規則的屬性設置，并可快速修改嵌入當前文檔或通過附加的樣式表鏈接的CSS樣式。可編輯的網格使用戶可以更改顯示的屬性值。對選擇的對象所做的更改都將立即應用，這使用戶可以在操作的同時預覽效果。