Page Style Guide

Visual style guide for content formatting. Use the built-in editor's presets whenever possible.

Headings & Normal Text

  • Use headers to define your page's organizational structure and simplify page readability. Well-selected headers inform visitors and help them navigate your page.
  • People don't read the same way online as they do in print. They're more apt to scan a document quickly and move on if it doesn't catch their interest. Web site visitors use document headings to scan the page for interesting content. They can easily determine where new topics are introduced and find what they're interested in. Header content describes what's on your page, so make sure it's descriptive and compelling.
  • The proper use of headings and normal text aids accessibility, by enabling screen-reading device users (the sight-impaired) to follow the logical flow of your content.  Such a device can inform them of the main headings, and allow them to tab through the information on a page.  But, if you merely make normal text big and bold, instead of using a heading preset, the blind user sees it as regular text--not a designated heading.
  • HeadersHeaders can be found in the Format drop-down list.
  • There are five heading sizes: Heading 1 – Heading 5.  The series of numbered headers represents the level of priority, with a Heading 1 having the highest priority and the Heading 6 having the lowest.
  • For consistency, start with the highest level header (Heading 1) and work your way down.
  • Each page title is automatically styled as a heading level 1.  No other heading on the page should carry as much weight.  Because of this, the Heading 1 style has been removed from the Format drop-down box.
  • Don't use headers just to make text look bigger.  This is what the styles, from the Style drop-down box, are for.
  • Do not change the color of any headers.
  • The additional formatting of headings on your part is unnecessary (italicizing, extra bolding, underlining, adding colons after large headings) to distinguish them from normal text.
  • The following presets are accessible from the "Format" drop-down menu that's visible when editing a page:

Heading 2 (h2)

Heading 3 (h3)

Heading 4 (h4)

Heading 5 (h5)

Normal (p).  No need to indent paragraphs; space automatically appears between them.

[top]

Discreet Text

Discreet text is located in the "Style..." drop-down menu that's visible when editing a page.

This is an example of discreet text. This style should be used sparingly and only to clarify or reference other content, like a photo caption.

[top]

Lists

Use the editor's built-in list-making functions (Lists).  Each "paragraph" within a list is treated as a list item.  End each item with a period. To create or remove deeper levels inside of lists, select the list item(s) that you want to adjust and choose Increase or Decrease Indent (Indent).

Numbered (Ordered) List

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Duis vel diam eget magna facilisis fringilla.
    1. Sed sit amet urna, phasellus pede.
      1. Duis vel diam eget magna facilisis fringilla.
    2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  3. Sed sit amet urna, phasellus pede.

Bulleted (Unordered) List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Sed sit amet urna, phasellus pede.
    • Duis vel diam eget magna facilisis fringilla.
      • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Sed sit amet urna, phasellus pede.
  • Duis vel diam eget magna facilisis fringilla.

[top]

Images

Sizing

It's the school's policy that all pages should fit comfortably within a 1024 pixel-wide screen:

  • Images in 2-column layouts must be scaled to 765 pixels wide, or smaller.
  • Images in 3-column layouts must be scaled to 525 pixels wide, or smaller.

Photo Captions

Bondurant 2
Photo captions should be styled as discreet text.  If an image is placed within a table, a caption can be inserted into the cell directly underneath the image's cell. (This requires a table with at least two rows.)
Icon Idea Tip: For captions, set the Style... drop-down to "Normal paragraph" or "Normal (DIV)" to achieve desirable line-spacing.

Image Border

You can add a 1 pixel border to your images by selecting an image on the page and then select Image Border from the "Style..." drop-down list.  Here is an image with the Image Border style applied:

Bondurant 2

[top]

Tables

Tables must meet the same size requirements as images.  Tables with a fixed pixel width should not be wider than 765 pixels in 2-column layouts and 525 pixels in 3-column layouts.

Cell padding of 5 to 10 pixels is sufficient.  Here are some examples of table styles that are available when creating the table:

Heading (H3)

2nd Column

This table has a Subdued grid style .  This is a good way to achieve a border, without settling for the harsh beveled border that HTML would render.

[top]

 

Anchors

If a page is long enough to warrant an anchor link that returns users to the top of the page, create a right-justified link like the examples you see ([top]) by designating "#top" as the URL in the link dialogue box.

[top]