3.6 设置段落样式_Dreamweaver CC网页设计从入门到精通（微课精编版）-QQ阅读女生中文现言网

上QQ阅读APP看书，第一时间看更新

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 强制换行后的段落文本效果

提示：在使用强制换行时，上下行之间依然是一个段落，同受一个段落格式的影响。如果希望为不同行应用不同样式，这种方式就显得不是很妥当。同时在标准设计中不建议大量使用强制换行。在HTML代码中一般使用<br>标记强制换行，该标记是一个非封闭类型的标记。

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>