3.2 设置文本格式
网页中的文字主要包括标题、信息、文本链接等几种主要形式。良好的文本格式，能够充分体现文档要表述的意图，激发读者的阅读兴趣。在文档中构建丰富的字体、多种的段落格式以及赏心悦目的文本效果，是一个专业网站必不可少的要求之一。
3.2.1 设置文本属性
文本的大部分格式设置都可以通过属性面板实现。执行“窗口”|“属性”命令，即可打开“属性”面板。用鼠标指针选中要修饰的文字，此时在“属性”面板上显示的就是当前文字的属性，如图3-6所示。
图3-6 “属性”面板
1. HTML属性
1）格式
在“属性”面板上的“格式”下拉列表中选择“段落”选项，即可以把选中的文本设置成段落格式。段落格式在Dreamweaver CC 2018的设计视图中的效果如图3-7所示。在浏览器中的效果如图3-8所示。
图3-7 选中文本设置段落的效果
图3-8 段落在浏览器中的效果
“格式”下拉列表中的“标题1”到“标题6”分别表示各级标题，并应用于网页的标题部分。其对应字体由大到小，同时文字全部加粗。应用“标题3”的文本效果如图3-9所示。
图3-9 设置“标题3”在设计视图和在浏览器中的效果
教你一招：在“代码”视图中，使用“标题1”时，文字两端使用<h1></h1>标记；使用“标题2”时，文字两端使用<h2></h2>标记，依次类推。手动删除这些标记，文字的样式随即消失。
2）ID
为所选内容分配一个ID。如果已声明过ID，则该下拉列表中将列出文档的所有未使用的已声明ID。
3）类
选择要应用于当前所选文本的样式。如果没有对所选内容应用过任何样式，则显示“无”。
重命名：修改当前选定文本采用的样式的名称。
附加样式表：弹出“使用现有的CSS文件”对话框。
4）链接
创建所选文本的超文本链接。有关链接的设置方法，将在第6章进行讲解。
5）其他属性
：将文本字体设置为粗体。
：将文本字体设置为斜体。
：项目列表。选择需要建立列表的文本，并单击该按钮，即可建立无序列表。
：编号列表，用于建立有序列表。
：删除内缩区块，减少文本右缩进。
：内缩区块，增加文本右缩进。
标题：为超级链接指定文本工具提示，即在浏览器中，当鼠标移到超级链接上时显示的提示文本。
目标：指定链接文件打开的方式。
页面属性：单击此按钮弹出“页面属性”对话框，对页面属性进行设置。
列表项目：列表项的属性设置窗口。有关设置将在3.3.3节讲解。
2. CSS属性
单击“属性”面板上的
按钮，即可使用CSS规则格式化文本，如图3-10所示。
图3-10 CSS规则属性
目标规则：显示当前选中文本已应用的规则，也可以使用“目标规则”下拉菜单中的命令创建新的内联样式或将现有类应用于所选文本。有关CSS规则的创建和编辑，将在本书后续章节中进行介绍。
提示：在创建CSS内联样式时，Dreamweaver CC 2018会将样式属性代码直接添加到页面的body部分。
编辑规则：单击该按钮可以打开目标规则的“CSS设计器”面板进行修改。
CSS和设计器：单击该按钮可以打开“CSS设计器”面板，并在当前视图中显示目标规则的属性。
字体：设置目标规则的字体。
知识拓展
管理字体
如果字体列表中没有需要的字体，可以单击字体下拉列表中的“管理字体”命令，在弹出的“管理字体”对话框中的“自定义字体堆栈”选项卡中设置需要的字体列表，如图3-11所示。
图3-11 “管理字体”对话框
单击
按钮添加字体堆栈，然后在“可用字体”列表中选中需要的字体后，单击
按钮，即可将字体添加到字体列表中。
大小：设置目标规则的字体大小。
：设置目标规则中的字体颜色。
注意：“字体”“大小”“颜色”“字体样式”“字体粗细”“对齐”属性始终显示应用于“文档”窗口中当前所选内容的规则的属性。更改其中的任何属性，将会影响目标规则。
3.2.2 文本空格
要在文本中插入空格，可以直接按键盘上的空格键。
在Dreamweaver CC 2018之前的版本中，默认情况下，两个字符之间只能包含一个空格，即使多次按下空格键也无济于事。
若要在两个字符之间添加空格，可以执行以下操作之一：
单击“HTML”插入面板中的“不换行空格”按钮
。
执行“插入”|“HTML”|“不换行空格”命令。
按Ctrl+Shift+Space组合键。
在“代码”视图中需要插入空格的位置输入“ ”。
Dreamweaver CC 2018默认允许输入多个连续的空格，用户可以根据需要，执行“编辑”/“首选项”命令，在“常规”分类中取消选中“允许多个连续的空格”复选框，禁用多个连续空格。
3.2.3 文本换行
在Dreamweaver CC 2018中，文本在一行结束的时候具有自动换行功能。如果要使文本强制换行，可以按键盘上的Enter键或者Shift+Enter快捷键来实现。
按Enter键，换行的行距较大，如图3-12所示；按Shift+Enter快捷键，换行的行距比较小，如图3-13所示。
图3-12 按Enter键换行
图3-13 按Shift+Enter键换行
在文档窗口中，每输入一段文字，按下Enter键后，就自动生成一个段落。按下Enter键的操作通常被称作“硬回车”。如果要在段落中实现强制换行的同时不改变段落的结构，就要使用“HTML”插入面板中的换行符
，或按下Shift+Enter组合键。
3.2.4 上机练习——美化网页文本
3-2 上机练习——美化网页文本
练习目标
文本是网页中不可缺少的元素，丰富合理的文本格式往往可以起到事半功倍的效果。本练习将对网页文本进行美化，使读者进一步掌握格式化文本的操作方法。
设计思路
首先打开一个需要美化文本的网页，然后选中需要设置格式的文本，在“属性”面板上设置文本的标题、大小和颜色，并对文本进行换行，便于阅读，最终效果如图3-14所示。
图3-14 页面最终效果
操作步骤
（1）打开文件。执行“文件”|“打开”命令，在弹出的“打开”对话框中选择一个已创建页面布局的文件，如图3-15所示。
（2）输入文本。删除布局块中的占位文本，将指针放置在布局块中，输入需要的文本。将指针放置在每一段文本的最前面，在“HTML”插入面板上单击“不换行空格”两次，如图3-16所示。实现首行缩进，此时的页面效果如图3-17所示。
图3-15 页面布局
图3-16 插入“不换行空格”
图3-17 添加文本的效果
（3）设置标题文本格式。选中页面上的标题文本“桃花心木”，在“属性”面板上设置格式为“标题1”；然后切换到CSS属性区域，设置字体为“华文行楷”，颜色为#FF6600，如图3-18所示。此时的页面效果如图3-19所示。
图3-18 设置标题文本格式
图3-19 设置格式的标题文本效果
（4）设置正文格式。选中左侧的正文文本，在“属性”面板上设置字体为“新宋体”，大小为14px，如图3-20所示。同样的方法，设置右侧正文的格式，此时的页面效果如图3-21所示。
图3-20 设置正文“属性”
图3-21 设置格式后的正文文本效果
（5）设置文本的行距。单击文档工具栏上的“代码”按钮，切换到“代码”视图，在#left和#right的代码区域添加如下代码：
line-height: 140%;
如图3-22所示，#left为左侧的布局块的规则定义；#right为右侧的布局块的规则定义。此时的页面效果如图3-23所示。
图3-22 设置行距
图3-23 页面效果
（6）保存文件。执行“文件”|“保存”命令保存文件，然后在浏览器中预览页面，效果如图3-14所示。