1.4 花色文本——网页特色文本_Dreamweaver CS3网站制作炫例精讲-QQ阅读男生武侠网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

1.4 花色文本——网页特色文本

在我们阅读一些网站时，网页中除了正常显示的汉字或者外国文字以外，还会看到很多符号文字，这些符号文字标新立异很能吸引浏览者眼球。所以，作为制作网页的我们来说，就特别想知道这些符号文字该如何在网页中表现出来。

1.4.1 解决网页空格问题

在 Dreamweaver 制作网页时，输入空格可不是件简单的事。说其不简单，是因为在Dreamweaver的文档窗口中即使输入数个【Space】空格键，在【设计】视图以及在预览窗口中也不会如实显示出这么多空格，而是仅会显示为一个空格。如何解决这个问题，我们就要说到网页“空格”的真面目是什么了。

01 如图1-28所示，将鼠标光标停留在页面中需要插入“空格”的位置。

图1-28 插入“不换行空格”

02 打开【插入】面板的【文本】选项卡，单击【字符】按钮后的三角箭头。

03 在弹出的下拉菜单中选择【不换行空格】命令，即在文档中插入了一个空格位。

04 重复01→03的步骤可在文档中插入多个空格。

注：【字符】按钮会有很多的字符可供选择，如空格、货币符号、商标版权等。而该按钮默认显示的即为最近一次选择的某字符。所以，如果最近一次刚选择过【不换行空格】，那么【字符】按钮默认就显示为空格的图标，直接单击该图标就可以在文档中插入“空格”，而无须每次都打开下拉菜单进行选择。

如图1-29所示，将文档窗口切换至【拆分】视图，我们可以清楚地看到，一个空格其实就是由HTML标签“ ”来表示的，有几个“ ”就代表页面中有几个空格。

图1-29 “空格”的HTML代码查看

1.4.2 Dreamweaver软件自带的特殊字符

在网页中常见的一些特殊字符其中有一部分是在Dreamweaver软件中自带的。

01 如图1-30所示，在【插入】面板中【文本】选项卡中单击【字符】按钮上的三角箭头。

02 在弹出的下拉菜单中选择【其他字符】命令。

03 弹出【插入其他字符】对话框，在框体中选择需要的特殊字符，此时在【插入】文本框中将显示与之相应的HTML标签代码。

04 选择完成后，单击【确定】按钮即可将该特殊文本插入到网页中。

图1-30 插入Dreamweaver的“其他字符”

1.4.3 输入法自带特殊字符

网页中的特殊字符除了可以在Dreamweaver软件的面板菜单中获得外，还可以在本机输入法的面板中获得，例如“智能ABC输入法”、“五笔输入法”、“微软拼音输入法”等均有该输入法的面板。本节将以“谷歌拼音输入法”为例进行如何输出特殊字符的说明。

01 如图1-31所示，打开“谷歌拼音输入法”状态栏，右键单击键盘按钮。

图1-31 通过输入法面板输入特殊符号

02 在弹出的菜单中选择【特殊符号】命令。

03 打开【特殊符号】软键盘，单击软键盘上显示的特殊符号或输入键盘上相应的键，就可在网页文档中插入了该“特殊符号”了。

04 取消【特殊符号】软键盘并切换至正常字符输入模式，单击输入法状态栏上的键盘按钮还原即可。

注：通过软键盘不仅可以选择“特殊符号”，还可以选择“标点符号”、“希腊字母”、“拼音符号”等输出诸如“【】”、“αβγ”、“hǎo”等的特殊字符，如图1-32所示。

图1-32 特殊符号的显示

1.4.4 特殊字体——特殊字符

在 1.3节已经了解到可通过定义文本的样式让文本显示出不同的风格，另外在计算机内部还默认安装了一些符号字体，这些字体在Windows系统中基本都具备，所以这就允许用户可以直接使用这些字体来表现一些特殊字符。这些字体主要包括“Webdings”、“Wingdings”、“Wingdings 2”、“Wingdings 3”等。

01 如图1-33所示，打开【CSS样式】面板，单击【新建CSS规则】按钮。

02 弹出【新建CSS规则】对话框：

ⅰ.在【选择器类型】中选择“类（可应用于任何标签）”单选按钮。

ⅱ.在【名称】中输入zt1”。

ⅲ.在【定义在】中选择“仅对该文档”单选按钮。

03 单击【确定】按钮进行该自定义样式的具体设置。