如何在 Dreamweaver 中編輯 CSS 佈局中的樣式

在 Dreamweaver 中創建具有 CSS 佈局的新頁面後，您似乎有無數的編輯選項，但首先您必須確定樣式表中的哪些樣式與您要編輯的元素相對應。

正如您可能想像的那樣，您可以通過多種方式編輯 CSS 佈局中的樣式來創建您自己的設計。

在調整現有樣式以獲得所需的基本頁面設計後，您可以根據需要創建任意數量的其他樣式。

如何查看可用樣式並進行基本編輯

您可以將這些相同的基本說明用於 Dreamweaver 中包含的任何 CSS 佈局。要在 CSS 佈局中編輯樣式，請按照下列步驟操作：

打開基於 Dreamweaver CSS 佈局的頁面文件，然後選擇“窗口”→“CSS 樣式”（或單擊“CSS 設計器”選項卡以展開面板）。

CSS Designer 面板打開或展開。

單擊以在 CSS Designer 頂部的“源”面板中選擇樣式表的名稱。

與新頁面關聯的所有樣式都列在“選擇器”面板中。

選擇“CSS 設計器選擇器”面板中列出的任何樣式的名稱。

為樣式定義的相應 CSS 規則顯示在 CSS Designer 面板底部的“屬性”面板中。單擊樣式列表並查看其相應規則是快速了解設計並查看各種頁面格式選項的存儲位置的好方法。

HTML5 頁眉、.nav 和頁腳標記控制頁面的主要部分。例如，標題樣式包括使背景顏色變為綠色的規則。因此，要更改頁面頂部頁眉區域的顏色，請更改頁眉規則中的背景顏色設置。

如何編輯頁面範圍的設置

要編輯頁面範圍的設置——例如頁面的背景顏色或整個頁面使用的文本的主要字體、大小和顏色——請按照以下步驟操作：

在 CSS Designer Selectors 面板中，選擇名為 body 的樣式。

所選樣式規則中定義的屬性顯示在“屬性”面板中。

單擊“屬性”面板頂部的 T 圖標，然後更改或添加所需的字體和其他文本設置。

您可以更改字體、大小、樣式和粗細。要更改文本行之間的間距，請更改行高。

向下滾動到“屬性”面板的“背景”區域，並使用“背景顏色”字段中的顏色池來指定頁面整個背景的顏色。

或者，您可以在“背景顏色”字段中輸入任何十六進制顏色代碼或使用滴管對任何顏色進行採樣。要添加背景圖像，請單擊“背景”部分中的 URL 字段，然後單擊出現的“瀏覽”按鈕並選擇要用作背景的圖像。使用背景-重複圖標指定背景圖像在頁面上的重複方式。

對樣式規則進行任何其他更改或添加。

對“屬性”面板中樣式規則的更改會自動保存並應用於使用規則格式化的內容。

如何自定義內容區域

要更改控制頁面整體大小以及頁眉、頁腳和側邊欄的主要內容區域的寬度或其他設置，請執行以下步驟：

要更改整個主設計區域的寬度：

單擊“CSS 設計器”面板的“選擇器”面板中的 .container 樣式。

.container 樣式規則的屬性顯示在“屬性”面板中，您還可以在其中編輯樣式。

更改寬度字段中的大小或為所需的頁面寬度鍵入一個新數字。

頁面設計的寬度會根據您輸入的大小自動更改。當你改變 .container 樣式的寬度時，你改變了整個設計的寬度，因為所有的

標籤和其他元素包含在

用 .container 樣式格式化 - 它們都設置為擴展以填充 .container

.

要更改頁面內容區域的大小，請選擇名為 .content 的樣式並在“屬性”面板中指定所需的大小和其他選項。

如果在包含側邊欄的佈局中更改內容區域的寬度，則也必須更改側邊欄的寬度。

要更改頁面上任何樣式的背景顏色，請單擊相應樣式的名稱並更改“屬性”面板的“背景”部分中的設置。

例如，在 Dreamweaver 的 CSS 佈局中，側邊欄以名為 .sidebar1 的樣式定義。因此，要更改背景顏色，您可以單擊“選擇器”面板中的 .sidebar1，在“屬性”面板中選擇“背景”類別，然後選擇所需的顏色。同樣，要更改標題的背景顏色，請在“選擇器”面板中選擇名為標題的樣式並使用該顏色。

要將圖像添加到標題：

選擇標有“插入徽標”的佔位符圖像，然後按 Delete 或 Backspace 鍵。

選擇插入→圖像→圖像並使用選擇圖像源對話框選擇圖像。

在側邊欄和主要內容區域替換文本和插入圖像。

您可以在從 CSS 佈局創建的任何頁面中添加或替換文本和插入圖像，就像在任何其他網頁中一樣。

選擇文件→全部保存以保存頁面和样式。