2.1 文本与文档概述

文本是网页中最基本的元素。它不仅能准确表达网页制作者的思想，还有信息量大、输入修改方便、生成的文件小、易于浏览下载等特点，因此，对于网站设计者而言，掌握文本的使用方法非常重要。但是与图像及其他相比，文本很难激发浏览者的阅读兴趣，所以用户制作网页时，除了要在文本的内容上多下功夫外，排版也非常重要。在文档中灵活运用丰富的字体、多种段落格式以及赏心悦目的文本效果，对于一个专业的网站设计者而言，是必不可少的技能。

命令介绍

设置文本属性：利用文本属性可以方便地修改选中文本的字体、字号、样式、对齐方式等，以获得预期的显示效果。

输入连续的空格：在默认状态下，Dreamweaver CS6只允许网站设计者输入一个空格，要输入连续多个空格则需要进行设置或通过特定操作才能实现。

2.1.1 课堂案例——轩宇门窗网页

【案例学习目标】使用“修改”命令，设置页面外观、网页标题等效果；使用“编辑”命令，设置允许多个连续空格、显示不可见元素效果。

【案例知识要点】使用“页面属性”命令，设置页面外观、网页标题效果；使用“首选参数”命令，设置允许多个连续空格，如图2-1所示。

【效果所在位置】Ch02/效果/轩宇门窗网页.html。

1．设置页面属性

（1）选择“文件 > 打开”命令，在弹出的“打开”对话框中，选择本书学习资源中的“Ch02 > 素材 > 轩宇门窗网页 > index.html”文件，单击“打开”按钮打开文档，如图2-2所示。

（2）选择“修改 > 页面属性”命令，弹出“页面属性”对话框。在左侧的“分类”列表中选择“外观（CSS）”选项，将右侧的“页面字体”选项设为“微软雅黑”，“大小”选项设为12，“左边距”“右边距”“上边距”“下边距”选项均设为0，如图2-3所示。

（3）在左侧的“分类”列表中选择“标题/编码”选项，在“标题”选项文本框中输入“轩宇门窗网页”，如图2-4所示，单击“确定”按钮，完成页面属性的修改，效果如图2-5所示。

2．输入空格和文字

（1）选择“编辑 > 首选参数”命令，弹出“首选参数”对话框，在左侧的“分类”列表中选择“常规”选项，在右侧的“编辑选项”选项组中勾选“允许多个连续的空格”复选框，如图2-6所示，单击“确定”按钮完成设置。

（2）将光标置入到如图2-7所示的单元格中。在光标所在位置输入文字“首页”，如图2-8所示。

（3）按4次 Space键输入空格，如图2-9所示。在光标所在的位置输入文字“关于我们”，如图2-10所示。用相同的方法输入其他文字，效果如图2-11所示。

（4）选择“窗口 > CSS样式”命令，或按Shift+F11组合键，弹出“CSS样式”面板，单击面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中进行设置，如图2-12所示，单击“确定”按钮，在弹出的“.text的CSS规则定义”对话框中进行设置，如图2-13所示，单击“确定”按钮，完成样式的创建。

（5）选中图2-14所示的文字，在“属性”面板“类”选项的下拉列表中选择“text”选项，应用样式，效果如图2-15所示。

（6）将光标置入到如图2-16所示的单元格中。选择“编辑 > 首选参数”命令，弹出“首选参数”对话框，在左侧的“分类”列表中选择“不可见元素”选项，勾选“换行符”复选框，如图2-17所示，单击“确定”按钮完成设置。

（7）在光标所在的位置输入文字“中华轩宇门窗 里外皆风景”，如图 2-18 所示。按 Shift+Enter组合键，将光标切换至下一行，如图2-19所示，输入文字“专注于门窗的设计、研发与销售，为人类提供优质、环保、舒适、温馨的生活环境”，如图2-20所示。

（8）选择“窗口 > CSS样式”命令，弹出“CSS样式”面板，单击面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中进行设置，如图2-21所示，单击“确定”按钮，在弹出的“.text2的CSS规则定义”对话框中进行设置，如图2-22所示，单击“确定”按钮，完成样式的创建。

（9）选中如图2-23所示的文字，在“属性”面板“类”选项的下拉列表中选择“text2”选项，应用样式，效果如图2-24所示。选中如图2-25所示的文字。

（10）在“属性”面板“目标规则”选项的下拉列表中选择“<新内联样式>”选项，其他选项的设置如图2-26所示，效果如图2-27所示。

（11）保存文档，按F12键预览效果，如图2-28所示。

2.1.2 输入文本

应用Dreamweaver CS6编辑网页时，在文档窗口中光标为默认显示状态。要添加文本，首先应将光标移动到文档窗口中的编辑区域，然后直接输入文本，就像在其他文本编辑器中一样。打开一个文档，在文档中单击鼠标左键，将光标置于其中，然后在光标后面输入文本，如图2-29所示。

提示

除了直接输入文本外，也可将其他文档中的文本复制后，粘贴到当前的文档中。需要注意的是，粘贴文本到Dreamweaver CS6的文档窗口时，该文本不会保持原有的格式，但是会保留原来文本中的段落格式。

2.1.3 设置文本属性

利用文本属性可以方便地修改选中文本的字体、字号、样式、对齐方式等，以获得预期的效果。

选择“窗口 > 属性”命令，弹出“属性”面板，在HTML和CSS属性面板中都可以设置文本的属性，如图2-30和图2-31所示。

“属性”面板中各选项的含义如下。

“目标规则”选项：设置已定义的或引用的CSS样式为文本的样式。

“字体”选项：设置文本的字体组合。

“大小”选项：设置文本的字级。

“文本颜色”按钮：设置文本的颜色。

“粗体”按钮、“斜体”按钮：设置文字格式。

“左对齐”按钮、“居中对齐”按钮、“右对齐”按钮、“两端对齐”按钮：设置段落在网页中的对齐方式。

“格式”选项：设置所选文本的段落样式。例如，使段落应用“标题1”的段落样式。

“项目列表”按钮、“编号列表”按钮：设置段落的项目符号或编号。

“删除内缩区块”按钮、“内缩区块”按钮：设置段落文本向右凸出或向左缩进一定距离。

2.1.4 输入连续的空格

在默认状态下，Dreamweaver CS6只允许网站设计者输入一个空格，要输入连续多个空格则需要进行设置或通过特定操作才能实现。

1．设置“首选参数”对话框

（1）选择“编辑 > 首选参数”命令，弹出“首选参数”对话框，如图2-32所示。

（2）在“首选参数”对话框左侧的“分类”列表中选择“常规”选项，在右侧的“编辑选项”选项组中选择“允许多个连续的空格”复选框，单击“确定”按钮完成设置。此时，用户可连续按Space键在文档编辑区内输入多个空格。

2．直接插入多个连续空格

在Dreamweaver CS6中插入多个连续空格，有以下几种方法。

① 选择“插入”面板中的“文本”选项卡，单击“字符”展开式按钮，选择“不换行空格”按钮。

② 选择“插入 > HTML > 特殊字符 > 不换行空格”命令，或按Ctrl+Shift+Space组合键。

③ 将输入法转换到中文的全角状态下。

2.1.5 设置是否显示不可见元素

在网页的设计视图中，有一些元素仅用来标志该元素的位置，而在浏览器中是不可见的。例如，脚本图标是用来标志文档正文中的 Javascript 或 Vbscript 代码的位置，换行符图标是用来标志每个换行符 <br> 的位置等。在设计网页时，为了快速找到这些不可见元素的位置，常常改变这些元素在设计视图中的可见性。

显示或隐藏某些不可见元素的具体操作步骤如下。

（1）选择“编辑 > 首选参数”命令，弹出“首选参数”对话框。

（2）在“首选参数”对话框左侧的“分类”列表中选择“不可见元素”选项，根据需要选择或取消选择右侧的多个复选框，以实现不可见元素的显示或隐藏，如图2-33所示，单击“确定”按钮完成设置。

常用的不可见元素是换行符、脚本、命名锚记、层锚记和表单隐藏区域，一般将它们设为可见。

但细心的网页设计者会发现，虽然在“首选参数”对话框中设置某些不可见元素为显示的状态，但在网页的设计视图中却看不见这些不可见元素。为了解决这个问题，还必须选择“查看 > 可视化助理 > 不可见元素”命令，选择“不可见元素”选项后，效果如图2-34所示。

提示

要在网页中添加换行符不能只按Enter键，而要按Shift+Enter组合键。

2.1.6 设置页边距

按照文章的书写规则，正文与纸的四周需要留有一定的距离，这个距离叫页边距。网页设计也如此，在默认状态下文档的上、下、左、右边距不为零。

修改页边距的具体操作步骤如下。

（1）选择“修改 > 页面属性”命令，弹出“页面属性”对话框，如图2-35所示。

提示

在“页面属性”对话框中选择“外观（HTML）”选项，“页面属性”对话框提供的界面将发生改变，如图2-36所示。

（2）根据需要在对话框的“左边距”“右边距”“上边距”“下边距”“边距宽度”“边距高度”选项的数值框中输入相应的数值。这些选项的含义如下。

“左边距”“右边距”：指定网页内容浏览器左、右页边的大小。

“上边距”“下边距”：指定网页内容浏览器上、下页边的大小。

“边距宽度”：指定网页内容Navigator浏览器左、右页边的大小。

“边距高度”：指定网页内容Navigator浏览器上、下页边的大小。

2.1.7 设置网页的标题

HTML 页面的标题可以帮助站点浏览者理解所查看网页的内容，并在浏览者的历史记录和书签列表中标志页面。文档的文件名是通过保存文件命令保存的网页文件名称，而页面标题是浏览者在浏览网页时浏览器标题栏中显示的信息。

更改页面标题的具体操作步骤如下。

（1）选择“修改 > 页面属性”命令，弹出“页面属性”对话框。

（2）在“页面属性”对话框左侧的“分类”列表中选择“标题/编码”选项，在对话框右侧“标题”选项的文本框中输入页面标题，如图2-37所示，单击“确定”按钮，完成设置。

2.1.8 设置网页的默认格式

用户在制作新网页时，页面都有一些默认的属性，如网页的标题、网页边界、文字编码、文字颜色和超链接的颜色等。若需要修改网页的页面属性，可选择“修改 > 页面属性”命令，弹出“页面属性”对话框，如图2-38所示。对话框中各选项的作用如下。

“外观”选项组：设置网页背景色、背景图像、网页文字的字体、字号、颜色和网页边界。

“链接”选项组：设置链接文字的格式。

“标题”选项组：为标题1至标题6指定标题标签的字体大小和颜色。

“标题/编码”选项组：设置网页的标题和网页的文字编码。一般情况下，将网页的文字编码设定为简体中文GB2312编码。

“跟踪图像”选项组：一般在复制网页时，若想使原网页的图像作为复制网页的参考图像，可使用跟踪图像的方式实现。跟踪图像仅作为复制网页的设计参考图像，在浏览器中并不显示出来。

命令介绍

改变文本的颜色：在“文本颜色”选项中选择文本颜色时，可以在颜色按钮右边的文本框中直接输入文本颜色的十六进制数值。

改变文本的对齐方式：文本的对齐方式是指文字相对于文档窗口或浏览器窗口在水平位置的对齐方式。

2.1.9 课堂案例——机电设备网页

【案例学习目标】使用“属性”面板，改变网页中的元素，使网页变得更加美观。

【案例知识要点】使用“属性”面板，设置文字大小、颜色及字体，如图2-39所示。

【效果所在位置】Ch02/效果/机电设备网页/index.html。

1．添加字体

（1）选择“文件 > 打开”命令，在弹出的“打开”对话框中，选择本书学习资源中的“Ch02 > 素材 > 机电设备网页 > index.html”文件，单击“打开”按钮打开文件，如图2-40所示。

（2）在“属性”面板中单击“字体”下拉列表，在弹出的列表中选择“编辑字体列表”选项，如图2-41所示。

（3）弹出“编辑字体列表”对话框，在“可用字体”列表中选择需要的字体，如图2-42所示，单击按钮，将其添加到“字体列表”中，如图 2-43 所示。单击按钮，在“可用字体”列表中选择需要的字体，如图2-44所示，再次单击按钮，将其添加到“字体列表”中，如图2-45所示，单击“确定”按钮完成设置。

2．更改文字外观

（1）选择“窗口 > CSS样式”命令，弹出“CSS样式”面板，单击面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中进行设置，如图2-46所示，单击两次“确定”按钮，返回到文档编辑窗口。选中如图2-47所示的文字。

（2）在“属性”面板中的“目标规则”选项下拉列表中选择“text”选项，应用样式，将“大小”选项设为34，单击“文本颜色”按钮，在弹出的“颜色”选择面板中选择“白色”，其他选项的设置，如图2-48所示，效果如图2-49所示。

（3）单击“CSS样式”面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中进行设置，如图2-50所示，单击两次“确定”按钮，返回到文档编辑窗口。选中如图2-51所示的文字。

（4）在“属性”面板中的“目标规则”选项下拉列表中选择“text1”选项，应用样式，单击“颜色”按钮，在弹出的“文本颜色”选择面板中选择“浅灰色”，其他选项的设置，如图2-52所示，效果如图2-53所示。

（5）保存文档，按F12键预览效果，如图2-54所示。

2.1.10 改变文本的大小

Dreamweaver CS6提供两种改变文本大小的方法，一种是设置文本的默认大小，另一种是设置选中文本的大小。

1．设置文本的默认大小

（1）选择“修改 > 页面属性”命令，弹出“页面属性”对话框。

（2）在“页面属性”对话框左侧的“分类”列表中选择“外观”选项，在右侧的“大小”选项中根据需要选择文本的大小，如图2-55所示，单击“确定”按钮完成设置。

2．设置选中文本的大小

在Dreamweaver CS6中，可以通过“属性”面板设置选中文本的大小，步骤如下。

（1）在文档窗口中选中文本。

（2）在“属性”面板中，单击“大小”选项的下拉列表选择相应的值，如图2-56所示。

2.1.11 改变文本的颜色

丰富的色彩可以吸引用户的注意，网页中的文本不仅可以是黑色，还可以呈现为其他色彩，最多时可达到16 777 216种颜色。颜色的种类与用户显示器的分辨率和颜色值有关，所以，通常在216种网页色彩中选择文字的颜色。

在Dreamweaver CS6中提供了两种改变文本颜色的方法。

1．设置文本的默认颜色

（1）选择“修改 > 页面属性”命令，弹出“页面属性”对话框。

（2）在左侧的“分类”列表中选择“外观（CSS）”选项，在右侧的“文本颜色”选项中选择具体的文本颜色，如图2-57所示，单击“确定”按钮完成设置。

提示

在“文本颜色”选项中选择文本颜色时，可以在颜色按钮右边的文本框中，直接输入文本颜色的十六进制数值。

2．设置选中文本的颜色

为了对不同的文字设定不相同的颜色，Dreamweaver CS6提供了两种改变选中文本颜色的方法。

通过“文本颜色”按钮设置选中文本的颜色，步骤如下。

（1）在文档窗口中选中文本。

（2）单击“属性”面板中的“文本颜色”按钮选择相应的颜色，如图2-58所示。

通过“颜色”命令设置选中文本的颜色，步骤如下。

（1）在文档窗口中选中文本。

（2）选择“格式 > 颜色”命令，弹出“颜色”对话框，如图2-59所示。选择相应的颜色，单击“确定”按钮完成设置。

2.1.12 改变文本的字体

Dreamweaver CS6 提供了两种改变文本字体的方法，一种是设置文本的默认字体，另一种是设置选中文本的字体。

1．设置文本的默认字体

（1）选择“修改 > 页面属性”命令，弹出“页面属性”对话框。

（2）在左侧的“分类”列表中选择“外观（CSS）”选项，在右侧选择“页面字体”选项，弹出其下拉列表，如果列表中有合适的字体组合，可直接单击选择该字体组合，如图2-60所示。否则，需选择“编辑字体列表”选项，在弹出的“编辑字体列表”对话框中自定义字体组合。

（3）单击按钮，在“可用字体”列表中选择需要的字体，如图 2-61 所示，然后单击按钮，将其添加到“字体列表”中，如图2-62所示。在“可用字体”列表中再选中另一种字体，再次单击按钮，在“字体列表”中建立字体组合，单击“确定”按钮完成设置。

（4）重新在“页面属性”对话框中“页面字体”选项的下拉列表中选择刚建立的字体组合作为文本的默认字体。

2．设置选中文本的字体

为了将不同的文字设定为不相同的字体，Dreamweaver CS6提供了两种改变选中文本字体的方法。

通过“字体”选项设置选中文本的字体，步骤如下。

（1）在文档窗口中选中文本。

（2）选择“属性”面板，在“字体”选项的下拉列表中选择相应的字体，如图2-63所示。

通过“字体”命令设置选中文本的字体，步骤如下。

（1）在文档窗口中选中文本。

（2）单击鼠标右键，在弹出的菜单中选择“字体”命令，在弹出的子菜单中选择相应的字体，如图2-64所示。

2.1.13 改变文本的对齐方式

文本的对齐方式是指文字相对于文档窗口或浏览器窗口在水平位置的对齐方式。对齐方式按钮有4种，分别为：左对齐、居中对齐、右对齐和两端对齐。

通过对齐按钮改变文本的对齐方式，步骤如下。

（1）将插入点放在文本中，或者选择段落。

（2）在“属性”面板中单击相应的对齐按钮，如图2-65所示。

对段落文本的对齐操作，实际上是对<p>标记的align属性的设置。align属性值有3种选择，其中left表示左对齐，center表示居中对齐，而right表示右对齐。例如，下面的3条语句分别设置了段落的左对齐、居中对齐和右对齐方式，效果如图2-66所示。

<p align="left">左对齐</p>

<p align="center">居中对齐</p>

<p align="right">右对齐</p>

通过对齐命令改变文本的对齐方式，步骤如下。

（1）将插入点放在文本中，或者选择段落。

（2）选择“格式 > 对齐”命令，弹出其子菜单，如图2-67所示，选择相应的对齐方式。

2.1.14 设置文本样式

文本样式是指字符的外观显示方式，如加粗文本、倾斜文本和文本加下画线等。

1．通过“样式”命令设置文本样式

（1）在文档窗口中选中文本。

（2）选择“格式 > 样式”命令，在弹出的子菜单中选择相应的样式，如图2-68所示。

（3）选择需要的选项后，即可为选中的文本设置相应的字符格式，被选中的菜单命令左侧会带有选中标记

提示

如果希望取消设置的字符格式，可以再次打开子菜单，取消对该菜单命令的选择。

2．通过“属性”面板快速设置文本样式

单击“属性”面板中的“粗体”按钮和“斜体”按钮可快速设置文本的样式，如图2-69所示。如果要取消粗体或斜体样式，再次单击相应的按钮。

3．使用组合键快速设置文本样式

另外一种快速设置文本样式的方法是使用组合键。按Ctrl+B组合键，可以将选中的文本加粗。按Ctrl+I组合键，可以将选中的文本倾斜。

提示

再次按相应的组合键，则可取消文本样式。

2.1.15 段落文本

段落是指描述一个主题并且格式统一的一段文字。在文档窗口中，输入一段文字后按 Enter 键，这段文字就显示在<P>…</P>标签中了。

1．应用段落格式

通过格式选项应用段落格式，步骤如下。

（1）将插入点放在段落中，或者选择段落中的文本。

（2）选择“属性”面板，在“格式”选项的下拉列表中选择相应的格式，如图2-70所示。

通过段落格式命令应用段落格式，步骤如下。

（1）将插入点放在段落中，或者选择段落中的文本。

（2）选择“格式 > 段落格式”命令，弹出其子菜单，如图2-71所示，选择相应的段落格式。

2．指定预格式

预格式标记是<pre>和</pre>。预格式化是指用户预先对<pre>和</pre>的文字进行格式化，以便在浏览器中按真正的格式显示其中的文本。例如，用户在段落中插入多个空格，但浏览器却按一个空格处理。为这段文字指定预格式后，就会按用户的输入显示多个空格。

通过“格式”选项指定预格式的具体操作步骤如下。

（1）将插入点放在段落中，或者选择段落中的文本。

（2）选择“属性”面板，在“格式”选项的下拉列表中选择“预先格式化的”选项，如图 2-72所示。

通过“段落格式”命令指定预格式的具体操作步骤如下。

（1）将插入点放在段落中，或者选择段落中的文本。

（2）选择“格式 > 段落格式”命令，在弹出的其子菜单中选择“已编排格式”命令，如图 2-73所示。

通过已编排格式按钮指定预格式，单击“插入”面板“文本”选项卡中的“已编排格式”按钮，指定预格式。

提示

若想去除文字的格式，可按上述方法，将“格式”选项设为“无”。