HTML templates can be used to create engaging and interactive content layouts within a Brightspace course. Templates include both text layout pages, such as introduction and conclusion layouts, and dynamic pages with interactive elements, such as accordions and tabs.
Templates improve the look and feel of courses, and can help you organize your content more meaningfully by adding page elements. HTML templates are designed to meet Universal Design for Learning and Accessibility standards (WCAG). Templates include formatting styles, such as heading levels and paragraphs, that help create content that is accessible for assistive technologies.
This page layout features a full-screen image for visual impact, and a large, focused area for a course description, or a Course Introduction page.
The Module Introduction page features a prominent banner image across the top and a numbered list below.
This page can easily accommodate more content than the Course Introduction page. And, as illustrated below, the numbered list can be used to list a module’s learning objectives. This makes it ideal as the first page of a module in a course.
This basic page is a general-purpose layout that includes a banner.
Images can be added to any of your pages to create visual interest and help break up text-heavy courses.
The Video layout includes an embedded YouTube video, which can scale in any browser or mobile device. Embedding videos in the page is a great way to present video content, while accompanying it with supporting context, explanations and activities.
This page includes samples of some commonly used page elements.
You can copy one, or more, of the specific elements from this page and paste them into other pages. By combining elements, you can create new layouts for your courses.
This page includes samples of some commonly used column layouts.
You can copy one, or more, of the specific elements from this page and paste them into other pages. By combining elements, you can create new layouts for your courses.
This page includes samples of some commonly used timelines.
You can copy one, or more, of the specific timelines from this page and paste them into other pages.
Tabs are useful for elaborating on an idea that has set structures or categories of sub-information, particularly, if you have a collection of pieces of content that all have the same set structures. For example, laying out a series of studies that each has a hypothesis, a method, and findings. Tabs are especially effective when the information presented in the first tab is built on in the second; the second built on in the first, and so on (as in the example of a study's hypothesis, method, and findings.
Accordions are useful when you need to present learners with a list of items—there may be a lot to learn about each item, but the first priority is for the learner to recognize and learn the list of closely associated items first, then allow them to dig deeper (by opening the accordion) to learn more.
Flip Cards are useful for separating information into two parts. This can be a great way to allow students time to think before seeing the answer. This makes the learning experience a bit more interesting for students.
Click 'n' Reveal buttons are useful for separating information into two parts. This can be a great way to allow students time to think before seeing the answer. This makes the learning experience a bit more interesting for students.
Though this conclusion page layout could be used for various purposes, it makes an excellent page to conclude each module. Using a consistent layout for conclusions will help signal to course participants that they have reached the end of the course content.
This page includes some timers that count down from 10 minutes, 15 minutes, 20 minutes, and 60 minutes to 0. They can be used to keep students on task, set time limits on activities, and more.
Applying a template to an existing page will overwrite the content and you will lose your work. We recommend selecting and applying the HTML template before adding content (images, videos, etc.) to the Brightspace editor.
Most HTML Templates will not require you to make any changes to the HTML code. We do not recommend editing the original templates as this can break the HTML code.
Templates can be added to an instructor's course content by doing the following:
In a course's content, select the Upload/Create button
Select Create a File
Click on the Select a Document Template button at the top
Select the desired HTML Template
Note: HTML from multiple templates can be copied, pasted, and combined to meet the instructor's unique course needs.
To copy an HTML Template element, you will need to do the following:
With an HTML Template open, find the Start Copy text above the desired element
Click, hold, and drag the cursor from the Start Copy text above the element to the End Copy text below the element
Right-click on the mouse and select Copy, or press Ctrl+C on the keyboard to copy the element
Select a new template, or select everything (Ctrl+A) in the HTML editor and delete to remove the template. If a new template is selected, everything in the HTML editor will be deleted and replaced by the new template.
After a new template is selected, or the information needed has been added, find a place to paste in the copied template element
Right-click and select Paste, or press Ctrl+V on the keyboard to paste the element
Elements from an HTML Template cannot be copied and added to a different Content Item by copying from the HTML Editor. In order to copy the element to an existing item, the source code of the HTML Template and the element will need to be copied. This can be done by selecting the Source Code button (</>), copying everything, pasting the code to the existing Content Item's source code, then removing the items you do not need from the HTML editor.
Note: If you are working on a Mac, reference these keyboard shortcuts.