This page has been designed as a tool to help you format your web pages. We have set up a number of styles that allow you to be creative in formatting page content while keeping elements throughout the site consistent.

Topics

• General Information
• Layouts
• Headings
• Bullets, Ordered lists & Nested Lists 
• Callouts
• Data Tables
• Images & Image Captions
• Creating Bio Images
  

General Information

The default text format is Paragraph which is is listed in the Format menu. To deviate from this default, the content needs to be selected and a new format or style selected from the rich text box controls above.

Please delete any extra spacing and hard returns. Please don't double space text. When you hit return, the paragraph is ended and a new one is started. To create a small break, hit shift return.

Please note that web content is different from print content in that viewers have difficulty reading web pages on a screen, but rather "scan" them instead. Therefore, if a page becomes too long and requires a lot of scrolling to read the content, it's probably best that the page is broken into several pages. On the reverse, if pages are very short and only consists of a few sentences, it might be better to combine multiple pages into one. It's also good practice to include subheads, callouts and bullets throughout the content to help the viewer to scan the information quickly.
See Topics above.

Page Layouts

Sub-page with Sidebar Layout This layout should ONLY be chosen if you have added cross-references to the page. The layout will automically list the cross-references in a column on the right side. If the Sub-page with Sidebar layout is chosen and no cross-references have been added, an empty white column will appear on the right side of the page. This layout is the best choice if the page is fairly long and you don't want the cross-references pushed to the bottom of the page where the viewer has to scroll all the way down to see them.
List page Layout This layout should ONLY be chosen if you are created a shared content list page that links to the detail pages (news, event, client engagement, jobs and bios).
Home Layout This layout should ONLY be used for the home page of the entire site. Other home pages can be added throughout the site, but we highly discourage that you do so.
Sub-page Layout The sub-page layout is the default selection when creating basic pages. This default allows the full white space for content and will contain the cross-references (if any) at the bottom of the page in the green portion of the site. This layout is best used if the content is fairly short , allowing cross-references to fill the bottom of the page OR if there aren't any cross-references at all.

 Back to Top

Headings

Proper Use of Headings

We have set up styles to use as headers throughout the site to help break up text and make content more digestible to viewers (located in the pulldown menu under 'Paragraph' option). The bold and italic formatting options should NOT be used unless the content is being emphasized within a paragraph. We generally don't recommend using the underline formatting option because the result could be confused with a text link.

Heading 1 should be used first as subheads (below page titles) throughout the site.

Heading 2 should be used after "Heading 1" if the content is nested under the previous header.

Heading 3 should be used after "Heading 2" if the the content is nested under the previous header.

See example below:

Dog Breeds (heading 1)

Collies (Heading 2)

Key Traits (Heading 3)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Special Diet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Retrievers

Key Traits

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 

Special Care

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Back to Top

Bullets Lists, Ordered Lists & Nested Lists

Listing content items should be used in place of comma separating whenever possible so that viewers will have an easier time scanning the page content. We have created pre-set styles for these list types that automatically adds the arrow bullets, box bullets, background color and indents the list correctly. You would just type out your list with each item separated by a return, select the entire list and click either the Unordered List icon (bullets) or the Ordered List icon (numbers). You can then select items in the list and click the Indent icon next to the list icons to create a nested list under the parent list. You can also use the Outdent icon next to the indent to pull the nested bullets out into the parent list. Please note that we do not recommend indenting further than one level to keep the content readable.

See example below.

Undordered List

• Listing content items should be used in place of comma separating whenever possible so that viewers will have an easier time scanning the page content.
• We have created pre-set styles for these list types.
  • This is a nested list item 1
  • This is a nested list item 2
• You would just type out your list with each item separated by a return, select the entire list and click either the unordered list icon (bullets) or the ordered list icon (numbers).
• You can then select items in the list and click the indent icon next to the list icons to create a nested list of bullets (or letters).

Ordered List

1. Listing content items should be used in place of comma separating whenever possible so that viewers will have an easier time scanning the page content.
2. We have created pre-set styles for these list types.
   1. This is a nested list item 1
   2. This is a nested list item 2
3. You would just type out your list with each item separated by a return, select the entire list and click either the unordered list icon (bullets) or the ordered list icon (numbers).
4. You can then select items in the list and click the indent icon next to the list icons to create a nested list of bullets (or letters).

 Back to Top

Callouts

This is an example of what a callout looks like. Selecting the 'callout' style will automatically format the text block in this way.

Callouts are used to command attention to a block of text or to ad visual interest to a text-heavy web page (similar to callouts in print magazine articles). A callout style has been created in the Styles menu.

Back to Top

Data Tables

To create a data table, first click the Table icon. A popout will ask you to define the amount of rows and columns. The other fields need not be filled out if you're using the Data Table style that we have set up. You still may want to specify a width (type in 100% if you would like to use the full width of the of the page). After closing the popout, paste or type your text into each cell. When you have finished, select the entire type and select Data Table from the Styles menu. To create a table head, select the first row and select Table Header in the Styles menu. The result will format your table like the example below. Note that table headers can also be added to rows within the table to help further categorize the content.

Back to Top

Images & Image Captions

Inserting Images

You can add an JPEGs, GIFs and PNGs to the site by clicking the Add/Edit Image icon which opens the Image Gallery. You can can create directories here to keep your images organized. Once you add an image to this library, it remains there to be reused in other places if needed. Once an image has been chosen, click on the Appearance tab before closing the popout to align the image either right or left. After adding the image, you can then select it and use the Edit Image Margins icon to add spacing to the left or right of the image which gives the text some breathing room - 20px is the standard for this site.

Creating Image Captions

This text describes the image above. A photo caption is a good way to add a description to an image.

We have created a style that will format photo captions to appear like the one to the left. Select the image and click the Add/Edit Image Caption icon. Simply paste or type in the description, choose if you want the image to align left or right, then click OK. To remove the caption, select the image and along with the caption, click the Add/Edit Image Caption icon and check the Remove Caption box. Please note that captions work best if you don't have any formating options already on the image (see Inserting Images above).

Back to Top

Creating Bio Images

We have created a directory in the Image Gallery called Bios to keep the images organized in the Image Gallery. Bio images should be masked out so that a white background is behind the individual. The width of the image should be 190px so that it will match the width of the information caption below it. (see example right)