![网页设计与网站建设完全实战手册](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=1738994327-PFF4REkpGZRSOT8j1XFts84EFHpH304t-0-075a794f37554363e576abfcee3e4ca3)
★提示★
许多浏览器(尤其是旧版本的浏览器,以及除Netscape Netvigator和Internet Explorer外的其他浏览器)无法正常显示很多特殊字符,因此应尽量少用特殊字符。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00163.jpg?sign=1738994327-niMX72QGueBpOZwt7G7LmMVM1ZI5frid-0-597bdde2527a7db913a525952905a5cb)
图5-9 特殊字符的添加效果
01 打开网页文档,将光标置于要插入版权符号的位置,如图5-10所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00164.jpg?sign=1738994327-8jwLJtYjiN5zrk3soTTRQL611nzDPO3o-0-7c8d04e99d3808cd4ee6ffe0ac7888ba)
图5-10 打开网页文档
02 执行“插入”|“字符”|“版权”命令,如图5-11所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00165.jpg?sign=1738994327-VEtuxhSERpQ4Dw6OXvfhfAPJRlHPUGCf-0-efedd0557dffe33bbc1265c5fb6185eb)
图5-11 执行“版权”命令
03 选择命令后,即可插入版权字符,如图5-12所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00166.jpg?sign=1738994327-RYahtsKAJKmvHzE32Doqo9RPCPknNwpF-0-c92c08bdd5d86ef5d96db50b1b1eb633)
图5-12 插入版权符号
04 保存文档,按F12键在浏览器中预览,效果如图5-9所示。
5.2.2 插入水平线
很多网页在其下方会显示一条水平线,以分割网页主题内容和底端的版权声明等。根据设计需要,也可以在网页任意位置添加水平线,达到区分网页中不同内容的目的。下面通过实例讲述如何在网页中插入水平线,效果如图5-13所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00167.jpg?sign=1738994327-ZzacFtSJTlQ8uUyvPxti1JgK5ovcf0C0-0-e8cace6003b544061653aec01b148b7e)
图5-13 插入水平线的效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0179_0001.jpg?sign=1738994327-33qgNrahLxKIKFJijH5YtwSEulh8LNt8-0-998b05f1e6747e76d1211b0c9180bc6a)
01 打开网页文档,将光标置于要插入水平线的位置,如图5-14所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00168.jpg?sign=1738994327-XwBFkT29rQ3y9g9ooTXxQryoj8VVTCMw-0-9a2fb19276a6dd81b7b26352dc77e2e5)
图5-14 打开网页文档
02 执行“插入”|“水平线”命令,如图5-15所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00169.jpg?sign=1738994327-giHPAHFwpqVaSofbwQvSpUVxaufv0IlB-0-d8fea48085b49981eb778b7e870d1af3)
图5-15 插入水平线
03 选择命令后,即可插入水平线,如图5-16所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00170.jpg?sign=1738994327-uJJ18dRtl4Yt78MNqq1e9Lds6JVKOR0f-0-61709f199a5b062d582d7a07be166fee)
图5-16 插入水平线
04 选中插入的水平线,打开“属性”面板,在面板中将“宽”设置为700、“高”设置为1、“对齐”设置为居中对齐,如图5-17所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00171.jpg?sign=1738994327-mRmwtoKTqV3h6mwOxK9Pa3dhu4PPnIus-0-5b3ff9fac49f2d809d360dda7d61f7a0)
图5-17 设置水平线
05 打开“代码”视图,输入颜色代码color=“#002C11”,将水平线的颜色设置为绿色,如图5-18所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00172.jpg?sign=1738994327-KF1ijAmdzMPnTBbATn6BSqtVIDisVbt3-0-37fa6bf33ae805db05f41d58bba39fd0)
图5-18 设置水平线的颜色
06 保存文档,按F12键在浏览器中预览,效果如图5-13所示。
5.2.3 插入时间
当需要在网页的指定位置插入准确的日期资料时,可以执行“插入”|“日期”命令。添加日期的好处是:既可以选用不同的日期格式,规范而准确地表达日期,同时还可以设置自动更新,让网页显示当前最新的日期和时间。
下面通过实例讲述如何在网页中插入日期,插入日期的效果如图5-19所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00173.jpg?sign=1738994327-uZRMOgjqkzak42eFXL23QGUds1jNZMBJ-0-20fac9f05bd9e0f016189ad4e114dd4f)
图5-19 插入时间效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0184_0001.jpg?sign=1738994327-CwOulX0qTkcZGXgqXk6P4ZovQYVvU0QY-0-953ec75fa7e9f466c8250f021d0dfedf)
01 打开网页文档,如图5-20所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00174.jpg?sign=1738994327-mvkAwPvy8kbHj5PNAeaCnSBZR6USLrAd-0-6136a3b0654b769fb218cafe3d01bb1e)
图5-20 打开网页文档
02 将光标置于要插入日期的位置,执行“插入”|“日期”命令,如图5-21所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00175.jpg?sign=1738994327-jW6JT49DdQjLT02GbLEDSUPExsmZ25dU-0-6c798ad32efb633b873a3b010883cf0f)
图5-21 插入水平线
03 选择命令后,弹出“插入日期”对话框,在对话框中设置相应的格式,如图5-22所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00176.jpg?sign=1738994327-AHO59cnUdYmAJ2IcVMdLuDQtzQlwYVpd-0-67ef45ceabea2f5cee88073dc13cbdd5)
图5-22 “插入日期”对话框
04 单击“确定”按钮,即可插入日期,如图5-23所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00177.jpg?sign=1738994327-r3ngILlT77CwQHLY5Wr3tlbTf0DLKq0L-0-32621c1dc41417ba5585f71811527721)
图5-23 插入日期
5.2.4 插入空格
在做网页的时候,有时需要输入空格,但却无法输入。导致无法正确输入空格的原因可能是输入法的错误,只有正确使用输入法才能够解决这个问题。在字符之间添加空格的方法非常简单,效果如图5-24所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00178.jpg?sign=1738994327-X4lMdE6rNe4pIMYzJgJtvCCVekeb7SCd-0-d6d314415e8e59c40eae8062ef9c412c)
图5-24 在字符之间添加空格的效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0187_0001.jpg?sign=1738994327-fMTUtVDg0jJ866xwlsKcrYBJOMuGW1td-0-b559ee902233b7eadb3ec8667fd38f1c)
01 打开网页文档,将光标置于要添加空格的位置,如图5-25所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00179.jpg?sign=1738994327-KbGyZJiFIHfrnUYYX87SpRf8LETTcKPa-0-c8e1ff85b4fc95cea6a09726ccf71422)
图5-25 打开网页文档
02 切换到“拆分”视图,输入 代码,如图5-26所示。在“拆分”视图中输几次代码,在“设计”视图中就会出现几个空格。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00180.jpg?sign=1738994327-xNemeitHOn54x15IfzvMit8a8g92MJNj-0-d49e7156ce688db10ae2d9d8206453a7)
图5-26 输入代码
03 保存文档,按F12键在浏览器中预览,效果参见图5-24所示。
★提示★
在字符之间要插入连续的空格,可执行“插入”|“字符”|“不换行空格”菜单命令,或者按快捷键Ctrl+Shift+空格键。实际是在代码中添加了“ ”这个字符。
★高手支招★
还可以使用以下两种方法插入空格:
●如果使用智能ABC输入法,按快捷键Shift+空格键,这时输入法属性栏上的半月形就变成了圆形,然后再按空格键,空格就出来了。
●在“常用”插入栏的“字符”下拉列表选择“不换行空格”选项,就可直接输入空格。