Dreamweaver CS3网页制作融会贯通
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

4.2 设置文本属性

输入文本后,通常都要对文本进行格式化设置,使网页的外观更美观。对文本的格式化设置主要包括文本的格式、字体和大小、样式以及对齐方式等,各属性设置可以在“文本”属性检查器中进行。

4.2.1 设置文本格式

文本格式的设置由位于“文本”属性检查器最左侧的“格式”下拉列表框来实现。该下拉列表框中主要包括段落、标题和预先格式化的等选项,如图4-9所示。

◆ 图4-9

段落:与其他文字编辑软件不同,Dreamweaver中的段落与段落之间会用一行空白行来隔开段落之间的文本,如图4-10所示。

◆ 图4-10

标题:按从大到小的顺序依次为标题1~标题6,在上一章已经为大家介绍过,这里不再赘述。

预先格式化的:此格式能够完全保留文本中原有的空格和换行,它可以将段落中的文字排版和格式原封不动地呈现出来,其显示效果如图4-11所示。

◆ 图4-11

温馨小贴士

各种文本格式之间可以互相转换,其操作方法为:选择需要转换的文本,重新在“格式”下拉列表框中选择一个选项来实现文本格式的转换。

4.2.2 设置文本字体和大小

在Dreamweaver CS3中,设置被选择文本内容的字体和大小,是通过“字体”和“大小”下拉列表框来完成的。

字体:通过文本“属性”检查器左侧的“字体”下拉列表框可以为当前选择的文本设置一种字体,如图4-12所示。如果不进行任何选择,默认情况下“字体”为“宋体”。

◆ 图4-12

大小:通过“大小”下拉列表框设置被选择文本字体的大小,通过其后的“单位”下拉列表框设置被选择文本字体的单位,如图4-13所示。

◆ 图4-13

新手练兵场

在文本“属性”检查器中添加“黑体”字体到“字体”下拉列表框。

STEP 01. 选择选项。在文本“属性”检查器的“字体”下拉列表框中单击右侧的按钮,在弹出的下拉列表中选择“编辑字体列表”选项,如图4-14所示。

◆ 图4-14

STEP 02. 添加字体。在打开的“编辑字体列表”对话框的“可用字体”列表框中选择“黑体”字体,单击中间的按钮将其添加到“选择的字体”列表框,如图4-15所示,单击按钮完成字体的添加。

◆ 图4-15

温馨小贴士

如果需要添加更多的字体,可在如图4-15所示的“编辑字体列表”对话框中单击按钮来添加。另外,要删除不需要的字体则应先在该对话框的字体列表中选择要删除的字体,单击按钮来删除。

4.2.3 设置文字样式

在Dreamweaver CS3中设置字体样式主要包括粗斜体的设置、文本颜色的设置等。如果预先定义了CSS样式,还可以通过“样式”下拉列表框快速对文本进行美化操作。

当对一段选择的文本进行格式化操作后,Dreamweaver CS3会自动将这些格式设置组合后保存为一段CSS样式,同时在文本“属性”检查器的“样式”下拉列表框中显示出该CSS样式的名称,该样式名称的文字会呈现出格式设置的具体效果。当需要在其他文本对象上使用这些格式设置时,直接从“样式”下拉列表框中选择该样式名称即可,如图4-16所示。

◆ 图4-16

科技播报站

Dreamweaver的样式命名规则并不一定适合所有用户,因此常常会对这些样式名称进行修改,其操作方法是选择“样式”下拉列表框中的“重命名”选项,在打开的“重命名样式”对话框中输入新名称即可。

粗体:选择文本,单击“粗体”按钮,则目标文本变为粗体样式,如图4-17所示,再次单击该按钮则可以取消目标文本的粗体样式。

◆ 图4-17

斜体:选择文本,单击“斜体”按钮,则目标文本变为斜体样式,如图4-17所示,再次单击该按钮则可以取消目标文本的斜体样式。

“文本颜色”按钮和文本框:单击“文本颜色”按钮,在打开的颜色选择器中可以为文本设置颜色,如图4-18所示,也可以通过在“文本颜色”文本框中输入16进制颜色编码来为目标文本设置一种颜色。

◆ 图4-18

4.2.4 设置文本对齐方式

文本对齐方式由4个设置按钮组成,如图4-19所示,它们都用于设置文本相对于页面或其父元素(如表格)的水平对齐方式。

◆ 图4-19

① “左对齐”按钮

② “居中对齐”按钮

③ “右对齐”按钮

④ “两端对齐”按钮

与上一节的“粗体”按钮类似,选择要编辑的文本后单击相应的按钮即可使目标文本按相应的对齐方式对齐,而当选择的文本已设置有对齐方式时,对应的对齐方式按钮将处于选择的状态,单击该按钮可以清除目标文本当前的对齐方式设置。

4.2.5 应用案例——格式化文字

本小节主要讲解了设置文本样式的相关知识,下面将综合这些知识,编辑“文本格式化.htm”网页,其最终效果如图4-20所示(CD:\效果\第4章\文本格式化.htm)。

◆ 图4-20

其具体操作步骤如下。

STEP 01. 选择文本。打开“文本格式化”网页(CD:\素材\第4章\文本格式化.htm),选择“WiFi”文本,如图4-21所示。

◆ 图4-21

STEP 02. 选择字体。在“属性”检查器的“字体”下拉列表框中选择“Arial, Helvetica, sans-serif”选项,如图4-22所示。

◆ 图4-22

STEP 03. 设置字体大小。在“大小”下拉列表框中选择“18”选项,“单位”下拉列表框保持默认的“像素(px)”选项,如图4-23所示。

◆ 图4-23

STEP 04. 设置文本颜色。单击“文本颜色”按钮,在打开的颜色选择器中选择“#FF0000”选项,如图4-24所示。

◆ 图4-24

STEP 05. 应用样式。在编辑窗口中选择文本中后一个“WiFi”文本,在“属性”检查器的“样式”下拉列表框中选择“STYLE1”选项应用一个文本样式,如图4-25所示。

◆ 图4-25

STEP 06. 设置粗体、斜体及颜色。在编辑窗口中选择“Intel”文本,单击“属性”检查器中的“粗体”按钮和“斜体”按钮,将选择的文本同时设为粗体和斜体显示,在“文本颜色”文本框中输入“#000099”,如图4-26所示。

◆ 图4-26

STEP 07. 设置对齐方式。在编辑窗口中选择全部文本内容,在“属性”检查器中单击“居中对齐”按钮将整段文本设为居中对齐,如图4-27所示。

◆ 图4-27

STEP 08. 保存文档。选择“文件/保存”命令对完成文本格式化操作的文档进行保存,如图4-28所示,按【F12】键进行预览,其最终效果如图4-20所示。

◆ 图4-28

温馨小贴士

文本居中对齐是参照其父元素而言的,本例中的这段文本的父元素就是整个网页体,因此它显示在页面的中间位置,如果父元素不是网页体,则居中的文本往往不会真正在页面正中显示。