How-To


Canvas pages typically present resources like books, articles, videos and recorded lectures. They’re comprised of text, images and media.


Adding & Editing a Canvas Page

You can add informational web pages with text, images and media to your course’s Home page wherever a module exists.

To do this, find the module into which you’d like to add a page, then:

  1. Click the plus icon on the right side of the module title bar
  2. Select Page from the drop-down menu at the top of the window that pops up
  3. Click [New Page]
  4. Name the page whatever you’d like. (e.g., “Week 1 Introduction”)
  5. Choose whether or how far you’d like this resource to be indented from the left side within the module on the home page. I’m going to indent this page’s title one level so that it’s slightly further in from the title of the module.
  6. Click Add Item
  7. Click on the title of the page you just created to enter it
  8. Click the Edit button to reveal a text editor that will allow you to type and format your content.
  9. Click the Save & Publish button to make sure students can see the material. (If you’re still working on the draft, click Save to keep it unpublished.)

Formatting Hypertext Basics (Using the HTML Editor)

Once you enter a page you’ve created and click Edit, Canvas’ HTML Editor becomes available. Its text formatting buttons function similarly to Microsoft Word’s. The top row of buttons allows you to do things like underline, change the color of, highlight or indent text. The last two drop downs on the second row allow you to manipulate text size.

screen shot of HTML editor's tool bar

Lists

  • Unordered list toolbar iconUnordered lists place bullet points in front of each item in a list. Unordered lists are useful when the sequence of list items is unimportant. Most lists are unordered.
  • ordered list toolbar iconOrdered lists place numbers (or letters) in front of list items. If you’re providing instructions that require students to follow a series of steps in order, use ordered lists.

Tables

To create a table in Canvas using the HTML editor:

  1. Click on the arrow to the right of the table icon. table toolbar icon
  2. Hover over the number of rows and columns you’d like to build (they’ll be highlighted), then click to create the table.
    screen shot of html editor's table menu with 3 columns and 4 rows highlighted
  3. Once you’ve built the table (the example above would produce the table below), click in the cell you’d like to edit and enter the text, links and/or media you’d like to include.
  4. To edit the table’s properties after it’s built, click inside and use the menu that appears below. In this area, you can change things like the borders, column widths, and add accessibility elements like captions.
    screen shot of the table while selected and the table properties menu that appears below it

Images

To add an image, first place your cursor in the location where you’d like it placed:

  1. Click the image icon image toolbar icon
  2. Select the Canvas tab
  3. Select the Course Files folder
  4. Click the Upload File button
  5. Select the file from your computer
  6. Important for Accessibility: Either select “Decorative Image” so screen readers know to skip a reference to the image, or, if the image contains information the learner should know, provide descriptive “Alt text” so that student using screen readers don’t miss any important content/context about the image’s contents.
  7. Click Update
    screen shot of Canvas' Insert/Edit Image dialog box

Video

Using video in a course site is a great way to engage your students! Before reading more about how to do it, please bear in mind a few guidelines on the best instructional practices for video use. You may also want to check out more information about using Panopto, which is the video recording tool integrated into Canvas at Adler.

Many video streaming services allow you to embed videos in your web pages. In this example, we’ll embed a YouTube video.

  1. Navigate to the video you’d like to use in YouTube.
  2. Click the Share button beneath the video.
  3. Select the Embed option in the pop up window that appears.
  4. Copy the YouTube embed code by clicking the Copy button.
    screen shot of YouTube's copy embed code dialog
  5. Return to your Canvas page, make sure you’re editing it, then click the “HTML Editor” link.
  6. Paste in the code you’ve copied from YouTube by typing Ctrl + V (Cmd + V on a Mac).
  7. Save your changes.

Best Practices


Page layouts control the students’ attention on each page. Thoughtful layouts enhance meaning, provide clarity, and make content more memorable.


Emphasis

Emphasis in a page layout draws the eye to content that is most important; it creates a page’s focal point(s). In educational web materials, the most important principle is clarity, so don’t overdo it. When everything has equal emphasis, the design becomes busy and confusing. To create a focal point in your pages, consider:

  • Color
  • Central placement, or placement at the top of the page
  • Heavier weight (bold fonts, darker tones, etc.)
  • Larger size
  • White Space (An element surrounded by empty space becomes the focal point)

Easily Understood Organization

  • White space breaks up content into chunks and creates emphasis.
  • Titled sections (headers) break up the material into manageable sections and emphasize the relationships between concepts.
  • All types of lists group similar elements. Numbered lists suggest a sequence. They are more likely to be read than long paragraphs with items separated by commas.
  • Tables are a great way to quickly communicate the relationships between related information, and they draw the eye.
  • Linking to related material lessens the student’s navigational burden and helps underscore the relationships between different course elements.

Visual Interest

  • Our team can help develop multimedia and graphics for your course. Request help with that via our Service Request Form.
  • Thematically relevant images or embedded video can add a visual component to your pages that makes them more engaging and memorable. This also helps to differentiate one page from another in the minds of your students.
  • Consider including pertinent infographics, charts and graphs.