• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 1. Preparing an eLearning Project

Lesson 1. Preparing an eLearning Project

HTML is a natural choice for learning projects, because of the sheer variety of rich, interactive media that it can contain. Though Web technologies (and their acronyms) continue to proliferate, with ASP, ColdFusion, PHP, JSP, DHTML, CSS, XML, XHTML, and Macromedia Flash becoming more common, HTML continues to be the lowest common denominator Web standard. Indeed, all of these newer Web technologies sit inside HTML pages.

In this lesson, you will get started with an eLearning site on Dante's Inferno by building a reusable template page.

HTML, for all of its limitations, is a powerful format. It can accommodate many other technologies, from embedded multimedia elements to server-side programming and live data. Plus, HTML is easy to learn and to create. In addition, it is compact, requiring minimal download time for the powerful formatting and potential that it returns.

HTML is also flexible enough to accommodate a variety of skill levels, from new- comers to veteran programmers, which means that no matter what your skills, you can build learning content for Web distribution. As your skills increase, you will find that the technologies seem to grow with you. And because you are using Macromedia Dreamweaver MX, the most powerful Web development tool around, you have everything you need at your fingertips to build rich learning content.

The first project of this book, which spans the first four lessons, is for a fictional literature survey and is a learning site devoted to Dante's first book of the Divine Comedy, the Inferno. My assumption is that you already have some experience with Dreamweaver, that you've at least put together a few simple pages and are familiar with the most common set of HTML tags—such as <p>, <table>, <tr>, <td>, <a>, and <img>. (You can get all of this by working through the tutorial at the beginning of the Using Dreamweaver guide that comes with Dreamweaver.) By the time you finish the four lessons, you will also know how to prepare learning sites, create and format page elements, build a branching interaction, work with and design a cascading style sheet (CSS), and create Dynamic HTML, or DHTML, interactions.

In Lesson 1, you will begin by preparing the site. More than simply defining a site, however, you will learn some best practices for creating maintainable sites with maximum productivity. One of the greatest challenges of authoring content in HTML, where files, graphics, and other assets can quickly get into the hundreds or thousands, is file management. Even a minor organizational slipup can cause your pages to go awry, with missing images and broken links, resulting in a lot of wasted time hunting around for files. Dreamweaver comes with a powerful site manager designed to help you keep your site's organization sound. That's no excuse, though, to be lax about organization.

In this lesson, you will set up a site in accordance with the eventual site plan and with your authoring techniques. These techniques emphasize building reusable assets to automate development. Once the site is set up, you will create a generic page that you can use as a template for all your subsequent pages.

You will also work with a cascading style sheet (CSS). At their most basic level, cascading style sheets are formatting guides. You specify in advance how certain elements, such as level 1 and level 2 headings, body text, and figure captions, should look. Then, as you mark up pages, instead of manually specifying how each element should be formatted (where you select a font, a size, amount of indentation, and so on), you simply format it using an appropriate style, as defined in the cascading style sheet. Another benefit to a CSS is that if you modify a style, all of the elements in the site using that style are updated instantly. A CSS offers significant productivity gains and is an easy-to-use technology in Dreamweaver.


In this lesson, you will:

  • Review the completed project

  • Use the site manager to create an easy-to-maintain site

  • Use a Dreamweaver Library file

  • Create a reusable template

  • Attach and apply a Cascading Style Sheet


This lesson takes approximately 1 hour to complete.


Media Files



Starting Files


Completed Files




Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint