![网页设计与网站建设完全实战手册](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=1738883199-OewKxyz7rIykQIr7zZN9EHFBrvxNdXzX-0-fd60431d9ab2b62df699941fe87a1a9e)
★提示★
许多浏览器(尤其是旧版本的浏览器,以及除Netscape Netvigator和Internet Explorer外的其他浏览器)无法正常显示很多特殊字符,因此应尽量少用特殊字符。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00163.jpg?sign=1738883199-gDPzVaqCeV0r5ABoJewGpFsNNJvc7Z1t-0-e48b99b5c4ed79e08615a82f3bc0eeb0)
图5-9 特殊字符的添加效果
01 打开网页文档,将光标置于要插入版权符号的位置,如图5-10所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00164.jpg?sign=1738883199-ZjBhsdagVaETR2VMxqsSXdGTL2jAmZ05-0-c242caa807b61e42bf4bd43c34e8a74a)
图5-10 打开网页文档
02 执行“插入”|“字符”|“版权”命令,如图5-11所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00165.jpg?sign=1738883199-teMioJUgIF1iUd9RJmtlTV5jnwOuLt7d-0-680c64ace81b99f9a70dcccd5ae8e92e)
图5-11 执行“版权”命令
03 选择命令后,即可插入版权字符,如图5-12所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00166.jpg?sign=1738883199-mhrepSkeS6OnwP1GhCaQojfoNvu4CfTr-0-f33dc95511822fc3c27b511f7036afd4)
图5-12 插入版权符号
04 保存文档,按F12键在浏览器中预览,效果如图5-9所示。
5.2.2 插入水平线
很多网页在其下方会显示一条水平线,以分割网页主题内容和底端的版权声明等。根据设计需要,也可以在网页任意位置添加水平线,达到区分网页中不同内容的目的。下面通过实例讲述如何在网页中插入水平线,效果如图5-13所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00167.jpg?sign=1738883199-5OZW5CWUQGvj5XQyOGCXPjXvoey2cbwf-0-b6e0eb2f637c7fdfe72ffbe31b7c94c6)
图5-13 插入水平线的效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0179_0001.jpg?sign=1738883199-78IWpqD7YCOIkuW48wq2AqJ9Xh2QJxmg-0-dbe737cc166fb9ea8b4d353ded019125)
01 打开网页文档,将光标置于要插入水平线的位置,如图5-14所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00168.jpg?sign=1738883199-DEwvLw7RktuQoLGcTDPvyHqQRhpaZVNl-0-929f92331ab277a42742488acbf8f025)
图5-14 打开网页文档
02 执行“插入”|“水平线”命令,如图5-15所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00169.jpg?sign=1738883199-qxjedv5mSL5yKN86KK52Nk689Ag7DO59-0-e4bc31f79aa4379e8fea5cb72c1f77e5)
图5-15 插入水平线
03 选择命令后,即可插入水平线,如图5-16所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00170.jpg?sign=1738883199-nZhwL58m67cS5ZQMInovbi4knd13iB1V-0-0718576f6a84612a53e5e075707eb0d8)
图5-16 插入水平线
04 选中插入的水平线,打开“属性”面板,在面板中将“宽”设置为700、“高”设置为1、“对齐”设置为居中对齐,如图5-17所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00171.jpg?sign=1738883199-TGuhugRNBnEWa1NQFKxDi22X1twyJsjx-0-fe29cae275e85b3bc91c3622f94ca51f)
图5-17 设置水平线
05 打开“代码”视图,输入颜色代码color=“#002C11”,将水平线的颜色设置为绿色,如图5-18所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00172.jpg?sign=1738883199-wtNSSa2wgsQijxhl0OASdIM4xiQ1a1NK-0-fd93d294eb5faea625a154af20c31c86)
图5-18 设置水平线的颜色
06 保存文档,按F12键在浏览器中预览,效果如图5-13所示。
5.2.3 插入时间
当需要在网页的指定位置插入准确的日期资料时,可以执行“插入”|“日期”命令。添加日期的好处是:既可以选用不同的日期格式,规范而准确地表达日期,同时还可以设置自动更新,让网页显示当前最新的日期和时间。
下面通过实例讲述如何在网页中插入日期,插入日期的效果如图5-19所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00173.jpg?sign=1738883199-mPI8WY0CO3rDBDnbbbx5TVndgjr3TUjs-0-9e5bae16c9686d42a06bb591cd5f853a)
图5-19 插入时间效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0184_0001.jpg?sign=1738883199-2KRkeJ0LrTSoLVTLQCy4S4b02NNmS7s7-0-267240abd887fd69aedb1286c24d6d25)
01 打开网页文档,如图5-20所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00174.jpg?sign=1738883199-Jo7JIiBKroZjbIFWYwjZNiYqT5tegpw4-0-ed05fd376e87f30f10311e595365118d)
图5-20 打开网页文档
02 将光标置于要插入日期的位置,执行“插入”|“日期”命令,如图5-21所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00175.jpg?sign=1738883199-MREzuT2lii9TEQ81wQUlJ8I4wRYrx4Lm-0-d2eac521c8064e31defc8e6a607e34de)
图5-21 插入水平线
03 选择命令后,弹出“插入日期”对话框,在对话框中设置相应的格式,如图5-22所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00176.jpg?sign=1738883199-FybHeE95klIhDgovx4CljFsztrOEAEO6-0-b1843a1b98dd700164a77d565d43f72f)
图5-22 “插入日期”对话框
04 单击“确定”按钮,即可插入日期,如图5-23所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00177.jpg?sign=1738883199-rvgRVYbffHpobuwF4suYB6sYTJ7FtxYs-0-3fa3c8cf30ef650c69c8b1925d05890b)
图5-23 插入日期
5.2.4 插入空格
在做网页的时候,有时需要输入空格,但却无法输入。导致无法正确输入空格的原因可能是输入法的错误,只有正确使用输入法才能够解决这个问题。在字符之间添加空格的方法非常简单,效果如图5-24所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00178.jpg?sign=1738883199-iZXmgtrqwL3tgXDG8XG3jHxqaO9udWG6-0-d041ce23866ac0c15d9867cb1e2ae8a4)
图5-24 在字符之间添加空格的效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0187_0001.jpg?sign=1738883199-LGs6P2lMvpYfQjUG8CD4QpZNk4r8iAeB-0-1c0c172521aec3f39e97f657001836b9)
01 打开网页文档,将光标置于要添加空格的位置,如图5-25所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00179.jpg?sign=1738883199-pIwkOqetRScMXgne8XPY82PxhgaZ7igp-0-2ea3adec257de779c9b7374ca3dc4bff)
图5-25 打开网页文档
02 切换到“拆分”视图,输入 代码,如图5-26所示。在“拆分”视图中输几次代码,在“设计”视图中就会出现几个空格。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00180.jpg?sign=1738883199-n2z6Rf9PLP44QXaMAC42mjP5UOC0x6JP-0-3f9bf82cc972a991cf32b0c229027f4f)
图5-26 输入代码
03 保存文档,按F12键在浏览器中预览,效果参见图5-24所示。
★提示★
在字符之间要插入连续的空格,可执行“插入”|“字符”|“不换行空格”菜单命令,或者按快捷键Ctrl+Shift+空格键。实际是在代码中添加了“ ”这个字符。
★高手支招★
还可以使用以下两种方法插入空格:
●如果使用智能ABC输入法,按快捷键Shift+空格键,这时输入法属性栏上的半月形就变成了圆形,然后再按空格键,空格就出来了。
●在“常用”插入栏的“字符”下拉列表选择“不换行空格”选项,就可直接输入空格。