网页设计与网站建设全攻略
上QQ阅读APP看书,第一时间看更新

3.7 插入其他对象

用户可以在文本的字符与行之间插入额外的空格,还可以插入字符和水平线等。

3.7.1 小实例——插入日期

当需要在网页的指定位置插入准确的日期信息时,可以执行“插入”|“日期”命令来实现。添加日期的好处是既可以选用不同日期格式,规范而准确地表达日期,同时该命令还可以设置自动更新,让网页显示当前最新的日期和时间。

下面通过实例讲述如何在网页中插入日期效果,插入日期的效果如图3-47所示,具体操作步骤如下。

图3-47 插入日期效果

原始文件:原始文件/03/3.7.1/index.htm
最终文件:最终文件/03/3.7.1/index1.htm

步骤01 打开网页文档,如图3-48所示。

图3-48 打开网页文档

步骤02 将光标置于要插入日期的位置,执行“插入”|“日期”命令,如图3-49所示。

图3-49 执行“日期”命令

步骤03 选择命令后,弹出“插入日期”对话框,在对话框中设置相应的格式,如图3-50所示。

图3-50 “插入日期”对话框

在“插入日期”对话框中主要有以下参数。

•星期格式:设置星期的格式。

•日期格式:设置日期的格式。

•时间格式:设置时间的格式。

•如果选中“储存时自动更新”复选框,则每次保存文档都会自动更新文档中日期。

★提示★

单击“常用”插入栏中的“日期”按钮,弹出“插入日期”对话框,也可以插入日期。

步骤04 单击“确定”按钮,插入日期,如图3-51所示。

图3-51 插入日期

步骤05 保存文档,按F12键在浏览器中预览,效果如图3-47所示。

3.7.2 小实例——插入水平线

很多网页在其下方会显示一条水平线,以分割网页主题内容和底端的版权声明等。根据设计需要,也可以在网页任意位置添加水平线,达到区分网页中不同内容的目的。下面通过实例讲述在网页中插入水平线,效果如图3-52所示,具体操作步骤如下。

图3-52 插入水平线效果

原始文件:原始文件/03/3.7.2/index.htm
最终文件:最终文件/03/3.7.2/index1.htm

步骤01 打开网页文档,将光标置于要插入水平线的位置,如图3-53所示。

图3-53 打开网页文档

步骤02 执行“插入”|“水平线”命令,如图3-54所示。

图3-54 插入水平线

步骤03 选择命令后,即可插入水平线,如图3-55所示。

图3-55 插入水平线效果

步骤04 选中插入的水平线,选择菜单中的“窗口”|“属性”命令,打开“属性”面板,可以设置水平线的属性,如图3-56所示。

图3-56 “设置水平线属性”面板

水平线属性面板中主要有以下参数。

•宽:在其文本框中输入水平线的宽度值,默认单位是像素,也可以选择百分比。

•高:在其文本框中输入水平线的高度值,它的单位只能是像素。

•对齐:在其下拉列表中有4种对齐方式,分别是“默认”、“左对齐”、“居中对齐”和“右对齐”,表示水平线在表格内的不同对齐方式,可根据需要进行选择。

•阴影:勾选此复选框,则水平线将产生阴影效果。

★提示★

在“属性”面板中并没有提供关于水平线颜色的设置选项,如果需要改变水平线的颜色,在源代码中更改(hr color=“对应颜色的代码”)即可。

步骤05 保存文档,按F12键在浏览器中预览,效果如图3-52所示。