1.1 Dreamweaver 2020的工作界面

Dreamweaver 2020的工作界面將多個文檔集中到一個窗口中，不僅減少對系統(tǒng)資源的占用，還可以使用戶更方便地操作文檔。Dreamweaver 2020的工作界面簡潔易用，可大大提高網(wǎng)頁的設(shè)計及制作效率。

1.1.1 友好的開始界面

啟動Dreamweaver 2020，首先看到的是開始界面，用戶可在此界面中選擇新建文件的類型或打開已有的文檔等，如圖1-1所示。

如果不太習慣開始界面，可選擇“編輯>首選項”命令，或按Ctrl+U組合鍵，彈出“首選項”對話框，取消選中“顯示開始屏幕”復(fù)選框，如圖1-2所示。單擊“應(yīng)用”按鈕，然后單擊“關(guān)閉”按鈕。這樣打開Dreamweaver 2020時將不再顯示開始界面。

1.1.2 不同風格的工作界面

Dreamweaver 2020的工作界面相比老版本的有一些改變。若用戶想修改工作界面的風格，切換到自己熟悉的開發(fā)環(huán)境，可選擇“窗口>工作區(qū)布局”命令，彈出其子菜單，如圖1-3所示，在子菜單中選擇“開發(fā)人員”或“標準”命令，即選擇其中一種風格，工作界面會發(fā)生相應(yīng)的改變。

1.1.3 伸縮自如的面板

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

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

1.1.4 多文檔編輯界面

Dreamweaver 2020提供了多文檔的編輯界面，將多個文檔整合在一起，方便用戶在各個文檔之間切換，如圖1-6所示。單擊文檔編輯窗口上方的標簽，即可快速切換到相應(yīng)的文檔，方便同時編輯多個文檔。

1.1.5 新穎的“插入”面板

Dreamweaver 2020的“插入”面板可以與其他面板組合。為了方便操作，一般會將它放置在菜單欄的下方，如圖1-7所示。

“插入”面板包括“HTML”“表單”“模板”“Bootstrap組件”“jQuery Mobile”“jQuery UI”“收藏夾”7個標簽，具有不同功能的按鈕分門別類地放在不同標簽對應(yīng)的選項卡中。在Dreamweaver 2020中，“插入”面板可用菜單和標簽2種樣式顯示。如果需要以菜單樣式顯示，可在“插入”面板上單擊鼠標右鍵，在彈出的快捷菜單中選擇“顯示為菜單”命令，如圖1-8所示，更改后的效果如圖1-9所示。

如果需要以標簽樣式顯示，可單擊“HTML”右側(cè)的下拉按鈕，在下拉列表中選擇“顯示為制表符”選項，如圖1-10所示，更改后的效果如圖1-7所示。

“插入”面板將一些功能相似的按鈕組合在一起，當某個按鈕右側(cè)有黑色箭頭時，表示其為展開式按鈕，如圖1-11所示。

1.1.6 更完整的CSS功能

傳統(tǒng)的HTML所提供的樣式及排版功能非常有限，因此，復(fù)雜的網(wǎng)頁版面主要依靠CSS樣式實現(xiàn)。而CSS的功能較多，語法比較復(fù)雜，需要有一個很好的工具來有條不紊地整理復(fù)雜的CSS源代碼，并適時地提供輔助說明。Dreamweaver 2020就提供了這樣的功能。

Dreamweaver 2020中的“屬性”面板提供了CSS功能。用戶可以通過“屬性”面板對所選的對象應(yīng)用、創(chuàng)建和編輯樣式，如圖1-12所示。若某些文字應(yīng)用了自定義樣式，當用戶調(diào)整這些文字的屬性時，會自動生成新的CSS樣式。

通過“頁面屬性”按鈕，也可以使用CSS功能。單擊“頁面屬性”按鈕，彈出“頁面屬性”對話框，如圖1-13所示。用戶可以選擇“分類”列表中的“鏈接（CSS）”選項，在“下劃線樣式”下拉列表中選擇超鏈接的樣式，這個設(shè)置會自動轉(zhuǎn)化成CSS樣式，如圖1-14所示。