3.2　設置文本格式

網頁中的文字主要包括標題、信息、文本鏈接等幾種主要形式。良好的文本格式，能夠充分體現文檔要表述的意圖，激發讀者的閱讀興趣。在文檔中構建豐富的字體、多種的段落格式以及賞心悅目的文本效果，是一個專業網站必不可少的要求之一。

3.2.1　設置文本屬性

文本的大部分格式設置都可以通過屬性面板實現。執行“窗口”|“屬性”命令，即可打開“屬性”面板。用鼠標指針選中要修飾的文字，此時在“屬性”面板上顯示的就是當前文字的屬性，如圖3-6所示。

1. HTML屬性

1）格式

在“屬性”面板上的“格式”下拉列表中選擇“段落”選項，即可以把選中的文本設置成段落格式。段落格式在Dreamweaver CC 2018的設計視圖中的效果如圖3-7所示。在瀏覽器中的效果如圖3-8所示。

“格式”下拉列表中的“標題1”到“標題6”分別表示各級標題，并應用于網頁的標題部分。其對應字體由大到小，同時文字全部加粗。應用“標題3”的文本效果如圖3-9所示。

2）ID

為所選內容分配一個ID。如果已聲明過ID，則該下拉列表中將列出文檔的所有未使用的已聲明ID。

3）類

選擇要應用于當前所選文本的樣式。如果沒有對所選內容應用過任何樣式，則顯示“無”。

　重命名：修改當前選定文本采用的樣式的名稱。

　附加樣式表：彈出“使用現有的CSS文件”對話框。

4）鏈接

創建所選文本的超文本鏈接。有關鏈接的設置方法，將在第6章進行講解。

5）其他屬性

　：將文本字體設置為粗體。

　：將文本字體設置為斜體。

　：項目列表。選擇需要建立列表的文本，并單擊該按鈕，即可建立無序列表。

　：編號列表，用于建立有序列表。

　：刪除內縮區塊，減少文本右縮進。

　：內縮區塊，增加文本右縮進。

　標題：為超級鏈接指定文本工具提示，即在瀏覽器中，當鼠標移到超級鏈接上時顯示的提示文本。

　目標：指定鏈接文件打開的方式。

　頁面屬性：單擊此按鈕彈出“頁面屬性”對話框，對頁面屬性進行設置。

　列表項目：列表項的屬性設置窗口。有關設置將在3.3.3節講解。

2. CSS屬性

單擊“屬性”面板上的按鈕，即可使用CSS規則格式化文本，如圖3-10所示。

　目標規則：顯示當前選中文本已應用的規則，也可以使用“目標規則”下拉菜單中的命令創建新的內聯樣式或將現有類應用于所選文本。有關CSS規則的創建和編輯，將在本書后續章節中進行介紹。

　編輯規則：單擊該按鈕可以打開目標規則的“CSS設計器”面板進行修改。

　CSS和設計器：單擊該按鈕可以打開“CSS設計器”面板，并在當前視圖中顯示目標規則的屬性。

　字體：設置目標規則的字體。

知識拓展

管理字體

如果字體列表中沒有需要的字體，可以單擊字體下拉列表中的“管理字體”命令，在彈出的“管理字體”對話框中的“自定義字體堆棧”選項卡中設置需要的字體列表，如圖3-11所示。

單擊按鈕添加字體堆棧，然后在“可用字體”列表中選中需要的字體后，單擊按鈕，即可將字體添加到字體列表中。

　大小：設置目標規則的字體大小。

　：設置目標規則中的字體顏色。

3.2.2　文本空格

要在文本中插入空格，可以直接按鍵盤上的空格鍵。

在Dreamweaver CC 2018之前的版本中，默認情況下，兩個字符之間只能包含一個空格，即使多次按下空格鍵也無濟于事。

若要在兩個字符之間添加空格，可以執行以下操作之一：

　單擊“HTML”插入面板中的“不換行空格”按鈕。

　執行“插入”|“HTML”|“不換行空格”命令。

　按Ctrl+Shift+Space組合鍵。

　在“代碼”視圖中需要插入空格的位置輸入“ ”。

Dreamweaver CC 2018默認允許輸入多個連續的空格，用戶可以根據需要，執行“編輯”/“首選項”命令，在“常規”分類中取消選中“允許多個連續的空格”復選框，禁用多個連續空格。

3.2.3　文本換行

在Dreamweaver CC 2018中，文本在一行結束的時候具有自動換行功能。如果要使文本強制換行，可以按鍵盤上的Enter鍵或者Shift+Enter快捷鍵來實現。

按Enter鍵，換行的行距較大，如圖3-12所示；按Shift+Enter快捷鍵，換行的行距比較小，如圖3-13所示。

在文檔窗口中，每輸入一段文字，按下Enter鍵后，就自動生成一個段落。按下Enter鍵的操作通常被稱作“硬回車”。如果要在段落中實現強制換行的同時不改變段落的結構，就要使用“HTML”插入面板中的換行符，或按下Shift+Enter組合鍵。

3.2.4　上機練習——美化網頁文本

練習目標

文本是網頁中不可缺少的元素，豐富合理的文本格式往往可以起到事半功倍的效果。本練習將對網頁文本進行美化，使讀者進一步掌握格式化文本的操作方法。

設計思路

首先打開一個需要美化文本的網頁，然后選中需要設置格式的文本，在“屬性”面板上設置文本的標題、大小和顏色，并對文本進行換行，便于閱讀，最終效果如圖3-14所示。

操作步驟

（1）打開文件。執行“文件”|“打開”命令，在彈出的“打開”對話框中選擇一個已創建頁面布局的文件，如圖3-15所示。

（2）輸入文本。刪除布局塊中的占位文本，將指針放置在布局塊中，輸入需要的文本。將指針放置在每一段文本的最前面，在“HTML”插入面板上單擊“不換行空格”兩次，如圖3-16所示。實現首行縮進，此時的頁面效果如圖3-17所示。

（3）設置標題文本格式。選中頁面上的標題文本“桃花心木”，在“屬性”面板上設置格式為“標題1”；然后切換到CSS屬性區域，設置字體為“華文行楷”，顏色為#FF6600，如圖3-18所示。此時的頁面效果如圖3-19所示。

（4）設置正文格式。選中左側的正文文本，在“屬性”面板上設置字體為“新宋體”，大小為14px，如圖3-20所示。同樣的方法，設置右側正文的格式，此時的頁面效果如圖3-21所示。

（5）設置文本的行距。單擊文檔工具欄上的“代碼”按鈕，切換到“代碼”視圖，在#left和#right的代碼區域添加如下代碼：

      line-height: 140%;

如圖3-22所示，#left為左側的布局塊的規則定義；#right為右側的布局塊的規則定義。此時的頁面效果如圖3-23所示。

（6）保存文件。執行“文件”|“保存”命令保存文件，然后在瀏覽器中預覽頁面，效果如圖3-14所示。