3.3 定义文本格式_Dreamweaver CC网页设计从入门到精通（微课精编版）-QQ阅读男生都市网

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

3.3 定义文本格式

文本格式类型实际上就是定义文本所包含的标签类型，该标签表示文本所代表的语义性。在文本【属性】面板中单击【格式】下拉列表框可以快速设置，包括段落格式、标题格式、预先格式化。如果在【格式】下拉列表框中选择【无】选项，可以取消格式操作，或者设置无格式文本。

3.3.1 实战演练：输入段落文本

段落格式就是设置所选文本为段落。在HTML源代码中是使用<p>标记来表示，段落文本默认格式是在段落文本上下边显示1行空白间距（约12px），其语法格式如下：

     <p>段落文本</p>

【操作步骤】

第1步，启动Dreamweaver CC，新建文档，保存为test.html。

第2步，在编辑窗口中，手动输入文本“《雨霖铃》”。

第3步，在【属性】面板中，在【格式】下拉列表框中选择【段落】选项，即可设置当前输入文本为段落格式，如图3.6所示。

图3.6 设置段落格式

技巧：在【设计】视图下，输入一些文字后，按Enter键，就会自动生成一个段落，这时也会自动应用段落格式，光标会自动换行，同时【格式】下拉列表框中显示为“段落”状态。

第4步，切换到【代码】视图下，可以直观比较段落文本和无格式文本的不同。

（1）输入文本回车前：

     <body>
     《雨霖铃》
     </body>

（2）输入文本回车后：

     <body>
     <p>《雨霖铃》</p>
     <p>&nbsp; </p>
     </body>

（3）输入文本后选择【段落】格式选项：

     <body>
     <p>《雨霖铃》
     </p>
     </body>

第5步，按Enter键换行显示，继续输入文本。以此操作类推，输入全部诗句。则生成的HTML代码如下，在【设计】视图下可以看到如图3.7所示的效果。

图3.7 应用段落格式

     <!doctype html>
     <html>
     <head>
     <meta charset="utf-8">
     <title></title>
     </head>
     <body>
     <p>《雨霖铃》 </p>
     <p>柳永</p>
     <p> 寒蝉凄切，对长亭晚，骤雨初歇。</p>
     <p>都门帐饮无绪，留恋处、兰舟催发。</p>
     <p>执手相看泪眼，竟无语凝噎。念去去、千里烟波，暮霭沉沉楚天阔。</p>
     <p>多情自古伤离别，更那堪冷落清秋节！</p>
     <p>今宵酒醒何处？</p>
     <p>杨柳岸、晓风残月。</p>
     <p>此去经年，应是良辰好景虚设。</p>
     <p>便纵有千种风情，更与何人说？ </p>
     </body>
     </html>

3.3.2 实战演练：定义标题文本

标题文本主要用于强调文本信息的重要性。在HTML语言中，定义了6级标题，分别用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>标记来表示，每级标题的字体大小依次递减，标题格式一般都加粗显示。

提示：实际上每级标题的字符大小并没有固定值，它是由浏览器所决定的，为标题定义的级别只决定了标题之间的重要程度，也可以设置各级标题的具体属性。在标题格式中，主要的属性是对齐属性，用于定义标题段落的对齐方式。

【操作步骤】

第1步，启动Dreamweaver CC，打开3.3.1节创建的网页文档test.html。下面将文档中的文本“《雨霖铃》”定义为一级标题居中显示，将文本“柳永”定义为二级标题居中显示。

第2步，在编辑窗口中拖选文本“《雨霖铃》”，在文本【属性】面板的【格式】下拉列表框中选择【标题1】选项。

第3步，选择【格式】｜【对齐】｜【居中对齐】命令，则会设置标题文本居中显示，如图3.8所示。

图3.8 设置标题格式

第4步，切换到【代码】视图下，可以看到生成的如下HTML代码：

     <h1 align="center">《雨霖铃》</h1>

第5步，把光标置于文本“柳永”中，在文本【属性】面板的【格式】下拉列表框中选择【标题2】选项，设置文本“柳永”为二级标题格式。

提示：在上面操作中，没有选中操作文本，这是因为段落格式和标题格式作用文本上光标插入点所在的一段，如果要将多段设置一个标题，可以同时选中。如果按Shift+Enter快捷键或者用<br>标记使文本换行，但上下行依然是一段，因此，标题格式和段落格式同样起作用。

第6步，选择【格式】｜【对齐】｜【居中对齐】命令，设置二级标题文本居中显示，如图3.9所示。

图3.9 设置标题格式效果

技巧：当设置标题格式后，按Enter键，Dreamweaver CC会自动在下一段中将文本恢复为段落文本格式，即取消了标题格式的应用。如果选择【编辑】｜【首选项】命令，在打开的【首选项】对话框中选择【常规】分类项，然后在右侧取消选中【标题后切换到普通段落】复选框。此时，如果在标题格式文本后按Enter键则依然保持标题格式。