本節書摘來自異步社群《adobe dreamweaver cs6 标準教育訓練教材》一書中的第1章，第1.2節，作者： acaa專家委員會, ddc傳媒 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
網頁建立中的站點管理流程其實就是插入元素（文本、圖像或者ap元素等）和修改已插入的元素兩個過程的交替進行。dreamweaver為了讓整個設計過程簡單化，将一系列視窗、面闆和檢查器整合，提供快速便捷的操作服務。我們在進行網頁建立之前要先對dreamweaver的工作區有一些基本的概念，通過了解如何選擇選項、如何使用檢查器和面闆以及如何設定最适合使用者工作風格的參數來提高網頁設計的效率和品質。
1.2.1 界面布局
在windows系統中的內建dreamweaver cs6工作區預設布局與dreamweaver cs5的布局種類相比，除了經典、編碼器、編碼人員(進階)、設計器、設計人員（緊湊）和雙重螢幕幾種布局模式外，還新增了business catalyst、流體布局、移動應用程式這3種布局模式，其中，預設的是“設計器”界面，如圖1-2-1所示。
“設計器”界面面闆組停靠在主視窗的右側，包含面闆有：adobe browserlab、插入、css樣式、ap元素、business catalyst、檔案、資源。在這種工作區布局中，屬性檢查器在預設情況下處于展開狀态，“文檔”視窗在預設情況下以“設計”視圖顯示，如圖1-2-2所示。這種界面可以彌補程式設計能力較差帶來的缺陷，并且直覺可視，網頁的設計效果即在眼前，設計和修改非常友善。
“編碼器”界面面闆組與“設計器”界面相反，停靠在主視窗的左側，包含面闆也比“設計器”界面簡潔，僅有：css樣式、ap元素以及檔案、資源、代碼片段，在預設情況下隻展開“檔案”面闆。在這種工作區布局中，屬性檢查器在預設情況下處于折疊狀态，“文檔”視窗在預設情況下以“代碼”視圖顯示，如圖1-2-3所示。這種界面對于擅長網站背景程式設計語言的使用者來說非常友善，在這裡dreamweaver已經提供了很多程式設計方面的特性。
“流體布局”界面預設沒有顯示adobe browserlab、ap元素及business catalyst面闆，其他布局都跟“設計器”界面相同，如圖1-2-4所示。這種界面對于前端開發人員來說非常友善，既直覺可視又兼顧到程式設計。
“移動應用程式”界面面闆組分别停靠在主視窗的左右兩側，左側有phonegap build、檔案、資源；右側有插入、css過渡效果、jquery mobile色闆、css樣式，如圖1-2-5所示。
https://yqfile.alicdn.com/0c1fe046be4690281c57dc68b53ff24e4c6436b7.png" >
“雙重螢幕”選項适用于在計算機上有兩個顯示器的使用者。dreamweaver的界面被分成兩部分，一部分顯示正在設計的網頁内容；而另一部分顯示dreamweaver的界面。如果你計算機中擁有兩個顯示器，可以選擇雙重顯示屏來分布面闆組合到第二個顯視器上，這樣主要的顯視器上就有更大的空間，可以大大提高工作效率。
此外，“經典”布局模式等同于dreamweaver之前版本中的“設計器”布局模式，“常用”工具欄處于菜單欄的下方，便于習慣之前布局模式的設計者更加順暢地進行設計工作。其他的幾種布局模式，都有其特别明顯的強調重點，設計者可以根據需要做不同的選擇。
在實際工作中，布局的方式是靈活多變的，我們可以根據自身的需求進行選擇，甚至可以建立一個适合自己的工作區布局。執行“視窗→工作區布局→建立工作區”指令，打開“建立工作區”對話框，建立自己喜歡的工作區，如圖1-2-6所示。
如果希望從目前的工作區切換到另一種工作區，隻需執行“視窗→工作區布局→管理工作區”指令，在彈出對話框的清單中選擇自己需要的布局類型即可,如圖1-2-7所示。
應用程式工具欄
在adobe dreamweaver cs6的視窗标題欄上整合了5個網頁制作中最常用的指令，與cs5不同的是，在adobe cs6系列中統一去除的cs live服務，如圖1-2-8所示。這樣的布局能節省大量時間，讓人們投入更多的精力于設計上。這5個常用指令可以從菜單欄或者工具欄中找到與之相應的選項。
菜單欄
它包含10項主菜單，如圖1-2-9所示，幾乎涵蓋了dreamweaver cs6中的所有功能。通過菜單欄的使用可以對對象進行任意的操作與控制。菜單欄按照功能的不同進行相應的劃分，使使用者在使用的時候能夠更友善。
插入欄（插入面闆）
在“流體布局”布局模式下，dreamweaver cs6将原先的插入欄預設呈現為插入面闆形式。該面闆包含成行的對象圖示，用于建立和插入網頁元素（例如表格、圖像、ap div和連結等）的按鈕。這些按鈕被組織在幾個類别中，使用者可以在類别彈出的頁籤之間快速地進行切換，如圖1-2-10所示。dreamweaver cs6插入欄的類别與dreamweaver cs5相同，且在此基礎上新增了“jquery mobile”類别。
如果設計者還是比較習慣使用dreamweaver舊版本界面，可以直接在應用程式工具欄中選擇“經典”布局模式，或者執行“視窗→工作區布局→經典”指令。在“經典”布局模式下提供兩種模式的插入欄：制表符模式和菜單模式，如圖1-2-11所示。這兩個模式外觀非常簡潔，以頁籤的形式展現，占據主界面很小的工作區空間，每一個标簽包含一套不同的相關圖示，便于設計者操作，且有更多空間控制網頁的整體設計效果。
另外，當在插入欄内的工具選項圖示上或者空白處單擊滑鼠右鍵時，會打開一個包含“顔色圖示”和“自定義收藏夾”指令的快捷菜單，其中的“顔色圖示”指令處于啟用狀态，如圖1-2-12所示。當取消“顔色圖示”選項的啟用狀态時，可以看到“常用”工具欄下的圖示由彩色變成了黑白，如圖1-2-13所示，再次啟用時會切換回彩色。
文檔工具欄
在文檔工具欄裡，使用者可以直接根據需要通路很多選項，它們被附在每一個文檔視窗的頂部。文檔工具欄包含一系列按鈕，如圖1-2-14所示，能改變文檔視圖，定義頁面标題，在浏覽器中預覽頁面以及與站點裡的伺服器主機互相影響。
文檔視窗
文檔視窗是在建立網絡站點時，所有動作出現的地方，如圖1-2-14所示。這裡是召集所有的頁面元素和設計頁面的地方，所有操作都可在此直接顯現出來。文檔視窗與浏覽器視窗在外觀上非常相似。
标簽選擇器
标簽選擇器位于文檔視窗底部的狀态欄中，如圖1-2-14所示。随着使用者在顯示器上選擇視覺元素，标簽選擇器顯示相關的html标簽的層次結構。這是在頁面上選擇不同項目的一種快速且容易的方法。标簽選擇器在代碼視圖中是不可見的。
屬性檢查器
通過屬性檢查器可以檢查和編輯目前標明的頁面元素最常用的屬性。它是上下文相關的，意思是根據你在網絡頁面上標明的元素類型進行改變。如果你標明了表格，會在屬性檢查器裡看到表格的寬、高、标題、換行、背景顔色等相關屬性；如果你標明了圖像，則會顯示圖像的屬性，如圖1-2-15所示。
标簽組（又稱為面闆組）
dreamweaver通過一套面闆和面闆組系統來輕松地處理不同的複雜界面。面闆組将多個相關面闆組合使用，如圖1-2-16所示。如果需要展開或折疊一個面闆組，可以單擊面闆組名稱右側的“展開面闆”或者“折疊為圖示”按鈕在展開和折疊之間進行切換。
檔案面闆
它是面闆組中用來管理檔案和檔案夾的一個面闆，這些檔案可以是dreamweaver站點的一部分，也可以是遠端伺服器上的。檔案面闆還可以通路本地磁盤上的全部檔案，非常類似于windows資料總管或finder (macintosh)，如圖1-2-16所示。
除了這些常用的工具外，dreamweaver還提供了多種在此處沒有說明的面闆、檢查器和視窗，如css樣式面闆和代碼檢查器等。
在制作網頁的時候需要深入了解dreamweaver的操作環境，這樣才能非常熟練地用它來設計網頁。這些面闆都有其負責的功能，也都可以打開或關閉。在沒有用到它們的時候可以将其關閉，這樣就不會占用螢幕的空間；需要打開時，可以在菜單欄裡找到“視窗”菜單，在“視窗”菜單裡找到它們并将其打開。設計者在使用中，可以根據自己的需要自由選擇。
1.2.2 工具、視窗和面闆
本節主要詳細介紹如何使用dreamweaver cs6中的各種特定視窗、工具欄、面闆、檢查器以及dreamweaver cs6工作區的其他元素。
歡迎螢幕
運作dreamweaver cs6軟體後，我們最先看到的是起始頁的歡迎螢幕，如圖1-2-17所示。歡迎螢幕在windows上是綜合性工作區的一部分，提供了一種快速的方式來展示常見的任務，主要分為3欄：打開最近的項目、建立、主要功能。在左側的“打開最近的項目”欄中，使用者可以打開最近使用過的文檔；中間的“建立”欄可以建立各類新文檔，如html、css或asp檔案等；右側的“主要功能”欄是dreamweaver cs6中主要功能的網上視訊教程。歡迎螢幕的下方提供了該軟體的快速入門、新增功能、資源和幫助等資訊，初次使用dreamweaver的使用者能夠從中了解該軟體的概況，幫助資訊可以通過網絡不斷更新。
無論是什麼原因，如果你不想使用歡迎螢幕，都可以通過在歡迎螢幕的左下角選中“不再顯示”複選框，或者通過執行“編輯→首選參數”指令，在彈出的“首選參數”對話框的“分類”清單框中選擇“正常”選項，接着将右邊“文檔選項”欄中的“顯示歡迎螢幕”複選框的選中狀态取消，如圖1-2-18所示，下次運作該軟體時就不再顯示歡迎螢幕了。同樣，想再次顯示歡迎螢幕的話，可以在“文檔選項”欄中重新選中“顯示歡迎螢幕”複選框。
文檔工具欄包含了一些與檢視文檔、在本地和遠端站點間傳輸文檔以及調試javascript代碼有關的普通按鈕和選項，如圖1-2-19所示。
a. 顯示代碼視圖：單擊此按鈕可切換到代碼視圖，使用手寫代碼的方式對網頁進行編輯。
b. 顯示代碼視圖和設計視圖：又叫做拆分視圖。單擊此按鈕可以将視窗拆分為兩部分，一部分顯示代碼視圖，而另一部分顯示設計視圖。當選擇了這種組合視圖時，應用程式工具欄“布局”下拉清單框中的“左側的設計視圖”選項變為可用。使用該選項可以指定在文檔視窗的左側顯示哪種視圖。還可以把預設勾選的“垂直拆分”取消選中，這時文檔視窗呈水準拆分形式，原本“布局”下拉清單框中的“左側的設計視圖”選項變為“頂部的設計視圖”。使用該選項可以指定在文檔視窗的頂部顯示哪種視圖。
c. 顯示設計視圖：設計視圖是文檔視窗的預設視圖。這個視圖在頁面上顯示的是wysiwyg（所見即所得）模式。它能讓你精确地預覽到作為被設計的頁面在浏覽器裡的樣子。
d. 将設計視圖切換到實時視圖：單擊此按鈕，可以像在浏覽器中預覽一樣檢視設計效果，顯示不可編輯的、互動式的、基于浏覽器的文檔視圖。
e. 多螢幕預覽：單擊此按鈕可檢查智能手機、平闆電腦和桌上型電腦所建立項目的顯示畫面，通過使用媒體查詢，使設計符合多種裝置要求。該預覽面闆現在還能夠檢查html5内容呈現。
f. 在浏覽器中預覽/調試：可以讓使用者標明浏覽器來預覽頁面或者調試javascript，也可以通路定義浏覽器對話框，定義建立浏覽器，或者對已經确定并且存在的浏覽器參考線進行更改。
g. 檔案管理：這個下拉清單框通過上載和下載下傳檔案，解除鎖定它們，以及檢查它們入或者出讓使用者處理站點的檔案。在維護網站時，經常需要進行一些小的修改，使用“檔案管理”下拉清單框中的選項可以很快地處理好這些事情。不過，隻有在站點定義中已經定義了遠端站點時，這些選項才能夠使用。
h. w3c驗證：該按鈕用來檢查使用者建立的網站内容是否符合w3c标準。
i. 檢查浏覽器相容性：該按鈕用來檢查使用者建立的網站内容是否能夠相容各種浏覽器。
j. 可視化助理：隻可在設計視圖中使用。用來在網頁設計過程中輔助設計師的操作，如辨別某些對象或顯示一些資料等。它的一系列選項可以打開和關閉網頁相關的助理工具。選擇“隐藏所有可視化助理”選項可以一次性顯示或關閉這些可視化助理。
k. 重新整理設計視圖：使用者在代碼視圖中進行更改後需要重新整理文檔的設計視圖。在執行某些操作（如儲存檔案或單擊該按鈕）之前，使用者在代碼視圖中所做的更改不會自動顯示在設計視圖中。
l. 文檔标題：允許為文檔輸入一個标題，它将顯示在浏覽器的标題欄中。如果文檔已經有了一個标題，則标題顯示在該區域中。
adobe dreamweaver cs6文檔工具欄與cs5的差別是，當“實時視圖”選項處于活動狀态時，“實時代碼”和“檢查模式”這兩個選項才會出現在文檔工具欄中。另外，原本cs5中獨立呈現的“浏覽器導航”在cs6中也整合在“實時視圖”時的文檔工具欄裡,如圖1-2-20所示。這種改變為設計師提供更大的可視空間，還有更友善快捷的調試環境。
m. 實時代碼視圖：顯示浏覽器用于執行該頁面的實際代碼，單擊此按鈕後，其視窗下的代碼以黃色顯示且不可編輯。
n. 檢查模式：與實時視圖一起使用，幫助使用者快速識别 html 元素及其關聯的 css 樣式。打開檢查模式後，将滑鼠懸停在頁面上的元素上方即可檢視任何塊級元素的 css 盒模型屬性。
o. 浏覽器導航：該工具欄在實時視圖中激活，并顯示正在“ 文檔” 視窗中檢視的頁面的位址。它還可以浏覽到您的本地站點以外的站點，dreamweaver 也将在“文檔”視窗中加載該頁面。
p. 實時視圖選項:預設情況下，不激活“實時視圖”中的連結。在不激活連結的情況下可選擇或單擊“文檔”視窗中的連結文本，而不進入另一個頁面。若要在“實時視圖”中測試連結，單擊此按鈕，在菜單中選擇“跟蹤連結”或“持續跟蹤連結”，啟用一次性單擊或連續單擊。
标準工具欄
标準工具欄中包含“檔案”和“編輯”菜單中的常用指令，例如，建立、打開、儲存、全部儲存、列印代碼、剪切、複制、撤銷和重做等，如圖1-2-21所示。在預設的界面下，标準工具欄是不顯示出來的；如果需要使用它，可以執行“檢視→工具欄→标準”指令将其打開。
備注：
在adobe cs6創意套件中，adobe bridge cs6被認為是公用的圖像管理軟體。無論是使用photoshop還是flash都可以使用bridge為目前建立的項目收集圖檔素材，當然dreamweaver也不例外，使用者在設計網頁時可以使用bridge來尋找合适的圖檔素材。
4． 樣式呈現工具欄
樣式呈現工具欄預設情況下處于隐藏狀态，它包含一些相關的按鈕。如果使用依賴于媒體的樣式表，則這些按鈕可以幫助我們檢視設計在不同媒體類型中的呈現方式。它還包含一個允許啟用或禁用css樣式的按鈕,若要顯示該工具欄，選擇“檢視→工具欄→樣式呈現”指令即可，如圖1-2-22所示。
隻有在文檔使用依賴于媒體的樣式表時，此工具欄才有用。例如，樣式表可能會為列印媒體指定某種正文規則，而為手持裝置指定另一種正文規則。
a. 呈現螢幕媒體類型：顯示頁面在計算機螢幕上的顯示方式。
b. 呈現列印媒體類型：顯示頁面在列印紙張上的顯示方式。
c. 呈現手持型媒體類型：顯示頁面在手持裝置（如手機或 blackberry 裝置）上的顯示方式。
d. 呈現投影媒體類型：顯示頁面在投影裝置上的顯示方式。
e. 呈現 tty 媒體類型：顯示頁面在電傳打字機上的顯示方式。
f. 呈現 tv 媒體類型：顯示頁面在電視螢幕上的顯示方式。
g. 切換 css 樣式的顯示：用于啟用或禁用 css 樣式。此按鈕可獨立于其他媒體按鈕之外工作。
h. 設計時樣式表：可用于指定設計時樣式表。
編碼工具欄
編碼工具欄垂直顯示在文檔視窗的左側，隻出現在代碼視圖中，如圖1-2-23所示。它包含可用于執行多種标準編碼操作的按鈕，例如，折疊和展開代碼的標明内容、高亮顯示無效代碼、應用删除注釋、縮進代碼以及插入最近使用過的代碼片段。
在使用編碼工具欄時，不能将其取消停靠或移動，但是可以将它隐藏起來。編碼工具欄可以通過使用者的編輯來顯示更多的按鈕，例如，自動換行、隐藏字元和自動縮進。除了添加按鈕，還可以将一些不常用的按鈕隐藏起來。狀态欄
狀态欄位于視窗的底部，用于提供與目前文檔有關的資訊，如圖1-2-24所示。
a. 标簽選擇器：顯示環繞目前標明内容的标簽的層次結構。單擊該層次結構中的任何标簽以選擇該标簽及其全部内容。單擊
可以選擇文檔的整個正文。可以通過右擊該标簽，在彈出的菜單中選擇相應指令來快捷編輯該标簽的屬性和内容，如設定樣式，指定id等。
b. 選取工具：啟用和禁用手形工具。
c. 手形工具：用于在“ 文檔” 視窗中單擊并拖動文檔。
d. 縮放工具：放大和縮小目前頁面，可按住alt鍵進行放大或縮小的功能切換。
e. 設定縮放比率:通過彈出菜單可以為文檔設定縮放比率。
f. 手機螢幕、平闆電腦螢幕和顯示器螢幕切換：dreamweaver cs6的新增功能，用于調式頁面内容在手機、平闆電腦、普通顯示器中的呈現效果，對于流體布局的頁面調試很有幫助。流體布局也是dreamweaver cs6新增的功能，具體的使用方法我們将在後面的章節詳細說明。
g. 視窗大小彈出菜單（在“ 代碼” 視圖中不可用）：用于将“ 文檔” 視窗的大小調整到預定義或自定義的尺寸。顯示的視窗大小反映浏覽器視窗的内部尺寸（不包括邊框），顯示器大小顯示在括号中，如圖1-2-25所示。若通路者按其預設配置在800×600顯示器上使用網頁浏覽器，如internet浏覽器，則可使用“760×420（800×600，最大值）”。如果在下拉清單框中沒有找到合适的尺寸，可以自己進行任意的尺寸設定。選擇最下面的“編輯大小”選項，會彈出一個“首選參數”對話框。在左邊的“分類”清單框中選擇“視窗大小”選項，在右邊的“視窗大小”欄中就可以進行任意數值的設定了，如圖1-2-26所示。
h. 文檔大小和下載下傳時間顯示頁面（包括所有相關檔案，如圖像和其他媒體檔案）的預計文檔大小和預計下載下傳時間。
i. 編碼訓示器顯示目前文檔的文本編碼。
狀态欄參數設定
為狀态欄設定參數時，可以執行“編輯→首選參數”指令，打開“首選參數”對話框。在左邊的“分類”清單框中選擇“視窗大小”選項，在右邊就會顯示出狀态欄的相關設定。狀态欄的設定選項分為上下兩部分，上面的是視窗大小的設定，如前所述，使用者可以自定義出現在狀态欄下拉清單框中的視窗大小；下面是連接配接速度的設定選項，确定下載下傳時的連接配接速度（以kbit/s為機關），如圖1-2-27所示。頁面的下載下傳速度顯示在狀态欄中。在視窗中選擇一個圖像時，這個圖像的下載下傳速度将會顯示在屬性檢查器中。
1.2.3 使用插入欄
插入欄在“設計器”的工作區預設中做為一個面闆懸停在文檔視窗的右側，我們可以通過面闆的下拉菜單中選擇相應的類别來使用不同的對象插入功能。為了友善講解，我們切換工作區為“經典”，這時插入欄位于菜單欄和文檔工具欄的中間部分。插入欄涵蓋了在設計網頁時最常使用的項目，如圖1-2-28所示。
插入欄包含9類對象，分别是常用、布局、表單、資料、spry、jquery mobile、incontext editing、文本、收藏夾。其他的進階的類别用于各種不同的伺服器端腳本語言：asp、asp.net、cfml、basic、cfml advanced、jsp、php和xslt等。這些進階的類别隻有在打開相應檔案類型的文檔時才會出現在插入欄中。
“常用”頁籤
插入欄中預設的是“常用”頁籤。它為使用者準備了諸如圖像、表格、媒體、連結等最常用的對象。
“布局”頁籤
插入欄中的“布局”頁籤如圖1-2-29所示，用于處理表格、div标簽、ap div和架構，通過這些對象可以定義頁面布局。dreamweaver提供了兩種方式來使用表格，它們分别是标準視圖和擴充視圖。另外，還可以進行單元格的布局和表格的布局。
“表單”頁籤
表單是實作html互動性的一個主要方式。“表單”頁籤中為使用者提供了用來建立基于網頁表單的基本建構塊，如圖1-2-30所示。表單僅僅是表單元素的容器，除非執行了“檢視→可視化助理→不可見元素”指令，否則表單邊框在文檔視窗中是看不到的。
“資料”頁籤
該頁籤主要用來添加與網站背景資料庫相關的動态互動元素，例如，記錄集、重複區域以及插入表單和更新記錄表單等，如圖1-2-31所示。
“spry”頁籤
spry構件是一個javascript庫，具有xml驅動的清單和表格、折疊構件、頁籤式面闆、spry工具提示等元素，為網頁設計人員提供便利，建立給站點通路者帶來更多豐富體驗的網頁。“spry”頁籤如圖1-2-32所示。
“jquery mobile”頁籤
jquery mobile也是一個javascript庫，是jquery在手機上和平闆裝置上的版本，具有頁面、清單視圖、布局網格、可折疊區塊、文本輸入、密碼輸入、滑蓋、反轉切換開關等元素，大大提高了移動裝置應用程式的開發效率，如圖1-2-33所示。
“incontext editing”頁籤
“incontext editing”頁籤中包含供生成 incontext 編輯頁面的按鈕，它們分别是“建立重複區域”和“建立可編輯區域”，如圖1-2-34所示。通過該功能，網頁設計人員不但可以維護其站點設計的完整性，同時允許客戶處理他們自己的更新。
“文本”頁籤
“文本”頁籤用于插入各種文本格式和清單格式的标簽。它包含最常用的文本格式html标簽，例如強調文本、改變文本字型或建立項目清單所需要的選項，如圖1-2-35所示。文本類别包含了一個字元按鈕和一些特殊字元，例如歐元符号“€”可以通過被稱為“字元實體”的代碼在html中顯示出來。dreamweaver用字元對象對這些複雜難記的代碼實體進行簡化。最常用的字元将作為獨立對象包含在其中,而一些特殊的字元，則被放置在“其他字元”按鈕的對話框中。在文本類别裡還包含了可以插入換行符和不間斷空格的對象。
“收藏夾”頁籤
“收藏夾”頁籤是dreamweaver中很受歡迎的附加功能，用于将“插入”面闆中最常用的按鈕分組群組織到某一公共位置，提高工作效率。
1.2.4 屬性檢查器
屬性檢查器用于檢查和編輯目前標明頁面元素的最常用屬性，随着標明元素的不同會有所變化。它在設計視圖和代碼視圖中都能顯示。屬性檢查器中的屬性大多以文本框的形式出現，如圖1-2-36所示；使用者隻需單擊其中的一個選項并輸入相應的值即可。如果文本框中已經顯示了值，那麼無論是數字還是名稱，輕按兩下它會高亮顯示該資訊，然後輸入新資料，舊資料就會立即被替換掉。
1-2-36.tif
圖1-2-36
大多數屬性在修改後會直接應用于文檔視窗。但是某些屬性需要使用者在屬性編輯文本的區域外單擊、按下Enter鍵（“enter”鍵）、按下“tab”鍵切換到其他屬性時，才會應用更改。
屬性檢查器中顯示的内容會根據使用者標明的元素而變化。屬性檢查器中最初顯示標明元素的大多數屬性。單擊屬性檢查器右下角的擴充箭頭按鈕（呈小三角形），可以折疊屬性檢查器，使它僅顯示最常用的屬性。
在少數情況下，一些不重要的屬性即使在展開的屬性檢查器中也可能不會顯示出來。在這種情況下，可以使用代碼視圖或代碼檢查器手工對這些屬性進行編碼，或者在代碼視圖中選擇該标簽然後執行“修改→編輯标簽”指令。
1.2.5 使用管理面闆和面闆組
dreamweaver通過一套面闆和面闆組系統來輕松地處理不同的複雜界面。這兩個界面元素一起工作能幫助使用者自定義工作區，是以可以快速的通路需要的面闆。每一個面闆組都包含了數個面闆，每一個面闆都被标簽确定。可以單擊每一個标簽在面闆間進行移動。面闆組可以是浮動的，也可以停放在一起。面闆組内的面闆顯示為頁籤，如圖1-2-37所示。
展開或折疊面闆
單擊面闆右上角的“折疊為圖示”或者“展開面闆”圖示可以輕松展開或折疊面闆，折疊為圖示後的顯示方式有兩種：隻顯示圖示和顯示圖示以及相應的文字，如圖1-2-38所示。
拖動面闆或者面闆組
在衆多的面闆組（又稱為标簽組，下同）集合的部分，如果希望将其中一個面闆或者面闆組拖出來，使用者可以直接将滑鼠指針放在需要拖出的面闆名稱上或者面闆組名稱的後面，按下滑鼠左鍵不放拖動滑鼠就可以将其拖出。
另外，我們也可以在衆多的面闆組之間随意改變各個面闆排列的前後位置，選中任意面闆，按下滑鼠左鍵不放拖動滑鼠到想要排列的位置松開滑鼠即可。
拖出來的面闆組如果需要再拖回原來的位置，直接将它向原來的位置拖動即可，例如，我們想要将下方的面闆組拖回上方面闆處，當看到在上方面闆組旁邊出現一根藍色線條時松開滑鼠即可，如圖1-2-39所示。
在每個面闆和面闆組的右上方都會有一個選項按鈕more_option.tif，單擊就會出現一個與其功能相關的下拉清單框，如圖1-2-40所示。
1.2.6 dreamweaver中的自定義功能
自定義收藏夾
在最初的預設狀态下，“收藏夾”頁籤中并沒有很多的選項，需要在該頁籤上單擊滑鼠右鍵，然後在彈出的快捷菜單中選擇“自定義收藏夾”指令，這時會彈出一個“自定義收藏夾對象”對話框，如圖1-2-41所示。
在左邊的“可用對象”清單框中選擇一個對象，單擊兩清單框中間的“添加”按鈕，可以将選中的對象添加到“收藏夾對象”清單框中，如圖1-2-42所示。在“收藏夾對象”清單框的下面單擊“添加分隔符”按鈕可以将圖示分組顯示，而位于該清單框右上方的3個按鈕分别用于删除和移動收藏夾中的對象。添加完畢後，單擊“确定”按鈕，在“收藏夾”頁籤中就會出現“收藏夾對象”清單框中添加的内容。
自定義快捷鍵
在dreamweaver中，快捷鍵的使用可以彌補選項和指令較多，操作費時，工作效率低的缺點。使用快捷鍵可以避免在制作過程中從菜單中尋找指令再執行，進而在制作過程中節省一些時間，提高效率。
dreamweaver中存在一些為戶定制的常用指令的快捷鍵，一般情況下無需再對快捷鍵進行修改。如果使用者希望擁有屬于自己的個性快捷鍵，也能夠在dreamweaver中輕松實作。執行“編輯→快捷鍵”指令，會打開一個“快捷鍵”對話框，如圖1-2-43所示。
在為某項指令設定快捷鍵時，需要以下幾個步驟。
（1）執行“編輯→快捷鍵”指令，打開“快捷鍵”對話框。
（2）選擇需要更改的指令，這裡選擇“建立”指令，目前它的快捷鍵為“ctrl+n”。
（3）單擊對話框右上角的“複制副本”按鈕複制為副本（可以重命名副本的名稱），在副本設定中再次選擇“建立”指令。将光标移至“按鍵”文本框，隻需在鍵盤上按下目前新設定的快捷鍵，不需要在文本欄中輸入快捷鍵名稱。
（4）然後單擊“更改”按鈕，最後單擊“确定”按鈕關閉目前的對話框。接着就可以在dreamweaver中測試使用者設定的快捷鍵是否已經生效，如圖1-2-44和圖1-2-45所示。