Using Templates to Create Content

When you create a new content page in GeorgiaVIEW, you can use an existing template to apply a uniform style across your course. The template provides not only a clean, uniform look to your course, but is also designed with accessibility in mind – something all your content should have. Some of the key features of the templates are explained below.

If you are interested in a different template with a different look or something tailored specifically to your course, contact the CTE.

Applying the Template

In the Content area, create a new file and within the HTML editor, use the Select a Document Template button to find the kind of page you want from the list. You can then edit that page and save it.

Navigate to the same template page to create another page based on it, or choose one of the other pages available.

You can also choose the blank page template and either paste from Word into the page or type your content into GeorgiaVIEW. Either way, the page will pick up the template style.

select a template dropdown option

Existing Content and Templates

Templates cannot be automatically applied to existing content. If you go to a page with existing content and select a document template, you will receive a warning message.

window warning that content will be replaced by template

If you choose replace, your existing content will be overwritten with the template content. If you do wish to apply a template to existing content, you should instead create a new file, apply the BlankPage template and then copy your existing content into the template.

Note: Not all content may be formatted correctly in the new template when you copy existing content over. Make sure that you review the new template before publishing.

Key Features

Headings

The first heading level, Heading 1 or H1, of any document (HTML file, MS Word document, Adobe PDF, etc.) should be the title of the main content. You should only use one Heading 1 in each HTML topic. This heading, or title, helps readers understand the purpose of the topic. In most templates, the H1 tag will create a graphic at the top of the page.

Heading 2

Sub-headings are important for a number of reasons:

  • They visually break up a page which makes it more interesting and reduces eye strain.
  • They help you logically order your content.
  • They help learners identify and internalize transitions in information.
  • They provide an easy way for individuals using screen readers (and other assistive technologies that interact with HTML content) to skim the page and jump between content.

format dropdown option

All headings in your content topic should use proper heading tags. If you copy and paste the different heading elements in this template your headings should be tagged correctly. You can change the heading level of any heading by simply selecting the text and choosing a different level from the format dropdown box in the toolbar.

Heading 3

Your headings should be properly nested. For example, a Heading 3 element should only be used after a Heading 2 element or another Heading 3 element. Just as you shouldn’t format a paragraph tag to look like a heading without actually using a heading tag, you shouldn’t use a heading tag unless you are indicating a new section or sub-section of information.

Heading 4

A good design tip is to never use more than four levels of headings. If your content topic uses more than four levels of headings, consider reorganizing. Chances are the content topic will be clearer and less intimidating to readers after you have reorganized it.

Main content

Paragraphs

The paragraph element should be used for your main text. When formatting paragraph text you should ask yourself:

  • Is the text large enough and simple enough that most readers won’t strain their eyes if they read multiple pages (or topics) of information?
  • Will the text still look good when readers use their browser’s zoom functionality and screen magnifiers to increase the font size?
  • Is there a strong contrast between the text color and the page background? Using this template, your contrast will be fine, but if you change it, consider using the contrast checker to be sure the contrast between text and the background is sufficient.

The default paragraph font in this template has been specifically chosen for online reading and resizes well when zoomed.If you change the font, be sure the font you choose is sans serif. Learn which fonts are sans serif.

Paragraph formatting

The following is a list of alternative paragraph styles that can be used to draw attention to a paragraph or section of text.


A quote style:

What’s in a name? That which we call a rose
By any other name would smell as sweet

To create a quote like that above, select the text you want to include. Click the down button next to the Quicklink tool. Select Insert Attributes. 

insert attribute in quicklink dropdown

Type “quote” in the ID box and click Create.

insert attribute window with quote ID

 

A note paragraph style:

Important Place essential information in a paragraph style with a background or border for visual emphasis.

To create a note like that above, select the text you want to include. Click the down button next to the Quicklink tool. Select Insert Attributes.

 
insert attribute in quicklink dropdown

 

 Type “note” in the ID box and click Create.

attribute window with note ID

 

An emphasis paragraph style:

Use this paragraph style to highlight or draw attention to an interesting paragraph or concept.

To create an emphasis paragraph like that above, select the text you want to include. Click the down button next to the Quicklink tool. Select Insert Attributes.

insert attribute in quicklink dropdown 

Type “emphasis” in the ID box and click Create.

insert attribute window with emphasis ID
 

List Formatting

Lists are a great way of breaking up information on a page and drawing attention to key information and procedures. It is important that lists use the correct list tags and do not use breaks or empty paragraphs for formatting. Correctly tagging and formatting your lists ensures that non-visual readers can quickly assess how many items are in the list and readers who navigate by keyboard can move between list items without having to tab through empty paragraphs.

The following examples show a properly formatted unordered or ordered list.

  • List Item 1
    • Sub-item 1
    • Sub-item 2
  • List Item 2
  1. Step 1
    1. Sub-step 1
    2. Sub-step 2
  2. Step 2

 


Images

From a design perspective, there are two types of images used in HTML content: decorative images and informative images.

Decorative images
Graphics that are used for layout and design purposes that do not contribute any meaning to the page, such as: spacers, box corners, dividing lines and subtle background images.
Informative images
Any other graphics on the page, such as: photos, line drawings, graphics and icons. Background images that include text or pictures that convey information or mood are informative.

All images on a page, whether decorative or informative, need alternative text so screen readers can tell visually disabled students what the image is. When you insert an image in GeorgiaVIEW, the system prompts you to add this alternative, or “ALT,” text. For informative images the ALT text should concisely describe what the image is trying to communicate rather than describing its appearance. As you write the ALT text, remember that some students may only hear that text rather than see the image. What do they need to know that sighted students get from viewing the image?

provide alternative text box with decorative image option checked

 

If the image is just decorative and doesn’t need to be understood to get meaning from the page, check the “This image is decorative” box so that the image is ignored by screen readers.

Wrapping text around images

attribute page with imgRight class

To make text wrap around images with a little space between them as this text floats next to the image on the right, select the image and click the down arrow next to the Quicklink tool. Select Insert Attributes. In the Class box, type “imgRight” to make the image float to the right or “imgLeft” to make it float to the left. Click Create.

See our accessibility page for more help creating accessible content.

Tables

Tables can be very difficult for non-visual readers to interpret since screen readers and other assistive technologies always read the web page code for a page from top to bottom, left to right (in a linear order). Please see our creating tables page for directions on creating accessible tables.

 

 
 

Share This

 
 
 
X

For more information regarding consolidation, please visit our Consolidation page.

¤