2.1 熟悉Dreamweaver CS6工作界面

讀者在使用Dreamweaver CS6進行網(wǎng)頁制作之前，首先要對Dreamweaver CS6的工作界面進行全面的熟悉。

2.1.1 工作界面的組成

在安裝了Dreamweaver CS6之后，選擇“開始”→“程序”→“Adobe”→“Adobe Dreamweaver CS6”命令，即可啟動軟件。首次打開軟件會提示關(guān)聯(lián)文件，使用默認選項即可。Dreamweaver CS6在經(jīng)過一系列初始化后，顯示歡迎屏幕，如圖2-1所示，用戶可以選擇“打開最近的項目”“新建”“主要功能”組中的選項來新建不同類型的網(wǎng)頁文件。

操作點撥：

用戶可以執(zhí)行“編輯”→“首選參數(shù)”命令，打開“首選參數(shù)”對話框，在“常規(guī)”分類中撤銷選中“顯示歡迎屏幕”復選框，可以取消在啟動軟件后顯示歡迎屏幕。

用戶新建或打開網(wǎng)頁文檔后，即可進入工作界面，如圖2-2所示。Dreamweaver CS6的工作界面包括標題欄、菜單欄、狀態(tài)欄、“屬性”面板、浮動面板組等。

操作點撥：

操作界面的這些構(gòu)成部分也可以根據(jù)用戶的需要在“查看”菜單和“窗口”菜單來調(diào)節(jié)顯示或不顯示。

1．菜單欄

Dreamweaver CS6的菜單欄包括文件、編輯、查看、插入、修改、格式、命令、站點、窗口和幫助菜單，如圖2-3所示。

菜單欄上的每一項都有子菜單，其中的每個菜單命令都可以進行一些相關(guān)的命令執(zhí)行或?qū)傩缘脑O(shè)置。

文件：用來管理文件，例如新建、打開、保存、另存為等。

編輯：用來編輯文本，例如剪切、復制、粘貼、查找、替換和參數(shù)設(shè)置，以及對Dreamweaver軟件中“首選參數(shù)”的訪問。

查看：用來切換網(wǎng)頁文檔的視圖模式，以及顯示和隱藏標尺、網(wǎng)格線等輔助視圖功能。

插入：用來插入網(wǎng)頁中的各類元素，例如圖像、多媒體文件、表格、框架及超鏈接等。

修改：具有對頁面元素修改的功能，例如進行表格中單元格的合并與拆分等。

格式：用來對文本進行操作，例如設(shè)置文本格式等。

命令：包含所有附加命令項。

站點：用來創(chuàng)建和管理網(wǎng)站站點。

窗口：用來顯示和隱藏各面板，以及切換工作區(qū)的布局等。

幫助：具有聯(lián)機幫助功能。

2．文檔編輯區(qū)

文檔編輯區(qū)是用戶對網(wǎng)頁文檔進行操作的主要工作區(qū)域，包含文檔標簽欄、文檔工具欄、文檔窗口、文檔狀態(tài)欄，如圖2-4所示。

文檔標簽欄：其左側(cè)顯示當前打開的網(wǎng)頁文檔的文件名及關(guān)閉文檔的按鈕，右側(cè)顯示文檔的保存路徑及向下還原文檔窗口的按鈕，如圖2-5所示。

文檔工具欄：可以使用戶快速地切換文檔的視圖模式，設(shè)置網(wǎng)頁標題，在瀏覽器中預(yù)覽等。按鈕具體功能如圖2-6所示。

文檔窗口：打開或新建一個網(wǎng)頁文檔后，用戶就可以在文檔窗口中進行編輯文字、插入表格、編輯圖像等操作。文檔窗口可以分為代碼視圖、拆分視圖和設(shè)計視圖3種方式，如圖2-7所示。

操作點撥：

“設(shè)計”視圖是一個用于可視化頁面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計環(huán)境。在該視圖中，用戶編輯的文檔基本上和在瀏覽器中查看到的頁面內(nèi)容一致，體現(xiàn)了Dreamweaver CS6的所見即所得的特點。“代碼”視圖是一個用于編寫和編輯HTML、JavaScript、服務(wù)器語言代碼及任何其他類型代碼的手工編碼環(huán)境。“拆分”視圖可以在單個窗口中同時看到同一文檔的“代碼”視圖和“設(shè)計”視圖。

文檔狀態(tài)欄：顯示與當前所打開文檔相關(guān)的一些信息，各按鈕功能如圖2-8所示。

3．“屬性”面板

“屬性”面板用來設(shè)置頁面上正被編輯對象的相關(guān)屬性。“屬性”面板會根據(jù)用戶選擇的對象來變換面板中的信息。例如，當前選擇了一幅圖像，那么“屬性”面板上就出現(xiàn)該圖像的相關(guān)屬性；如果選擇了表格，那么“屬性”面板會相應(yīng)地變換成表格的相關(guān)屬性，初始情況下顯示文檔的基本屬性信息，如圖2-9所示。

4．浮動面板組

界面中的其他面板都可以浮動于編輯窗口之外，這些面板根據(jù)功能進行了分組。用戶可以在“窗口”菜單中選擇不同的命令打開與關(guān)閉所需要的面板，如圖2-10所示。

2.1.2 可視化輔助工具

要想使用Dreamweaver CS6設(shè)計出更精美的網(wǎng)頁，更準確地擺放網(wǎng)頁中的素材位置，Dreamweaver提供了各種輔助工具。使用這些輔助工具，能夠得心應(yīng)手地制作網(wǎng)頁，提高網(wǎng)頁制作效率。

1．標尺

利用標尺可以精確地計算出所編輯的網(wǎng)頁的寬度和高度，計算出頁面中的圖片、文字等頁面元素與網(wǎng)頁的比例，使用戶設(shè)計出的網(wǎng)頁能夠更符合瀏覽器的顯示尺寸要求。標尺顯示在編輯窗口的左邊框和上邊框中，單位可設(shè)置為像素、英寸、厘米。在默認情況下，標尺的單位是像素。

操作點撥：

執(zhí)行“查看”→“標尺”→“顯示”命令，即可打開和關(guān)閉標尺。

標尺原點默認位于編輯窗口的左上角，在該處按住鼠標左鍵不放拖動，即可將標尺原點拖動到編輯窗口中的任一點，如圖2-11所示。

操作點撥：

如要將標尺原點恢復到默認左上角的位置，執(zhí)行“查看”→“標尺”→“重設(shè)原點”命令即可。

2．網(wǎng)格線

網(wǎng)格線主要是針對AP元素進行繪制、定位、大小調(diào)整的可視化操作。借助網(wǎng)格線，可以使頁面元素在被移動后自動對齊。

操作點撥：

若要將網(wǎng)格線顯示在編輯窗口中，執(zhí)行“查看”→“網(wǎng)格”→“顯示網(wǎng)格”命令，如圖2-12所示。

若要使網(wǎng)頁中的AP元素自動對齊到網(wǎng)格線上，執(zhí)行“查看”→“網(wǎng)格”→“靠齊到網(wǎng)格”命令即可，如圖2-13所示。

執(zhí)行“查看”→“網(wǎng)格”→“網(wǎng)格設(shè)置”命令，打開了“網(wǎng)格設(shè)置”對話框，如圖2-14所示，其具體參數(shù)解釋如下。

“顏色”：設(shè)置網(wǎng)格線的顏色。

“顯示網(wǎng)格”：切換復選框選中狀態(tài)，將會顯示與隱藏網(wǎng)格線。

“靠齊到網(wǎng)格”：選中復選框，將會使網(wǎng)頁中的AP元素自動靠齊到網(wǎng)格線。

“間隔”：設(shè)置網(wǎng)格間的間距，后面的下拉列表中可以設(shè)置間距的單位。

“顯示”：設(shè)置網(wǎng)格線顯示為線條或點。

3．輔助線

輔助線與網(wǎng)格線的功能異曲同工，也是用來對齊AP元素的，不過使用輔助線比網(wǎng)格更加靈活方便。在一般情況下，輔助線要和標尺搭配使用，使用鼠標可從編輯窗口的左側(cè)或頂部的標尺中拖出一條輔助線到編輯窗口中，如圖2-15所示。

操作點撥：

執(zhí)行“查看”→“輔助線”→“顯示輔助線”命令，即可顯示或隱藏已經(jīng)繪制好的輔助線。

執(zhí)行“查看”→“輔助線”→“編輯輔助線”命令，打開“輔助線”對話框，如圖2-16所示。具體參數(shù)解釋如下。

“輔助線顏色”：設(shè)置輔助線的顏色。

“距離顏色”：當用戶把鼠標指針定位在輔助線之間時，將顯示一個作為距離指示器的顏色，此項參數(shù)就是用來設(shè)置這個線條顏色的。

“顯示輔助線”：選中該復選框，可以設(shè)置輔助線可見。

“靠齊輔助線”：選中該復選框，可以使頁面元素在頁面中移動時靠齊輔助線。

“鎖定輔助線”：選中該復選框，可以將輔助線鎖定在當前位置上。

“輔助線靠齊元素”：選中該復選框，拖動輔助線時將輔助線靠齊頁面上的元素。

“清除全部”按鈕：單擊該按鈕，將從頁面中清除所有的輔助線。

2.1.3 設(shè)置首選參數(shù)

在使用Dreamweaver CS6制作網(wǎng)頁之前，可以結(jié)合自己的需要來定義該軟件的使用規(guī)則。這些規(guī)則可以通過設(shè)置首選參數(shù)來實現(xiàn)。執(zhí)行“編輯”→“首選參數(shù)”命令，打開“首選參數(shù)”對話框，如圖2-17所示。

1．“常規(guī)”分類

在“常規(guī)”分類中可設(shè)置文檔選項和編輯選項。如選中“允許多個連續(xù)的空格”復選框，將允許使用〈Space〉鍵來輸入多個連續(xù)的空格。

2．“復制/粘貼”分類

切換到“復制/粘貼”分類，如圖2-18所示，在此分類中可以定義粘貼到Dreamweaver CS6文檔中的文本格式。

粘貼方式有以下幾種。

僅文本。

帶結(jié)構(gòu)的文本（段落、列表、格式等）。

帶結(jié)構(gòu)的文本以及基本格式（粗體、斜體）。

帶結(jié)構(gòu)的文本以及全部格式（粗體、斜體、樣式）。

在設(shè)置了一種適用的粘貼方式后，就可以直接選擇菜單欄中的“編輯”→“粘貼”命令粘貼文本，而不必每次都選擇“編輯”→“選擇性粘貼”命令。如需改變粘貼方式，再選擇“選擇性粘貼”命令進行粘貼即可。

3．“新建文檔”分類

切換到“新建文檔”分類，如圖2-19所示。可以在“默認文檔”下拉列表中選擇默認文檔類型，如“HTML”；在“默認擴展名”文本框中輸入擴展名，如“.html”；在“默認文檔類型”下拉列表中選擇文檔類型，如“XHTML 1.0 Transitional”；在“默認編碼”下拉列表中選擇編碼類型，通常選擇“Unicode（UTF-8）”選項。