October 2011 – Blackboard Help

A Learning Module is a series of pages or folders with a table of contents. Within it you can place any type of content, assessment or activity that you would place in a Blackboard content area.

What a Learning Module looks like

When your students click on the link to a Learning Module, they will see a series of table of contents and a series of pages. They click on the Next Page button (or use the table of contents to click through the pages. The pages can contain items, assessments etc – almost any of the types of content or activities built into Blackboard.

This is NOT what your Learning Module will look like while you are building it – follow the instructions below to see how to build it.

Build a Learning Module

Go to any Content Area and from the Build Content menu choose Learning Module. Give your module a Name and Description. The description will be what the students read before they click on the link to the Learning Module. You can set options for the Learning Module such as availability, etc.

Click Submit when you are done.

Click to enter the Learning Module

After you click on Submit – click on the name of the Learning Module to enter it and begin building it.

Add Content of Activities

Add "pages" to your Lesson Module by adding Content, Assessments, Interactive Tools, from the same menu that you use to add them to a Content Area. With Editing turned on you will not immediately see that these are new pages, but they will start to be listed in your Table of Contents.

In the first example, we will add an image and some text – to do that we will create a "Blank Page".

Edit the Blank Page

Give the page a name and type text into the text box for content. If you want to add a picture – click on the button that looks like a picture. Do not worry about the fact that if you hover over it, it says "Attach Image" rather than "Insert Image."

Browse to find the picture

Browse on Computer to find the picture file. Make sure it is re-sized to fit onto the Blackboard page. If you have several pictures you want to add – you can also load them to your "files" area first, then Browse Course to find them in the files area.

Add "Alt Text" to describe the picture then click Submit and then Submit again.

Continue to add content or activities

Add more content or activities – each will appear in the table of contents. While Editing is ON you will not see separate pages – just a list of content which you can re-order.

Turn editing OFF to preview

When you turn editing OFF then you will see it as the students do – a series of pages to view one at a time. Each type of content or activity will be on its own page. Some will open automatically in a new window. For example, a Test will open in a new window since it doesn’t work in the lesson plan frame.

For more about Lesson Plans – see http://ondemand.blackboard.com/r91/movies/bb91_lesson_plans_create_lesson_plan.htm

This lesson describes how to add a picture to an announcment or item and have the text wordwrap around the image.

Wordwrapping text around an image

When you want to include an image in the text of an announcement or item, it is desireable to have the text wordwrap around the image as shown. The following steps show how to make that happen. It will require editing some HTML, but it is fairly simple.

Create the announcement or item

Create the announcement or item and type in the text that you want.
Click before the first line in the text to position your cursor there. This is where we will insert the image.

(It is possible to insert images elsewhere, but this will be the simplest example.

Insert Image

(1) Click on the Attach Image button (which looks like a picture).
(2) Click Browse My Computer to find the image file on your computer.

(Note – if you have an image you have previously uploaded to use elsewhere in your course you can click Browse Course)

Browse and find your picture

Select your picture, then click Open

Enter “Alt Text” for your picture

Enter a Text Description for your picture where it says “Alt Text” then click submit (don’t worry about anything else on this screen – it doesn’t apply or is not needed here).

At the next screen – click submit again.

Your picture is now in line with the paragraph of text

Your picture is now in lign with the paragraph of text – this is NOT what we want.

Click on the < > button to edit the HTML code (don’t be scared – this won’t be too hard!)

Edit the img tag in the HTML

If you inserted you image before the very first line of text – the top of the code should read something like this:

<img title=”Abraham Lincoln” style=”border: 0px solid rgb(0, 0, 0); width: 135px; height: 172px;” alt=”Abraham Lincoln” src=”../../../sessions/1/4/4/6/7/6/4/0/session/86fe4a9fe99341cda819f03047db2170/AbrahamLincoln_th.JPG” />Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and

that is, it will begin with <img then have some information, then end with /> before the actual text you entered begins.

After the <img – leave a space and then type in the following text exactly

align = “right”

(including quotation marks). The code will now read something like this:

<img align=”right” title=”Abraham Lincoln” style=”border: 0px solid rgb(0, 0, 0); width: 135px; height: 172px;” alt=”Abraham Lincoln” src=”../../../sessions/1/4/4/6/7/6/4/0/session/86fe4a9fe99341cda819f03047db2170/AbrahamLincoln_th.JPG” />Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and

Note the quotation makes around the “right”. Do not add any punctuation such as commas. Do not accidentally delete any of the other code.

Click on the < > button again to get out of code view.

Your text now wordwraps around your image!

Your text now wordwraps around your image!!!! Click Submit to finish

If you want your image to be on the left you can also use align=”left”. You can actually position your image anywhere you want, but putting it at the top makes it easier to spot the HTML code you must edit.

Remember: Files for images to be used on the web must be one of these format: jpg, gif, png. If you have clipart or images of another format – try pasting them into Word or Powerpoint then using a screen capture tool such as Jing to make a png file.

Remember to re-size your images before uploading. Although you can resize them in the text editing box – this will NOT resize the files and if your image starts out very large, then although it displays as a small image, the file size is still large and will take longer to display for your students.

Bonus step

If you are comfortable editing the HTML you can also add this to the “style” field inside your img tag: style=”padding:10px;” as shown below. There is a colon : after padding and a semi-colon after 10px. This will add ten pixels of padding around your image – you can change the number 10 to increase or decrease the padding.

<img align=”right” title=”Abraham Lincoln” style=”padding:10px;border: 0px solid rgb(0, 0, 0); width: 135px; height: 172px;” alt=”Abraham Lincoln” src=”../../../sessions/1/4/4/6/7/6/4/0/session/86fe4a9fe99341cda819f03047db2170/AbrahamLincoln_th.JPG” />Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and

Month: October 2011

Creating a Learning Module