Webmaster » Sample - With Headings Etc in the New Redesign Sty

Webmaster

2006 Redesign Style Guide

This page is designed to help you see and understand the new styles available with this design. If you have questions then please write to webhelp@vanguard.edu.

Common Headings and Styles

Heading 1

H1, or Heading 1, should typically NOT be used directly in the editor. This is because an H1 with your department name is automatically inserted into the top of pages.

Heading 2

H2, Heading 2, is used for the beginning of a major section underneath your department. For example the English department might have a Major page, Course Description page, or Faculty page that all begin with a Heading 2.

Heading 3

H3, or Heading 3, is for sub headings on a page that belong under a major section. Or it may be used to title a new subsection page that falls underneath a section page. For example the English Major section page has concentrations subpages.

Heading 4

H4, or Heading 4 is a sub sub heading on a page. It looks like bolded text but also places itself directly on top of the paragraph below it.

Heading 5
Use this heading for sub sub sub headings that are below a heading 4. You will use this heading rarely.

Heading 6
This is another rarely used heading, but it is there for you.

Parenthetical Text (small text)
If you need small text then apply the "parenthetical" style to your paragraph or sentence.

Advanced Styles - These styles are contextual, meaning that they appear in the "Apply Style" drop down depending on what you are editing. For example, the bullet styles only appear if you are editing a bullet list.

Fancy Button: First we surrounded a link with a paragraph tag (just hit enter after the link - use the "Show Invisible Elements" toolbar button to verify that your paragrpah tag is there). Then we apply a "button" style to the paragraph. The result is this: Visit My Link.

Here is a paragraph with a style of "block_indent_10" placed on the paragraph -or- span tag. Notice how this paragraph always stays indented in a block no matter how many lines of text your type, it will always stay fully inset. There are styles to indent a paragraph as a block to 10px, 20px, or 30px; px stands for pixels. A pixel is about the size of a period.

Here is a paragraph with a style of "block_indent_20" placed on the paragraph -or- span tag. Notice how this paragraph always stays indented in a block no matter how many lines of text your type, it will always stay fully inset. There are styles to indent a paragraph as a block to 10px, 20px, or 30px; px stands for pixels. A pixel is about the size of a period.

Here is a paragraph with a style of "block_indent_30" placed on the paragraph -or- span tag. Notice how this paragraph always stays indented in a block no matter how many lines of text your type, it will always stay fully inset. There are styles to indent a paragraph as a block to 10px, 20px, or 30px; px stands for pixels. A pixel is about the size of a period.

This is a DIV tag with the style "right_column". Notice how this style has placed the content on the right half of the page. This is accomplished by using a div tag and then applying the proper style. This is an advanced editing technique. Contact us for more info.

This is a DIV tag with the style "left_column". Notice how this style has placed the content on the left half of the page. This is accomplished by using a div tag and then applying the proper style. This is an advanced editing technique. Contact us for more info.

This is a DIV tag with the style "right_column_blue". Notice how this style has placed the content on the left half of the page and given a blue background. This is accomplished by using a div tag and then applying the proper style. This is an advanced editing technique. Contact us for more info.

This is a DIV tag with the style "left_column_blue". Notice how this style has placed the content on the left half of the page and given a blue background. This is accomplished by using a div tag and then applying the proper style. This is an advanced editing technique. Contact us for more info.

Here is a Bullet List with a style called "blue_solid_arrow" (please don't overuse this style)

Item 1
Item 2
- Item 2 Sub
  - Item 2 Sub Sub
Item 3

Here is a Bullet List with style called "golden_solid_arrow" (please don't overuse this style)

Item 1
Item 2
Item 3

Here is a Bullet List with a style "golden_arrow" (please don't overuse this style)

Item 1
Item 2
- Item 2 Sub
  - Item 2 Sub Sub
Item 3

Here is a Regular Numbered List

Item 1
Item 2
Item 3

Here is a Regular Bullet List

Item 1
Item 2
Item 3
- Sub Item 3
- Sub Item 3
  - Sub Sub Item 3
Item 4
Item 5

This is a table with the style "list" (this causes the rows to collapse vertically and become as tight as possible. Borders are also removed.)
Ya Da Ya Da	Ya Da Ya Da
Ya Da Ya Da	Ya Da Ya Da
Ya Da Ya Da	Ya Da Ya Da
Ya Da Ya Da	Ya Da Ya Da

This is a table with the style "site_table" (this style also causes the rows to collapse vertically and removes right, left, and bottom borders. The top border is colored in a subtle gray.)
Site Table	Site Table
Site Table	Site Table
Site Table	Site Table

The "Fancy" Home Page

You may hear us talk about "fancy" home pages and "branding" images occasionally. These are home pages that have a large (branding) picture, for example the webmaster home. Pages like this one are generally very difficult to edit. Normally the web team edits them, but the styles are available if you want to try. However you will need to be set up first. If you are interested in a "fancy" home page then please contact us for details.