1.3 Dreamweaver CS6工具介紹和基本操作

Dreamweaver CS6是一個“所見即所得”的網頁編輯工具，是流行的網頁制作工具，Dreamweaver具有強大的網頁元素組合編輯功能，可以方便地插入圖片、視頻、Flash動畫等網頁元素，方便地實現網頁元素的定位，自動生成HTML代碼，輕松地與CSS和JavaScript腳本結合使用，使用Dreamweaver可以快速地完成網頁的編輯工作。

1.3.1 Dreamweaver CS6工具介紹

1.啟動Dreamweaver CS6

安裝好Dreamweaver CS6后，可以創建桌面的快捷啟動圖標，通過雙擊圖標啟動Dreamweaver CS6，也可以單擊操作系統中的【程序】→【所有程序】→ 命令。打開Dreamweaver CS6后，可以看到“歡迎屏幕”頁，這頁也稱為“起始頁”（見圖1-3-1）。

設置【起始頁】：選擇“起始頁”左下角的【不再顯示】的復選框，可設置關閉“起始頁”的效果，如需重新開啟該項功能，單擊菜單欄的【編輯】→【首選參數】→【常規】→【文檔類型】→【顯示歡迎屏幕】，選擇這個選項重新啟動“起始頁”（見圖1-3-2）。

2.認識Dreamweaver CS6工作面板

Dreamweave的工作界面是一個集成布局界面，將全部的元素置于一個窗口內，在集成的工作界面中，全部窗口和面板都被集成到一個更大的應用程序窗中，多個工具欄被集合到一起，工具欄可以通過拖動的方式從Dreamweaver的界面中單獨分開，也可以重新組合到Dreamweaver的界面中，工具欄可以通過菜單欄中【窗口】菜單選擇顯示和隱藏，Dreamweaver CS6工作布局如圖1-3-3所示。

? 菜單欄：Dreamweaver CS6工作布局的菜單共有10個，即【文件】、【編輯】、【查看】、【插入】、【修改】、【格式】、【命令】、【站點】、【窗口】和【幫助】，各菜單選項的功能如表1-3-1所示。

注意：工具面板可通過菜單欄中的【窗口】菜單來實現顯示和關閉，如要打開【插入】面板，則單擊菜單欄的【窗口】→【插入】（見圖1-3-4）。工具面板上就可找到【插入】工具面板。

? 常用面板：常用面板集合了多個使用頻率較高的工具面板，如【插入】、【CSS樣式】、【文件】等（見圖1-3-5）。這些工具面板是將菜單欄上的菜單項設置成工具欄上的按鈕，單擊按鈕就可直接使用，方便用戶操作。

? 工作區：Dreamweaver CS6提供3種工作區的視圖效果，分別為【代碼】、【拆分】和【設計】（見圖1-3-6）。

【代碼】：工作區只顯示HTML、CSS、JavaScript或其他的代碼內容。

【設計】：工作區只顯示設計效果，不顯示代碼。

【拆分】：工作區分成兩部分，一邊為【代碼】區，另一邊為【設計】區，默認為左右拆分效果，可通過取消菜單欄的【查看】→【垂直拆分】改成上下拆分效果。

【實時視圖】：可以在DW的工作區中實現在“瀏覽器中預覽”的效果，單擊【實時視圖】后，在【實時視圖】按鈕右邊出現【實時代碼】和【檢查】兩個按鈕（見圖1-3-7）。【實時代碼】顯示網頁的HTML源代碼，【檢查】的作用是自動檢查源碼中的錯誤代碼。

?【屬性】面板：Dreamweaver CS6的屬性面板默認在Dreamweaver界面的底部，會隨著光標所在位置或鼠標選擇的對象不同而顯示相對應的屬性面板內容（見圖1-3-8）。

?【當前標簽】：光標所在位置的HTML標簽名稱（見圖1-3-9）。

?【狀態欄】：狀態欄位于文檔窗口的底部，它的作用是顯示當前正在編輯的文檔的相關信息，主要包含當前窗口大小、文檔大小、當前標簽、估計下載時間、當前頁面編碼類型等（見圖1-3-9）。

?【當前文檔】：表示當前編輯的文檔名稱，通過鼠標單擊文檔名稱可更改當前編輯的文檔。圖 1-3-9 表示當前編輯文檔為“index.html”，文檔名稱上沒有文件后綴，如，表示該文檔從末被保存過，保存過的網頁會有文件的后綴名，如“index. html.”文檔后帶有“*”，表示該文檔被修改后沒有保存。當前文件如果有鏈入其他的文件，例如 CSS 文件，在代碼區中單擊中的文件名稱，代碼區的內容將切換對應的文檔的內容，但是設計區的內容仍為網頁文件的內容。

3.Dreamweaver CS6常用工具面板介紹

1）【插入】工具面板

【插入】工具面板可以從工具欄通過鼠標單擊并拖曳的方式放置到窗口的其他位置，一般將【插入】面板放置到【菜單欄】的下方。【插入】面板包括9個項目，分別為【插入】（見圖1-3-10）、【布局】、【表單】、【數據】、【Spry】、【jQuery Mobile】、【InContext Editing】、【文本】、【收藏夾】。

【插入】工具面板中選項的功能如表1-3-2所示。

2）【文檔】工具欄

文檔工具欄主要包含一些對文檔進行常用操作的功能按鈕，通過單擊這些按鈕，用戶可以在文檔的不同視圖模式間進行快速切換（見圖1-3-11）。

【多屏幕】：單擊該按鈕，在彈出的菜單用戶可以選擇網頁顯示的屏幕分辨率選項，可以選擇預覽的設備，如功能手機、智能手機和平板電腦。

【在瀏覽器中預覽/調試】：該按鈕通過指定瀏覽器預覽網頁文檔，可以在文檔中存在JavaScript錯誤時查找錯誤。

【文件管理】：用于快速執行【獲取】、【取出】、【上傳】、【存回】等文件管理命令。

【W3C驗證】：單擊該按鈕，可彈出W3C驗證菜單。

【可視化助理】：用于在文檔窗口中顯示各種可視化助理。

【檢查瀏覽器兼容性】：用于檢查所設計的頁面對不同類型的瀏覽器的兼容性。單擊該按鈕，在彈出的菜單中選擇相應的命令檢查對應的兼容性。

【刷新設計視圖】：在代碼視圖中修改網頁內容后，可以使用該按鈕刷新文檔窗口。

【標題】：可以輸入要在網頁瀏覽器上顯示的文檔標題的文字信息。

3）【文件】工具欄

【文件】工具欄的功能主要是文件管理、轉換站點。單擊【本地視圖】選項，可以選擇【本地視圖】、【遠程服務器】、【測試服務器】和【存儲庫視圖】（見圖1-3-12），常用的是【本地視圖】選項，并選擇對應的站點轉換文件信息。

4.創建和管理站點

網站的站點，其實是文件夾，其作用是存儲網站的所有元素、文件等，方便文件的鏈接和站點的移動。站點的位置可以是本地計算機，也可以是遠端服務器中的虛擬文件夾。

創建站點的步驟如下：

在定義站點前，必須先規劃好網站中的文件夾，定義好網站的制作過程中各種文件的存放的位置，如定義“D:\web”文件夾為網站的站點文件夾，在“web”文件夾中分別創建“image”“files”“css”“js”文件夾（見圖1-3-13）。“image”文件夾用來存放圖像文件，“files”文件夾用來存放除了首頁外的其他網頁文件，“css”文件夾用來存放站點中的CSS文件，“js”文件夾用來存放網頁特效文件。

單擊Dreamweaver菜單欄的【站點】→【新建站點（N）】命令，即可打開【站點設置面板】對話框，修改【站點名稱】為“mysite”（名稱可以自定義）（見圖1-3-14），設置本地計算機站點文件位置為“D:\Web”（位置可以自定義）后，若直接單擊【保存】則創建了最簡單的站點，如果想設置的圖像文件夾，則單擊【高級設置】設置。

單擊【高級設置】→【本地信息】選項中的【默認圖像文件夾】，設置站點中圖片存放的默認位置（見圖1-3-15），當從站點外插入一張圖片時，圖片會自動存放在該文件夾中。【站點范圍媒體查詢文件】是指站點的CSS文件（見圖1-3-16），該選項需要CSS文件已創建好的情況下選擇，如果沒有CSS文件，則不需要設置。

單擊【保存】按鈕完成站點的創建。

管理站點。站點創建完成后，當要修改站點信息時，在菜單欄中選擇【站點】→【管理站點】，打開【管理站點】面板，可雙擊站點的名稱“mysite”，或者選擇站點后，單擊【編輯當前選定的站點】圖標，打開【站點設置對象】面板（見圖1-3-17）進行修改。

除了修改站點外，Dreamweaver 還提供刪除站點、復制站點信息、導出站點、導入站點的功能。

復制站點就是將當前站點信息進行復制，請注意，只是復制站點的信息，并不是復制站點的文件，這與站點的文件無關。導出站點就是將站點信息導出并存為“mysite.ste”文件，方便移動到其他設備上導入站點信息。【導入站點】就是將導出的站點導入到 Dreamweaver 中，單擊【管理站點】中的【導入站點】（見圖1-3-18），選擇“mysite.ste”文件，可以自動將站點定義完成。

導出、導入站點功能可以很方便用戶從本地計算機中導出站點信息，在其他計算機設備上快速地創建站點的方式，是一個很好的功能。

1.3.2 Dreamweaver對網頁文檔的基本操作

1.創建一個新的HTML網頁

在Dreamweaver中創建網頁文檔的方式主要有3種。

方法一：單擊【起始頁】→【新建】→【HTML】（見圖1-3-19）新建一個空白的HTML網頁文檔；

方法二：選擇菜單欄中的【文件】→【新建】，在彈出的【新建文檔】對話框中，選擇【空白頁】→【頁面類型-HTML】→【布局-無】→【創建】新建一個空白的HTML網頁文檔（見圖1-3-20）；

方法三：選擇工具面板的【文件】→【本地文件】，在空白位置單擊鼠標右鍵，在彈出的菜單中選擇【新建文件（F）】，新建一個空白的HTML網頁文檔（見圖1-3-21）。

注意：新建的文件名默認為“Untitled-X”（X 表示從1開始的數字），保存時注意更改網頁文件的名稱。

2.保存網頁文檔

單擊Dreamweaver的選擇菜單欄【文件】→【保存】命令（或按Ctrl+S鍵），打開【另存為】對話框（見圖1-3-22），然后在該對話框中選擇文檔存放的位置并輸入保存的文件名稱，單擊【保存】按鈕，即可將當前打開的網頁保存。

還可以通過單擊菜單中的【文件】→【保存全部】保存正在Drewmweaver中打開的所有文檔。

3.打開網頁文檔的方式

要在Dreamweaver中打開網頁文檔，可采用以下兩種方式：

方法一：選擇菜單欄的【文件】→【打開】，在【打開】對話框的【查找路徑】中選擇對應文件夾，單擊需打開的文件名，單擊【打開】按鈕打開對應文檔（見圖1-3-23）。

方法二：在工具面板中單擊【文件】，在打開的文件面板中，單擊【本地試圖】的【本地文件】（見圖1-3-24），然后在顯示的界面中選擇需要打開的文檔，雙擊鼠標左鍵即可。

4.網頁預覽的方式

在制作網頁的時候，常常需要通過瀏覽器查看網頁的效果，Dreamweaver CS6提供網頁的預覽功能，單擊【文檔】工具欄中的預覽工具按鈕（見圖1-3-25），選擇預覽的瀏覽器工具，即可使用該瀏覽器打開網頁并查看該網頁的效果。

單擊【編輯瀏覽器列表】可打開瀏覽器的編輯面板（見圖1-3-26），通過面板中的增加或減少瀏覽器工具。如單擊按鈕，彈出【添加瀏覽器】面板（見圖1-3-27），輸入名稱，單擊【瀏覽】按鈕選擇瀏覽器工具，再單擊【確定】按鈕完成添加，并可以將瀏覽器工具設置為【主瀏覽器】或【次瀏覽器】。【主瀏覽器】為默認的預覽瀏覽器，當按下鍵盤的“F12”時默認使用瀏覽器工具，【主瀏覽器】只能設置一種瀏覽器工具。

Dreamweaver CS6還提供了實時視圖功能，用戶可以通過單擊【文檔】工具欄中的【實時視圖】按鈕，在Dreamweaver中直接預覽網頁效果，但采用實時視圖功能只能查看當前網頁的效果，不能實現超鏈接效果，即只能查看一個網頁的效果，不能實現網頁間的跳轉。用鼠標單擊【實時視圖】按鈕，【設計】界面顯示網頁的預覽效果，再單擊【實時視圖】按鈕，可取消實時視圖的效果。

Dreamweaver CS6提供多屏幕預覽工具，用戶可以根據不同設備，模擬如手機、iPad等分辨率不同的網頁預覽效果。單擊【文檔】工具欄的【多屏幕】（見圖1-3-28），用戶可以直接選擇對應的設備，也可單擊【編輯大小】，打開【窗口大小】（見圖1-3-29）面板，按來增加或減少瀏覽窗口的寬度和高度，多屏幕預覽工具實現的預覽效果是在Dream weaver的設計視圖中顯示。

也可以單擊當前標簽欄的右邊的設備按鈕或單擊窗口大小的位置，選擇適當的窗口大小進行預覽（見圖1-3-30）。