3.6 设置段落样式

段落在页面版式设置中占有重要的地位。段落所包含的设计因素也比较多，如文本缩进、行距、段距、首行缩进、列表等，下面以示例形式逐一进行介绍。

3.6.1 实战演练：强制换行

Dreamweaver CC与Word一样，按Enter键即可创建一个新的段落，但网页浏览器一般会自动在段落之间增加一行段距，因此网页中的段落间距可能会比较大，有时会影响页面效果，使用强制换行命令可以避免这种问题。

【操作步骤】

第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，按F12键预览，则默认显示效果如图3.32所示。整个文档包含一个一级标题、一个二级标题和一段文本，代码如下：

图3.32 备用页面初始化效果

第2步，另存网页为test1.html，现在定制段落文本多行显示，设计页面左侧是诗词正文，右侧是标题的版式效果。

第3步，把光标置于段落文本的第一句话末尾。选择【插入】｜【字符】｜【换行符】命令，或者按Shift+Enter快捷键换行文本，如图3.33所示。

图3.33 强制换行

第4步，以相同方法为每句话进行强制换行显示，最后保存文档，按F12键在浏览器中预览，则显示效果如图3.34所示。

图3.34 强制换行后的段落文本效果

3.6.2 实战演练：定义文本对齐

文本对齐方式是指文本行相对文档窗口或者浏览器窗口在水平位置上的对齐方式，共包括4种方式：左对齐、居中对齐、右对齐和两端对齐。

【操作步骤】

第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，按F12键预览，则默认显示效果如图3.35所示。整个文档包含一个一级标题、一个二级标题和四段文本。

图3.35 备用页面初始化效果

第2步，另存网页为test1.html。在编辑窗口中选中一级标题文本，在【属性】面板中切换到【CSS】选项卡，单击【居中对齐】按钮，让标题居中显示，如图3.36所示。

图3.36 定义一级标题居中显示

第3步，以同样的方式设置二级标题居中显示，第1段文本左对齐，第2段文本居中对齐，第3段文本右对齐，第4段文本两端对齐，如图3.37所示。

图3.37 定义标题和段落文本对齐显示

第4步，切换到【代码】视图，可以看到Dreamweaver自动生成的样式代码如下所示，在浏览器中预览效果如图3.38所示。

     <h1 style="text-align: center">清平乐</h1>
     <h2 style="text-align: center">晏殊</h2>
     <p class="left">金风细细，叶叶梧桐坠。</p>
     <p class="center" style="text-align: center">绿酒初尝人易醉，一枕小窗浓睡。</p>
     <p class="right" style="text-align: right">紫薇朱槿花残，斜阳却照阑干。</p>
     <p class="justify" style="text-align: justify">双燕欲归时节，银屏昨夜微寒。</p>

图3.38 文本对齐显示效果

3.6.3 实战演练：定义文本缩进

根据排版需要，有时为了强调文本或者表示文本引用等特殊用途，会用到段落缩进或者凸出版式。缩进和凸出主要是相对于文档窗口（或浏览器）左端而言。

缩进和凸出可以嵌套，即在文本【属性】面板中可以连续单击【缩进】按钮或【凸出】按钮应用多次缩进或凸出。当文本无缩进时，【凸出】按钮将不能正常作用，凸出也将无效果。

【操作步骤】

第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。

第2步，在编辑窗口中选中二级标题文本，在【属性】面板中切换到【HTML】选项卡，单击【缩进】按钮，让二级标题缩进显示。

第3步，选中第一段文本，在【属性】面板中连续单击两次【缩进】按钮，让第一段文本缩进两次显示。

第4步，选中第二段文本，在【属性】面板中连续单击3次【缩进】按钮，让第二段文本缩进3次显示。

第5步，选中第三段文本，在【属性】面板中连续单击4次【缩进】按钮，让第三段文本缩进4次显示。

第6步，选中第四段文本，在【属性】面板中连续单击5次【缩进】按钮，让第四段文本缩进5次显示，如图3.39所示。

图3.39 定义文本缩进显示

第7步，在【代码】视图下，自动生成的HTML代码如下所示，在浏览器中预览效果如图3.40所示。

图3.40 缩进文本显示效果

【拓展】

<blockquote>标记表示块状文本引用的意思，它可以通过cite属性来指向一个URL，用于表明引用出处。例如：