![网页设计与网站建设全攻略](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=1738869246-853puxFc6Oep1iAIItkAoePkdEJiK4DV-0-2968b2bd990874ac8f8aa1e7fc2942e4)
图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=1738869246-jXMCEIVuyhXI7ZL01t66ZSRPj4DKkv2S-0-372c3aaf1f3a52be69d84ce8bfdc3e7e)
图3-48 打开网页文档
步骤02 将光标置于要插入日期的位置,执行“插入”|“日期”命令,如图3-49所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0125.jpg?sign=1738869246-3VxjY9VooI7qsOIWmhwss481pL0fyuMD-0-3b420deb035cb19b4a85cd4ceb856833)
图3-49 执行“日期”命令
步骤03 选择命令后,弹出“插入日期”对话框,在对话框中设置相应的格式,如图3-50所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0126.jpg?sign=1738869246-Di9HO5NNiPQmER9RKMmWyF4ZcIUAtTAJ-0-e344e13981448080d2a3355e6d05c808)
图3-50 “插入日期”对话框
在“插入日期”对话框中主要有以下参数。
•星期格式:设置星期的格式。
•日期格式:设置日期的格式。
•时间格式:设置时间的格式。
•如果选中“储存时自动更新”复选框,则每次保存文档都会自动更新文档中日期。
★提示★
单击“常用”插入栏中的“日期”按钮,弹出“插入日期”对话框,也可以插入日期。
步骤04 单击“确定”按钮,插入日期,如图3-51所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0128.jpg?sign=1738869246-VTjF35uAFSNASr6gu2xIRyBiFYDbGtRJ-0-9ea7ffee32dec7231d45e895a6a32ce3)
图3-51 插入日期
步骤05 保存文档,按F12键在浏览器中预览,效果如图3-47所示。
3.7.2 小实例——插入水平线
很多网页在其下方会显示一条水平线,以分割网页主题内容和底端的版权声明等。根据设计需要,也可以在网页任意位置添加水平线,达到区分网页中不同内容的目的。下面通过实例讲述在网页中插入水平线,效果如图3-52所示,具体操作步骤如下。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0129.jpg?sign=1738869246-Jk797NIezubaOop1Jc314qxh4ROjl2KJ-0-a7185cd28f9b9627522a2260b3f045c9)
图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=1738869246-CzeuVVA5cJVgc23gTTL0I0ciBbwbQ0rr-0-441edf04e5f3e34f5d4fb0847ff6a069)
图3-53 打开网页文档
步骤02 执行“插入”|“水平线”命令,如图3-54所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0131.jpg?sign=1738869246-P88QL4MMwISwVlYQOim0c06ma3jUjqPk-0-9d972d328f8084fce25cdf4cba19af9d)
图3-54 插入水平线
步骤03 选择命令后,即可插入水平线,如图3-55所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0132.jpg?sign=1738869246-6Ah5KdMI60NFtE7LocRUbbb2D0EoGtzh-0-d5130f1a0d472b5d360ce70e3c330f6e)
图3-55 插入水平线效果
步骤04 选中插入的水平线,选择菜单中的“窗口”|“属性”命令,打开“属性”面板,可以设置水平线的属性,如图3-56所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0133.jpg?sign=1738869246-UdcwYZdev9Uc6ZssaPF2KhTRpgsFGvK2-0-05d451c801715fa2960d4cd10c447dc8)
图3-56 “设置水平线属性”面板
水平线属性面板中主要有以下参数。
•宽:在其文本框中输入水平线的宽度值,默认单位是像素,也可以选择百分比。
•高:在其文本框中输入水平线的高度值,它的单位只能是像素。
•对齐:在其下拉列表中有4种对齐方式,分别是“默认”、“左对齐”、“居中对齐”和“右对齐”,表示水平线在表格内的不同对齐方式,可根据需要进行选择。
•阴影:勾选此复选框,则水平线将产生阴影效果。
★提示★
在“属性”面板中并没有提供关于水平线颜色的设置选项,如果需要改变水平线的颜色,在源代码中更改(hr color=“对应颜色的代码”)即可。
步骤05 保存文档,按F12键在浏览器中预览,效果如图3-52所示。