Dreamweaver CC中文版网页设计与制作从新手到高手
上QQ阅读APP看书,第一时间看更新

5.1 设置网页文本

文本是网页主要元素之一,一般以普通文字、段落或各种项目符号等形式进行显示。由于文本具有易于编辑、存储空间小等优点,因此在网站制作中具有不可替代的地位。

5.1.1 插入网页文本

在Dreamweaver中,除了可以手动输入网页文本之外,还可以通过粘贴和导入的方法,来插入网页文本。

1. 直接输入

直接输入是创建网页文本最常用的方法,用户可以在【拆分】视图中的“视图”部分或【设计】视图中输入文本内容。

提示

用户在【代码】视图中相关的XHTML标签中输入字符,同样可以将其添加到网页中。

2. 粘贴外部文本

在编辑网页内容时,对于篇幅比较长的文本,可以直接将外部文本复制到【设计】视图中。例如,在某个网页中复制一段文本,切换到Dreamweaver文档中,执行【粘贴】命令或按下Ctrl+V组合键,即可粘贴该文本。

但是在粘贴外部文本时,普通的粘贴方法会连同外部文本的格式设置一起粘贴过来。此时,用户可以复制外部文本之后,执行【编辑】|【选择性粘贴】命令,在弹出的【选择性粘贴】对话框中,选择所需粘贴的文本样式,单击【确定】按钮即可。

在【选择性粘贴】对话框中,主要包括下列选项:

仅文本 仅粘贴文本字符,不保留任何字体格式。

带结构的文本 粘贴包含段落、列表和表格等结构的文本。

带结构的文本以及基本格式 粘贴包含段落、列表、表格以及粗体和斜体的文本。

带结构的文本以及全部格式 粘贴包含段落、列表、表格以及粗体、斜体和色彩等所有样式的文本。

保留换行符 启用该复选框,在粘贴文本时将自动添加换行符号。

清理Word段落间距 启用该复选框,在复制Word文本后将自动清除段落间距。

将智能引号转换为直引号 启用该复选框,在粘贴文本时自动将智能引号转换为直引号。

粘贴首选参数 单击该按钮,可以在弹出的【首选项】对话框中设置粘贴首选项。

3. 导入外部文本

Dreamweaver为用户提供了导入外部文本功能,使用该功能可以导入Word文档。

首先,将光标定位到导入文本的位置,执行【文件】|【导入】|【Word文档】命令。

然后,在弹出的【导入Word文档】对话框中,选择所需要导入的Word文档,单击【打开】按钮。

5.1.2 设置文本属性

当用户输入、粘贴或导入文本到网页文档中之后,还需要在【属性】面板中,设置文本的HTML属性和CSS属性。

1. 设置HMTL属性

在【属性】面板中,激活【HTML】选项卡,将各项属性设置应用到页面正文的HTML代码中。

在【HTML】选项卡中,主要包括下列16种属性:

格式 设置文本的基本格式,可选择无格式文本、段落或各种标题文本。

 定义当前文档所应用的CSS类名称。

粗体 定义以HTML的方式将文本加粗。

斜体 定义以HTML的方式使文本倾斜。

项目列表 为普通文本或标题、段落文本应用项目列表。

编号列表 为普通文本或标题、段落文本应用编号列表。

删除内缩区块 将选择的文本向左侧推移一个制表位。

内缩区块 将选择的文本向右侧推移一个制表位。

标题 当选择的文本为超链接时,定义当鼠标滑过该段文本时显示的工具提示信息。

ID 定义当前选择的文本所属的标签ID属性,从而通过脚本或CSS样式表对其进行调用,添加行为或定义样式。

链接 创建所选文本的超文本链接。

浏览文件 单击该按钮,将允许用户通过弹出的对话框选择链接的文档。

目标 指定将链接文档加载到哪个框架或窗口。

页面属性 单击该按钮,可打开【页面属性】对话框,定义整个文档的属性。

列表项目 当选择的文本为项目列表或编号列表时,可通过该按钮定义列表的样式。

2. 设置CSS属性

在【属性】面板中,激活【CSS】选项卡,将各项属性设置写入文档头或单独的样式表中。

在【CSS】选项卡中,主要包括下列一些属性:

目标规则 显示在CSS属性检查器中正在编辑的规则,用户也可以单击起下拉按钮,在弹出的菜单中创建新的CSS规则、新的内联样式或将现有类应用于所选文本。

编辑规则 单击该按钮,可在打开的【CSS设计器】面板中编辑CSS规则。

CSS Designer 单击该按钮,可打开【CSS设计器】面板。

字体 用于设置目标规则中的字体样式。

大小 用于设置目标规则中的字体大小。

文本颜色 用于设置目标规则中的字体颜色。

对齐方式 用于设置目标规则中文本的对齐属性,包括【左对齐】、【右对齐】、【居中对齐】和【两端对齐】四种样式。

5.1.3 插入特殊文本

在网页中除了可以插入普通文本之外,还可以插入一些比较特殊的文本。例如,插入特殊符号、水平线、日期等。

1. 插入特殊符号

选择插入位置,执行【插入】|【字符】命令,在展开的级联菜单中选择相应的字符样式即可。

Dreamweaver允许为网页文档插入12种基本的特殊符号,每种特殊符号的具体作用如下表所述。

除了上述12种特殊符号之外,用户还可以执行【插入】|【字符】|【其他字符】命令,在弹出的【插入其他字符】对话框中,选择所需插入的符号,单击【确定】按钮即可。

提示

用户也可以在【插入】面板中的【常用】类别中,单击【字符】下拉按钮,在下拉列表中选择所需插入的特殊字符即可。

2. 插入水平线

Dreamweaver还为用户提供了插入水平线功能,运用该功能可以方便地插入水平线。

首先,将光标定位在需要插入水平线的位置。然后,执行【插入】|【水平线】命令,即可在光标定位处插入一条水平线。

提示

用户也可以在【插入】面板中的【常用】类别中,单击【水平线】按钮,即可在光标处插入一条水平线。

插入水平线之后,在【属性】面板中将会显示水平线的各种属性选项,以方便用户根据实际使用来制作一些相对优美的水平线。

在【属性】面板中,主要包括下列四种属性选项:

水平线 用于设置水平线的ID。

宽/高 用于设置水平线的宽度和高度,单位可以是像素或百分比。

对齐 用于设置水平线的对齐方式,包括【默认】、【左对齐】、【居中对齐】和【右对齐】。

阴影 启用该复选框,可为水平线添加阴影效果。

技巧

设置水平线的宽度为1,然后设置其高度为较大的值,可得到垂直线。

3. 插入日期

用户不仅可以在网页中插入水平线和特殊符号,还可以插入当前时间和日期。

执行【插入】|【日期】命令,在弹出的【插入日期】对话框中,设置日期和时间选项,单击【确定】按钮即可。

在【插入日期】对话框中,主要包括下列四种选项:

星期格式 用于设置中文或英文样式的星期显示格式,也可以设置为不显示样式。

日期格式 用于设置日期显示格式。

时间格式 用于设置时间显示格式。

存储时自动更新 启用该复选框,可以在每次保存网页文档时都自动更新插入的日期时间。