開啟屬性檢查器 (視窗 > 屬性),如果尚未開啟,請選取面板左上角的 CSS 選項。
了解如何在 Dreamweaver 中使用文字「屬性」檢視窗,套用 HTML 格式或 CSS 格式。
您 可以使用文字屬性檢查器來套用 HTML 格式或 階層樣式表 (CSS) 格式。當您套用 HTML 格式時, Dreamweaver 會將屬性新增至您頁面 正文中的 HTML 程式碼。當您套用 CSS 格式時,Dreamweaver 會將屬性 寫入文件標頭或個別的樣式表中。
當您建立 CSS 行內樣式時,Dreamweaver 會將樣式屬性程式碼直接新增到頁面內文。
關於格式化文字 (CSS 與 HTML)
在 Dreamweaver 中格式化文字 類似於使用標準文書處理器。您可以為文字區塊設定預設格式樣式 (段落、 標題 1、標題 2 等等)、變更 字型、大小、色彩和選取文字的對齊方式,或套用文字 樣式,例如粗體、斜體、程式碼 (等寬) 和底線。
Dreamweaver 有兩個屬性檢查器,整合為一個: CSS 屬性檢查器和 HTML 屬性檢查器。當 您使用 CSS 屬性檢查器時,Dreamweaver 會使用階層樣式表 (CSS) 來格式化 文字。 CSS 讓網頁設計人員和開發人員能夠更好地控制網頁設計,同時提供更佳的無障礙功能並縮減檔案大小。CSS 屬性檢查器可讓您存取 現有樣式,以及建立新樣式。
使用 CSS 是控制網頁樣式的方法, 不會影響其結構。透過將視覺設計元素 (字型、色彩、邊界等等) 從網頁的結構邏輯中分離, CSS 讓網頁設計人員獲得視覺和印刷控制權, 同時不會犧牲內容的完整性。此外,在單一、明確的 程式碼區塊中定義印刷設計和頁面配置,而不必求助於影像地圖、字型標記、 表格和間隔符號 GIF,可讓下載更快、簡化 網站維護,並提供控制 多個網頁設計屬性的中央點。
您可以將使用 CSS 建立的樣式直接儲存在文件中, 或者為了更強大的功能和彈性,您可以將樣式儲存在外部 樣式表中。如果您將外部樣式表附加到數個網頁 上,所有頁面都會自動反映您對 樣式表所做的任何變更。若要存取頁面的所有 CSS 規則,請使用「CSS 樣式」面板 (「視窗」>「CSS 樣式」)。若要存取 套用至目前選取範圍的規則,請使用 CSS 樣式面板 (目前 模式) 或 CSS 屬性檢查器中的「目標規則」快顯選單。
如果您偏好,您可以使用 HTML 標記來格式化網頁中的文字。若要使用 HTML 標記而不是 CSS,請使用 HTML 屬性檢查器來格式化您的文字。
您可以將 CSS 和 HTML 3.2 格式化合併於同一個頁面內使用。 格式化會以階層方式進行套用:HTML 3.2 格式化會覆寫由外部 CSS 樣式表所套用的格式化,而文件內嵌的 CSS 會覆寫外部 CSS。
在屬性 檢查器中編輯 CSS 規則
- 將插入點放置在已由您要編輯的規則 格式化的文字區塊內。該規則 會顯示在「目標規則」快顯選單中。
- 從「目標規則」彈出式選單中,選取要編輯的規則。
- 按一下「編輯規則」。
目標規則
您要編輯的規則是否在「CSS 屬性」檢視窗中? 當您將現有樣式套用到文字時,當您按一下頁面上文字內部時,會出現影響文字格式的規則。您也可以使用「目標規則」快顯選單來建立新的 CSS 規則、新的內嵌樣式,或將現有的類別套用到選取的文字。如果您要建立新規則,則需要完成「新增 CSS 規則」對話框。如需詳細資訊,請參閱本主題結尾的連結。
編輯規則
開啟目標規則的「CSS 規則定義」對話框。如果您從「目標規則」快顯選單中選取「新增 CSS 規則」並按一下「編輯規則」按鈕,Dreamweaver 會開啟「新增 CSS 規則定義」對話框。
CSS 設計工具
開啟「CSS 設計工具」面板,並在「目前」檢視中顯示目標規則的屬性。
字體
變更目標規則的字體。
大小
設定目標規則的字體大小。
文字顏色
將選定的顏色設定為目標規則中的字體顏色。 按一下色彩方塊選取網頁安全色彩,或在相鄰的文字欄位中輸入十六進位值 (例如 #BB5153)。
粗體
將粗體屬性加入至目標規則。
斜體
將斜體屬性加入至目標規則。
靠左對齊、置中對齊和靠右對齊
將目標規則對齊左側、中央或右側。
「字體」、「大小」、「文字顏色」、「粗體」、「斜體」和「對齊」屬性總是會顯示套用至「文件」視窗中目前選取範圍之規則的屬性。 只要變更這些屬性的任一項,都會影響目標規則。
使用「屬性」檢視窗編輯文字顏色
如果您尚未對文字套用任何特定規則,您可以直接從「屬性」檢視窗編輯文字的顏色。 在以下範例中,請注意文字在編輯之前的顏色。 檢色器旁邊的欄位顯示白色,表示您放置游標處的文字色彩。
若要編輯文字的顏色,請選取您想要編輯的文字。 按一下檢色器,然後選取任何您要的顏色。 請參閱下列影像,屬性檢查器顯示新色彩。
在屬性檢查器中設定 HTML 格式
選取您要格式化的文字。
格式
會設定選取文字的段落樣式。 「段落」會套用 <p> 標記的預設格式,「標題 1」會新增 H1 標記,依此類推。
ID
為您的選取範圍指派 ID。 ID 快顯選單(如果適用)會列出文件中所有未使用的已宣告 ID。
類別
顯示目前套用至選取文字的分類樣式。如果選取範圍沒有套用任何樣式,快顯選單會顯示「無 CSS 樣式」。如果選取範圍套用了多種樣式,選單會是空白的。
使用「樣式」選單執行下列任一項操作:
選取您要套用至選取範圍的樣式。
選取「無」以移除目前選取的樣式。
選取「重新命名」以重新命名樣式。
選取「附加樣式表」以開啟對話框,讓您將外部樣式表附加至頁面。
粗體
根據「偏好設定」對話框「一般」類別中設定的樣式偏好設定,將 <b> 或 <strong> 套用至選取的文字。
斜體
根據「偏好設定」對話框「一般」類別中設定的樣式偏好設定,將 <i> 或 <em> 套用至選取的文字。
項目清單
會建立選取文字的項目清單。 如果沒有選取文字,會開始新的項目符號清單。
編號清單
會建立選取文字的編號清單。 如果沒有選取文字,會開始新的編號清單。
區塊引言與移除區塊引言
透過套用或移除 blockquote 標記來縮排選取的文字或移除縮排。在清單中,縮排會建立巢狀清單,而移除縮排會取消巢狀清單。
連結
會建立選取文字的超連結。 按一下資料夾圖示以瀏覽至網站中的檔案;輸入 URL;將指向檔案圖示拖曳至「檔案」面板中的檔案;或將檔案從「檔案」面板拖曳至方塊中。
標題
指定超文字連結的文字工具提示。
目標
指定載入連結文件的框架或視窗:
_blank 會在新的未命名瀏覽器視窗中載入連結檔案。
_parent 會在包含連結之框架的主版框架組或視窗中載入連結檔案。如果包含連結的框架未巢狀化,連結檔案會載入至完整的瀏覽器視窗。
_self 會在與連結相同的框架或視窗中載入連結檔案。此 Target 為隱含目標,因此您通常不需要指定它。
_top 會在完整瀏覽器視窗中載入連結檔案,因而移除所有框架。
從 HTML 屬性檢視窗重新命名分類
Dreamweaver 會在 HTML 屬性檢視窗的「分類」選單中顯示頁面可用的所有分類。您可以選取分類樣式清單結尾的「重新命名」選項來重新命名此清單中的樣式。
從「屬性檢視窗」面板中,選取「類別」下拉式清單。
從彈出的清單中,選取清單末端的「重新命名」。
從「重新命名樣式」彈出式選單中選取您要重新命名的樣式。