网页设计与制作
上QQ阅读APP看书,第一时间看更新

3.2 插入水平线与特殊字符

在网页中,水平线是一种常见的元素。在组织网页整体信息时,可以使用一条或多条水平线以可视方式分隔文本和对象,使段落区分更明显,让网页更有层次感。本节主要向读者介绍插入水平线、日期以及字符的操作方法。

3.2.1 插入水平线

如果要添加水平线,只须将光标定位到需添加水平线的位置,然后单击“插入”|“HTML”|“水平线”命令即可。

素材文件  光盘\素材\第3章\3.2.1\index.html

效果文件  光盘\效果\第3章\3.2.1\index.html

视频文件  光盘\视频\第3章\3.2.1 插入水平线.mp4

步骤01 单击“文件”|“打开”命令,打开一个网页文档,如图3-28所示。

步骤02 在表格中,将光标定位到图3-29所示的位置。

图3-28 打开网页文档

图3-29 定位光标

步骤03 单击“插入”|“HTML”|“水平线”命令,如图3-30所示。

步骤04 在网页文档中光标的下方插入一条水平线,如图3-31所示。

图3-30 单击“水平线”命令

图3-31 插入水平线

步骤05 用同样的方法,在网页文档的页面下方再次插入一条水平线,按【F12】键保存网页,即可在打开的IE浏览器中查看添加水平线后的网页画面效果,如图3-32所示。

图3-32 查看添加水平线后的网页画面效果

说明

在Dreamweaver CS6中,展开“插入”面板,在“常用”标签下选择“水平线”选项,也可以在网页文档中插入水平线。

3.2.2 插入日期

在Dreamweaver CS6中,用户可以根据需要使用相关的命令在网页中插入日期,使访问者可以看到相关的时间信息。

素材文件  光盘\素材\第3章\3.2.2\index.html

效果文件  光盘\效果\第3章\3.2.2\index.html

视频文件  光盘\视频\第3章\3.2.2 插入日期.mp4

步骤01 单击“文件”|“打开”命令,打开一个网页文档,如图3-33所示。

步骤02 在网页文档中,将光标定位于需要插入日期的表格,如图3-34所示。

步骤03 单击“插入”|“日期”命令,如图3-35所示。

步骤04 弹出“插入日期”对话框,选择适当的格式,如图3-36所示。

步骤05 选中“储存时自动更新”复选框,如图3-37所示。

步骤06 单击“确定”按钮,即可在光标位置处插入当前的日期信息,如图3-38所示。

图3-33 打开网页文档

图3-34 定位光标

图3-35 单击“日期”命令

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

图3-37 选中“储存时自动更新”复选框

图3-38 插入当前的日期信息

3.2.3 插入特殊字符

在设计网页时经常要在页面中添加一些特殊符号,如英镑符号£、欧元€、音符♪、注册商标®等。在HTML代码中通过转义符来定义特殊字符,如>用>来定义,需要记代码,比较麻烦,此时可以直接在文档中通过相关命令插入特殊字符对象。

将光标定位在要插入特殊字符的位置,如图3-39所示,单击“插入”|“HTML”|“特殊字符”|“版权”命令,如图3-40所示。

也可以在“插入”|“HTML”菜单下,依次按【C】和【C】键。

图3-39 定位在要插入特殊字符的位置

图3-40 单击“版权”命令

执行操作后,即可在光标处插入版权符号,如图3-41所示。

图3-41 在鼠标光标处插入版权符号