UsingWebLaunch

How to Use the WebLaunch
Training Templates
by
BlueMissile
1005 Franklin Ave West, Suite 5
Mpls., MN 55405
January 8, 2001
www.bluemissile.com
© 2001 BlueMissile. All rights reserved.
Reproduction, use, or adaptation of any
materials contained herein without
express written permission of BlueMissile is strictly prohibited.

How to Use the WebLaunch Training Templates Page - 2
Rev 2.1 March, 2001
What are the WebLaunch Training Templates?
The WebLaunch Training Templates (from now on called “the templates”) are page
templates that help training managers and SME’s quickly create pages with interactions.
The pages can then be linked together to form a web-based training course.
Although the templates could be used to create many different types of training, they are
best suited to certain kinds of training.
The templates are well suited to:
• Rapid prototyping and publishing of content
• Quick conversion of existing training materials
• Single author or small group development of training pages
• Stand-alone courses
The templates are LESS well-suited to:
• Highly interactive training that needs simulations, game skills, or complex multi-
step interactions
• Large training courses that are best developed by a team of specialists (writers,
instructional designers, graphic artists, and programmers all working together, for
example)
• Training that requires a specialized or custom interface to reinforce the content
• Courses that need detailed user tracking and evaluation

Rev 2.1 March, 2001
What do I need to have in order to use the templates?
The templates are pre-formatted pages that you can load into Macromedia Dreamweaver
4.0 to create the pages of a WBT. Although you can use the templates without
Coursebuilder, to have full control over your pages you’ll need Coursebuilder in addition
to Dreamweaver. Coursebuilder is a free extension to Dreamweaver 4.0 that contains a
library of pre-defined interactions. This saves programmers the time and trouble of
coding the most common training interactions from scratch.
You can download Coursebuilder from the Macromedia web site
(www.macromedia.com) For help downloading and installing Coursebuilder, see the
Extending Dreamweaver Help pages in the Dreamweaver Help files.
In order to use the templates, you must:
• Have Internet Explorer 4.0 or Netscape 4.0 or later installed on your system
• Have javascript turned on for your browser (if you’re not sure, ask your PC
support person or check under the browser’s Properties.)
• Have a copy of Dreamweaver 4.0 with the Coursebuilder extension downloaded
and installed. To install Coursebuilder, go to
www.macromedia.com/exchange/dreamweaver/
Also, the templates will work best if:
• Your screen size is set to 1024 X 768 pixels or larger
• Your desktop colors are set to 16-bit (true color) or higher
• You have enough RAM to keep Dreamweaver and your browser open at the same
time

Rev 2.1 March, 2001
What do I need to know in order to use the templates?
To get the most from the templates, you’ll need a basic understanding of how to use
Dreamweaver to create and save pages. Specifically, you should be familiar with:
• Using the Site Window to open and close files
• Using the Property window to adjust links and attributes
• Using the Layers window to show and hide layers
• Creating Dreamweaver pages from templates
Although you don’t need to know Coursebuilder in order to use the templates, if you are
familiar with Coursebuilder’s Action Manager, using the templates will be a breeze.
The Dreamweaver Help files contain step-by-step instructions for all the above topics.

Rev 2.1 March, 2001
Preparing to use the templates
Before using the templates, outline your course
Although you can dive in and start using the templates with little or no preparation, your
course will come together much faster if you outline it before you start using the
templates. If you are converting content from a PowerPoint presentation or other existing
piece of training, you may already have all the information you need to prepare your
course.
Before using the templates, try to have the following information close at hand:
• Title of the course
• Learning objectives of the course
• Titles for each of the lessons
• Learning objectives for each lesson
• Content for each lesson broken down into short paragraph "pages"
• Sources of additional information
• Questions that will check for understanding
Before using the templates, create a working folder on your hard drive
Remember, the templates are not the actual files of your course. You’ll use the templates
to pre-format the HTML files that will make up your course. To avoid confusion the
templates are all placed in the Templates folder so you must create your WBT one level
up from there. This way, as you save the files of your course, you won’t mix them up
with your original templates or accidentally over-write a template file.

Rev 2.1 March, 2001
Figure 1 - In your working directory, create an images folder for your course and
copy all the template files to your working directory.
Before using the templates, capture your screen images or other graphics
If your course will be using screen captures or other images, try to capture and crop your
images before working with the templates. This way you won’t have to switch back and
forth between Dreamweaver and your graphics program.

Rev 2.1 March, 2001
Using the templates
Templates have letter file names to keep them in “perfect” order
The templates are stored in a series of files on the computer’s hard drive. The template
file names have letters at the beginning of their names so that the computer will keep
them in the ideal order. The file names correspond to the approximate order your pages
should follow in a “perfect” WBT course. Keep in mind, your course doesn’t have to use
every template. You can pick and chose the templates that work for your course.
However, the closer your course sticks to the “perfect” course, the more successful it will
be.
Templates starting with the letters “a” through “d” help introduce the course and the
lessons. They should be used in order at the beginning of your course.
Templates starting with “e” through “n” are interaction templates. Use these templates for
the content of your lessons. Use as many or as few of these as you like, in any order you
like. (Hint: it’s a good idea to vary your interaction types to keep the learner interested.)
Templates starting with “o” through “r” help summarize the course. They should be used
in order at the end of your course.
Overview: How to create a page from a template
To create a WBT course, you create a series of web pages with content and interactions,
then link the pages so the user goes from page to page in the order you want.
To create a page using the templates:
• Create a new file by choosing File-New from Template from the menu bar, then
select a template from the Select Template window
• Add content by highlighting what you want to change and inserting text or
graphics
• Update the links by clicking on the arrows and typing the links of the NEXT and
PREVIOUS pages in the Property Window
• Save the template as a FILE with a different file name and an .htm or .html
extension by choosing File-Save As from the menu bar.
In the next sections we’ll take a closer look at each step.

Rev 2.1 March, 2001
Opening a template
There are several ways to open a template. You can:
• Choose File-New from Template from the menu bar, then select a template from
the Select Template window. This will create a new untitled file based on the
selected template.
• Choose File-New from the menu bar, then choose Modify-Apply template to
page, then select a template from the Select Template Window. This will create a
new untitled file based on the selected template.
• Double click on the template you want in the Site Window. This will open the
template itself. You’ll have to be careful later to make sure you save the file as a
FILE with a different name, otherwise you could accidentally overwrite the
template.
Figure 2 - Create a new file by choosing
File-New From Template from the menu bar…

Rev 2.1 March, 2001
Figure 3 – …then choose a template from
the Select Template window.
Adding content
For most of the templates, adding or changing content is simply a matter of clicking on
the thing you want to change, then typing the new text or name of an image file you want
to insert.
Why can’t I change everything on the templates?
In a template, editable regions are the parts of a page that change—for example, the main
text of your content on the page. Locked (noneditable) regions are the areas that remain
constant from one page to another, such as the graphics in the interface banner and the
Menu button.
While you are editing the template itself, you can make changes to both editable and
locked regions. When the template is applied to a document, however, you can make
changes only to the editable regions of the document; the locked regions of the document
can't be modified.
For more help with editable and noneditable regions, see the Dreamweaver Help files.

Rev 2.1 March, 2001
Figure 4 - You can only make changes to editable regions.
In this example, editable regions are marked in green.
How to change titles or other text:
• Click on the text you want to change
• Type or paste in new text
When you add titles or text, the text boxes will usually expand to the size of your text. If
the text box gets too large, scroll bars will appear and the user will have to scroll don to
see all the text. It’s a good idea to keep your text short enough so that the scroll bars do
not appear.
Figure 5 - Hint: to keep lesson titles and course titles on one line,
insert non-breaking spaces between words rather than text spaces.

Rev 2.1 March, 2001
How to change graphics
Changing graphics can be a little trickier. Most of the templates that can accept screen
captures or other images have temporary images in place. To replace the temporary
image with your own graphic:
To change graphics:
• Double-click on the graphic you want to replace
• Choose the file name of the graphic you want to insert
• Click OK
If you insert a graphic that is too big for the graphic layer, scroll bars will appear and the
user will have to scroll down to see the entire graphic. It’s a good idea to keep your
graphics small enough so that the scroll bars do not appear.
How to change the Coursebuilder interactions
The first few courses you create will probably use the templates’ Coursebuilder
interactions just as they are. As you gain experience, you may want to customize the
interactions (changing the feedback or the number of correct and incorrect choices, for
example.)
To make advanced changes to the Coursebuilder interactions:
• Click on the Coursebuilder icon on your template
• Click Edit on the Coursebuilder Interaction Window
• Choose the Coursebuilder tab containing the information you want to change
• Make your changes
• Click OK

Rev 2.1 March, 2001
Figure 6 - To change a Coursebuilder interaction,
first click on the Coursebuilder icon...
Then click edit from the Properties Panel
Figure 7 - …then choose a tab.
Another way to make advanced changes to Coursebuilder interactions is:
• Click on the Coursebuilder icon on your template
• Click Edit on the Coursebuilder Interaction Window
• Choose the Coursebuilder tab containing the information you want to change
• Make your changes
• Click OK
Linking your pages into a course
The templates allow you to create a course using any or all of the page templates in any
order. To give you this flexibility, the forward and backward arrows in the templates are

Rev 2.1 March, 2001
not linked to a specific file. (How were we supposed to know what file name you would
chose next? ) Therefore, once you finish the content of a page you have to tell it its place
in the course. Specifically, if you want the arrow keys to take a user backward and
forward through the course, you have to tell the page what page comes before it and what
page comes after it.
There are three links that need to be entered to place a page in the course. Before you
save your file, you have to update:
• The Menu link
• The left arrow link
• The right arrow link
To update the Menu link:
• Click on the menu graphic
• Click the Link folder icon in the Property Window
• Choose the file name of the file that will act as your lesson menu. (Note – if you
use the default name from the templates, this will be b-menu.htm.)
• Click OK
Figure 8 - To assign a link, click on the image, then type in the file name in the link
field or click the Link folder to choose a file from the list.
To update the left arrow link:
• Click on the Left arrow graphic
• Click the Link folder icon in the Property Window
• Choose the file name of the file that will come BEFORE this one.
• Click OK

Rev 2.1 March, 2001
To update the right arrow link:
• Click on the right arrow graphic
• Type the name of the file that will come AFTER this one in the Property Window
(You could choose it by browsing, but you probably haven’t created the file yet.)
• Click OK
Updating the Page Markers
The page markers tell a student where they are in a course. Unless you have carefully
outlined your course, you may not know what page number to assign a particular page or
even how many total pages are in your course. Some users like to wait until the course is
all through to update the page markers.
To update the page markers:
• Click on the first page number
• Type in the page number of this page
• Click on the second number
• Type in the total number of pages in the course
Updating the Help Buttons
The templates are pre-formatted with buttons and links for FAQ, a Glossary, and Help
files. If you want to include these files in your course, just use the appropriate template to
create a glossary page, then update the link for the glossary button so it takes the user to
your glossary page.
To update the help buttons:
• Click on the button graphic
• Type the name of the file for that button
• Click OK
To disable the help buttons
• Click on the button graphic
• Choose a new graphic
• Click OK
For example, to replace the graphic for the FAQ button with a dim version of the button
(to indicate that it is not available), you would click the button, then in the Image Source
field of the Property Window choose faq_f2.gif.

Rev 2.1 March, 2001
Saving files
Once your content is entered and your links updated, it’s time to save the file. To save a
file:
• Choose File-Save from the menu bar
• Type the name of your file (remember, if you’re working on a TEMPLATE, save
the page as a FILE with the htm or html extension, NOT the dwt extension that
indicates a template file. It’s also a good idea to save your files in a different
folder from the original templates.)
• Click Save
Here are a few hints for saving files:
• Use numbers or letters at the beginning of file names to keep the files in order on
your screen.
• Make sure any images your file uses are in the site directory folders, otherwise
when you publish your course, the remote pages may not be able to find all the
images
• Make sure all arrow links or links to the Menu page are relative to the document,
rather than relative to the site root. This way you can move the pages around on
your network without breaking the links.
Publishing your course
When it is time to publish your course, use Dreamweaver’s Site Window and site
management features to upload your course to the right place. If you need help using the
Site Manager, see the Dreamweaver Help files.

Rev 2.1 March, 2001
About the templates
Templates starting with the letters “a” through “d” help introduce the course and the
lessons. They should be used in order at the beginning of your course.
Templates starting with “e” through “n” are interaction templates. Use these templates for
the content of your lessons. Use as many or as few of these as you like, in any order you
like. (Hint: it’s a good idea to vary your interaction types to keep the learner interested.)
Templates starting with “o” through “r” help summarize the course. They should be used
in order at the end of your course.

Rev 2.1 March, 2001
a_Course_Intro.dwt
Use this template for your splash or title page for the course. You can also include other
identifying information such as the author’s name, revision level, date the course was
created, etc.
emplates used at
e beginning of a
ourse.
emplates used to
resent content
he “guts” of a
ourse)
Templates
used at the end
of a course.
Templates
used to support
the course.

Rev 2.1 March, 2001
b_Menu_Of_Lessons.dwt
Use this template as your main menu. Type the name of each of your lessons here. If you
know the file names of the first pages of each of your lessons, link the text for each
lesson title to the appropriate file. If you don’t know the titles yet, come back and edit
this page after your course is complete.
Figure 9 - To add a link, highlight the text you want to link,
then type the URL in the Link field, or you can click on the folder and select a page
from your local computer.
To link text to a file:
• Highlight the text you want to link (such as the title of the lesson)
• Type the name of the file in the Link field of the Property Window (or click on
the folder next to Link and choose the file if it already exists)
On the right side of the screen, give the learner more information about the course he or
she is about to take. Type a short description, the learning objectives, and how long the
course will take.
d_Introduction_To_Lesson.dwt
Use this template as the first page of each lesson to give the learner more information
about the lesson he or she is about to take. Type a short description, the learning
objectives, and how long the lesson will take.
e_Text_On_Left.dwt
Use this template to place text on the left side of the screen. Use this template to present
information without an interaction.
f_Text_On_Right.dwt
Use this template to place text on the right side of the screen. Use this template to present

Rev 2.1 March, 2001
g_Text_On_Top.dwt
Use this template to place text on the top of the screen. Use this template to present
h_True_Or_False_F.dwt
Use this template for true/false interactions when you want “False” to be the right
answer.
h_True_Or_False_T.dwt
Use this template for true/false interactions when you want “True” to be the right answer.
h_Yes_Or_No_N.dwt
Use this template for yes/no interactions when you want “No” to be the right answer.
h_Yes_Or_No_Y.dwt
Use this template for yes/no interactions when you want “Yes” to be the right answer.
i_Multiple_Choice_1_Right.dwt
Use this template for multiple choice interactions when you want the first answer to be
the only correct answer.
Use this template for multiple choice interactions when you want the second answer to be
Use this template for multiple choice interactions when you want the third answer to be
Use this template for multiple choice interactions when you want the fourth answer to be
i_Mult_Ch_All_But_1_Right.dwt
Use this template for multiple choice interactions when you want all the answers except
one to be correct. Users must choose ALL of the correct answers and none of the
incorrect ones to get the interaction right.

Rev 2.1 March, 2001
i_Mult_Ch_All_Right.dwt
Use this template for multiple choice interactions when you want all the answers to be
correct. Users must choose ALL of the correct answers to get the interaction right.
j_Rollover_For_Feedback.dwt
Use this template for rollover interactions when you want to insert a screen graphic or
other large image and have the user roll his or her pointer over several different parts of
the image.
The arrows are hot spots. Once you have inserted your screen capture or other image in
the main layer, you can drag the layers containing the arrows so that they point to
particular parts of the image. When the user rolls his or her cursor over an arrow, the text
in the feedback layer that corresponds with the arrow will appear. When the user rolls
over another arrow, the previous feedback layer will disappear and the new feedback
layer will appear.
Type the text you want to appear for each arrow in the appropriate feedback text layer.
When you’re through typing all the feedback text, hide all of the feedback layers by
choosing the layers in the Layers window, then clicking under the eyeball until the eye is
shut.
Figure 10 - When you’re through typing the feedback text, hide the
feedback layer by clicking under the eyeball until the eye is shut.
You can move the feedback textboxes by choosing Window, Layers, then choosing the
layer in the layers palette. Then use the arrow keys on your keyboard to move the layer
where you want it.

Rev 2.1 March, 2001
Note – be careful when moving the arrows or the feedback windows to drag the
LAYERs, not just the graphic images.
k_Mult_Ch_1_Right_w_Graphic.dwt
Use this template for multiple choice interactions with graphics when you want the first
answer to be correct.
Use this template for multiple choice interactions with graphics when you want the
second answer to be correct.
Use this template for multiple choice interactions with graphics when you want the third
Use this template for multiple choice interactions with graphics when you want the fourth
k_Mult_Ch_All_But_1_Right_w_Graphic.dwt
Use this template for multiple choice interactions with graphics when you want all but
one answer to be correct.
k_Mult_Ch_All_Right_w_Graphic.dwt
Use this template for multiple choice interactions with graphics when you want all
answers to be correct.
l_Click_Image_For_Feedback.dwt
Use this template for click interactions when you want to insert a screen graphic or other
large image and have the user click on a particular part of the image.
To add a graphic, double-click on the sample screen capture, then choose a new image
file. If your graphic is too large for the display area, a scroll bar will appear.
The shaded areas are hot spots with the Show/Hide layer behavior attached. Once you
replace the sample graphic, use the Hotspot tool arrow in the lower left corner of the

Rev 2.1 March, 2001
property window to drag the hotspots over the areas you want clicked. To delete a
hotspot, just click on the hotspot you want to delete and press the Delete key.
Type the text you want to appear for each arrow in the appropriate feedback text layer.
When you’re through typing all the feedback text, hide all of the feedback layers by
choosing the layers in the Layers window, then clicking under the eyeball until the eye is
shut.
You can move the feedback textbox by choosing Window, Layers, then choosing the
layer in the layers palette. Then use the arrow keys on your keyboard to move the layer
where you want it. You can also click on the layer handle and drag the layer where you
want it to appear.
Note – be careful when moving the feedback window to drag the LAYER, not just the
graphic images.
l_Drag_and_Drop_1_Right.dwt
Use this template for drag and drop interactions when you want the user to drag the
image on the left to the top image.
First, double-click on the Drag1 image and replace it with an image you want the user to
drag.
Next, double-click on each of the three target images and replace them with the images
you want the user to drag to.
In this template, Target 1 is the correct image. The other two are incorrect.
Note - this template requires IE 4.0 or greater.
image on the left to the middle image.
drag.

Rev 2.1 March, 2001
image on the left to the bottom image.
drag.
m_Text_Entry.dwt
Use this template for interactions where you want the user to type in a word or phrase.
To enter the correct responses, click on the Coursebuilder symbol (the orange and white
cross to the right), then choose Edit Interaction from the Coursebuilder Interaction
Window.
In the Coursebuilder window, choose the Responses tab, type in the correct and incorrect
responses, then click OK.
For now, the correct response is set to “word1.”
n_CheckMark_1_Correct.dwt
Use this template for interactions at the end of a lesson where you want to check the
learner’s understanding and answer 1 is the correct answer.

Rev 2.1 March, 2001
o_Lesson_Summary.dwt
Use this template at the end of a lesson to summarize the main points of the lesson. Note-
you probably don’t need to assign a link to the RIGHT arrow because you’ll probably
want the user to click the Menu button to choose the next lesson.
p_Check_Course_1_Right.dwt
Use this template for interactions at the end of the course where you want to check the
q_Course_Summary.dwt
Use this template at the end of the course to summarize the main points of the course.
Note-you probably want to assign a link to the RIGHT arrow that takes the user to the
More Info page.

Rev 2.1 March, 2001
r_4_More_Information.dwt
Use this template at the end of the course to offer the user other sources of information.
Theses sources can be books, articles, links, or anything that might help the user.
t_faq.dwt
Use this template if you would like to include a Frequently Asked Questions section to
your WBT.
t_glossary.dwt
Use this template if you would like to include a Glossary section to your WBT.
t_help.dwt
Use this template if you would like to include a Help section to your WBT.

Rev 2.1 March, 2001
For more information
There are several sources of additional help and information:
• Open the Dreamweaver or Coursebuilder tutorials from the Dreamweaver Help
menu
• The Macromedia.com web site has extensive help and troubleshooting for both
Dreamweaver and Coursebuilder
• The Dreamweaver News letter is an online news letter you can subscribe to. Try
searching the archives for really hairy problems.

UsingWebLaunch

Recommended

Recommended

More Related Content

Similar to UsingWebLaunch

Similar to UsingWebLaunch (20)

UsingWebLaunch