Using Dreamweaver to Create e-Learning

By Mike Doyle

Macromedia Dreamweaver is the most popular Web authoring tool in the world, with literally millions of users worldwide. Because the tool is so widely used, training, support, and add-on software for Dreamweaver is abundant.

One characteristic of Dreamweaver makes it remarkably different from many other tools on the market: the software is extensible.

Two extremely robust (and free!) extensions that Macromedia created are CourseBuilder and Learning Site. The extensions, which enable you to build Web-Based Training using Dreamweaver, are available for download from the Macromedia exchange (exchange.macromedia.com)

Macromedia extensions are installed into Macromedia products using a separate software product called The Extension Manager, which installs add-on software for many different Macromedia products, including Dreamweaver, Flash, and Fireworks.

As you can see from Figure 1, there are a number of extensions installed in my copy of Dreamweaver MX.

Once you install the CourseBuilder and Learning Site extensions, the additional capabilities provided by those extensions become available in Dreamweaver.

CourseBuilder Creates Interactions

CourseBuilder creates interactions, which are tests or activities performed by students. CourseBuilder interactions fall into two general categories:

Test and activity interactions, including multiple choice, drag-and-drop, text entry, and hot area explorations.

Control interactions, including buttons, sliders, and timers.

Each CourseBuilder interaction provides a different function. For example, multiple choice interactions let you insert multiple choice questions. Figure 2 shows the results of inserting and defining a multiple-choice question using CourseBuilder.

When you insert interactions, the look and feel of those interactions is completely customizable, allowing you to fully control the style and layout for the interaction.

The CourseBuilder Gallery

After you install CourseBuilder, Dreamweaver displays an additional tab called Learning, as shown in Figure 3. (Notice that the tab integrates into Dreamweaver, making it difficult to distinguish between native Dreamweaver capabilities and additional capabilities provided by extensions.)

To insert a CourseBuilder interaction on a Web page, simply click the insertion point (the cursor) at any location on that page, and click the CourseBuilder icon. CourseBuilder displays the CourseBuilder Interaction dialog box, shown in Figure 4.

The CourseBuilder Interaction dialog box initially displays the CourseBuilder gallery, which contains various standard designs and options for each interaction. For example, notice that Figure 4 shows six different basic designs for multiple choice questions, with each design varying in terms of default design, options, and processing.

Once you select a basic design for the interaction, the CourseBuilder Interaction dialog box displays additional tabs specific to that interaction.

Defining the Test and Activity Elements

Each test and activity interaction has a number of elements specific to that interaction.  You define the specifics of these elements in the additional tabs that CourseBuilder displays after you select a specific interaction from the CourseBuilder gallery. For example, Figure 5 shows the additional tabs displayed when you select a specific multiple choice interaction.

Figure 5: Selecting an Interaction from the CourseBuilder Gallery

Different test and activity interactions use different elements. For example:

• Multiple choice interactions have choice

• Drag-and-drop interactions have drag and target elements

• Text entry interactions have text fields

• Explore interactions have hot areas

As you define the rules for each interaction on the tab, Dreamweaver also displays a working view of that interaction within the Web page, as you can see in Figure 5.

Defining the Processing Rules

In addition to defining the elements, you must define the processing rules for that interaction. You do so using the Action Manager, which you access through the Action Mgr tab shown in Figure 5.

The Action Manager lets you define the processing rules for the interaction. For example, the Action Manager lets you define what happens when students select a correct or incorrect answer. For example, you can:

• Calculate a score

• Display a text message in a frame or layer

• Play a sound or Flash movie

• Open a browser window

Furthermore, the Action Manager lets you define actions based on each element. For example, you can display a different message for each different choice, allowing you to provide informative feedback such as "choice 1 is incorrect because…"

Learning Site Defines Navigation

Whereas CourseBuilder defines an interaction on a specific page, Learning Site defines all of the pages in a Web-Based Training course, and automatically creates a navigation and menu system, as shown in Figure 6.

Learning Site lets you identify the sequence for those pages, in the Learning Site dialog box, as shown in Figure 7.

In addition, Learning Site lets you select a design for the navigation elements. You can select from 6 different standard designs, or create a fully-customized design.

Once you've identified the sequence of pages and design using Learning Site, your course is ready for students!

Mike Doyle is a Macromedia Certified Dreamweaver MX developer and instructor. He is author of the book, Dreamweaver MX e-Learning Toolkit published by Wiley Publishing, March 2003. You can find more information about his book or take a complete (and free!) web-based training course that Mike built using CourseBuilder and Learning Site at http://www.web-graduate.com.

STC India | Home | Contact Us

Copyright © 2003 India Chapter STC. All rights reserved.