![网页设计与网站建设完全实战手册](https://wfqqreader-1252317822.image.myqcloud.com/cover/459/27110459/b_27110459.jpg)
5.2 插入其他文本元素
在网页中除了输入文本外,还可以插入其他元素,如插入特殊字符、水平线、时间、注释等,下面分别介绍这些元素的插入。
5.2.1 插入特殊字符
制作网页时,有时要输入一些键盘上没有的特殊字符,如日元符号、注册商标等,这就需要使用Dreamweaver的特殊字符功能。下面通过插入版权符号讲述特殊字符的添加,效果如图5-9所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0175_0001.jpg?sign=1739974091-X9j4CDJDmxKeONwIZZBSYAl68TvFzfUG-0-da1d252852f337444f67bd5b912ea6e3)
★提示★
许多浏览器(尤其是旧版本的浏览器,以及除Netscape Netvigator和Internet Explorer外的其他浏览器)无法正常显示很多特殊字符,因此应尽量少用特殊字符。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00163.jpg?sign=1739974091-Bq5rU3y5ydA75nA55THvUvi0zXTcI5U4-0-f7eba059fea8cdc9a75f1415087eaae7)
图5-9 特殊字符的添加效果
01 打开网页文档,将光标置于要插入版权符号的位置,如图5-10所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00164.jpg?sign=1739974091-3ilwub1g7jEo6PmvNn2Opp06yzkcIeYZ-0-a0de8b8849740691fae4aee717e894a5)
图5-10 打开网页文档
02 执行“插入”|“字符”|“版权”命令,如图5-11所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00165.jpg?sign=1739974091-SqzPoiCUPqQDRUgAaLgwLFyBpKC7EQl3-0-16faf17d93635b16fedcfb10444b3fff)
图5-11 执行“版权”命令
03 选择命令后,即可插入版权字符,如图5-12所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00166.jpg?sign=1739974091-flZN2GyGwsBIH5EnCwCx04RZK3LxnPxG-0-6a622011900322ca86e584901a0a4a6e)
图5-12 插入版权符号
04 保存文档,按F12键在浏览器中预览,效果如图5-9所示。
5.2.2 插入水平线
很多网页在其下方会显示一条水平线,以分割网页主题内容和底端的版权声明等。根据设计需要,也可以在网页任意位置添加水平线,达到区分网页中不同内容的目的。下面通过实例讲述如何在网页中插入水平线,效果如图5-13所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00167.jpg?sign=1739974091-3xhasg26JXI20YdFYZYL1jJDauYo14zv-0-73a1cf99f7870066e2eedf06cc3706d4)
图5-13 插入水平线的效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0179_0001.jpg?sign=1739974091-JoueXff1alLX81aJX2OPyZ53zaiOwpmp-0-33c2dd90ed8ce013a4fe7de7842aa253)
01 打开网页文档,将光标置于要插入水平线的位置,如图5-14所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00168.jpg?sign=1739974091-rxEJLLTcIkbHa3KavYgRq7gbo40iNTLG-0-de92e3015dc2ba6fc0ce12bca73223c7)
图5-14 打开网页文档
02 执行“插入”|“水平线”命令,如图5-15所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00169.jpg?sign=1739974091-Jbrc2d2KiviCVC6g4c1Qiz8e7n5Zlgls-0-74351bac06f817177d9baf168ea47f53)
图5-15 插入水平线
03 选择命令后,即可插入水平线,如图5-16所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00170.jpg?sign=1739974091-DWXtE1EJoPeVutNWw8bUadFdMQ1gphMY-0-b116009bbe405aa05eaa518fe59b0354)
图5-16 插入水平线
04 选中插入的水平线,打开“属性”面板,在面板中将“宽”设置为700、“高”设置为1、“对齐”设置为居中对齐,如图5-17所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00171.jpg?sign=1739974091-zT1UVzZRF9uWHGQV79nHHIxhoRYp3E4e-0-8c60ceecbad65de071b3a85ba9789448)
图5-17 设置水平线
05 打开“代码”视图,输入颜色代码color=“#002C11”,将水平线的颜色设置为绿色,如图5-18所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00172.jpg?sign=1739974091-6RvYk1jCrq8yWwCc3Z3KxplGE8s3qCwB-0-0058763b092609db7baa41510ffa24e4)
图5-18 设置水平线的颜色
06 保存文档,按F12键在浏览器中预览,效果如图5-13所示。
5.2.3 插入时间
当需要在网页的指定位置插入准确的日期资料时,可以执行“插入”|“日期”命令。添加日期的好处是:既可以选用不同的日期格式,规范而准确地表达日期,同时还可以设置自动更新,让网页显示当前最新的日期和时间。
下面通过实例讲述如何在网页中插入日期,插入日期的效果如图5-19所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00173.jpg?sign=1739974091-bBUmViVgTGKiYVT9Cw3Dz6zdz0HUhBh7-0-d2113a3214656910bb6eb5c9348ff5cc)
图5-19 插入时间效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0184_0001.jpg?sign=1739974091-RXvaDxbrYM6K6GdV2vcdbzrj2FrI3cOY-0-d940263acb47154c546a222406f81e1d)
01 打开网页文档,如图5-20所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00174.jpg?sign=1739974091-QYQQdwEbPWBAMZeKB4Tormx4aPfAlyuu-0-cdc04ffa625cfeda4704282dcbb85f55)
图5-20 打开网页文档
02 将光标置于要插入日期的位置,执行“插入”|“日期”命令,如图5-21所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00175.jpg?sign=1739974091-9Hg6m9TYjmupf2r2WxrusDD1JwPAdfeC-0-dc428fd22588583c0add615b4228d764)
图5-21 插入水平线
03 选择命令后,弹出“插入日期”对话框,在对话框中设置相应的格式,如图5-22所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00176.jpg?sign=1739974091-QdKJSpl39Hy8OHm5cAr5tPimJtNGQi82-0-bf882195e7f2c4031428a254527d7821)
图5-22 “插入日期”对话框
04 单击“确定”按钮,即可插入日期,如图5-23所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00177.jpg?sign=1739974091-JMY66MyjFmsGpNr2GDp1SaxzoGW5we3H-0-b76b243081960f3d405f33bec429042f)
图5-23 插入日期
5.2.4 插入空格
在做网页的时候,有时需要输入空格,但却无法输入。导致无法正确输入空格的原因可能是输入法的错误,只有正确使用输入法才能够解决这个问题。在字符之间添加空格的方法非常简单,效果如图5-24所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00178.jpg?sign=1739974091-ExsJwdHi5bbWEfaMpbWzB52gkPzAzb4z-0-0989835187956ea199daa7642153c6ce)
图5-24 在字符之间添加空格的效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0187_0001.jpg?sign=1739974091-tcguJuNz84MzwMwSZDterjqhr7EZJmwR-0-7a08cf9198408eed6b39588e90bc8061)
01 打开网页文档,将光标置于要添加空格的位置,如图5-25所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00179.jpg?sign=1739974091-FZkYmqN4I4SGQt63xcNQVJFb0SjALBKT-0-ccffe20398ce7dfe76109698f8c7667e)
图5-25 打开网页文档
02 切换到“拆分”视图,输入 代码,如图5-26所示。在“拆分”视图中输几次代码,在“设计”视图中就会出现几个空格。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00180.jpg?sign=1739974091-NkNREdqHXD61ynNm9ozeb8UL6nns1H8U-0-76473c263b39c82265be941ccc8fb3de)
图5-26 输入代码
03 保存文档,按F12键在浏览器中预览,效果参见图5-24所示。
★提示★
在字符之间要插入连续的空格,可执行“插入”|“字符”|“不换行空格”菜单命令,或者按快捷键Ctrl+Shift+空格键。实际是在代码中添加了“ ”这个字符。
★高手支招★
还可以使用以下两种方法插入空格:
●如果使用智能ABC输入法,按快捷键Shift+空格键,这时输入法属性栏上的半月形就变成了圆形,然后再按空格键,空格就出来了。
●在“常用”插入栏的“字符”下拉列表选择“不换行空格”选项,就可直接输入空格。