Dreamweaver 工作區

安裝 Dreamweaver 之後，當您初次啟動應用程式時，螢幕上會出現「快速開始」選單詢問您三個問題，協助您根據需要來個人化您的 Dreamweaver 工作區。

依照您對於這些問題的回應，Dreamweaver 會在「開發人員」工作區或「標準」工作區中開啟，前者是最小化的程式碼為主版面，後者是撰寫程式碼時，內含視覺工具和應用程式內預覽的分割版面。

選擇工作區之後，請選擇想要的顏色主題。然後就可以開始使用了。

改善的首頁畫面

Dreamweaver 中的「首頁」畫面可讓您快速存取最近使用的檔案、檔案類型和初學者範本。

根據您的訂閱狀態，「開始」工作區也可依照需求顯示客製化內容。

Dreamweaver 會在啟動時或無文件開啟時顯示「首頁」畫面。

Dreamweaver 開始體驗中的選項

按一下此畫面中的「學習」即可快速存取 Dreamweaver 教學課程。

請在顯示的檔案類型中，按一下其中一種檔案類型，開始在 Dreamweaver 中建立文件。

開啟 Dreamweaver 隨附的其中一個初學者範本。

按一下「首頁」即可返回開始畫面。

您可以在開始畫面中檢視您最近處理過的檔案。如果您最近沒有使用過任何檔案，這個索引標籤會顯示空白。

您也可以透過此畫面右上角的「搜尋」圖示，使用搜尋功能。當您輸入搜尋查詢時，應用程式就會顯示符合搜尋查詢的最近使用檔案、Creative Cloud 資產、說明連結以及 Stock 影像。

您可以按一下「新建」，開始建立新的 Dreamweaver 檔案。如果您的系統中已有檔案，請按一下「開啟」。如需有關在 Dreamweaver 中建立及開啟文件的詳細資訊，請參閱「建立及開啟檔案」。

工作區概覽

Dreamweaver 工作區可讓您檢視文件和物件屬性。工作區的工具列中也放置了許多最常用的作業選項，因此，您可以快速地變更文件。

工作區元素總覽

工作區包含下列元素：

橫跨應用程式視窗頂端，並且包含了工作區切換器、選單 (僅限 Windows) 以及應用程式的其他控制項。

包含按鈕，為「文件」視窗 (例如「設計」檢視、「即時」檢視和「程式碼」檢視) 的不同檢視提供選項。

如果要顯示「標準」工具列，請選取「視窗 > 工具列 > 標準」。工具列包含「檔案」和「編輯」選單中常用作業的按鈕：「新增」、「開啟」、「儲存」、「全部儲存」、「列印程式碼」、「剪下」、「複製」、「貼上」、「還原」和「重做」。

位於應用程式視窗左邊，並包含檢視特有的按鈕。

會在您建立及編輯目前文件時顯示它。

讓您檢視和變更已選取的物件或文字之各種屬性。每個物件都有不同的屬性。

位於「文件」視窗底部的狀態列中，會顯示目前選取範圍左右標籤的階層。按一下階層中的任何標籤就能選取該標籤及其所有內容。

協助您監控和修改作品。例如「插入」面板、「CSS 設計工具」面板和「檔案」面板。若要展開某個面板，請按兩下它的索引標籤。

可讓您上傳及檢視在 Creative Cloud 上的 PSD 檔案。您可以使用此面板，從 PSD 構圖擷取 CSS、文字、影像、字體、顏色、漸層和度量到文件中。

包含將各種物件 (如影像、表格和媒體元素) 插入文件中所需的按鈕。每個物件都是片段的 HTML 程式碼，當您將它插入文件時可在其中設定各種屬性。例如，您可以按一下「插入」面板中的「表格」按鈕來插入表格。如果您想要的話，可以利用「插入」選單而非「插入」面板來插入物件。

讓您不論檔案和資料夾是屬於 Dreamweaver 網站或是在遠端伺服器上，都可以管理檔案和資料夾。「檔案」面板也可讓您存取本機磁碟上的所有檔案。如需詳細資訊，請參閱「管理檔案和資料夾」。

可讓您在不同的網頁、不同的網站和不同的 Dreamweaver 安裝 (使用同步設定) 中，儲存並重複使用您的程式碼片段。如需詳細資訊，請參閱「利用片段重複使用程式碼」。

是 CSS 屬性檢視窗，可讓您以「視覺方式」建立 CSS 樣式、檔案和設定屬性，以及媒體查詢。

文件視窗綜覽

「文件」視窗會顯示目前的文件。如果要切換文件的檢視，請使用「文件」工具列上的檢視選項。

您也可以使用「檢視」選單中的「檢視」選項來切換檢視。

以真實的方式來呈現，就像在瀏覽器中看到的文件一樣，並可讓您與文件互動，就像在瀏覽器中一樣。您可以直接在「即時檢視」中編輯 HTML 元素，並可立即在相同檢視中預覽變更。如需有關在即時檢視中編輯的詳細資訊，請參閱「即時檢視中編輯 HTML 元素」。

是一種設計環境，可用來開發視覺頁面版面、視覺編輯及快速應用程式。在這種檢視中，Dreamweaver 會以視覺化表示顯示文件 (類似您在瀏覽器中檢視頁面時所看到的樣子)，並且具有完整的編輯功能。

是一個手動撰寫程式碼的環境，用來撰寫及編輯 HTML、JavaScript 以及其他各種程式碼。

是分割版的「程式碼」檢視，可讓您透過捲動來同時處理文件的各個不同區段。

可讓您在單一視窗中同時檢視同一個文件的「程式碼」檢視和「即時」檢視。

可讓您在單一視窗中同時檢視同一個文件的「程式碼」檢視和「設計」檢視。

顯示瀏覽器用來執行網頁的實際程式碼，而且當您在「即時」檢視中與網頁互動時，還可以進行動態變更。

當「文件」視窗最大化時 (預設值)，「文件」視窗的頂端會出現索引標籤，顯示所有開啟文件的檔案名稱。如果您已進行變更但尚未儲存，Dreamweaver 會在檔案名稱後面顯示星號。

Dreamweaver 也會在文件的索引標籤下方顯示「相關檔案」工具列 (如果您以個別視窗檢視多個文件，則是顯示在文件的標題列下方)。相關文件是與目前的檔案 (例如 CSS 檔案或 JavaScript 檔案) 相關聯的文件。若要在「文件」視窗中開啟其中一個相關檔案，請在「相關檔案」工具列中按一下該檔案的名稱。

在檢視間切換

請使用「文件」工具列在不同檢視之間快速切換。如需詳細資訊，請參閱「文件工具列總覽」。

您也可以使用「檢視」選單中的下列選項在檢視之間切換：

• 僅程式碼檢視︰選取「程式碼」
• 分割檢視︰選取「分割」，然後選取任一個分割選項
• 檢視模式︰在「即時」和「設計」檢視之間切換
• 切換檢視︰從一個檢視切換到另一個檢視。

重疊顯示、並排顯示或重新排列文件視窗

如果您一次開啟多份文件，則可重疊顯示或並排顯示這些文件。

如果要重疊顯示文件視窗：選取「視窗 > 排列順序 > 重疊顯示」。

如果要並排顯示文件視窗：

• (Windows) 選取「視窗 > 排列順序 > 水平並排」或「視窗 > 排列順序 > 垂直並排」。
• (Macintosh) 選取「視窗 > 排列順序 > 並排顯示」。

當您開啟多個檔案時，「文件」視窗會加上標籤。如果要重新排列標籤化的「文件」視窗，請將視窗的標籤拖曳到群組中的新位置。

調整文件視窗大小

狀態列會顯示「文件」視窗的目前尺寸 (以像素為單位)。若要設計擁有特定最佳大小的頁面，您可以將「文件」視窗調整為任何預先決定的大小、編輯這些預先決定的大小或建立新的大小。

當您在「設計」或「即時檢視」中變更了頁面的檢視大小時，只會變更檢視大小的尺寸。文件大小會保持不變。

除了預先決定與自訂的大小外，Dreamweaver 也會列出媒體查詢中指定的大小。當您選取與媒體查詢對應的大小時，Dreamweaver 會使用媒體查詢來顯示頁面。您也可以變更頁面方向，以預覽行動裝置的頁面，在行動裝置中，頁面版面通常會根據裝置握持的方式變更。

如果要調整文件視窗的大小，請從「文件」視窗底部的「視窗大小」彈出式選單中，選取其中一種大小。

顯示出來的視窗大小反映出瀏覽器視窗內不含邊框的尺寸；監視器大小或行動裝置會列在右側。

變更視窗大小彈出式選單中所列的值

在視窗大小彈出式選單中加入新的大小

文件工具列總覽

「文件」工具列包含的按鈕可讓您快速切換不同的文件檢視。工具列還包含一些常用命令和選項，這些命令和選項都是與檢視文件以及在本機和遠端網站之間傳送文件有關。

下列選項出現在「文件」工具列中：

只會在「文件」視窗中顯示「程式碼」檢視。

將「文件」視窗分割為「程式碼」和「即時/設計」檢視。設計檢視選項無法供流變格線文件使用。

是互動式預覽，準確地即時呈現 HTML5 專案和更新，在您進行變更時顯示這些變更。您也可以在「即時檢視」中編輯 HTML 元素。「即時」選項旁的下拉式清單可讓您在「即時」與「設計」檢視之間切換。這份下拉式清單無法供流變格線文件使用。

顯示文件，如同用戶在網頁瀏覽器中看到的一樣。

標準工具列總覽

如果要顯示「標準」工具列，請選取「視窗 > 工具列 > 標準」。工具列包含「檔案」和「編輯」選單中常用作業的按鈕：「新增」、「開啟」、「儲存」、「全部儲存」、「列印程式碼」、「剪下」、「複製」、「貼上」、「還原」和「重做」。

瀏覽器導覽工具列總覽

在「即時」檢視中，「瀏覽器導覽」工具列會變成作用中狀態 (您必須先透過選取「視窗 -> 工具列 -> 標準」予以啟用)，並且為您顯示目前在「文件」視窗中查看之頁面的位址。「即時」檢視的行為就如同一般瀏覽器，因此即使您瀏覽至本機網站以外的網站 (例如 http://www.adobe.com)，Dreamweaver 仍會在「文件」視窗中載入該頁面。

根據預設，在「即時」檢視中，連結不會處於作用中狀態。使用非作用中連結可讓您在「文件」視窗中選取或按一下連結文字，而不會被帶往另一個頁面。如果要在「即時」檢視中測試連結，您可以選取「檢視 > 即時檢視選項 > 跟隨連結 (Ctrl+按一下連結)」或「持續跟隨連結」，以啟用單次點選或持續點選功能。

工具列總覽

工具列會垂直顯示在「文件」視窗左側，而且所有檢視中都會出現 -「程式碼」、「即時」和「設計」。工具列上的按鈕是檢視特有的，而且只有在適用於您正在使用的檢視時才會出現。例如，如果您正在「即時」檢視中工作，則不會顯示「程式碼」檢視特有的選項，例如「格式原始碼」。

自訂工具列

您可以選擇根據需要新增選單選項，或從工具列中移除不需要的選單選項，來自訂這個工具列。

如果要自訂工具列，請執行下列動作：

如果要還原預設的工具列按鈕，請按一下「自訂工具列」對話方塊中的「還原預設」。

狀態列總覽

「文件」視窗底部的狀態列會提供現在所建立文件的其他資訊。

標籤選取器

會顯示目前選取範圍左右標籤的階層。按一下階層中的任何標籤就能選取該標籤及其所有內容。按一下 <body> 可選取整個文件的內文。若要在標籤選取器中設定標籤的 class 或 ID 屬性，請以滑鼠右鍵按一下 (Windows) 或 Control+按一下 (Macintosh) 該標籤，並從快顯選單中選取類別或 ID。

輸出面板

按一下這個圖示會出現「輸出」面板，顯示您文件中錯誤的程式碼。

程式碼標色

(僅適用於「程式碼」檢視)

請從這個彈出式選單中選取任一種程式碼撰寫語言，根據程式設計語言來變更要顯示的程式碼色彩標示。

在插入和覆寫間切換

(僅適用於「程式碼」檢視)

讓您在「程式碼」檢視中工作時，可在「插入」和「覆寫」模式之間切換。

行號和欄號

(僅適用於「程式碼」檢視。)

顯示游標所在的行號和欄號。

屬性檢視窗總覽

「屬性檢視窗」(「視窗 > 屬性」) 可讓您檢查及編輯目前所選頁面元素 (如文字或插入的物件) 的最常用屬性。

「屬性檢視窗」的內容會隨著選取的元素而不同。例如，如果您選取頁面上的影像，「屬性檢視窗」會變更為顯示影像的屬性 (比如說，若有的話會顯示影像的檔案路徑、影像的寬度和高度、影像周圍的邊框等等)。

「屬性檢視窗」預設位於工作區的下緣，但是您可以將它解除鎖定，讓它成為工作區中的浮動面板。

若要取得特定「屬性」檢視窗的說明，請按一下「屬性」檢視窗右上角的「說明」按鈕，或從「屬性」檢視窗的「選項」選單選取「說明」。

檢視及變更頁面元素的屬性

快顯選單

快顯選單會針對與您所使用之物件或視窗相關的最常用命令以及屬性，提供便捷的存取方式。快顯選單只會列出適用於目前選取範圍的命令。

如果要開啟快顯選單，請在「程式碼」檢視中以滑鼠右鍵按一下 (Windows) 或 Ctrl+按一下 (Mac) 程式碼區段，或在「即時」或「設計」檢視中按一下物件。

在 Dreamweaver 中重新排列面板

您可以根據您的需求，自訂所有 Dreamweaver 面板的位置和外觀。

鎖定及解除鎖定面板

• 若要固定面板，請將面板的標籤拖移到固定區域中，可放在頂端、底部或其他面板之間。
• 若要固定面板群組，請將面板群組的標題列 (標籤上方的實心空白列) 拖移到固定區域中。
• 若要移除面板或面板群組，請將面板的標籤或面板群組的標題列拖移出固定區域。您可以將面板拖移到另一個固定區域中，或是將其變成可自由浮動。

移動面板

當您移動面板時，會看見藍色標示的放置區域，那些就是您可以移動面板的區域。例如，您可以在固定區域中，將面板拖移到另一個面板上方或下方的狹窄藍色放置區域中，就可以將面板向上或向下移動。如果是拖移到非放置區域，面板就可以在工作區中自由浮動。

• 若要移動面板，請拖曳面板的標籤。
• 若要移動面板群組，請拖曳標題列。

新增和移除面板

如果移除固定區域中的所有面板，固定區域就會消失。您可以將面板移到工作區的右邊緣，直到放置區域出現為止，利用這種方式建立固定區域。

• 如果要移除面板，請用滑鼠右鍵按一下 (Windows) 或按住 Control 並按一下 (Mac) 它的標籤，然後選取「關閉」，或從「視窗」選單將它取消選取。
• 若要新增面板，請在「視窗」選單中選取面板，並將它固定在您想要的任何位置。

操作面板群組

• 若要將面板移動到群組中，請將面板的標籤拖移到群組反白標示的放置區域中。
• 若要重新排列群組中的面板，請將面板的標籤拖移到群組中的新位置。
• 若要移除群組中的面板，使其可自由浮動，請將面板的標籤拖移到群組外面。
• 若要移動群組，請拖曳其標題列 (位於標籤上方的區域)。

堆疊浮動面板

如果您將面板拖移到固定區域外而未放入放置區域，該面板即可自由浮動。浮動面板讓您能夠將其定位於工作區中的任何地方。您可以將浮動面板或面板群組堆疊在一起，這樣當您拖曳最頂端的標題列時，就可以讓它們一起移動。

• 若要堆疊浮動面板，請將面板的索引標籤拖曳到另一個面板底部的放置區域。
• 若要變更堆疊順序，請將面板的標籤向上或向下拖移。
• 若要移除堆疊中的面板或面板群組，使其可單獨自由浮動，請將面板的標籤或面板群組的標題列拖移到堆疊外面。

重新調整面板大小

• 若要將某個面板、面板群組或一疊面板最大化或最小化，請按兩下索引標籤。您也可以按兩下索引標籤區域 (索引標籤旁的空白區域)。
• 如果要調整面板的大小，請拖曳面板的任一邊。

收合和展開面板圖示

您可以將面板收合為圖示，減少工作區的雜亂。在某些情況下，面板會在預設工作區中收合為圖示。

• 若要收合或展開某一欄中的所有面板圖示，請按一下固定區域頂端的雙箭頭。
• 若要展開單一面板圖示，請按一下該圖示。
• 如果要調整面板圖示的尺寸，只要看到圖示而不看到索引標籤，請調整固定區域的寬度，直到文字出現為止。如果要再次顯示圖示文字請，將固定區域加寬一些。
• 若要將已展開的面板重新收合為圖示，請按一下面板的標籤、圖示或面板標題列中的雙箭頭。

建立自訂工作區

您可以根據您的需求新增或移除面板，來自訂您的工作區。然後您可以將這些變更儲存到您的工作區，以便稍後從「文件」工具列的「工作區切換器」來存取。

只要將面板的目前大小和位置另存為具名工作區，即使您移動或關閉面板，仍然可以復原該工作區。

如果要儲存自訂工作區：

1. 選擇「視窗 > 工作區版面 > 新增工作區」。
2. 輸入工作區的名稱。

工作區已儲存，並且可以在「文件」工具列的工作區切換器中看到。

如果要刪除自訂工作區：

從「應用程式」列的工作區切換器中選取「管理工作區」，以開啟「管理工作區」對話方塊。選取工作區，然後按一下「刪除」。

顯示或切換工作區

從「文件」工具列的工作區切換器中選取工作區。

在多用戶系統中自訂 Dreamweaver

即使在 Windows XP 或 Mac OS X 等多用戶作業系統中，也能配合您的個人需求自訂 Dreamweaver。

Dreamweaver 可防止任何用戶的自訂設定影響任何其他用戶的自訂設定。為了達到這項目標，Dreamweaver 初次在可辨識的任一多用戶作業系統上執行時，此應用程式會建立多種不同設定檔的複本。這些用戶設定檔會儲存在屬於您的資料夾中。

如果您重新安裝或升級 Dreamweaver，Dreamweaver 會自動製作現有用戶設定檔的備份複本，因此，如果您曾手動自訂這些檔案，還是能存取自己所做的變更。

顯示加上索引標籤的文件 (僅限 Mac)

使用索引標籤來識別每份文件，您便可在單一文件視窗中檢視多份文件。您也可以將這些文件顯示為浮動工作區的一部分，在該工作區中每份文件會出現在它自己的視窗中。

在另一個視窗中開啟外框包圍的檔案

Control+按一下索引標籤，然後從快顯選單中選取「移至新視窗」。

變更外框包圍的檔案預設值

1. 選取「Dreamweaver > 偏好設定」，然後選取「一般」類別。
2. 選取或取消選取「在索引標籤中開啟文件」，然後按一下「確定」。

當您變更偏好設定時，Dreamweaver 並不會改變目前已開啟的文件顯示方式。但是，在您選取新的偏好設定後，隨後開啟的文件都將依據選取的偏好設定來顯示。

啟動 Dreamweaver 且沒有開啟任何文件時，便會出現「歡迎畫面」。您可以選擇隱藏「歡迎畫面」，並於稍後再顯示它。當隱藏「歡迎畫面」且沒有開啟文件時，「文件」視窗便會是空白的。

常用的 Dreamweaver 面板

您會在 Dreamweaver 中使用許多面板。以下說明一些常用的面板。

插入面板總覽

「插入」面板 (「視窗 > 插入」) 包含用於建立和插入物件 (如表格、影像和連結) 的按鈕。這些按鈕組織成幾個類別，您可從頂端的下拉式清單選取所要的類別來進行切換。

部分類別的按鈕含有彈出式選單。當您從彈出式選單中選取某一選項後，該選項便會成為該按鈕的預設動作。例如，如果您從「字元」按鈕的彈出式選單中選取「斷行」，下次您按一下「字元 」按鈕時，Dreamweaver 就會插入斷行。每當您從彈出式選單中選取新的選項後，按鈕的預設動作就會變更。

「插入」面板會以下列類別組織：

可讓您建立和插入最常使用的 HTML 元素，例如 div 標籤、物件 (例如影像) 和表格。

包含建立表單和插入表單元素所用的按鈕，例如搜尋、月份和密碼。

可讓您將文件儲存為範本，並將特定區域標記為可編輯、選擇性、重複或是可編輯的選擇性區域。

包含 Bootstrap 組件，可提供導覽、容器、下拉式清單以及更多您可以在互動式專案中使用的項目。

包含用於建置使用 jQuery Mobile 之網站的按鈕。

可讓您插入 jQuery UI 元素，例如收合式面板、滑桿和按鈕。

可讓您將最常用的「插入」面板按鈕加以群組並排列組織在一個常用的地方。

插入物件

如果要使用「插入」面板插入物件：

編輯插入面板偏好設定

在插入面板的最愛類別中新增、刪除或管理項目

檔案面板總覽

使用「檔案」面板來檢視及管理 Dreamweaver 網站中的檔案。

您可以使用「檔案」面板來檢視檔案和資料夾 (檢查它們是否與 Dreamweaver 網站相關聯)，並執行標準檔案維護作業，例如開啟和移動檔案。

「檔案」面板也可幫助您管理檔案並在遠端伺服器間往來傳送檔案。

如需有關「檔案」面板的所有功能的詳細資訊，請參閱「管理檔案和資料夾」。

CSS 設計工具

CSS 設計工具面板 (「視窗 > CSS 設計工具」) 是 CSS 屬性檢視窗，可讓您透過「視覺方式」建立 CSS 樣式、檔案和設定屬性以及媒體查詢。

您可以使用 Ctrl/Cmd+Z 還原或使用 Ctrl/Cmd+Y 重做，您在 CSS 設計工具中執行的所有動作。這些變更會自動反映在「即時檢視」中，而且相關聯的 CSS 檔案也會進行重新整理。為了讓您知道相關檔案已變更，受影響檔案的索引標籤會短暫反白標示 (大約 8 秒)。

CSS 設計工具面板是由下列窗格和選項所組成：

全部：列出與目前文件相關聯的所有 CSS、媒體查詢和選取器。您可以篩選所需的 CSS 規則及修改屬性。您也可以使用此模式，開始建立選取器或媒體查詢。

這個模式與選取內容無關。這表示，當您選取頁面上的元素時，關聯的選取器、媒體查詢或 CSS 並不會在 CSS 設計工具中標示。

目前：列出目前文件的「設計」或「即時」檢視中任一所選元素的所有已計算樣式。當您在程式碼檢視中針對 CSS 檔案使用這個模式時，將會顯示成為焦點之選取器的所有屬性。

此模式為內容感應式。使用這個選項可編輯文件中與選定元素相關之選取器的屬性。

來源：列出所有與文件相關的 CSS 樣式表。您可使用此窗格建立 CSS 並將其附加到文件，或在文件內定義樣式。

@媒體：列出「來源」窗格中所選來源的所有媒體查詢。如果您未選取特定的 CSS，則此窗格會顯示所有與文件相關的媒體查詢。

選取器：列出「來源」窗格中所選來源的所有選取器。如果您也選取了一個媒體查詢，則此窗格會針對該媒體查詢縮減選取器清單。如果未選取任何 CSS 或媒體查詢，則此窗格會顯示文件中的所有選取器。

當您選取「@媒體」窗格中的「全域」時，會顯示所有未包含在所選來源媒體查詢中的選取器。

屬性：顯示您可以為指定的選取器設定的屬性。如需詳細資訊，請參閱「設定屬性」。

如果您收合或展開 CSS 設計工具中的窗格，窗格的大小會記憶在工作階段內。「來源」和「媒體」窗格會保持自訂的大小，直到您再次變更其大小為止。

注意：當您選取頁面元素時，會在「選取器」窗格中選取最特定的選取器。若要檢視特定選取器的屬性，請在窗格中按一下該選取器的名稱。

如果要檢視所有選取器，您可以在「來源」窗格中選擇「所有來源」。如果要檢視的選取器不屬於所選來源的任何媒體查詢，請按一下「@媒體」窗格中的「全域」。

視覺輔助總覽

Dreamweaver 提供數種視覺輔助，協助您設計文件及預測它們出現在瀏覽器中的大概樣貌。您可以執行下列任何一項作業：

• 將「文件」視窗立即貼齊到想要的視窗大小，以便查看元素是否適合頁面的尺寸。

• 使用影像藍圖做為頁面背景，可協助您複製以插圖或影像編輯應用程式 (如 Adobe® Photoshop® 或 Adobe® Fireworks®) 所建立的設計。

• 使用尺規和導引線來提供精準定位及調整頁面元素大小的視覺提示。

• 使用格線以便精確定位及調整絕對定義元素 (AP 元素) 大小。

  頁面上的格線標記可協助您對齊 AP 元素，而且在啟用貼齊功能時，AP 元素會在移動或調整大小時自動貼齊最接近的格線點 (其他物件不會貼齊格線，如影像和段落)。無論是否顯示格線，貼齊功能都有作用。

放大和縮小顯示頁面

Dreamweaver 可讓您在「文件」視窗中增加顯示比例 (放大顯示)，以便您能檢查圖形的像素精確度、更輕易地選取小項目、設計含有小型文字的頁面，或設計大型頁面等等。

如果要放大或縮小顯示頁面，請選取「檢視 > 設計檢視選項 > 顯示比例」，並選擇任一可用的顯示比例選項。

您可以從各種顯示比例選項中選擇。您也可以選擇：

• 符合選取範圍 - 選取物件或文字，然後選擇這個選項，將選取範圍填滿「文件」視窗。
• 符合全部 - 將整個頁面填滿「文件」視窗
• 符合寬度 - 將整頁寬度填滿「文件」視窗

設定 Dreamweaver 的一般偏好設定

在 Dreamweaver 中設定文件的字體偏好設定

文件的編碼方式會決定文件出現在瀏覽器的方式。Dreamweaver 字體偏好設定讓您以偏好的字體和大小來檢視指定的編碼方式。不過，您在「字體偏好設定」對話方塊中選取的字體只會影響 Dreamweaver 顯示字體的方式，並不會影響瀏覽者的瀏覽器顯示文件的方式。若要變更瀏覽器顯示字體的方式，必須使用「屬性」檢視窗或套用 CSS 規則來更改文字。

如需有關為新文件設定預設編碼方式的詳細資訊，請參閱「建立和開啟文件」。

自訂 Dreamweaver 反白標示顏色

使用「標示」偏好設定，自訂 Dreamweaver 用來識別範本區域、圖庫項目、協力廠商標籤、版面元素和程式碼的顏色。