2.3 定义文本格式
文本格式类型实际上就是定义文本所包含的标记类型，该标记表示文本所代表的语义性。在文本属性面板中单击【格式】下拉列表可以快速设置，包括段落格式、标题格式、预先格式化。如果在【格式】下拉列表中选择【无】选项，可以取消格式操作，或者设置无格式文本。
2.3.1 实战演练：设置段落文本
视频讲解
段落格式就是设置所选文本为段落。在HTML源代码中是使用<p>标记来表示，段落文本默认格式是在段落文本上下边显示1行空白间距（约12px），其语法格式为：
<p>段落文本</p>
【操作步骤】
第1步，启动Dreamweaver CC，新建文档，保存为test.html。
第2步，在编辑窗口中，手动输入文本“《雨霖铃》”。
第3步，在属性面板中单击【格式】右侧向下箭头，在弹出的下拉列表中选择【段落】选项，即可设置当前输入文本为段落格式，如图2.6所示。
图2.6 设置段落格式
【技巧】
在【设计】视图下，输入一些文字后，按Enter键，就会自动生成一个段落，这时也会自动应用段落格式，光标会自动换行，同时【格式】下拉列表中显示为“段落”状态。
第4步，切换到【代码】视图下，可以直观比较段落文本和无格式文本的不同。
（1）输入文本，按Enter键前：
<body>
《雨霖铃》
</body>
（2）输入文本，按Enter键后：
<body>
<p>《雨霖铃》</p>
<p> </p>
</body>
（3）输入文本后，选择【段落】格式选项：
<body>
<p>《雨霖铃》
</p>
</body>
第5步，按Enter键换行显示，继续输入文本。以此类推，输入全部诗句。在【设计】视图下可以看到如图2.7所示的效果，生成的HTML代码如下所示。
图2.7 应用段落格式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>《雨霖铃》 </p>
<p>柳永</p>
<p> 寒蝉凄切，对长亭晚，骤雨初歇。</p>
<p>都门帐饮无绪，留恋处、兰舟催发。</p>
<p>执手相看泪眼，竟无语凝噎。念去去、千里烟波，暮霭沉沉楚天阔。</p>
<p>多情自古伤离别，更那堪，冷落清秋节！</p>
<p>今宵酒醒何处？</p>
<p>杨柳岸、晓风残月。</p>
<p>此去经年，应是良辰好景虚设。</p>
<p>便纵有千种风情，更与何人说？ </p>
</body>
</html>
2.3.2 实战演练：设置标题文本
视频讲解
标题文本主要用于强调文本信息的重要性。在HTML中，定义了6级标题，分别用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>标记来表示，每级标题的字体大小依次递减，标题格式一般都加粗显示。
【操作步骤】
第1步，启动Dreamweaver CC，打开2.3.1节创建的网页文档test.html。下面将文档中的文本“《雨霖铃》”定义为1级标题居中显示，将文本“柳永”定义为2级标题居中显示。
第2步，在编辑窗口中拖选文本“《雨霖铃》”，在文本属性面板的【格式】下拉列表中选择【标题1】选项。
第3步，选择【格式】|【对齐】|【居中对齐】命令，则会设置标题文本居中显示，如图2.8所示。
图2.8 设置标题格式
第4步，切换到【代码】视图下，可以看到生成如下的HTML代码：
<h1 align="center">《雨霖铃》</h1>
第5步，把光标置于文本“柳永”中，在文本属性面板的【格式】下拉列表中选择【标题2】选项，设置文本“柳永”为二级标题格式。
提示：在上面的操作中，没有选中操作文本，这是因为段落格式和标题格式作用文本上光标插入点所在的一段，如果要将多段设置一个标题，可以同时选中。如果按Shift+Enter快捷键或者用<br>标记使文本换行，但上下行依然是一段，因此，标题格式和段落格式同样起作用。
第6步，选择【格式】|【对齐】|【居中对齐】命令，设置二级标题文本居中显示，如图2.9所示。
图2.9 设置标题格式效果
【技巧】
当设置标题格式后，按Enter键，Dreamweaver CC会自动在下一段中将文本恢复为段落文本格式，即取消了标题格式的应用。如果选择【编辑】|【首选项】命令，在打开的【首选项】对话框中选择【常规】分类项，然后在右侧取消选中【标题后切换到普通段落】复选框。此时，如果在标题格式文本后按Enter键，则依然保持标题格式。
2.3.3 实战演练：设置预定义文本
视频讲解
预定义格式在显示时能够保留文本间的空格符，如空格、制表符和换行符。在正常情况下浏览器会忽略这些空格符。一般使用预定义格式可以定义代码显示，确保代码能够按输入时的格式效果正常显示。
【操作步骤】
第1步，启动Dreamweaver CC，新建文档，保存为test.html。
第2步，在编辑窗口内单击，把当前光标置于编辑窗口内。
第3步，在属性面板中单击【格式】右侧向下箭头，在弹出的下拉列表中选择【预先格式化的】选项。
第4步，在编辑窗口中输入如下CSS样式代码，在【设计】视图下，用户会看到输入的代码文本格式，如图2.10所示。
图2.10 正常状态输入格式化代码
<style type="css/text">
h1{
text-align:center;
font-size:24px;
color:red;
}
</style>
上面的样式代码定义一级标题文本居中显示，字体大小为24像素，字体颜色为红色。
第5步，按Ctrl+S快捷键保存文档，按F12键浏览效果，在浏览器中可以看到原来输入的代码依然按原输入格式显示，如图2.11所示。
图2.11 在浏览器中预览预定义格式效果
第6步，切换到【代码】视图下，则显示代码如下：
<pre>
<style type="css/text">
h1{
text-align:center;
font-size:24px;
color:red;
}
</style>
</pre>
提示：预定义格式的标记为<pre>，在该标记中可以输入制表符和换行符，这些特殊符号都会包括在<pre>标记之中。
第7步，把test.html另存为test1.html，在【代码】视图下把<pre>标记改为<p>标记，即把预定义格式转换为段落格式，则显示效果如图2.12所示。
图2.12 以段落格式显示格式代码效果