
3.3 添加与设置文本对象
在网页中添加与设置文本格式可以使页面更清晰,更具有层次感。图3-42所示为设置了文本格式后的效果。Dreamweaver中的文档就是网页,文本是构成网页的重要元素,对网页制作者来说,如何对文本进行编辑和美化是首要解决的问题,本节主要介绍如何在Dreamweaver中对文本进行编辑。

图3-42 设置文本格式的效果
3.3.1 在网页中添加文本
添加文本是Dreamweaver中最基本的操作之一。文本是网页中最重要的元素,在网页中添加文本与在Office中添加文本一样方便,可以直接输入文本,也可从其他文档中复制文本或插入特殊字符和水平线等。在Dreamweaver CS6中,向网页中添加文本有以下3种方法:
(1)复制文本。用户可以从其他应用程序中复制文本,然后切换到Dreamweaver中,将光标定位在要插入文本的位置,单击“编辑”|“粘贴”命令,或者按【Ctrl+V】组合键,即可将文本粘贴到窗口中。单击“编辑”|“选择性粘贴”命令可以进行多种形式的粘贴,其中“仅文本”选项可以不带其他的程序格式,也可以通过单击“编辑”|“首选参数”|“复制/粘贴”命令设置粘贴的首选项。如果要将外部程序中的文字,如Word文档中的文字复制到当前页面编辑窗口中,可先将其复制成文本文件,取消Word文档格式,然后再复制到页面中。
(2)从其他文档导入文本。在Dreamweaver中能够将Office文档直接导入到网页中,将光标定位在要插入文本的位置,单击“文件”|“导入”命令,在级联菜单中选择要导入的文件类型即可。
(3)直接在文档窗口中输入文本。在设计视图中,将光标定位在要插入文本的位置处,选择合适的输入法,输入文本即可。
素材文件 光盘\素材\第3章\3.3.1\index.html
效果文件 光盘\效果\第3章\3.3.1\index.html
视频文件 光盘\视频\第3章\3.3.1 在网页中添加文本.mp4
步骤01 单击“文件”|“打开”命令,打开一个网页文档,如图3-43所示。
步骤02 将光标定位在要输入文本的相应位置,如图3-44所示。
步骤03 在其中输入相应的文本内容,如图3-45所示。
步骤04 按上述相同的操作,将光标定位到其他要输入文本的位置,然后继续输入相应的文本,如图3-46所示。

图3-43 打开一个网页文档

图3-44 定位光标的位置

图3-45 输入相应的文本

图3-46 继续输入相应的文本
说明
在Dreamweaver CS6中,需要在多个文本内容之间添加空格时,按【Ctrl+Shift+空格】组合键即可输入多个空格。
3.3.2 设置文本字体类型
在“属性”面板的“字体”下拉列表框中,可以对所选的文本进行字体的设置,在下拉列表框中选择一种字体,即可将所选字体应用到所选的文本。
在网页文档中选择要修改的字体类型的文本,如图3-47所示。切换到“CSS属性”面板,单击“字体”右侧的下三角按钮,在弹出的下拉列表中选择“编辑字体列表”选项,弹出“编辑字体列表”对话框,在“可用字体”列表框中选择“方正大黑简体”选项,如图3-48所示。

图3-47 选择要修改的文本

图3-48 选择“方正大黑简体”选项
单击“添加”按钮,将字体添加到“选择的字体”列表框中,单击“完成”按钮,单击“字体”右侧的下三角按钮,在弹出的下拉列表中选择“方正大黑简体”选项,如图3-49所示。执行操作后,弹出“新建CSS规则”对话框,在“选择或输入选择器名称”文本框中输入“zt1”,如图3-50所示。

图3-49 选择“方正大黑简体”选项

图3-50 “新建CSS规则”对话框
单击“确定”按钮,即可更改所选文本的字体,按【F12】键保存后,即可在打开的IE浏览器中看到修改字体类型后的文本效果,如图3-51所示。

图3-51 预览修改字体类型后的文本效果
3.3.3 设置文本字体大小
在网页中,通过不同属性的文本大小可以体现网页文档的层次感,还可以使某些文档内容变得更容易引起浏览者的注意。
用户在网页文档中,选择要修改字体大小的文本,单击“CSS属性”面板“大小”右侧的下三角按钮,在弹出的列表框中选择“16”,如图3-52所示,即可更改所选文本的大小。

图3-52 在弹出的列表框中选择16
3.3.4 设置文本颜色属性
要改变当前选定文本的颜色,可以使用“属性”面板中的“文本颜色”按钮或单击“格式”|“颜色”命令。文本的默认颜色是黑色,若要改变网页中文本的默认颜色,可以单击“属性”面板中的“页面属性”按钮,在弹出的“页面属性”对话框中进行设置。
在网页文档中,选择要修改字体颜色的文本,如图3-53所示。单击“CSS属性”面板“大小”文本框右侧的色块,在弹出的调色板中选择相应的颜色,如图3-54所示。

图3-53 选择要修改字体颜色的文本

图3-54 选择相应的颜色
弹出“新建CSS规则”对话框,在其中设置选择器的名称,如图3-55所示。单击“确定”按钮,即可改变文本的颜色,如图3-56所示。

图3-55 保持默认设置

图3-56 改变文本颜色后的效果