2.1 输入文本并编辑

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

2.1.1 课堂案例——青山别墅网页

扫码观看
本案例视频

扩展阅读

案例学习目标

设置网页外观、网页标题效果等；设置允许输入多个连续空格。

案例知识要点

使用“页面属性”命令设置网页外观、网页标题效果；使用“首选项”命令设置允许输入多个连续空格。

效果所在位置

云盘中的“Ch02>效果>青山别墅网页>index.html”，效果如图2-1所示。

图2-1

1. 设置页面属性

（1）选择“文件>打开”命令，在弹出的“打开”对话框中，选择云盘中的“Ch02>素材>青山别墅网页>index.html”，单击“打开”按钮打开文件，如图2-2所示。

图2-2

（2）选择“文件>页面属性”命令，弹出“页面属性”对话框，如图2-3所示。在该对话框左侧的“分类”列表中选择“外观（CSS）”选项，在该对话框的右侧将“大小”设为12px，“文本颜色”设为白色（#FFFFFF），“左边距”“右边距”“上边距”“下边距”均设为0px，如图2-4所示。

图2-3

图2-4

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

图2-5

图2-6

2. 输入空格和文字

（1）选择“编辑>首选项”命令，打开“首选项”对话框，在左侧的“分类”列表中选择“常规”选项，在右侧的“编辑选项”选项组中选中“允许多个连续的空格”复选框，如图2-7所示。单击“应用”按钮，单击“关闭”按钮。

图2-7

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

图2-8

图2-9

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

图2-10

图2-11

图2-12

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

图2-13

2.1.2 输入文本

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

图2-14

2.1.3 设置文本属性

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

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

图2-15

图2-16

“属性”面板中主要项的作用如下。

·“格式”下拉列表：设置所选文本的段落样式。例如，可使某段落应用“标题1”的段落样式。

·“ID”下拉列表：设置所选元素的ID。

·“类”下拉列表：为所选元素添加CSS样式。

·“链接”下拉列表：为所选元素添加超链接效果。

·“目标规则”下拉列表：设置已定义的或引用的CSS样式为文本的样式。

·“字体”下拉列表：设置文本的字体。

·“大小”下拉列表：设置文本的字号。

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

·“粗体”按钮、“斜体”按钮：设置文本的格式。

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

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

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

2.1.4 输入连续的空格

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

1. 设置“首选项”对话框

选择“编辑>首选项”命令，或按Ctrl+U组合键，弹出“首选项”对话框，如图2-17所示。

图2-17

在“首选项”对话框左侧的“分类”列表中选择“常规”选项，在右侧的“编辑选项”选项组中选中“允许多个连续的空格”复选框，单击“应用”按钮，单击“关闭”按钮。此时，用户可连续按空格键在文档编辑窗口内输入多个连续空格。

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

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

（1）单击“插入”面板的“HTML”选项卡中的“不换行空格”按钮。

（2）选择“插入>HTML>不换行空格”命令，或按Ctrl+Shift+Space组合键。

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

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

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

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

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

（2）在“首选项”对话框左侧的“分类”列表中选择“不可见元素”选项，根据需要选中或取消选中右侧的多个复选框，以实现不可见元素的显示或隐藏，如图2-18所示。单击“应用”按钮，单击“关闭”按钮。

图2-18

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

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

图2-19

2.1.6 设置页边距

通常文本与纸的四周需要留有一定的距离，这个距离叫页边距。网页设计也是如此，在默认状态下文档的上、下、左、右页边距不为0。

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

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

图2-20

提示

如果在“页面属性”对话框中的“分类”列表中选择“外观（HTML）”选项，“页面属性”对话框右侧显示的内容将发生改变，如图2-21所示。

图2-21

（2）根据需要在“页面属性”对话框的“左边距”“上边距”“边距宽度”“边距高度”文本框中输入相应的数值即可。这些文本框的作用如下。

·“左边距”文本框：指定网页在浏览器中的左、右页边距。

·“上边距”文本框：指定网页在浏览器中的上、下页边距。

·“边距宽度”文本框：指定网页在浏览器中的左、右页边距。

·“边距高度”文本框：指定网页在浏览器中的上、下页边距。

2.1.7 设置网页标题

网页标题可以提示浏览者正在查看的网页的内容，并可在浏览器的历史记录和书签列表中用于标志页面。注意，网页的文件名是通过“保存文件”命令保存的网页文件名称，而网页的标题是浏览者在浏览网页时浏览器标题栏中显示的信息。

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

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

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

图2-22

2.1.8 设置网页的默认格式

用户在制作新网页时，系统提供的页面都有一些默认的属性，如网页的标题、页边距、文字编码、文字颜色和超链接的颜色等。若需要修改网页的默认格式，可选择“文件>页面属性”命令，弹出“页面属性”对话框，如图2-23所示，在其中进行设置。“页面属性”对话框中选项卡的作用如下。

图2-23

·“外观（CSS）”/“外观（HTML）”选项卡：设置网页背景颜色、背景图像，网页文字的字体、字号、颜色和页边距。

·“链接（CSS）”选项卡：设置链接文字的格式。

·“标题（CSS）”选项卡：为标题1至标题6标题标签指定字体、字号和颜色。

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

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

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

扫码观看
本案例视频

扩展阅读

案例学习目标

使用“属性”面板，改变网页中的元素，使网页变得更加美观。

案例知识要点

使用“属性”面板，设置文字的字号、颜色及字体；使用“CSS设计器”面板，设置文字的字体、字号、颜色及行距。

效果所在位置

云盘中的“Ch02>效果>机电设备网页>index. html”，效果如图2-24所示。

图2-24

1. 添加字体

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

图2-25

（2）在“属性”面板中，单击“字体”下拉列表框，在弹出的下拉列表中选择“管理字体”选项，如图2-26所示，弹出“管理字体”对话框。打开“自定义字体堆栈”选项卡，在“可用字体”列表中选择需要的字体，如图2-27所示，单击按钮，将其添加到“字体列表”和“选择的字体”列表中，如图2-28所示。

图2-26

图2-27

图2-28

（3）单击“字体列表”左侧的按钮，在“字体列表”中添加一个字体组；在“可用字体”列表中选择需要的字体，如图2-29所示，单击按钮，将其添加到“字体列表”和“选择的字体”列表中，如图2-30所示。单击“完成”按钮关闭对话框。

图2-29

图2-30

2. 改变文字样式

（1）选择“窗口>CSS设计器”命令，弹出“CSS设计器”面板，如图2-31所示。在“源”选项组中选择“<style>”选项，如图2-32所示；单击“选择器”选项组中的“添加选择器”按钮，在“选择器”选项组的文本框中输入“.text”，按Enter键确认，效果如图2-33所示。

图2-31

图2-32

图2-33

（2）选中图2-34所示的文字，在“属性”面板“目标规则”下拉列表中选择“.text”选项，应用该样式。在“字体”下拉列表中选择“方正兰亭粗黑简体”选项，将“大小”设为34；单击“color”按钮，在弹出的颜色面板中单击需要的颜色，如图2-35所示。在空白处单击以关闭颜色面板，此时的“属性”面板如图2-36所示，效果如图2-37所示。

图2-34

图2-35

图2-36

图2-37

（3）在“CSS设计器”面板中，单击“选择器”选项组中的“添加选择器”按钮，在“选择器”选项组的文本框中输入“.text1”，按Enter键确认，效果如图2-38所示；在“属性”选项组中单击“文本”按钮，显示文本属性，将“color”设为白色（#FFFFFF），“font-family”设为“方正兰亭黑简体”，“font-size”设为12px，“line-height”设为20px，如图2-39所示。

图2-38

图2-39

（4）选中图2-40所示的文字，在“属性”面板“类”下拉列表中选择“.text1”选项，应用该样式，效果如图2-41所示。

图2-40

图2-41

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

图2-42

2.1.10 改变文本的大小

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

1. 设置文本的默认大小

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

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

图2-43

2. 设置选中文本的大小

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

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

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

图2-44

2.1.11 改变文本的颜色

丰富的视觉颜色可以吸引网页浏览者的注意力。网页中的文本不仅可以显示为黑色，还可以显示为其他颜色，最多可达16 777 216种颜色。颜色的种类与用户显示器的分辨率和颜色值有关，一般建议在216种网页颜色中选择文字的颜色。

在Dreamweaver 2020中提供了2种改变文本颜色的方法，如下所示。

1. 设置文本的默认颜色

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

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

图2-45

2. 设置选中文本的颜色

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

（2）单击“属性”面板中的“color”按钮，在弹出的面板中选择相应的颜色，如图2-46所示。

图2-46

2.1.12 改变文本的字体

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

1. 设置文本的默认字体

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

（2）在左侧的“分类”列表中选择“外观（CSS）”选项，在右侧单击“页面字体”下拉列表框，弹出其下拉列表，如果下拉列表中有合适的字体组合，可直接选择该字体组合，如图2-47所示；否则，需选择“管理字体”选项，在弹出的“管理字体”对话框中打开“自定义字体堆栈”选项卡，从中自定义字体组合，方法如下。

图2-47

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

图2-48

图2-49

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

2. 设置选中文本的字体

为了将选中的不同文字设定为不同的字体，Dreamweaver 2020提供了2种方法，如下所示。

（1）通过“字体”下拉列表设置选中文本的字体，步骤如下。

① 在文档编辑窗口中选中文本。

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

图2-50

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

① 在文档编辑窗口中选中文本。

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

图2-51

2.1.13 改变文本的对齐方式

文本的对齐方式是指文字相对于文档编辑窗口或浏览器窗口在水平方向上的对齐方式。设置对齐方式的按钮有以下4种。

·“左对齐”按钮：使文本在浏览器窗口中左对齐。

·“居中对齐”按钮：使文本在浏览器窗口中居中对齐。

·“右对齐”按钮：使文本在浏览器窗口中右对齐。

·“两端对齐”按钮：使文本在浏览器窗口中两端对齐。

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

（1）将插入点定位在文本中，或者选择某一段落。

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

图2-52

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

图2-53

<p align="left">左对齐</p>
<p align="center">居中对齐</p>
<p align="right">右对齐</p>

2.1.14 设置文本样式

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

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

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

（2）选择“编辑>文本”命令，在弹出的子菜单中选择相应的命令，如图2-54所示。

图2-54

选择需要的命令后，即可为选中的文本设置相应的文本样式，被选中的命令左侧会有选中标记。

2. 通过“属性”面板设置文本样式

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

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

图2-55

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

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

2.1.15 设置段落格式

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

1. 应用段落格式

（1）通过“格式”下拉列表应用段落格式，步骤如下。

① 将插入点定位在段落中，或者选择段落中的文本。

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

图2-56

（2）通过“段落格式”命令应用段落格式，步骤如下。

① 将插入点定位在段落中，或者选择段落中的文本。

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

图2-57

2. 指定预格式

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

（1）通过“格式”下拉列表指定预格式，步骤如下。

① 将插入点定位在段落中，或者选择段落中的文本。

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

图2-58

（2）通过“段落格式”命令指定预格式，步骤如下。

① 将插入点定位在段落中，或者选择段落中的文本。

② 选择“编辑>段落格式”命令，弹出其子菜单，选择“已编排格式”命令，如图2-59所示。

图2-59