Improving your course’s look and feel

Part of the design of Blackboard courses should include a consideration of the visual nature of the material. There are several things that can be done to improve the way a course looks.

Picture formatting

When putting images into Blackboard, not only should an image description be added for accessibility purposes, but an image’s placement and appearance can be controlled.

On the Appearance tab, a sample thumbnail shows how your choices will appear.Appearance menu

  • Setting the Alignment helps control the location of the picture. The most common options are Left and Right.
  • Selecting the check box for Constrain Proportions and changing the dimensions, the image is resized without horizontal or vertical distortion.
  • Adding a value for Vertical Space moves the picture up or down in relation to the text. Adding vertical space can help center a picture on the screen.
  • Adding a value for Horizontal Space moves the picture left or right.

If you want your image to appear right or left of a block of text, type your text in the editor first. Then, move your cursor to the beginning of the text and insert your image there. After you add your image in the General tab, move to the Appearance tab to choose your alignment, dimensions, and space around the image.

Using tables to control text

Either in relation to pictures or on its own, the use of tables can add clarity to the text in a course. To begin, use the Insert/Edit table button to add a table.

Table screenshot


Each row, and cell can be controlled. For example, using the Table Row Properties button  will allow a background color to be added and the text color changed to one or more rows. The Table Cell Properties button  will do the same for any cell currently selected within a table.

Hint: using a table is also a good way to offset text. Add a table with two columns and one row. Placing all the text in one column while adding a few spaces into the other column can add white space to an item in Blackboard. Ex:

Example of whitespace


Add space to list items

Content of ordered and unordered lists can be modified by:

  1. Selecting the text in the list
  2. Clicking in the CSS button in the toolbar
  3. Switching to the Box menu
  4. Deselect the “Same for All” checkbox on the right-side list, and entering a value in the Bottom A value of 4-6 pixels work best.
  5. Deselect the checkbox for “Insert span at selection”
  6. Click on the Update button

Adding space can have a subtle but powerful effect on the ability to read the text.

Bullet spacing




Printable version of this guide

This entry was posted in DEIT reflections, Teaching and pedagogy and tagged , , . Bookmark the permalink.