Navigation

Navigation
OIS Web Support

Email:
webhelp@
listserv.med.unc.edu

Walk-in Support:
Multimedia Lab
067 MacNider Hall
M-F 9am-4pm

Phone Support:
(919) 966-3519
You are here: Home > Web Standards & Policies > Page Style Guide
Document Actions

Page Style Guide

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

 

Headings & 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)
Heading 6 (h6)

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

Notes:

  • 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.  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.
  • 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 Heading 1 option is not included in the Format drop-down menu because page titles are automatically set behind the scenes as h1 headings (the largest possible heading).

 [top]

Discreet Text

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.

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

[top]

Lists

Use the editor's built-in list-making functions (FCK List Buttons).  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 (FCK Tabs Buttons).

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.

Icon Idea Tip: If you need headers built into your list items, use forced line breaks (shift+return), like this:

  1. First Thing

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

  2. Second Thing

    Sed sit amet urna, phasellus pede.

  3. Third Thing

    Duis vel diam eget magna facilisis fringilla.

[top]

Images

Sizing

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

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

Of course, this assumes no text wrapping to the sides of a photo. For images that you particularly don't want text to wrap around, place such image(s) in a table set to 100% width to avoid problems in certain browsers. A border was used here to illustrate the bounds of the table, but a border is not required.

Old Well 2

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 "Format" drop-down to blank or "Normal (DIV)" to achieve desirable line-spacing.

Mark-up/Highlighting

template.jpg

Highlighting, arrows, etc. can be done in red (#990000), or grey.

[top]

Tables

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

Cell padding of 5 to 10 pixels is sufficient.  The following show recommended colors that coordinate with the web standard:

This is a 1 column x 1 row table with cell background color of #E9F0F7:

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

Heading (H3)

2nd Column

This table has a border value of 0, but cell spacing of 1 pixel, so the grayish background color  (#E3E2DA) shows around the cells that are colored white (#FFFFFF).  This is a good way to achieve a colored border of your choice, without settling for the harsh beveled border that HTML would render if you specified a border width for the table.

  

[top]

FAQ Formatting

Style "Frequently Asked Questions" after this live example.

[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]
Site-wide Actions
Personal tools