Web_Page_Title

"Breadcrumbs" area:  Lets visitors know exactly where they are in your web. Links here let them navigate.

The title area could contain both a section title plus a page sub-title under it.  If so, use a different color and size for the subtitle. The thin lines above are horizontal rules, set to 1 pixel thickness and a color selected. Some browsers don't display the color. The result on those browsers will be gray.

The overall design is a three-column table, with the thin center column used only to push the text away from the left menu column.  The table is set to 99% width so that the right text doesn't jam up against the right edge of the browser.

Line spacing (top and bottom) is set by  use of Cascading Style Sheet (CSS) code (a.k.a. "Styles"). Such use is optional, but gives better control of the design. Instead of the "spacing column", colored yellow here, you could also use a style that set "Indentation before text" for about 25px.  You could also use a style to set the right margin indent and then make the table 100% wide.

• This sample uses a medium dark background with black text only to show the cells more clearly. It's not a good text design example.

• Principle 1: The lower the contrast between background and text (foreground), the harder it is to easily read.

• Principle 2: Long stretches of either bolded or italicized text are harder to read. Keep it simple!

• Principle 3: Use simple, non-jargon wording. Even college professors enjoy easy reading.

• Principle 4: Webs are not like books. Convey maximum information in minimum space. Be concise. Don't ramble.

Subhead

Note that the image in the footer below has a graphic with a white background. This is what happens if you don't make GIF image backgrounds transparent and then use them on a different colored background.  The image would look fine on a page with a white background, but not on other colored backgrounds. Plan ahead.

This is easy to fix with FrontPage:

1. Click once on the image to select it.  This should pop up the "Pictures" toolbar.

2. In the Pictures toolbar, click once on the "Set transparent color" tool.

3. Click once on a white area in the image. You can immediately see the results.

4. Save the web page and choose to overwrite the existing image file.

This page is part of the 2005 district training for the
Atlanta-Emory and Atlanta-Decatur-Oxford districts,
North Georgia Conference of the United Methodist Church.

Questions? Contact webmaster @ apmethodist.org (without the spaces)

This page was last edited 01/16/2006 07:05 PM