- 网页设计与网站建设完全实战手册
- 刘贵国
- 1445字
- 2025-02-18 05:28:50
5.2 插入其他文本元素
在网页中除了输入文本外,还可以插入其他元素,如插入特殊字符、水平线、时间、注释等,下面分别介绍这些元素的插入。
5.2.1 插入特殊字符
制作网页时,有时要输入一些键盘上没有的特殊字符,如日元符号、注册商标等,这就需要使用Dreamweaver的特殊字符功能。下面通过插入版权符号讲述特殊字符的添加,效果如图5-9所示,具体操作步骤如下:

★提示★
许多浏览器(尤其是旧版本的浏览器,以及除Netscape Netvigator和Internet Explorer外的其他浏览器)无法正常显示很多特殊字符,因此应尽量少用特殊字符。

图5-9 特殊字符的添加效果
01 打开网页文档,将光标置于要插入版权符号的位置,如图5-10所示。

图5-10 打开网页文档
02 执行“插入”|“字符”|“版权”命令,如图5-11所示。

图5-11 执行“版权”命令
03 选择命令后,即可插入版权字符,如图5-12所示。

图5-12 插入版权符号
04 保存文档,按F12键在浏览器中预览,效果如图5-9所示。
5.2.2 插入水平线
很多网页在其下方会显示一条水平线,以分割网页主题内容和底端的版权声明等。根据设计需要,也可以在网页任意位置添加水平线,达到区分网页中不同内容的目的。下面通过实例讲述如何在网页中插入水平线,效果如图5-13所示,具体操作步骤如下:

图5-13 插入水平线的效果

01 打开网页文档,将光标置于要插入水平线的位置,如图5-14所示。

图5-14 打开网页文档
02 执行“插入”|“水平线”命令,如图5-15所示。

图5-15 插入水平线
03 选择命令后,即可插入水平线,如图5-16所示。

图5-16 插入水平线
04 选中插入的水平线,打开“属性”面板,在面板中将“宽”设置为700、“高”设置为1、“对齐”设置为居中对齐,如图5-17所示。

图5-17 设置水平线
05 打开“代码”视图,输入颜色代码color=“#002C11”,将水平线的颜色设置为绿色,如图5-18所示。

图5-18 设置水平线的颜色
06 保存文档,按F12键在浏览器中预览,效果如图5-13所示。
5.2.3 插入时间
当需要在网页的指定位置插入准确的日期资料时,可以执行“插入”|“日期”命令。添加日期的好处是:既可以选用不同的日期格式,规范而准确地表达日期,同时还可以设置自动更新,让网页显示当前最新的日期和时间。
下面通过实例讲述如何在网页中插入日期,插入日期的效果如图5-19所示,具体操作步骤如下:

图5-19 插入时间效果

01 打开网页文档,如图5-20所示。

图5-20 打开网页文档
02 将光标置于要插入日期的位置,执行“插入”|“日期”命令,如图5-21所示。

图5-21 插入水平线
03 选择命令后,弹出“插入日期”对话框,在对话框中设置相应的格式,如图5-22所示。

图5-22 “插入日期”对话框
04 单击“确定”按钮,即可插入日期,如图5-23所示。

图5-23 插入日期
5.2.4 插入空格
在做网页的时候,有时需要输入空格,但却无法输入。导致无法正确输入空格的原因可能是输入法的错误,只有正确使用输入法才能够解决这个问题。在字符之间添加空格的方法非常简单,效果如图5-24所示,具体操作步骤如下:

图5-24 在字符之间添加空格的效果

01 打开网页文档,将光标置于要添加空格的位置,如图5-25所示。

图5-25 打开网页文档
02 切换到“拆分”视图,输入 代码,如图5-26所示。在“拆分”视图中输几次代码,在“设计”视图中就会出现几个空格。

图5-26 输入代码
03 保存文档,按F12键在浏览器中预览,效果参见图5-24所示。
★提示★
在字符之间要插入连续的空格,可执行“插入”|“字符”|“不换行空格”菜单命令,或者按快捷键Ctrl+Shift+空格键。实际是在代码中添加了“ ”这个字符。
★高手支招★
还可以使用以下两种方法插入空格:
●如果使用智能ABC输入法,按快捷键Shift+空格键,这时输入法属性栏上的半月形就变成了圆形,然后再按空格键,空格就出来了。
●在“常用”插入栏的“字符”下拉列表选择“不换行空格”选项,就可直接输入空格。