spacer graphic
How to use Add Rule
 
You are here: Help Topics > Edit Website > Edit an existing template, site or page > How to use Add Rule
 
Rules
 
Rules Use and Description
 
  • Rules are thin horizontal lines which separate bodies of text or images. They are used to provide a "border" to an element which may not otherwise be obviously associated with another element.
  • An image and a field of text with a rule above one and another rule below the other will signify that the image and the text are to be associated together. This might be useful if you wish to have a more extensive description of an image or use the image as a visual teaser for a story. Otherwise, use "Caption" since it is visually associated with a picture by being a different style of type from that of the text.
  • Rules came into use in the early days of newspapers when several stories were set in a single column of type. To separate the stories, the early printers used a horizontal "rule" which was a thin line set slightly inside the border of the column.
  • That visual appearance and use remain quite valid for today's web pages, particularly web pages which are very rich in text and which require scrolling. A rule signifies a break in the train of thought.
 
Add Rule Button and Use
 

 
  • The Add Rule button creates a thin rule line which can be moved up on the page using the element controls. Spaces can be added to rules above the rule, again, using the element controls.
  • Rules are centered by definition and will run from the left to right of either the Content area or the Subhead area, whichever of the two areas you are working in.
  • Keep in mind that the Content area is 300 pixels wide and the Subhead area is 100 pixels wide. A space, called a "gutter," exists between the Content area and the Subhead. Adjacent rules in the Content area and in the Subhead will not connect because of the gutter. This maintains the separation between these two web page areas.
 
rule graphic
 
 
White Space
and
Rules

 
 
A page, be it on paper or on your screen, has elements which comprise the information the page contains. The eye is drawn to certain distinctions.

White space is one such distinction. Historically, spaces have been used to create a discrete boundary around something or to highlight that something. Think of a field of wheat. Unyielding imagary of flowing grasses might come up. Now think of how you could create the image of a square of wheat in the middle of this field. You might do this by mowing a swath around the sides which formed the square. You would be using space to create the distinction.

Rules are equally useful for highlighting or creating distinctions, but, they usually serve a different purpose. Think of the same field of wheat and then instead of mowing a boundary, erect a fence in the middle of the field. There would still be a distinction between the one side and the other, but neither side would appear to be more distinctive.

 
rule graphic
 
  • Rules distinguish by a boundary which is there.
     
  • Space distinguishes by a boundary which isn't there.
 
rule graphic
 
Using a combination of rules and spaces, even a page filled with nothing but text can be made attractive to the eye and easy to read while still maintaining a focus on certain elements of the text.

Like using Headlines, Subheads, and Captions, Rules and Space allow for specific elements of text to be made distinctive.

And, like spaces, rules can be stacked several deep for different effects.

 
Rules for the sake of rules
 
 
rule graphic
 
rule graphic
 
rule graphic
 
rule graphic
 
You are here: Help Topics > Edit Website > Edit an existing template, site or page > How to use Add Rule
spacer graphic
spacer graphic

 
How to use
Element tools

 

 

Click this to kill the item.
 

Click on this to move an item further up on the page.
 

Click on this to move an item further up on the page.
 

Click on this to move the item to the top of the page.
 

Click on this to add space between the item and the one above it.
 

Click on this to remove space between the item and the one above it.
 

This is the text alignment tool. Click on the left button to align text to the left margin. Click on the right button to center the text.
 

The left side of the Show/Hide tool will show green if the element is visible. The right side will show red if the element is hidden. Click opposite to achieve opposite effect.