2.3 水平线、网格与标尺

水平线可以将文字、图像、表格等对象在视觉上分割开。如果在一篇内容繁杂的文档中合理地放置几条水平线，文字就会变得层次分明，便于阅读。

虽然Dreamweaver提供了所见即所得的编辑器，但是通过视觉来判断网页元素的位置并不准确。要想精确地定位网页元素，就必须依靠Dreamweaver提供的定位工具。

命令介绍

水平线：水平线是非常有效的文本分隔工具，它可以让站点访问者在文本和其他网页元素之间形成视觉距离。

2.3.1 课堂案例——摄影艺术网页

【案例学习目标】使用“插入”命令插入水平线。使用代码改变水平线的颜色。

【案例知识要点】使用“水平线”命令，在文档中插入水平线；使用“属性”面板，改变水平线的高度。使用代码改变水平线的颜色，如图2-96所示。

【效果所在位置】Ch02/效果/摄影艺术网页/index.html。

图2-96

1．插入水平线

（1）选择“文件 > 打开”命令，在弹出的“打开”对话框中，选择本书学习资源中的“Ch02 > 素材 > 摄影艺术网页 > index.html”文件，单击“打开”按钮打开文件，如图 2-97 所示。将光标置入到图2-98所示的单元格中。

图2-97

图2-98

（2）选择“插入 > HTML > 水平线”命令，插入水平线，效果如图2-99所示。选中水平线，在“属性”面板中，将“高”选项设为1，取消勾选“阴影”复选框，如图2-100所示，水平线效果如图2-101所示。

图2-99

图2-100

图2-101

2．改变水平线的颜色

（1）选中水平线，单击文档窗口左上方的“拆分”按钮，在“拆分”视图窗口中的“noshade”代码后面置入光标，按一次空格键，标签列表中出现了该标签的属性参数，在其中选择属性“color”选项，如图2-102所示。

（2）插入属性后，在弹出的颜色面板中选择需要的颜色，如图 2-103 所示，标签效果如图 2-104所示。用相同的方法在其他单元格中插入水平线，并设置相应的属性，效果如图2-105所示。

图2-102

图2-103

图2-104

图2-105

（3）水平线的颜色不能在Dreamweaver CS6界面中确认，保存文档，按F12键预览效果，如图2-106所示。

图2-106

2.3.2 水平线

分割线又叫作水平线，可以将文字、图像、表格等对象在视觉上分割开。如果在一篇内容繁杂的文档中合理地放置几条水平线，文字就会变得层次分明，便于阅读。

1．创建水平线

（1）选择“插入”面板的“常用”选项卡，单击“水平线”工具按钮。

（2）选择“插入 > HTML > 水平线”命令。

2．修改水平线

在文档窗口中，选中水平线，选择“窗口 > 属性”命令，弹出“属性”面板，可以根据需要对属性进行修改，如图2-107所示。

图2-107

在“水平线”选项下方的文本框中输入水平线的名称。

在“宽”选项的文本框中输入水平线的宽度值，其设置单位值可以是像素值，也可以是相对页面水平宽度的百分比值。

在“高”选项的文本框中输入水平线的高度值，这里只能是像素值。

在“对齐”选项的下拉列表中，可以选择水平线在水平位置上的对齐方式，可以是“左对齐”、“右对齐”或“居中对齐”，也可以选择“默认”选项使用默认的对齐方式，一般为“居中对齐”。

如果选择“阴影”复选框，水平线则被设置为阴影效果。

2.3.3 显示和隐藏网格

使用网格可以更加方便地定位网页元素，在网页布局时网格也具有至关重要的作用。

1．显示和隐藏网格

选择“查看 > 网格设置 > 显示网格”命令，或按Ctrl+Alt+G组合键，此时处于显示网格的状态，网格在“设计”视图中可见，如图2-108所示。

图2-108

2．设置网页元素与网格对齐

选择“查看 > 网格设置 > 靠齐到网格”命令，或按 Ctrl+Alt+Shift+G组合键，此时，无论网格是否可见，都可以让网页元素自动与网格对齐。

3．修改网格的疏密

选择“查看 > 网格设置 > 网格设置”命令，弹出“网格设置”对话框，如图2-109所示。在“间隔”选项的文本框中输入一个数字，并从下拉列表中选择间隔的单位，单击“确定”按钮关闭对话框，完成网格线间隔的修改。

4．修改网格线的形状和颜色

选择“查看 > 网格设置 > 网格设置”命令，弹出“网格设置”对话框。在对话框中，先单击“颜色”按钮并从颜色拾取器中选择一种颜色，或者在文本框中输入一个十六进制的数字，然后单击“显示”选项组中的“线”或“点”单选项，如图2-110所示，最后单击“确定”按钮，完成网格线颜色和线型的修改。

图2-109

图2-110

2.3.4 标尺

标尺显示在文档窗口的页面上方和左侧，用以标志网页元素的位置。标尺的单位分为像素、英寸和厘米。

1．在文档窗口中显示标尺

选择“查看 > 标尺 > 显示”命令，或按Ctrl+Alt+R组合键，此时标尺处于显示的状态，如图2-111所示。

2．改变标尺的计量单位

选择“查看 > 标尺”命令，在其子菜单中选择需要的计量单位，如图2-112所示。

图2-111

图2-112

3．改变坐标原点

用鼠标指针单击文档窗口左上方的标尺交叉点，鼠标的指针变为“+”形，按住鼠标左键向右下方拖曳鼠标，如图2-113所示。在要设置新的坐标原点的地方松开鼠标左键，坐标原点将随之改变，如图2-114所示。

4．重置标尺的坐标原点

选择“查看 > 标尺 > 重设原点”命令，如图2-115所示，可将坐标原点还原成（0，0）点。

图2-113

图2-114

图2-115

提示

将坐标原点恢复到初始位置，还可以用鼠标指针双击文档窗口左上方的标尺交叉点完成操作。

上一章目录下一章