Inserting a Horizontal Rule

Another simple design element that you can add to your web pages is the horizontal rule. Available from the Insert, HTML menu, the horizontal rule simply adds a straight horizontal line across the page. To demonstrate the horizontal rule, I'll shift to our Dorknozzle project and place my cursor just before the Company Events heading. Next, I'll add the horizontal rule by choosing Insert, HTML, Horizontal Rule. Shown in Figure 3.30, the horizontal rule adds a straight line across the page at a width of 100%.

Figure 3.30. A horizontal rule is added to the page at a default width of 100%.

Selecting the horizontal rule changes the Properties Inspector to a horizontal rule-based Properties Inspector. As you can see, the horizontal rule-based Properties Inspector allows you to make the following property modifications:

• ID: Uniquely identifies your horizontal rule.

• Width: Changes the width in either pixels or percent for the horizontal rule.

• Height: Sets the height in pixels for the horizontal rule.

• Align: Aligns the horizontal rule left, center, or right on the page. Default is center.

• Shading: Enables or disables shading on the horizontal rule. Disabling this box causes the horizontal rule to be a solid, flat line.

• Class: Assign a CSS class to your horizontal rule.

Go ahead and familiarize yourself with the horizontal rule-based Properties Inspector by experimenting with the various properties. For the project, I've modified the properties to resemble Figure 3.31.

Figure 3.31. Modify the width, height, and shading of the horizontal rule.