1.2 Dreamweaver簡介

使用Dreamweaver，設計師可以隨心所欲地編寫代碼、設計網站網頁以及進行高級開發。無論是喜歡手寫HTML代碼還是習慣于可視化環境，Dreamweaver都能提供方便快捷、功能強大的工具，使用Dreamweaver將是一種全新的體驗。在易用、創新、規范等優點的基礎上，Dreamweaver還擁有更先進的網頁布局和設計環境，以及更強大的代碼編輯功能等特性。

Dreamweaver 8的操作界面主要由以下幾個部分組成：標題欄、菜單欄、插入欄、文檔窗口、屬性面板及多個浮動面板，如圖1-3所示。

1.2.1 標題欄

標題欄主要包括Dreamweaver標記、應用程序的名稱、當前正在編輯文檔的標題和名稱等信息，還包括最小化按鈕、最大化按鈕以及關閉按鈕。

單擊Dreamweaver標記可以打開系統菜單。在Dreamweaver標記后面顯示程序名稱，之后的方括號“[ ]”內是當前打開的文檔的標題，圓括號“（）”內是該文件的名稱。每次新建一個文檔，Dreamweaver都會自動將文檔標題命名為“無標題文檔”，文件名定義為Untitled-x。其中，文檔的標題和文檔的文件名稱是不同的概念。文件的標題通常在文檔的<title>和</title>標記中，是用瀏覽器打開文檔時顯示在瀏覽器窗口標題欄上的名稱，而文件的名稱則是文檔存儲在磁盤上的文件名。

1.2.2 菜單欄

菜單欄位于標題欄的下方，它包括“文件”、“編輯”、“查看”、“插入”、“修改”、“文本”、“命令”、“站點”、“窗口”、“幫助”10個菜單項，如圖1-4所示。

下面簡單介紹一下Dreamweaver中的各個菜單項。

· “文件”菜單：包含文件操作的標準菜單項，如“新建”、“打開”、“保存”等。“文件”菜單還包含各種其他命令，用于查看當前文檔或對當前文檔執行操作，如“在瀏覽器中預覽”和“打印代碼”。

· “編輯”菜單：包含文件編輯的標準菜單項，如“剪切”、“拷貝”和“粘貼”等。“編輯”菜單還包括選擇和搜索命令，如“全選”、“選擇父標簽”和“查找和替換”、“轉到行”等，并且提供對鍵盤快捷鍵編輯器、標簽庫編輯器和參數選擇編輯器的訪問。

· “查看”菜單：用于選擇文檔的不同視圖（設計視圖和代碼視圖），并且可以用于顯示或隱藏不同類型的頁面元素和Dreamweaver工具。

· “插入”菜單：提供插入面板的各項，以用于將各種對象插入文檔。

· “修改”菜單：用于更改選定頁面元素或項的屬性。使用此菜單，可以編輯標簽屬性，更改表格和表格元素，并且為庫和模板執行不同的操作。

· “文本”菜單：用于設置文本的各種格式。

· “命令”菜單：提供對各種命令的訪問，包括根據格式參數選擇設置代碼格式的命令、創建相冊的命令，以及使用Macromedia Fireworks優化圖像的命令。

· “站點”菜單：包含站點操作菜單項，這些菜單項可用于創建、打開和編輯站點，以及管理當前站點中的文件。

· “窗口”菜單：提供對Dreamweaver中的所有面板、檢查器和窗口的訪問。

· “幫助”菜單：提供對Dreamweaver幫助文檔的訪問，包括用于使用Dreamweaver以及創建對Dreamweaver的擴展的幫助系統，并且包括各種語言的參考材料。

1.2.3 插入欄

對于一些經常使用的操作，如從菜單項中選擇還是很不方便。插入欄上放置的是Dreamweaver提供的一些菜單命令的快捷方法，其按鈕一般都和菜單中的命令相對應，運用插入欄可以更方便快捷。插入欄集成了多種網頁元素，包括圖像、文字等，如圖1-5所示。

單擊插入欄左邊的倒三角形按鈕，可以選擇不同的工具組，包括布局、表單、文本等，如圖1-6所示。如果選中“顯示為制表符”選項，則以傳統的方式顯示插入欄，如圖1-7所示。

“收藏夾”是用戶自定義的組，在這里用戶可以創建自己常用的按鈕。

1.2.4 文檔工具欄

“文檔”工具欄包含按鈕和彈出式菜單，它們提供各種“文檔”窗口視圖（如“設計”視圖和“代碼”視圖）、各種查看選項和一些常用操作（如瀏覽器中預覽），如圖1-8所示。

要顯示文檔工具欄，可以選擇“查看”→“工具欄”→“文檔”菜單命令。文檔工具欄中各個圖標按鈕的功能分別如下。

· “顯示代碼視圖”：顯示代碼窗口。

· “顯示代碼和設計視圖”：顯示代碼和設計窗口。

· “顯示設計視圖”：顯示設計窗口。

· “活動數據視圖”：用來查看實時數據視圖。

· “標題”：用來設置或修改文檔的標題。

· “文件管理”：單擊該按鈕，通過這里來實現消除只讀屬性、獲取、取出、上傳、存回、撤銷取出、設計注意以及站點定位等功能。

· “在瀏覽器中預覽/調試”：單擊該按鈕在定義好的瀏覽器中預覽或調試，或是編輯瀏覽器列表。

· “刷新”：單擊該按鈕，可以刷新設計顯示中通過代碼更改的部分。

· “參考”：單擊該按鈕來啟動代碼屬性設置面板。

· “代碼導航”：單擊該鈕來移動文檔里定義的JavaScript函數，設置或刪除代碼里的斷點。

· “視圖選項”（代碼視圖模式）：單擊代碼視圖模式下的選項菜單按鈕，可以選擇自動換行、行數、高亮顯示無效HTML、語法顏色、自動縮進等選項，以及在頂端查看設計視圖。

· “視圖選項”（設計視圖模式）：單擊設計視圖模式下的選項菜單按鈕，可以選擇隱藏所有的可視化幫助或鎖定可視化幫助，如表格邊框、層邊框、框架邊框、圖像地圖、不可見元素、表頭、標尺、網格，以及輪廓圖像。

1.2.5 屬性面板

屬性面板主要用于顯示在文檔窗口中所選中元素的屬性，允許用戶在屬性設置面板中對元素屬性直接進行修改。根據選中元素的不同，屬性設置面板上的內容也不同。如圖1-9、圖1-10分別為文本和圖像的屬性面板。

在屬性設置面板的右下角，通常都有一個指三角形按鈕。單擊該三角形圖標可以折疊屬性面板。當屬性面板被折疊時，單擊倒三角形按鈕又可以重新展開屬性面板，顯示更多的屬性設置內容。

單擊屬性面板右上角的圖標，則可以打開屬性面板菜單。在菜單中可以選擇屬性設置面板的顯示模式。

1.2.6 其他面板

在Dreamweaver中提供了一系列面板，在窗口的右側以面板組的形式顯示出來，如圖1-11所示。它是一個工具集合的控制框架，可以將各種窗口、面板放置在其中，組合成為選項卡的形式，以節省屏幕空間。在必要時還可以將這些浮動窗口、面板拖離，成為獨立的可停靠浮動面板，如圖1-12所示。

如果希望將某個面板同其他面板組合成多個選項卡的形式，可以單擊面板右上角的圖標，從打開的菜單中選擇“將XX組合在”子菜單中的一個面板進行組合，如圖1-13所示。