![网页设计与网站建设全攻略](https://wfqqreader-1252317822.image.myqcloud.com/cover/587/27110587/b_27110587.jpg)
3.7 插入其他对象
用户可以在文本的字符与行之间插入额外的空格,还可以插入字符和水平线等。
3.7.1 小实例——插入日期
当需要在网页的指定位置插入准确的日期信息时,可以执行“插入”|“日期”命令来实现。添加日期的好处是既可以选用不同日期格式,规范而准确地表达日期,同时该命令还可以设置自动更新,让网页显示当前最新的日期和时间。
下面通过实例讲述如何在网页中插入日期效果,插入日期的效果如图3-47所示,具体操作步骤如下。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0123.jpg?sign=1739153781-9PlBzUB2lXARmVYtnJonRxFLsKafCFif-0-32378b518daf7c7ffd4c662c3c47ebfb)
图3-47 插入日期效果
原始文件:原始文件/03/3.7.1/index.htm 最终文件:最终文件/03/3.7.1/index1.htm
步骤01 打开网页文档,如图3-48所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0124.jpg?sign=1739153781-rRlPASJ8rjijX0qMRbebuk4DrpBvoqgK-0-817dac7d05d4acda14441ed6f9460c9d)
图3-48 打开网页文档
步骤02 将光标置于要插入日期的位置,执行“插入”|“日期”命令,如图3-49所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0125.jpg?sign=1739153781-6lAnYlv2J6CAeZDrS8ZEQtY1YPF6m9Rw-0-0ebbf2ff5c43d49e26e59e60c288b8c4)
图3-49 执行“日期”命令
步骤03 选择命令后,弹出“插入日期”对话框,在对话框中设置相应的格式,如图3-50所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0126.jpg?sign=1739153781-N9cLkm9oCvFjZCscMFctvHpakmygTO9R-0-220406e5b831087b1cda674778105544)
图3-50 “插入日期”对话框
在“插入日期”对话框中主要有以下参数。
•星期格式:设置星期的格式。
•日期格式:设置日期的格式。
•时间格式:设置时间的格式。
•如果选中“储存时自动更新”复选框,则每次保存文档都会自动更新文档中日期。
★提示★
单击“常用”插入栏中的“日期”按钮,弹出“插入日期”对话框,也可以插入日期。
步骤04 单击“确定”按钮,插入日期,如图3-51所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0128.jpg?sign=1739153781-zdFmmdqIEPlcw6E2RKy6c7lcNifO1e7O-0-00d35262d731b9b582a594b71338900e)
图3-51 插入日期
步骤05 保存文档,按F12键在浏览器中预览,效果如图3-47所示。
3.7.2 小实例——插入水平线
很多网页在其下方会显示一条水平线,以分割网页主题内容和底端的版权声明等。根据设计需要,也可以在网页任意位置添加水平线,达到区分网页中不同内容的目的。下面通过实例讲述在网页中插入水平线,效果如图3-52所示,具体操作步骤如下。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0129.jpg?sign=1739153781-oGoAw2fGmHeSkeuqoLnppmyVOV0edrlL-0-e8a1a5de441688fc19b027a1308d60e6)
图3-52 插入水平线效果
原始文件:原始文件/03/3.7.2/index.htm 最终文件:最终文件/03/3.7.2/index1.htm
步骤01 打开网页文档,将光标置于要插入水平线的位置,如图3-53所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0130.jpg?sign=1739153781-b6bK6CMDHFnyalSNAahvy81D3SFCKeLp-0-ab3ffe2a45dcbb0f1f2bb971c57f13cc)
图3-53 打开网页文档
步骤02 执行“插入”|“水平线”命令,如图3-54所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0131.jpg?sign=1739153781-h83IvGSXGtciZjhFNRkTfNeY116EnsDr-0-0ca44ed3b11bd4773602213d7ea589ad)
图3-54 插入水平线
步骤03 选择命令后,即可插入水平线,如图3-55所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0132.jpg?sign=1739153781-MaRU5x5zePDNIfas5sRh291saROvJvi6-0-9f533a9336a80791aa020d81c335f17d)
图3-55 插入水平线效果
步骤04 选中插入的水平线,选择菜单中的“窗口”|“属性”命令,打开“属性”面板,可以设置水平线的属性,如图3-56所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0133.jpg?sign=1739153781-5LVEl66chH1itFU0HYq7LDb6Kiry2SDc-0-a154698170d7c87289a5d1eeb006238b)
图3-56 “设置水平线属性”面板
水平线属性面板中主要有以下参数。
•宽:在其文本框中输入水平线的宽度值,默认单位是像素,也可以选择百分比。
•高:在其文本框中输入水平线的高度值,它的单位只能是像素。
•对齐:在其下拉列表中有4种对齐方式,分别是“默认”、“左对齐”、“居中对齐”和“右对齐”,表示水平线在表格内的不同对齐方式,可根据需要进行选择。
•阴影:勾选此复选框,则水平线将产生阴影效果。
★提示★
在“属性”面板中并没有提供关于水平线颜色的设置选项,如果需要改变水平线的颜色,在源代码中更改(hr color=“对应颜色的代码”)即可。
步骤05 保存文档,按F12键在浏览器中预览,效果如图3-52所示。