- Dreamweaver+jQuery移动网页设计从新手到高手
- 张雪玲 刘琳
- 1406字
- 2025-02-21 04:40:33
2.5 设置文本属性
文本属性主要包括两类:文字格式和段落格式。文字格式又包括文字的字体、字号、颜色以及文本的对齐方式等。
2.5.1 设置标题段落格式
标题经常用来强调段落要表现的内容,在HTML中共定义了6级标题,从1级到6级,每级标题的字号依次递减。
选中设置标题段落的文本,执行“窗口”|“属性”命令,打开“属性”面板,在“属性”面板中单击HTML选项卡按钮,在该选项卡的“格式”下拉列表中选择标题样式,如图2-25所示。

图2-25
★知识要点★
在“格式”下拉列表中可以设置以下段落格式。
· 段落:选择该项,将插入点所在的文字块定义为普通段落,其两端分别被添加<p>和</p>标记。
· 预先格式化的:选择该项,则将插入点所在的段落设置为格式化文本,其两端分别被添加<pre>和</pre>标记。此时,在文字中间的所有空格和回车等格式全部被保留。
· 无:选择该项,则取消对段落的设置。
2.5.2 设置字体和字号
选择一种合适的字体和字号是决定网页美观、布局合理的关键。在设置网页时,应该对文本设置相应的字体和字号,具体操作步骤如下。
01选中要设置字号的文本,在“属性”面板中选择CSS选项卡,单击“大小”右侧的文本框,在弹出的下拉列表中选择合适的字号,或者直接在文本框中输入相应的字号,如图2-26所示。
02选中要设置字体的文本,在“属性”面板的CSS选项卡中,单击“字体”右侧的文本框,在弹出的下拉列表中选择合适的字体,如图2-27所示。

图2-26

图2-27
2.5.3 添加新字体
字体对网页中的文本来说是非常重要的,Dreamweaver中自带的字体比较少,但可以在Dreamweaver的字体列表中添加更多的字体,添加新字体的具体操作步骤如下。
01打开网页文档,在“属性”面板的“字体”下拉列表中执行“管理字体”命令,如图2-28所示。
02在弹出的“管理字体”对话框的“可用字体”列表框中选择要添加的字体,单击按钮添加到左侧的“选择的字体”列表框中,此时,在“字体”列表框中也会显示新添加的字体,如图2-29所示。重复以上操作即可添加更多的字体,若要删除已添加的字体,可以选中该字体并单击
按钮。

图2-28
03完成一个字体样式的编辑后,单击按钮可进行下一个样式的编辑。若要删除某个已经编辑的字体样式,可选中该样式后单击
按钮。
04完成字体样式的编辑后,单击“确定”按钮关闭该对话框。
2.5.4 设置文本颜色
Dreamweaver还可以改变网页文本的颜色,设置文本颜色的具体操作步骤如下。
01选中要设置颜色的文本,在“属性”面板中单击文本颜色按钮,打开如图2-30所示的调色板,在该调色板中选中所需的颜色。

图2-29

图2-30
02单击即可选取该颜色,并设置文本的颜色,如图2-31所示。

图2-31
★知识要点★
此时,也可以在调色板的对话框中直接输入颜色代码。
2.5.5 设置文本样式
单击“属性”面板的“字体”文本框,在弹出的菜单中可以设置文字的粗体和斜体,如图2-32所示。

图2-32
2.5.6 设置文本对齐方式
在“属性”面板中有4种对齐方式,每种对齐方式分别对应一个按钮,按钮:左对齐,
按钮:居中对齐,
按钮:右对齐,
按钮:两端对齐,如图2-33所示。

图2-33
★提示★
为什么使一行字居中,其他行也会自动居中?
在Dreamweaver中进行居中、居右操作时,默认的区域是P、H1~H6、div等格式标识符,如果语句没有用上述的标识符隔开,Dreamweaver会将整段文字都进行居中处理,解决方法就是将居中文本用P隔开。
2.5.7 设置文本的缩进和凸出
所谓“缩进”就是相对于文档窗口左端而言,将文字缩进,以表示与普通段落的区别。将光标置于要缩进的段落中,在“属性”面板中单击“内缩区块”按钮,即可将当前的段落缩进,如图2-34所示。在“属性”面板中单击“删除内缩区块”按钮
,即可删除当前段落的缩进设置。