Request a meeting room reservation at Northside Learning Center
CMS Outreach Tips & Tricks: Design and Layout
 

1. Table Layout

Table Layout method
Table Layout Method
A very easy way to lay out a CMS Outreach page is to insert a table into the HTML module. This is a useful method for teachers who want more control of their page. A few points:

  • Insert a table with one or more rows and one column. Insert content into the cells and format.
  • Don't resize the table. The "default" size is good.

To add a background color to a table:

  1. Select the table by putting your cursor on one of the cell walls and clicking. Handles will appear on the sides and corners of the table when it is selected.
  2. Click the Highlight icon (circled in red in the image) to open the color picker.
  3. Select a color to put a background color behind the table contents, or click More Colors... to choose a color not shown in the picker.

Note: There is another method for changing background color of a table, which is shown below, but this method is simpler and easier to teach.

2. Modifying an Existing Table

To modify a table in CMS Outreach, it's a good idea to understand a few things about how tables are created in HTML. Here are the tags that are used to build tables:

    <table> - This tag controls the properties of the entire table.
    <tr> - Table Row. This tag begins and ends every row in a table.
    <td> - Table Data. Every cell in a table begins and ends with this tag.
Here's the code to create a 500-pixel-wide, centered, 2X2 (two rows, two columns) table:

<table align="center"
  width="500">
 Start of the table
<tr>  Start of first row
<td></td>  Cells of the first row
<td></td>
</tr>  End of first row
<tr>  Start of second row
<td></td>  Cells of the second row
<td></td>
</tr>  End of second row
</table>  End of the table

Select table cell
Select table row
Select table cell (above) and
select table row (below)
Changing properties within a CMS Outreach table is not hard, if you understand how tables work. To modify a single cell in a table, or an entire row:

  1. Select the part of the table to be changed:

    To select a single cell, click within a cell, then place your cursor on the <td> button, and the cell will be highlighted.

    To select a row, click anywhere in the row, then place your cursor on the <tr> button, and the row will be highlighted.

    To select the entire table, click anywhere in the table, then place your cursor on the <table> button, and the whole table will be highlighted.
  2. Click the button (<td>, <tr>, or <table>) and select Properties from the menu that appears.
  3. Browse through the properties to find background colors, padding, cell spacing, or other attributes that you want to change.

3. Images

Principal Lawson's office phone number is (210) 397-5555. His fax number is (210) 522-4545. Principal Lawson is a graduate of the University of Texas, with a Bachelor's degree in Education. He also holds a Master's degree in Administration from Our Lady of the Lake University. He has worked for Northside ISD for 11 years. He worked for six years as a teacher in his home town of Corpus Christi prior to coming to Northside.
Single 500-pixel image for use in a CMS Outreach page.
An image can be used as the sole content of a CMS Outreach page. A variety of tools, such as Powerpoint templates, Fireworks, or Photoshop, can be used to create such an image, but it is best to use an application that allows you to set the basic style of the images, so that only the unique information on an individual, team or department can be inserted.

In order to "fit" the space available in the CMS Outreach page, set the image width between 500 and 600 pixels. The height of the image should generally be no more than 350 pixels, in order to fit the window without vertical scrolling.

This image is intended for use in the HTML Module, with no other modules. An image page is best suited to pages that do not change frequently, such as administrator pages.

Important Accessibility Issue: The Alternative text needs to be very descriptive. Ideally, it should contain all of the most important information contained in the image. If you place your cursor on the George Lawson image just above, you'll see just how much can be contained in Alternative text!