3.2 文本属性

在制作网页时，应用最多的元素就是文本，文本有很多种，如文字、特殊符号、日期等。在网页中添加文本之后，需要对文本的大小、颜色等属性进行设置，以便网页更加美观。

3.2.1 课堂案例——百货公司

3-2-1　百货公司

案例学习目标：学习设置网页中的文字样式。

案例知识要点：使用CSS样式改变文本大小、颜色、字体等样式。

素材所在位置：案例素材/ch03/课堂案例——百货公司。

案例效果如图3-34所示。

图3-34

以素材“课堂案例——百货公司”为本地站点文件夹，创建名称为“百货公司”的站点。

1. 设置导航条样式

① 在【文件】面板中，双击打开index.html文件，如图3-35所示。

图3-35

② 将光标置于图3-36所示的“此处显示导航内容”文字位置，删除该文字，依次输入文字“关于我们”“公司动态”“产品中心”“联系我们”。再将光标置入右边，分别键入文字“最近动态”“最新产品”，效果如图3-37所示。

图3-36

图3-37

③ 选择菜单【窗口】|【CSS设计器】，打开【CSS设计器】面板，如图3-38所示。选择【选择器】中的.nav-in样式，取消勾选【显示集】，单击【文本】按钮，如图3-39所示。

图3-38

图3-39

④ 在【font-size】下拉文本框中输入20px，在【color】文本框中输入#C5EDFF，在【font-style】下拉选项中选择italic，在【font-weight】下拉选项中选择bold，如图3-40所示。

图3-40

2. 设置文本样式

① 选中【CSS设计器】面板中【选择器】部分的#biaoti1样式，如图3-41所示，在【font-family】下拉文本框中选择“微软雅黑”，在【font-size】下拉文本框中输入16px，在【color】文本框中输入#2885BE。

图3-41

② 选中【CSS设计器】面板中【选择器】部分的#biaoti2样式，如图3-42所示，在【font-family】下拉文本框中选择“微软雅黑”，在【font-size】下拉文本框中输入20px，在【color】文本框中输入#DB9809。设置完的文字效果如图3-43所示。

图3-42

图3-43

③ 保存网页文档，按<F12>键预览效果。

3.2.2 设置文本属性

设置文本属性的操作步骤如下。

① 选择菜单【窗口】|【CSS设计器】或按<Shift+F11>组合键打开【CSS设计器】面板，如图3-44所示。

图3-44

② 选中文字所在的<div>对应的CSS样式名，如.box1，取消勾选【显示集】，单击【文本】按钮，显示【文本】属性列表，如图3-45所示，各选项的含义如下。

图3-45

【font-family】：设置文本字体。

【font-size】：设置文本字号大小。

【font-weight】：设置字体粗细。

【font-style】：设置字体风格。

【font-variant】：设置字体变形。

【line-height】：设置行高。

【text-transform】：设置文本大小写控制。

【text-decoration】：设置文本修饰，如下画线等。

【color】：设置文本颜色。

③ 在【属性】部分设置文本的属性，如图3-46所示。文字效果如图3-47所示。

图3-46

图3-47

3.2.3 文本段落

在页面文档中，<p>和</p>标签主要用于定义一个段落，段落的内容可以是文本，也可以是图像等其他类型的对象。如果一段短小的文字段落，需要加大或缩小文字突出表现效果，那么还可以使用标题。预定义格式在处理空格和空行较多的文本段落时更加方便。

1. 应用段落或标题格式

有时可以手工将文档窗口中的文字定义为段落，可以采用两种方法。

（1）使用【属性】面板。

① 将光标置于文本中或选择文本。

② 单击【属性】面板的【HTML】按钮切换到HTML属性，在【格式】下拉列表中选择相应的段落格式或标题标签，如图3-48所示。

图3-48

（2）使用菜单【编辑】|【段落格式】。

① 将光标置于文本中或选择文本。

② 选择菜单【编辑】|【段落格式】，在子菜单中选择相应的段落格式或标题标签，如图3-49所示。

图3-49

2. 指定预格式

在文本段落中，有时使用多处空格和换行，如一段诗歌或程序代码，会使HTML代码过于烦琐且不易控制，那么就可以使用预格式标签<pre>和</pre>。

所谓预格式，就是用户预先对<pre>和</pre>之间的文本进行格式化，浏览器在显示其中的内容时，会完全按照其真正的文本格式来显示。例如，原封不动地保留文档中的空白和空行等。

<pre> 
这是 
预格式文本。 
它保留了      空格 
和换行。 

for i = 1 to 10 
    print i 
next i 
</pre>

要在Dreamweaver中指定预格式化文本，可以按照如下步骤进行操作。

① 将光标置于要设置预格式化的段落中，如果要将多个段落设置为预格式，可以选中这多个段落。

② 单击【属性】面板的【格式】，在下拉列表中选择“预先格式化的”，或者选择菜单【格式】|【段落格式】，在子菜单中选择【已编排格式】。

指定预格式操作自动在相应段落的两端分别添加<pre>和</pre>标签，如果原先段落两端有<p>和</p>标签，则会分别用<pre>和</pre>标记替换它们。

3.2.4 插入日期

在网页文档中插入日期的操作步骤如下。

① 在【文档】窗口中将光标置于要插入日期的位置上。

② 单击菜单【插入】|【HTML】|【日期】，或在【插入】面板中选择【HTML】选项卡，单击【日期】按钮。

③ 在【插入日期】对话框中选择需要显示的【星期格式】、【日期格式】或【时间格式】，如图3-50所示。

图3-50

④ 如果勾选【储存时自动更新】，则每次保存该网页文档时都会自动更新日期，否则不会更新。

3.2.5 插入特殊字符

在网页文档中有时需要插入一些特殊字符，如版权符号、注册商标符号、破折号和英镑符号等。可采用以下两种方法在网页中插入特殊字符。

（1）使用【插入】|【HTML】|【字符】菜单。

① 在【文档】窗口中将光标置于要插入特殊字符的位置。

② 选择菜单【插入】|【HTML】|【字符】，单击需要插入的特殊字符，如图3-51所示。

图3-51

③ 单击菜单中【其他字符…】项，可在打开的【插入其他字符】对话框中选择更多的特殊字符插入到网页中，如图3-52所示。

图3-52

（2）使用【插入】面板插入特殊字符。

① 在【文档】窗口中将光标置于要插入特殊字符的位置。

② 选择【插入】面板的【HTML】选项卡，单击【字符：其他字符】左侧展开式工具按钮，单击选择需要插入的特殊字符，如图3-53所示。

图3-53

③ 单击【其他字符】按钮，可在打开的【插入其他字符】对话框中选择更多的特殊字符。