![新编网站设计与网页制作(Dreamweaver CC + Photoshop CC + Flash CC版)从入门到精通](https://wfqqreader-1252317822.image.myqcloud.com/cover/836/22691836/b_22691836.jpg)
2.5 设置文本属性
本节教学录像时间:16分钟
设置文本属性主要是对网页中的文本格式进行编辑和设置,包括文本字体、文本颜色和字体样式等。
2.5.1 设置字体
对网页中的文本进行字体设置的具体步骤如下。
步骤01 打开随书光盘中的“素材\ch02\2.5\2.5.1\index.html”文件。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0053_0007.jpg?sign=1739241392-74EzrZ3Zst1HTJ6D7vl7rKWWVVyvs69P-0-2415b72ba82abc83218f7aba0adde37c)
步骤02 在文档窗口中,选定要设置字体的文本。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0053_0008.jpg?sign=1739241392-bH40g5crXUI2wYV2fGo2zyIo6tELybxw-0-cb01e5663836cd892e461bfbe27af014)
步骤03 单击【属性】面板中的【页面属性】按钮,弹出【页面属性】对话框,设置文本字体为“黑体”。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0053_0009.jpg?sign=1739241392-7qUGnhAe1scZEKatcfHs26A6mFrA5l9t-0-ae431a866c9b48cc3176e2401565b7fa)
步骤04 单击【确定】按钮后即可看到所选文本字体已经发生变化。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0054_0001.jpg?sign=1739241392-OY9Fi0arWI18BWUp8E2Cvke3FpfVUBeO-0-8afc63a549e5c1db0e574898149d3e0d)
如果字体列表中没有所要的字体,可以按照如下的方法编辑字体列表。
在【页面属性】面板的【页面字体】下拉列表中选择【管理字体】选项,打开【管理字体】对话框。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0054_0002.jpg?sign=1739241392-PM6KE3DXq2B78ziOG3GthmVq1nOz1rve-0-c542ad6213ffd7f908aabbeec86901cd)
选择【自定义字体堆栈】选项卡,在【可用字体】列表框中选择要使用的字体,然后单击按钮,所选字体就会出现在左侧的【选择的字体】列表框中。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0054_0004.jpg?sign=1739241392-KiEKNJ8WT5V16hzM4uUJ7P7NJinZglBF-0-63b1f2433365fdd5023f0aa110a4af06)
如果要创建新的字体列表,可以从列表框中选择【(在以下列表中添加字体)】选项。如果没有出现该选项,可以单击对话框左上角的按钮添加。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0054_0006.jpg?sign=1739241392-EWcX7uUwo9moQUuqvMtguFMp8LsrTXZP-0-b82442c21ad57ccfbc6f43f372a1a518)
要从字体组合项中删除字体,可以从【字体列表】列表框中选定该字体组合项,然后单击列表框左上角的按钮,设置完成单击【确定】按钮即可。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0054_0008.jpg?sign=1739241392-CdWL7lcBvb5Z478NuXMfgd503uD46vIX-0-a4824f8bef1b9117e64aa5e8ae2b553b)
2.5.2 设置字号
字号是指字体的大小。在Dreamweaver CC中设置文字字号的具体步骤如下。
步骤01 打开随书光盘中的“素材\ch02\2.5\2.5.2\index.html”文件,选定要设置字号的文本。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0054_0009.jpg?sign=1739241392-bwCgjmGDtTnUrM4lrrNW9SsGmxPVfS4r-0-679f595b68d8d2b2c9b4b8e7cb3597d9)
步骤02 在下面的【属性】面板中,单击【大小】右侧的下拉按钮设置字体大小。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0055_0001.jpg?sign=1739241392-NjDWNmkI2F2ZT6hg0EeG5Blrc9RUXQ3R-0-2a6f39d975cf41035a591af54d7a5ef0)
小提示
如果希望设置字符相对默认字符大小的增减量,可以在同一个下拉列表中选择【xx-small】、【xx-large】或【smaller】等选项。如果希望取消对字号的设置,可以选择【无】选项。
2.5.3 设置字体颜色
丰富的字体颜色会增强网页的表现力。在Dreamweaver CC中,设置字体颜色的具体步骤如下。
步骤01 打开随书光盘中的“素材\ch02\2.5\2.5.2\index.html”文件,选定要设置字体颜色的文本。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0055_0002.jpg?sign=1739241392-XQKYkIb955tBed77fNneogvsrGCLLaZF-0-dc0912a7fcf41fe2805fbd2dc1f93889)
步骤02 在【属性】面板上单击【文本颜色】按钮,打开Dreamweaver CC颜色板,从中选择需要的颜色,也可以直接在该按钮右边的文本框中输入颜色的十六进制数值。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0055_0004.jpg?sign=1739241392-1ZxBKNQHOu1jExzXuW43xA4MVKWRn1Bi-0-9e225a1254fd87f53afd710d10402005)
步骤03 单击后即可更改选中文本的颜色。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0055_0005.jpg?sign=1739241392-FVxgXdHx82YJlNC4AnOk2wDXwefErTlH-0-99763e6f4370258d393613929031edc8)
2.5.4 设置字体样式
字体样式是指字体的外观显示样式,如字体的加粗、倾斜、加下划线等。利用Dreamweaver CC可以设置多种字体样式,具体的操作步骤如下。
步骤01 选定要设置字体样式的文本。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0055_0006.jpg?sign=1739241392-Rkmc5plh31T2q1pQq9np33KaNZ5hIVH0-0-77c4ed3115ddf10ca32aa41bcaa87ba9)
步骤02 选择【格式】【HTML样式】菜单命令,弹出子菜单。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0056_0002.jpg?sign=1739241392-Xy7xnTmImQtDHul1rruDyLCP8HKAZ0uD-0-55be2e4de0e7b5c12a034f3f18f95305)
(1)粗体
从子菜单中选择【粗体】菜单命令,可以将选定的文字加粗显示。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0056_0003.jpg?sign=1739241392-UKya1dbsay8LDWykZbG4wx1uLE0dicpY-0-f8d43884d80c55b5d333575dc5afc80f)
(2)斜体
从子菜单中选择【斜体】菜单命令,可以将选定的文字显示为斜体样式。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0056_0004.jpg?sign=1739241392-VJdE0szJ4CVcjUPHLFygN3HlEuFkK9dV-0-05c430d11f7eae29f4ae9f4770485c6d)
(3)下划线
从子菜单中选择【下划线】菜单命令,可以在选定文字的下方显示一条下划线。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0056_0005.jpg?sign=1739241392-ksuXA0ZnKLzIFMQ05FEFIofIYMUwO2gW-0-5af47811d3679794f5514ce4c8918b3d)
小提示
也可以利用【属性】面板设置字体的样式。选定字体后,单击【属性】面板上的按钮为加粗样式,单击按钮为斜体样式。
(4)删除线
从子菜单中选择【删除线】菜单命令,就会在选定文字的中部横贯一条横线,表明文字被删除。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0056_0007.jpg?sign=1739241392-bN0c8h3FjzLnPN4ZxAs0y0xIvDkU4v4w-0-b1318e2d4695bcddd2f0946f5823739a)
(5)打字型
从子菜单中选择【打字型】菜单命令,就可以将选定的文本作为等宽度文本来显示。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0056_0008.jpg?sign=1739241392-D0V5vJxMMh5SeiQtd1eodn7cLF6lUVZp-0-3eb6de6fdf41ae98037fde53ec1897fe)
(6)强调
从子菜单中选择【强调】菜单命令,则表明选定的文字需要在文件中被强调。大多数浏览器会把它显示为斜体样式。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0056_0009.jpg?sign=1739241392-A0L41dGtY7p4z5ObIZtBZsnak2KF7Ebb-0-edefbaa246e57ae89859871515cb6a3b)
(7)加强
从子菜单中选择【加强】菜单命令,则表明选定的文字需要在文件中以加强的格式显示。大多数浏览器会把它显示为粗体样式。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0056_0010.jpg?sign=1739241392-td0qAhqhSnCFocwb9ikTlhWaaceRuwKs-0-3617afb5d339c4ed2eab19776ff09689)
2.5.5 编辑段落
段落指的是一段格式上统一的文本。在文件窗口中每输入一段文字,按【Enter】键后,就会自动形成一个段落。编辑段落主要是对网页中的一段文本进行设置。
1.设置段落格式
使用【属性】面板中的【格式】下拉列表,或选择【格式】【段落格式】菜单命令,都可以设置段落格式。
步骤01 将光标放置在段落中任意一个位置,或选择段落中的一些文本。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0056_0013.jpg?sign=1739241392-os0mzVaoojZR3WW2fC2nenifcNbRbFQ1-0-e17bf0dd2ae5a4625d8ecd5a85bdf1bc)
步骤02 选择【格式】【段落格式】子菜单中的菜单命令。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0057_0002.jpg?sign=1739241392-g5eFKQsMqUxebwToRNxiTsoMXkSk4yY4-0-ab745e6cd878023a31b1be80f328e892)
步骤03 选择一个段落格式(如【标题1】),然后单击【拆分】按钮,在代码视图下可以看到与所选格式关联的HTML标记(如表示【标题1】的h1、表示【预先格式化的】文本的pre等)将应用于整个段落。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0057_0003.jpg?sign=1739241392-kyVVUa8tBkZgCOVa8VxxPuzyaMY1gWgO-0-5d403975a1f5d0dba7f09ff81a222ebe)
小提示
若要更改此设置,可以选择【编辑】【首选项】菜单命令,弹出【首选项】对话框,然后在【常规】分类中的【编辑选项】区域中,撤选【标题后切换到普通段落】复选框。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0057_0005.jpg?sign=1739241392-h8zzYCbwNdSVYAL7HP2erEHjtGuIRv1y-0-450a219ab723b5c1f36586c634a7ce58)
2.定义预格式化
在Dreamweaver中,不能连续地输入多个空格。在显示一些特殊格式的段落文本(如诗歌)时,这一点就会显得非常不方便。可以使用预格式化标签<pre>和</pre>来解决这个问题。
小提示
预格式化指的是预先对<pre>和</pre>之间的文字进行格式化,这样,浏览器在显示其中的内容时,就会完全按照真正的文本格式来显示,即原封不动地保留文档中的空白,如空格及制表符等。
设置预格式化段落的具体操作步骤如下。
步骤01 将光标放置在要设置预格式化的段落中。
小提示
如果要将多个段落设置为预格式化,则可同时拖选多个段落。
步骤02 按【Ctrl+F3】组合键打开【属性】面板,在【格式】下拉列表中选择【预先格式化的】选项,也可以选择【格式】【段落格式】
【已编排格式的】菜单命令。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0057_0009.jpg?sign=1739241392-Ro4OYKSzrvtyCo5bCn2qtUFCA1Bu3tOm-0-0f4d19b66972e65eabbfd48a352d2ce0)
该操作会自动地在相应段落的两端添加<pre>和</pre>标记。如果原来段落的两端有<p>和</p>标记,则会分别用<pre>和</pre>标记来替换它们。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0057_0010.jpg?sign=1739241392-M7NEjsRNtzsNhozgGqVVkmFyj8ynNgr1-0-6e7eaeacbbc5ce14ae0675e6809e7e7d)
小提示
由于预格式化文本不能自动换行,因此除非绝对需要,否则尽量不要使用预格式化功能。
如果要在段落的段首空出两个空格,不能直接在【设计视图】方式下输入空格,而应切换到【代码视图】中,在段首文字之前输入代码“ ”。
小提示
该代码只表示一个半角字符,要空出两个汉字的位置,需要添加4个代码。这样,在浏览器中就可以看到段首已经空两个格了。
3.设置段落的对齐方式
段落的对齐方式指的是段落相对文件窗口(或浏览器窗口)在水平位置的对齐方式,有4种对齐方式:左对齐、居中对齐、右对齐和两端对齐。
对齐段落的具体步骤如下。
步骤01 将光标放置在要设置对齐方式的段落中。
步骤02 单击【属性】面板【CSS】选项卡中的对齐按钮即可。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0058_0002.jpg?sign=1739241392-4Ib9rmD3hevjJw9AWwfde9tXQH9odehG-0-bcb25cf90add1cd4a1be1e3f9af3197d)
【左对齐】按钮:单击该按钮,可以设置段落相对文档窗口左对齐。
【居中对齐】按钮:单击该按钮,可以设置段落相对文档窗口居中对齐。
【右对齐】按钮:单击该按钮,可以设置段落相对文档窗口右对齐。
【两端对齐】按钮:单击该按钮,可以设置段落相对文档窗口两端对齐。
4.设置段落缩进
在强调一段文字或引用其他来源的文字时,需要对文字进行段落缩进,以表示和普通段落有区别。缩进主要是指内容相对于文档窗口(或浏览器窗口)左端产生的间距。
将光标放置在要设置缩进的段落中。如果要缩进多个段落,则选择多个段落,选择【格式】【缩进】菜单命令,即可将当前段落往右缩进一段位置。
单击【属性】面板中的【删除内缩区块】按钮和【内缩区块】按钮
,即可实现当前段落的凸出和缩进。凸出是将当前段落往左恢复一段缩进位置。
小提示
也可以使用快捷键来实现缩进。按【Ctrl + Alt+ ]】组合键可以进行一次右缩进,按【Ctrl + Alt +[】组合键可以向左恢复一段缩进位置。
2.5.6 检查拼写
如果要对英文材料进行检查更正,可以使用Dreamweaver CC中的检查拼写功能。选择【命令】【检查拼写】菜单命令,可以检查当前文档中的拼写。【检查拼写】命令忽略HTML标记和属性值。
默认情况下拼写检查器使用美国英语拼写字典。要更改字典,可以选择【编辑】【首选项】菜单命令,在弹出的【首选项】对话框中选择【常规】分类,在【拼写字典】下拉列表中选择要使用的字典,然后单击【确定】按钮即可。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0058_0012.jpg?sign=1739241392-cokZ8YcslAEeVrm89bnqU5ms4olrcWbw-0-17b4f507c7c883b192bc4bd8b93aef6e)
选择【命令】【检查拼写】菜单命令,如果文本内容中有错误,就会弹出【检查拼写】对话框。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0059_0002.jpg?sign=1739241392-QKpeoDA4VqL0fqkCta6ozJz4W14JKD9I-0-10325df0a47069c4d0bc1c1a9d3ce6c6)
如果单词的拼写没有错误,则会弹出如图所示的提示框。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0059_0003.jpg?sign=1739241392-pc1SOGXP0YGpArSBcVkGcw1PRH7cUbOB-0-f4a0d19076c742d89db17a654ed2fcf3)
2.5.7 创建项目列表
列表就是那些具有相同属性元素的集合。Dreamweaver CC常用的列表有无序列表和有序列表两种,无序列表使用项目符号来标记无序的项目,有序列表使用编号来记录项目的顺序。
1.无序列表
在无序列表中,各个列表项之间没有顺序级别之分,通常使用一个项目符号作为每个列表项的前缀。
设置无序列表的具体步骤如下。
步骤01 将光标放置在需要设置无序列表的文档中。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0059_0005.jpg?sign=1739241392-x7EMnNMOJWuapDxca9OdXHVSj12Pciyw-0-45ad843eb3fc8874c7ebf0d716c54241)
步骤02 选择【格式】【列表】
【项目列表】菜单命令。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0059_0008.jpg?sign=1739241392-9tH9gCEVrfmv781GD9JlsxFef5CltT1i-0-018b1c93ef33b5c79296f57b4568a0a5)
步骤03 光标所在的位置将出现默认的项目符号。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0059_0009.jpg?sign=1739241392-EfQaD1VLPgsb4yOnDExdPaz0l69Gd55d-0-90026d1372e9f68eda9ee59e5aff6d39)
步骤04 重复以上步骤,设置其他文本的项目符号。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0059_0010.jpg?sign=1739241392-DC9V9EXnZYylUKYmD4kCOgYhnACa1jmn-0-db3377feafe26deafbea9bb633dca92f)
2.有序列表
对于有序编号,可以指定其编号类型和起始编号。可以采用阿拉伯数字、大写字母或罗马数字等作为有序列表的编号。
设置有序列表的具体步骤如下。
步骤01 将光标放置在需要设置有序列表的文档中。
步骤02 选择【格式】【列表】
【编号列表】菜单命令。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0060_0003.jpg?sign=1739241392-FDIpkVoL3frpB6ur7UBMrpcBpIgQyl79-0-84638ca1e25a0b74aba49c6f7f496f71)
步骤03 光标所在的位置将出现编号列表。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0060_0004.jpg?sign=1739241392-3nh9xa6dp2yMApq6w6Ug43RGfshJ8PJR-0-0a199caf8722d77713389aa6fdfd8f4e)
步骤04 重复以上步骤,设置其他文本的编号列表。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0060_0005.jpg?sign=1739241392-ICp9PpeuEXIpQRev0T5eQe3rXhm0cp39-0-056adca4d321875d44e4766bbca2e6cd)
列表还可以嵌套,嵌套列表是包含其他列表的列表。选定要嵌套的一个或多个列表项,单击【属性】面板中的【缩进】按钮或选择【格式】
【缩进】菜单命令。
![](https://epubservercos.yuewen.com/C07A11/11261880203078906/epubprivate/OEBPS/Images/figure_0060_0008.jpg?sign=1739241392-55zFjrEJMttuQeYs3PGnNN2LpQjeXhLJ-0-a703ea7ccfeb59156be0c61e56a0ead9)