Nicer Graphics in Bb Learn

Making nicer graphics in Bb Learn

Basic

Have you ever noticed a Blackboard page where a really wide graphic forces the user to scroll left and right to view the content of the page? There's an easy fix. The simplest way to make graphics look better in Blackboard is to change them from fixed width and height to scaled. You do this by first embedding the graphic on the page using the Add Image button (third from left, bottom row of toolbar). Then click on the HTML button (bottom row, second from right of toolbar). You will see width and height values (in pixels) for the graphic, such as width="488" height="326". Change the width to a percentage, such as width="80%" and delete the height information. Click Update to save the change. Now the graphic will automatically resize depending on the size of the window, always taking up the percentage of the screen that you specified.

Another easy change lets you hang the graphic off the left or right side of the page. For example, type: style="float: right; width: 50%;"

Then, after the HTML code for the image, add some text in a paragraph like this: <p>text text text</p> This text will wrap around the graphic.

If you go back to edit the HTML later and discover a bunch of <span> and <font> tags, get out of HTML mode, select the text in the editor, and click the Remove Formatting button (top row, right side of toolbar) and save your changes. When you go back into the HTML mode, the formatting will be gone.

Advanced

The source code below will create a nice framed, text-wrapped, scaling figure in Bb Learn, with an italicized caption centered below. In technical jargon, you need to embed the CSS in-line, because Bb Learn strips out the header from the HTML. Throughout this tutorial, we are pointing at the same graphic. There is only one copy.

Just create a Blank Page or Item, go into the Code View by clicking the HTML button in the lower right of the toolbar:

Saint Tropez

Image floated right, scaled to 33%

Copy/paste the following code into the HTML Editor:

<p>text above the graphic</p> <div id="figure" style="float: right; margin: 5px; padding: 5px; border-width: thin; border-color: silver; border-style: solid; width: 33%;"><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p> </div><p>wrapped text beside and below the graphic</p>

Next, replace the image link and title info with those for your own graphics. You can also change the float from right to left, or change the width from 33% to anything you like.

How it works line by line:

<p>text</p> is a paragraph of text above the image
<div id= begins the region where the graphic will be inserted.
<style= controls the visual appearance and properties of the border.
float: right forces the graphic to hang from the right side of the page. You could change that to left if desired.
padding: 5px creates a 5 pixel space between the inside of the border (the box around the image) and the image.
margin: 5px bumps the graphic out 5 pixels to the left from the right edge of the window.
border-width, border-color, and border-style all control the look of the border.
width: 33% makes the border box (and everything inside it) scale so that it is always 33% (1/3) of the page's width.
img src= points to the location of the image.
float: right and width: 100% control the position of the image within the border.
alt= gives descriptive text for the image and is provided for users with a visual disability.
<p style= defines the formatting of the image caption text under the graphic.
<a href= makes the image caption a hyperlink and provides the web address.
target="_blank" makes the clicked link open in a new window.
</div> closes the DIV region.
<p>text</p> creates a paragraph of text beside and below the graphic.

Reference: http://www.w3.org/Style/Examples/007/figures.en.html

More Examples

Saint Tropez

Image floated left, scaled to 10%

Code for a left side version at 10% size:

<div id="figure" style="float:left; margin: 0.5em; padding: 0.5em; border-width: thin; border-color: silver; border-style: solid; width: 10%;"><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">This version floated left, scaled to 10%</p> </div>

Saint Tropez

Image centered, scaled to 15%

Code for this centered version:

<center><div id="figure" style="margin: 0.5em; padding: 0.5em; border-width: thin; border-color: silver; border-style: solid; width: 15%;"><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">This version centered, scaled to 15%</p> </div></center>

Code for a pair of images side by side in a single box. Each of the graphics is set to slightly less than 50% (you have to factor in the margin and pad) so they can sit side-by-side.

Compare Image 1 and Image 2 and discuss their differences.

<center> <div id="figure2" style="border-width: thin; border-color: silver; border-style: solid; width: 75%;"> <img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="width: 48%; padding: 0.25em; " alt="Image 1" /><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="width: 48%; padding: 0.25em;" alt="Image 2" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">Compare <a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Image 1</a> and <a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Image 2</a> and discuss their differences.</p> </div> </center>

Saint Tropez

Image 1

Saint Tropez

Image 2

Code for a pair of stacked images in a single box:

<div id="figure" style="float:right; margin: 0.5em; padding: 0.5em; border-width: thin; border-color: silver; border-style: solid; width: 12%;"><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">Image 1</p><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">Image 2</p></div>