1.3 添加文本元素

文本是信息传递的基础，用户在浏览网页内容时，大部分时间是浏览网页中的文本，所以学会在网页中添加文本至关重要。在Dreamweaver CC中可以很方便地添加所需的文本，还可以对添加的文本进行段落格式的排版。

1.3.1 课堂案例——添加文本

Dreamweaver CC提供了多种在网页中添加文本和设置文本格式的方法，网页制作者可以插入文本，设置字体类型、文本大小、文本颜色和对齐属性等。可直接在网页中输入文本，也可以将其他应用程序中的文本直接粘贴到网页中，此外还可以导入已有的Word文档。在网页中添加文本的具体操作步骤如下。

01 打开素材文件，如图1-13所示。

02 将光标放在要输入文本的位置，输入文本，如图1-14所示。

03 保存文档，按F12键在浏览器中预览效果，如图1-15所示。

1.3.2 课堂案例——插入日期

在Dreamweaver CC中插入日期非常方便，它提供了一个插入日期的快捷方式，可用指定的格式在文档中插入当前日期。同时它还提供了日期更新选项，当保存文件时，日期也会随着更新。在网页中插入日期的具体操作步骤如下。

01 打开素材文件，如图1-16所示。

02 将光标置于要插入日期的位置，执行“插入”→“HTML”→“日期”命令，弹出“插入日期”对话框，在“插入日期”对话框的“星期格式”“日期格式”“时间格式”列表中分别选择一种合适的格式，勾选“储存时自动更新”复选框，这样每一次存储文档时都会自动更新文档中插入的日期，如图1-17所示。

03 单击“确定”按钮，即可插入日期，如图1-18所示。

04 保存文档，按F12键在浏览器中预览效果，如图1-19所示。

技巧与提示

显示在“插入日期”对话框中的时间和日期并不是当前的时间和日期，它们也不会反映访问者查看用户网站的时间和日期。

1.3.3 课堂案例——插入特殊字符

在网页中添加文本时，除了可以输入汉字、英文和其他语言以外，还可以输入一些无法直接输入的特殊字符，如￥、$、◎、#等。在Dreamweaver CC中，用户可以利用系统自带的符号集合，方便快捷地插入一些常用的特殊字符，如版权、货币和运算符号等。在网页中插入特殊字符的具体操作步骤如下。

01 打开素材文件，执行“插入”→“HTML”→“字符”→“版权”命令，然后可以根据不同的需要进行选择，这里选择“版权”选项，如图1-20所示。

02 选择“版权”选项后，即可插入版权符号，如图1-21所示。

技巧与提示

执行“插入”→“HTML”→“字符”→“其他字符”命令，弹出“插入其他字符”对话框，在该对话框中可以选择更多的特殊字符。

03 保存文档，按F12键在浏览器中预览效果，如图1-22所示。

1.3.4 课堂案例——插入水平线

除了可以在网页中插入文字和日期外，还可以插入水平线或注释等。水平线在网页文档中经常用到，它主要用于分隔文档内容，使文档结构清晰明了。一篇内容繁杂的文档，如果合理放置了水平线，会变得层次分明、易于阅读。在网页中插入水平线的具体操作步骤如下。

01 打开素材文件，如图1-23所示。

02 将光标置于要插入水平线的位置，执行“插入”→“HTML”→“水平线”命令，如图1-24所示。

03 选择选项后，即可插入水平线，如图1-25所示。

技巧与提示

将光标放置在插入水平线的位置，单击“HTML”插入栏中的“水平线”按钮，也可插入水平线。

04 选中水平线，打开“属性”面板，可以在“属性”面板中设置水平线的高、宽、对齐方式和阴影，如图1-26所示。

在水平线“属性”面板中可以设置以下参数。

●“宽”和“高”：以像素为单位或以页面尺寸百分比的形式设置水平线的宽度和高度。

●“对齐”：设置水平线的对齐方式，包括“默认”“左对齐”“居中对齐”“右对齐”这4个选项。只有当水平线的宽度小于浏览器窗口的宽度时，该设置才能应用。

●“阴影”：设置绘制的水平线是否带阴影，取消勾选该复选框后将使用纯色绘制水平线。

05 保存文档，按F12键在浏览器中预览效果，如图1-27所示。

技巧与提示

设置水平线颜色：在“属性”面板中并没有提供关于水平线颜色的设置选项，如果需要改变水平线的颜色，直接进入源代码更改〈hr color=“对应颜色的代码”〉即可。