Let's take a quick look at how to add a header and footer to a published Articulate Storyline course. What in the world am I talking about? Say you don't want to muddy up your stage with your logo and course title like so:

headerfooter1

As you can see the header and footer are outside, minding their own business. To add these in, you must add a little html to the published files. If you output to both Flash and HTML, you will need to edit two files.

First, let's get our images in order. In this example both header and footer are images but you can use text if you like. Here are our images.

Header (header.jpg):

header

Footer (footer.jpg):

footer

I don't always practice what we preach (don't tell anyone), but I recommend using PNG files to reduce any slight color shift between logos and background color.

STEP 1: You will want to put these files in the same folder you see the story.html file.

FLASH OUTPUT!

STEP 2: OK, from your published files, open story.html in a text editor. You can open this file in any text editor like Notepad. I recommend Notepad ++ because, well, I love Notepad ++. This is the file that opens the Flash object if the browser/device supports it.

You should be able to find the following code (should be around line 158):

     document.write("<td align=center>");

Now add <div style='width:800px; text-align:left;'><img src='header.jpg'></div> after the <td align=center>. It should look like this:

     document.write("<td align=center><div style='width:800px; text-align:left;'><img src='header.jpg'></div>");

This will place the header in. You might want to adjust the width based on your project size, and you can adjust text-align to center or right if you want to re-position the image.

STEP 3: The footer is added in a very similar way. Add <div style='width:800px; text-align:right;'><img src='header.jpg'></div> right before </td< on line 174. It will then look like this:

     document.write("<div style='border:0px solid black; width:800px; text-align:right;' ><img src='footer.jpg'></div></td>");

HTML5 OUTPUT!

Check back soon. We will have our instructions up soon.