Page Formatting Style Guide <h2>

This document serves as an example for well "formed" documents throughout your website. Following these simple guidelines will help your user to find information in a quick and simple fashion as well as help to optimize your site for search engines.

Using Headers Effectively <h2>

Dividing pages by using section headers helps to turn your content into easily digestible chucks. This page structure allows visitors to quickly scan a page for the information they are looking for.

Every page should include a page header or <h1> line at the top that represents what the page is about; the <h1> should also match the page title which is defined in the "display name" field of page properties. It is helpful to include a brief page summary after the page header. The rest of the page should follow a descending structure of <h1> through <h6>.

Content Styles <h2>

Additional styles and tags can also help to improve access to information across your site.

Links <h3>

When creating links in your content it is important to give them as much context as possible. It is best for the link to contain words directly related to the page being linked to. For example saying, "Update your contact information through our profile update form," instead of, "To update your profile click here" for a page linking to a profile update form. To take that even a step further the words "profile", "update", and maybe even "form" would be included in both the page heading <h1> and in the page display name under page properties for the page being linked to.

Blockquotes <h3>

If a blockquote or indention to set off a section of text is needed, you may use either the "Indent Text" button or the tag BLOCKQUOTE to render text in such a manner. It indents the text by 25 pixels on the left and right and retained the other font styles of the normal text paragraphs. Other header styles may be used in conjunction with the blockquote to render headlines within the indent text, as demonstrated above. All spacing has been defined using the CSS, so no other styling are spacing should be applied manually.

Unordered Lists <h3>

Unordered lists are simply bulleted lists. All styles for bulleted list have been set using the CSS. You may use the HTML editor's bulleted list button (like Word) to create bulleted lists. Hit return once to create a new bulleted item and hit return twice to close the bulleted list and create a new paragraph below the list. You may insert a bulleted list inside of another list to create a secondary level and outline effect. All spacing has been defined using the CSS, so no other styling are spacing should be applied manually.

List Title <h4>

  • Sample list item one
  • Sample list item two that is longer than the first
    • Second level unordered list
    • Multiple ordered lists can be nested using the WYSIWYG editor
      • Third level unordered list
      • Multiple ordered lists can be nested using the WYSIWYG editor
      • Lists are styled to three levels deep
    • Good style recommends having at least three bullets per list
  • Good style recommends having at least three bullets per list
  • But you can have more

Ordered Lists <h3>

Ordered lists are numbered bulleted lists. All styles for the ordered list have been set using the CSS. You may use the HTML editor's numbered list button (like Word) to create an ordered list. Hit return once to create a new numbered item and hit return twice to close the list and create a new paragraph below the list. Ordered lists default to Numerals for the first level and lowercase alphabet for second level.  Ordered lists are useful for creating directions. All spacing has been defined using the CSS, so no other styling are spacing should be applied manually.

List Title <h4>

  1. Sample list item one
  2. Sample list item two that is longer than the first
    1. Second level unordered list
    2. Multiple ordered lists can be nested using the WYSIWYG editor
      1. Third level unordered list
      2. Multiple ordered lists can be nested using the WYSIWYG editor
      3. Lists are styled to three levels deep
    3. Good style recommends having at least three bullets per list
  3. Good style recommends having at least three bullets per list
  4. But you can have more

Images<h3>

There are several classes which can be applied to images to help format your pages.

Float Left<h4>

In this example the image had a class of floatLeft. This will float the image to the left so that text will wrap around it on the page. The image should be place in the text where you would like the top of the image to line up with vertically.

Float Right<h4>

In this example the image had a class of floatRight. This will float the image to the right so that text will wrap around it on the page. The image should be place in the text where you would like the top of the image to line up with vertically.

1700 Mardi Gras Blvd.,  New Orleans, LA 70114  |  Phone: 504.368.5191  -  Fax: 504.368.3710  |  Copyright 2009  -  All Rights Reserved
TwitterFacebookYouTube