![网页设计与网站建设完全实战手册](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=1738928326-IbSi8NlkG6ijWOyiBtDBqhkQ2HOHUSOs-0-28cdd4c8d186548ce63b4c5b529fa0fc)
★提示★
许多浏览器(尤其是旧版本的浏览器,以及除Netscape Netvigator和Internet Explorer外的其他浏览器)无法正常显示很多特殊字符,因此应尽量少用特殊字符。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00163.jpg?sign=1738928326-TVzEyW7SVG2TqzBwVcotvZYQn2VjhTFr-0-4597aa86be4e5d2f2698f9f2d08d84d1)
图5-9 特殊字符的添加效果
01 打开网页文档,将光标置于要插入版权符号的位置,如图5-10所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00164.jpg?sign=1738928326-ejZ3SGpfW9j9jDMw8SqzIPaHdxno1IHT-0-03f47e4786f8753c9d573950afb0ff98)
图5-10 打开网页文档
02 执行“插入”|“字符”|“版权”命令,如图5-11所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00165.jpg?sign=1738928326-wjIEaXHjHZCqJ2abIIttBVJCQ8gxXSfg-0-6bf9b03caf6d96e12f2102f8c76d14b3)
图5-11 执行“版权”命令
03 选择命令后,即可插入版权字符,如图5-12所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00166.jpg?sign=1738928326-5i9E5VRPJaKncM8BivlOJIuTM2KIIdlP-0-82999342ca677d4ee76cfb488ff30b6d)
图5-12 插入版权符号
04 保存文档,按F12键在浏览器中预览,效果如图5-9所示。
5.2.2 插入水平线
很多网页在其下方会显示一条水平线,以分割网页主题内容和底端的版权声明等。根据设计需要,也可以在网页任意位置添加水平线,达到区分网页中不同内容的目的。下面通过实例讲述如何在网页中插入水平线,效果如图5-13所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00167.jpg?sign=1738928326-Z6ZWc7KzH9u2Fztlx6poW035DCZF9sDH-0-19aa4dfa027564a771ee1b8c3026acc1)
图5-13 插入水平线的效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0179_0001.jpg?sign=1738928326-wgMYMWq8SEub3o1sctWaW0zPlJiM2eV1-0-1c4e66853a35ed18ca7d1d26bfbdc9a9)
01 打开网页文档,将光标置于要插入水平线的位置,如图5-14所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00168.jpg?sign=1738928326-JMIjLKJEmrnhSWXUGH8U850HrHDeqPHb-0-c5c08c9e1c179286ce69839ed31c0057)
图5-14 打开网页文档
02 执行“插入”|“水平线”命令,如图5-15所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00169.jpg?sign=1738928326-sOBlw6uIA4PEYkcQuBXCN3QiSUroPgRn-0-8f1c2ca1622c3ba85be5f1de13dbae2b)
图5-15 插入水平线
03 选择命令后,即可插入水平线,如图5-16所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00170.jpg?sign=1738928326-OZijw1GU3GqK3w3a3lJ1jQbptNQdsL71-0-65e0c6cc41231ecb62132782d052bae3)
图5-16 插入水平线
04 选中插入的水平线,打开“属性”面板,在面板中将“宽”设置为700、“高”设置为1、“对齐”设置为居中对齐,如图5-17所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00171.jpg?sign=1738928326-rM8Bct8E7XXUAUTrjp1x4yItbhr7PniF-0-16db88aa0ec0d5628d181f2a2c7af097)
图5-17 设置水平线
05 打开“代码”视图,输入颜色代码color=“#002C11”,将水平线的颜色设置为绿色,如图5-18所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00172.jpg?sign=1738928326-EMg2swqwnn45TuY1Hk9zqywFt9QkU9p3-0-b979decb434126b57378d4ce4c14b6ec)
图5-18 设置水平线的颜色
06 保存文档,按F12键在浏览器中预览,效果如图5-13所示。
5.2.3 插入时间
当需要在网页的指定位置插入准确的日期资料时,可以执行“插入”|“日期”命令。添加日期的好处是:既可以选用不同的日期格式,规范而准确地表达日期,同时还可以设置自动更新,让网页显示当前最新的日期和时间。
下面通过实例讲述如何在网页中插入日期,插入日期的效果如图5-19所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00173.jpg?sign=1738928326-lbUKIRgaAKugdmTMLzwVZSmbkOC5vOPN-0-ae6d5ec8a7993440b2604897ab0af29d)
图5-19 插入时间效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0184_0001.jpg?sign=1738928326-piiFtXfXILDg6vWx9i7MBE9QmFbt6kro-0-8b581e83c40c673f14de92e5758be7bd)
01 打开网页文档,如图5-20所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00174.jpg?sign=1738928326-pCOI2fD3uOzXBnPjhlvCj542Z3YMVAR5-0-4ebc0ed6e967ccaca64e4c603ce380a3)
图5-20 打开网页文档
02 将光标置于要插入日期的位置,执行“插入”|“日期”命令,如图5-21所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00175.jpg?sign=1738928326-NaQbEsfr4gq6fXRu50pVoORjrromoNPs-0-264a0816ac8da16e0ab8a911ee9319fb)
图5-21 插入水平线
03 选择命令后,弹出“插入日期”对话框,在对话框中设置相应的格式,如图5-22所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00176.jpg?sign=1738928326-5fXWEavQ1Ab7xfXyzmzTzgbTLXfXwqQc-0-1a017de55d0f40fa1b5327a7480f9748)
图5-22 “插入日期”对话框
04 单击“确定”按钮,即可插入日期,如图5-23所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00177.jpg?sign=1738928326-YFvhZfVFJshic5GoXjtUZdzlkY2NVLat-0-49544549d7a4f31330babd1aa98555c2)
图5-23 插入日期
5.2.4 插入空格
在做网页的时候,有时需要输入空格,但却无法输入。导致无法正确输入空格的原因可能是输入法的错误,只有正确使用输入法才能够解决这个问题。在字符之间添加空格的方法非常简单,效果如图5-24所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00178.jpg?sign=1738928326-6iFUENsV0ua6Cbe7q0Ic3Zvj8k7Foodl-0-41d3ced52f52587a9e791acb5eda088d)
图5-24 在字符之间添加空格的效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0187_0001.jpg?sign=1738928326-lI3R3jUMBoRUljL6HHAu5bat6uYxGOFu-0-29a70bb7be58b61b69188fcff0c6958a)
01 打开网页文档,将光标置于要添加空格的位置,如图5-25所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00179.jpg?sign=1738928326-EJQlNO057OmUUnckHhLodUXFGoeeZDrz-0-03834931cb7abdc6368468706690c66d)
图5-25 打开网页文档
02 切换到“拆分”视图,输入 代码,如图5-26所示。在“拆分”视图中输几次代码,在“设计”视图中就会出现几个空格。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00180.jpg?sign=1738928326-U6q9oDXRcgemT5au8hRx9c7oEWAFCsXT-0-8be32241ebefc6ae94f9a1e5b340fa91)
图5-26 输入代码
03 保存文档,按F12键在浏览器中预览,效果参见图5-24所示。
★提示★
在字符之间要插入连续的空格,可执行“插入”|“字符”|“不换行空格”菜单命令,或者按快捷键Ctrl+Shift+空格键。实际是在代码中添加了“ ”这个字符。
★高手支招★
还可以使用以下两种方法插入空格:
●如果使用智能ABC输入法,按快捷键Shift+空格键,这时输入法属性栏上的半月形就变成了圆形,然后再按空格键,空格就出来了。
●在“常用”插入栏的“字符”下拉列表选择“不换行空格”选项,就可直接输入空格。