Request a meeting room reservation at Northside Learning Center
CMS Outreach: Developing an Attractive Outreach Site
 

Introduction

Web pages and/or sites -- even CMS Outreach pages -- must be treated as official publications and should therefore be designed. Too many sites are put together in a seemingly random fashion. Don't let this happen to your CMS pages! A little time and effort can pay off in a big way, with a useful, professional-looking webpage.

Getting Started

Who or What Purpose is the CMS Page Intended to Serve?

  • For students - keep the page focused on assignments, class notes and other information for the students. Keep any biographical information short.
  • For parents - introduce yourself and provide information useful to parents, such as daily schedule, contact info, course content info, etc.
  • A department page - keep it short! The department name, a group photo, and a list of the members is plenty.

Suggested Page Elements: Plan Your Page
Suggested Layout for Teacher Webpages
Suggested Layout for CMS Pages
Click to see document
The Northside CMS User's Group has
put together a Suggested Layout for Teacher Webpages in CMS Outreach.

  • HTML Module - in the Main Content Pane - This is the main content area. This is the module featured in the sketch below. The HTML Module is a "generic" module in CMS Outreach. You can use HTML Modules in other locations in the page.
  • Links Module - in the Main Content Pane - If there are too many links for the module at the bottom of the page, you can create a separate Child Page for links.
  • Announcement Module - in the Side Content Pane.
  • Events Module - in the Side Content Pane.
  • Documents Module - in the Side Content Pane.
  • Optional:
    • Add other modules as needed.
    • Use an HTML module to hold presentations that you create in PowerPoint and upload to a Slideshare.net account! See the links below:

Start Sketching!
If you can't draw a design, you probably can't create it. You don't have to be an artist, but you need to draw enough to get an idea of what the finished page might look like or at least the HTML module that you'll use for the main content area. Use colored pencils or pens, highlighters, etc., if you like. This is a good place for notes about colors, fonts, and other aspects of the design.

The sketch below shows an HTML module organized with a five row table, along with notes on content and formatting:

Sketch of CMS Outreach page design
HTML module sketch. See the finished page.

Tables

It's Easy to Create Tables!
CMS table button
Table
icon
Making a table
Making a simple table
To create a table in Outreach, just click the table icon (shown to the left) and "draw" out the table that you want to use. After creating the table, simply click in each cell and start typing, or insert the images or other content.

Note:
CMS Outreach tables are automatically created with a width of 500 pixels. This can be modified (see below).

The image to the right shows the creation of a table with one column and four rows. This might be organized as a teacher like this:

Row 1: Banner image
Row 2: Horizontal line (aka Horizontal Rule, or HR)
Row 3: Main content of the page
Row 4: Contact information

Modifying Tables
Modifying all or part of a table is easy:

Select cell
Select a cell
  1. To modify a CELL, click the cell.
  2. Click the <td> button at the bottom of the editing window (the cell should turn navy blue when your cursor touches the <td> button).
  3. Select Properties from the pop-up menu.
  4. Make changes to the properties for the cell in the window that appears, then click the [OK] button.
Select the row
Select a row
  1. To modify a ROW, click any cell within the row.
  2. Click the <tr> button at the bottom of the editing window (the entire row should turn navy blue when your cursor touches the <tr> button).
  3. Select Properties from the pop-up menu.
  4. Make changes to the properties for the row in the window that appears, then click the [OK] button.
Select the table
Select the table
  1. To modify a TABLE, click any cell within the table.
  2. Click the <table> button at the bottom of the editing window (the entire table should turn navy blue when your cursor touches the <table> button).
  3. Select Properties from the pop-up menu.
  4. Make changes to the properties for the table in the window that appears, then click the [OK] button.

Images

Resize Your Images
Maximum size (width or height) in Outreach: 300 pixels.

Software to use:

Wrap Text Around Images
Wrapping text is extremely easy:

  1. CMS Outreach justify buttonsClick the image.
  2. Click the Left Justify or the Right Justify buttons (circled in red, to the right) to wrap the text around the image.

Choose Images Carefully
Images add a lot to a webpage, just don't use them too much!
One good photo is better than several bad clipart images.

Sources for High-Quality Images

  • Wikipedia (en.wikipedia.org)
    Free or Fair Use images. Browse for any subject and click any image you see to find out if you can use that image. Many of the images are either Public Domain or are available for Fair Use by educators.
  • morgueFile (www.morguefile.com)
    Free images. The morgueFile database is quite extensive, and images are searchable by subject.

Adding an E-mail Link -- the Right Way!

An e-mail link is a wonderful addition to a teacher's CMS Outreach page. It must be done correctly, to avoid inviting unwanted SPAM messages. Go through the NISD homepage, and you can find an e-mail link for any current employee. This link sends the visitor to a form that they can fill out to send an e-mail.

NO symbol Don't link directly to an e-mail address! - This is what "spam-bots" are looking for.

A Better Way!
It's simple to use the NISD Contact Us system for a secure e-mail link:

  1. Click one of the two Contact Us links at the bottom of the NISD homepage.
  2. Contact Us links
  3. Under I wish to contact... choose ...a District Employee...
  4. In the ...whose last name is..., type your last name. You can follow the last name with a comma and as much of the first name as you wish, such as: brown, ma
  5. I wish to contact...
  6. Right-click on your name and select Copy Shortcut to copy the address into your computer's memory.
  7. In your CMS Outreach page, place your cursor where you want the e-mail link, then click the Insert Hyperlink button (Insert Hyperlink button) in the tools.
  8. In the URL: box in the window that appears, Paste the link information that you copied in Step 4.
  9. Change the Target: box to New window. This will open the e-mail message page in a new window or tab of the visitor's browser.
  10. In the Title: box, type the text that visitors will click for the e-mail, such as:

            E-mail Me!
  11. Click the [OK] button, then [Save and Set Active].
  12. Don't forget to test your e-mail link.

Mistakes to Avoid!

Too Much Text
Keep it short and sweet! Long text essays belong on "child" pages. Keep the purpose of the page in mind and use that as a guideline for the content to be included.

Empty Space at Top of Page
Most people do not scroll down to view page contents. A large area of empty space at the top of the page pushes the page contents out of sight, where many people will never see them.

Design Hints

Important Content Should be in the Top-Left Part of the Page
The top-left corner is the part of the page that always displays when a page opens. If a visitor is using a device with a tiny screen -- such as a Blackberry or a cell phone -- most of the page will requre scrolling to view. The most important content in your pages should be as close to the top-left corner as possible.

Use Good Images, Not Clipart!
Clipart always looks like clipart, and much of it has been used before. There are some good sites for free photos and images that can be used in an educational site without violating copyright restrictions. Two of the better ones are Wikipedia and morgueFile.


Printer-friendly version of this exercise (PDF)