![Dreamweaver CC中文版网页设计与制作从新手到高手](https://wfqqreader-1252317822.image.myqcloud.com/cover/545/27110545/b_27110545.jpg)
5.1 设置网页文本
文本是网页主要元素之一,一般以普通文字、段落或各种项目符号等形式进行显示。由于文本具有易于编辑、存储空间小等优点,因此在网站制作中具有不可替代的地位。
5.1.1 插入网页文本
在Dreamweaver中,除了可以手动输入网页文本之外,还可以通过粘贴和导入的方法,来插入网页文本。
1. 直接输入
直接输入是创建网页文本最常用的方法,用户可以在【拆分】视图中的“视图”部分或【设计】视图中输入文本内容。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00358.jpg?sign=1738887007-m3vzXD16MJVXiNEYJp5pYYhKMrrBQHse-0-15fd1afd486d07ceddbc586110cfdea9)
提示
用户在【代码】视图中相关的XHTML标签中输入字符,同样可以将其添加到网页中。
2. 粘贴外部文本
在编辑网页内容时,对于篇幅比较长的文本,可以直接将外部文本复制到【设计】视图中。例如,在某个网页中复制一段文本,切换到Dreamweaver文档中,执行【粘贴】命令或按下Ctrl+V组合键,即可粘贴该文本。
但是在粘贴外部文本时,普通的粘贴方法会连同外部文本的格式设置一起粘贴过来。此时,用户可以复制外部文本之后,执行【编辑】|【选择性粘贴】命令,在弹出的【选择性粘贴】对话框中,选择所需粘贴的文本样式,单击【确定】按钮即可。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00359.jpg?sign=1738887007-wYxfg0p8dcQvHQrdSaT4TjunnrPUXSi1-0-826d65742c2907f0f1b3015787c25c25)
在【选择性粘贴】对话框中,主要包括下列选项:
□仅文本 仅粘贴文本字符,不保留任何字体格式。
□带结构的文本 粘贴包含段落、列表和表格等结构的文本。
□带结构的文本以及基本格式 粘贴包含段落、列表、表格以及粗体和斜体的文本。
□带结构的文本以及全部格式 粘贴包含段落、列表、表格以及粗体、斜体和色彩等所有样式的文本。
□保留换行符 启用该复选框,在粘贴文本时将自动添加换行符号。
□清理Word段落间距 启用该复选框,在复制Word文本后将自动清除段落间距。
□将智能引号转换为直引号 启用该复选框,在粘贴文本时自动将智能引号转换为直引号。
□粘贴首选参数 单击该按钮,可以在弹出的【首选项】对话框中设置粘贴首选项。
3. 导入外部文本
Dreamweaver为用户提供了导入外部文本功能,使用该功能可以导入Word文档。
首先,将光标定位到导入文本的位置,执行【文件】|【导入】|【Word文档】命令。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00360.jpg?sign=1738887007-O6RitcQSKG8xnj6TdQc2L3rh2LfvvN6V-0-5cd8f74a4b4bf3a482992718f4ca57d3)
然后,在弹出的【导入Word文档】对话框中,选择所需要导入的Word文档,单击【打开】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00361.jpg?sign=1738887007-TKvaq2XjljyH6HiggcGNEYmcA8iAhK97-0-b2fa79fca95dac2e02a81b282c96d862)
5.1.2 设置文本属性
当用户输入、粘贴或导入文本到网页文档中之后,还需要在【属性】面板中,设置文本的HTML属性和CSS属性。
1. 设置HMTL属性
在【属性】面板中,激活【HTML】选项卡,将各项属性设置应用到页面正文的HTML代码中。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00362.jpg?sign=1738887007-8G6dyX52xCtyxPjDpQUk4VF2PYnN1lno-0-1167d7fca18e9de1a0739ddc3fa96f2c)
在【HTML】选项卡中,主要包括下列16种属性:
□格式 设置文本的基本格式,可选择无格式文本、段落或各种标题文本。
□类 定义当前文档所应用的CSS类名称。
□粗体 定义以HTML的方式将文本加粗。
□斜体 定义以HTML的方式使文本倾斜。
□项目列表 为普通文本或标题、段落文本应用项目列表。
□编号列表 为普通文本或标题、段落文本应用编号列表。
□删除内缩区块 将选择的文本向左侧推移一个制表位。
□内缩区块 将选择的文本向右侧推移一个制表位。
□标题 当选择的文本为超链接时,定义当鼠标滑过该段文本时显示的工具提示信息。
□ID 定义当前选择的文本所属的标签ID属性,从而通过脚本或CSS样式表对其进行调用,添加行为或定义样式。
□链接 创建所选文本的超文本链接。
□浏览文件 单击该按钮,将允许用户通过弹出的对话框选择链接的文档。
□目标 指定将链接文档加载到哪个框架或窗口。
□页面属性 单击该按钮,可打开【页面属性】对话框,定义整个文档的属性。
□列表项目 当选择的文本为项目列表或编号列表时,可通过该按钮定义列表的样式。
2. 设置CSS属性
在【属性】面板中,激活【CSS】选项卡,将各项属性设置写入文档头或单独的样式表中。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00363.jpg?sign=1738887007-jZ8WSB9gKBEtaEPHI9Dd2gcSJSNFnO4g-0-389434cf15173f6fdb1e8509138eb59e)
在【CSS】选项卡中,主要包括下列一些属性:
□目标规则 显示在CSS属性检查器中正在编辑的规则,用户也可以单击起下拉按钮,在弹出的菜单中创建新的CSS规则、新的内联样式或将现有类应用于所选文本。
□编辑规则 单击该按钮,可在打开的【CSS设计器】面板中编辑CSS规则。
□CSS Designer 单击该按钮,可打开【CSS设计器】面板。
□字体 用于设置目标规则中的字体样式。
□大小 用于设置目标规则中的字体大小。
□文本颜色 用于设置目标规则中的字体颜色。
□对齐方式 用于设置目标规则中文本的对齐属性,包括【左对齐】、【右对齐】、【居中对齐】和【两端对齐】四种样式。
5.1.3 插入特殊文本
在网页中除了可以插入普通文本之外,还可以插入一些比较特殊的文本。例如,插入特殊符号、水平线、日期等。
1. 插入特殊符号
选择插入位置,执行【插入】|【字符】命令,在展开的级联菜单中选择相应的字符样式即可。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00364.jpg?sign=1738887007-RrKUmRO1tN9SZmWdUW9q0Ri9uiT2NvJk-0-fb2336fc2022325fa1d3f6c4f0466e27)
Dreamweaver允许为网页文档插入12种基本的特殊符号,每种特殊符号的具体作用如下表所述。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00365.jpg?sign=1738887007-Bt7k0WomEwyOKLI2yh1tudSmlALYqh9q-0-56068952f804f220ce8da57b5c125b39)
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00366.jpg?sign=1738887007-LmWW3VJZzEqec0bHtzVagGY26KAdV8LO-0-c7e9092c71aa06f017178cede87a767b)
除了上述12种特殊符号之外,用户还可以执行【插入】|【字符】|【其他字符】命令,在弹出的【插入其他字符】对话框中,选择所需插入的符号,单击【确定】按钮即可。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00367.jpg?sign=1738887007-2Ipa83Ffw5Vx5CMggdtAZ5bwOkniwyyT-0-22c7e540bf9d8851ce2b0d29292e4da1)
提示
用户也可以在【插入】面板中的【常用】类别中,单击【字符】下拉按钮,在下拉列表中选择所需插入的特殊字符即可。
2. 插入水平线
Dreamweaver还为用户提供了插入水平线功能,运用该功能可以方便地插入水平线。
首先,将光标定位在需要插入水平线的位置。然后,执行【插入】|【水平线】命令,即可在光标定位处插入一条水平线。
提示
用户也可以在【插入】面板中的【常用】类别中,单击【水平线】按钮,即可在光标处插入一条水平线。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00368.jpg?sign=1738887007-f9mOA0IZgjHb7vMpV4OvHWd1vsgsJG49-0-63c60aa4c08999e432c2101d27e3fae8)
插入水平线之后,在【属性】面板中将会显示水平线的各种属性选项,以方便用户根据实际使用来制作一些相对优美的水平线。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00369.jpg?sign=1738887007-xflkF7AhXq1EaIO7cn0pvatx5Un1A1PQ-0-8ebbed9d19094d76a70f76585d08ced9)
在【属性】面板中,主要包括下列四种属性选项:
□水平线 用于设置水平线的ID。
□宽/高 用于设置水平线的宽度和高度,单位可以是像素或百分比。
□对齐 用于设置水平线的对齐方式,包括【默认】、【左对齐】、【居中对齐】和【右对齐】。
□阴影 启用该复选框,可为水平线添加阴影效果。
技巧
设置水平线的宽度为1,然后设置其高度为较大的值,可得到垂直线。
3. 插入日期
用户不仅可以在网页中插入水平线和特殊符号,还可以插入当前时间和日期。
执行【插入】|【日期】命令,在弹出的【插入日期】对话框中,设置日期和时间选项,单击【确定】按钮即可。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00370.jpg?sign=1738887007-2zWTRYwMmcKroUUGaRBQ6aumO3qLuMr6-0-544418247bfc60c746a4332ab7ed69ee)
在【插入日期】对话框中,主要包括下列四种选项:
□星期格式 用于设置中文或英文样式的星期显示格式,也可以设置为不显示样式。
□日期格式 用于设置日期显示格式。
□时间格式 用于设置时间显示格式。
□存储时自动更新 启用该复选框,可以在每次保存网页文档时都自动更新插入的日期时间。