3.6 設(shè)置段落樣式

段落在頁面版式設(shè)置中占有重要的地位。段落所包含的設(shè)計因素也比較多，如文本縮進(jìn)、行距、段距、首行縮進(jìn)、列表等，下面以示例形式逐一進(jìn)行介紹。

3.6.1 實戰(zhàn)演練：強(qiáng)制換行

Dreamweaver CC與Word一樣，按Enter鍵即可創(chuàng)建一個新的段落，但網(wǎng)頁瀏覽器一般會自動在段落之間增加一行段距，因此網(wǎng)頁中的段落間距可能會比較大，有時會影響頁面效果，使用強(qiáng)制換行命令可以避免這種問題。

【操作步驟】

第1步，啟動Dreamweaver CC，打開本小節(jié)備用練習(xí)文檔test.html，按F12鍵預(yù)覽，則默認(rèn)顯示效果如圖3.32所示。整個文檔包含一個一級標(biāo)題、一個二級標(biāo)題和一段文本，代碼如下：

圖3.32 備用頁面初始化效果

第2步，另存網(wǎng)頁為test1.html，現(xiàn)在定制段落文本多行顯示，設(shè)計頁面左側(cè)是詩詞正文，右側(cè)是標(biāo)題的版式效果。

第3步，把光標(biāo)置于段落文本的第一句話末尾。選擇【插入】｜【字符】｜【換行符】命令，或者按Shift+Enter快捷鍵換行文本，如圖3.33所示。

圖3.33 強(qiáng)制換行

第4步，以相同方法為每句話進(jìn)行強(qiáng)制換行顯示，最后保存文檔，按F12鍵在瀏覽器中預(yù)覽，則顯示效果如圖3.34所示。

圖3.34 強(qiáng)制換行后的段落文本效果

3.6.2 實戰(zhàn)演練：定義文本對齊

文本對齊方式是指文本行相對文檔窗口或者瀏覽器窗口在水平位置上的對齊方式，共包括4種方式：左對齊、居中對齊、右對齊和兩端對齊。

【操作步驟】

第1步，啟動Dreamweaver CC，打開本小節(jié)備用練習(xí)文檔test.html，按F12鍵預(yù)覽，則默認(rèn)顯示效果如圖3.35所示。整個文檔包含一個一級標(biāo)題、一個二級標(biāo)題和四段文本。

圖3.35 備用頁面初始化效果

第2步，另存網(wǎng)頁為test1.html。在編輯窗口中選中一級標(biāo)題文本，在【屬性】面板中切換到【CSS】選項卡，單擊【居中對齊】按鈕，讓標(biāo)題居中顯示，如圖3.36所示。

圖3.36 定義一級標(biāo)題居中顯示

第3步，以同樣的方式設(shè)置二級標(biāo)題居中顯示，第1段文本左對齊，第2段文本居中對齊，第3段文本右對齊，第4段文本兩端對齊，如圖3.37所示。

圖3.37 定義標(biāo)題和段落文本對齊顯示

第4步，切換到【代碼】視圖，可以看到Dreamweaver自動生成的樣式代碼如下所示，在瀏覽器中預(yù)覽效果如圖3.38所示。

     <h1 style="text-align: center">清平樂</h1>
     <h2 style="text-align: center">晏殊</h2>
     <p class="left">金風(fēng)細(xì)細(xì)，葉葉梧桐墜。</p>
     <p class="center" style="text-align: center">綠酒初嘗人易醉，一枕小窗濃睡。</p>
     <p class="right" style="text-align: right">紫薇朱槿花殘，斜陽卻照闌干。</p>
     <p class="justify" style="text-align: justify">雙燕欲歸時節(jié)，銀屏昨夜微寒。</p>

圖3.38 文本對齊顯示效果

3.6.3 實戰(zhàn)演練：定義文本縮進(jìn)

根據(jù)排版需要，有時為了強(qiáng)調(diào)文本或者表示文本引用等特殊用途，會用到段落縮進(jìn)或者凸出版式。縮進(jìn)和凸出主要是相對于文檔窗口（或瀏覽器）左端而言。

縮進(jìn)和凸出可以嵌套，即在文本【屬性】面板中可以連續(xù)單擊【縮進(jìn)】按鈕或【凸出】按鈕應(yīng)用多次縮進(jìn)或凸出。當(dāng)文本無縮進(jìn)時，【凸出】按鈕將不能正常作用，凸出也將無效果。

【操作步驟】

第1步，啟動Dreamweaver CC，打開本小節(jié)備用練習(xí)文檔test.html，另存為test1.html。

第2步，在編輯窗口中選中二級標(biāo)題文本，在【屬性】面板中切換到【HTML】選項卡，單擊【縮進(jìn)】按鈕，讓二級標(biāo)題縮進(jìn)顯示。

第3步，選中第一段文本，在【屬性】面板中連續(xù)單擊兩次【縮進(jìn)】按鈕，讓第一段文本縮進(jìn)兩次顯示。

第4步，選中第二段文本，在【屬性】面板中連續(xù)單擊3次【縮進(jìn)】按鈕，讓第二段文本縮進(jìn)3次顯示。

第5步，選中第三段文本，在【屬性】面板中連續(xù)單擊4次【縮進(jìn)】按鈕，讓第三段文本縮進(jìn)4次顯示。

第6步，選中第四段文本，在【屬性】面板中連續(xù)單擊5次【縮進(jìn)】按鈕，讓第四段文本縮進(jìn)5次顯示，如圖3.39所示。

圖3.39 定義文本縮進(jìn)顯示

第7步，在【代碼】視圖下，自動生成的HTML代碼如下所示，在瀏覽器中預(yù)覽效果如圖3.40所示。

圖3.40 縮進(jìn)文本顯示效果

【拓展】

<blockquote>標(biāo)記表示塊狀文本引用的意思，它可以通過cite屬性來指向一個URL，用于表明引用出處。例如：