« A SCORM-compatible learning module template: Part 3 of 6 | Main | A SCORM-compatible learning module template: Part 5 of 6 »

May 12, 2007

A SCORM-compatible learning module template: Part 4 of 6

Part 1: Features, Outline your Module
Part 2: Creating the Navigation
Part 3: Other Configuration Elements
Part 4: Start Building Your Pages
Part 5: Modifying the CSS Styles
Part 6: Branching Behavior

Start building your pages

Now you are ready to start building pages.

Important: You will find that Dreamweaver 8 does a much better job of displaying this module, complete with all the Server Side Includes, than earlier versions. It is possible to use earlier versions, but you will only see the central content area of the page, and not the Header/Footer areas or Navbar area.

Note: Typical Dreamweaver-generated javascripts used for rollover images and creating popup windows are already included in the template. You do not need to add them again.

  • MM_openBrWindow
  • MM_swapImage
  • MM_swapImgRestore
  • MM_preloadImages
  • MM_findObj

    The content area

    Start adding your own content to the module

    1. Open page01.htm and look at the source code.

      Module Template - Put Content below this line

      Find the lines that say:

      "*****Put content below this line!!!****"


      "*********Put content above this line!!!******"

      Add your content between these lines! The area between these two comments is the only area in this file you should need to modify, except if you wish to hide chapter and page titles as described below.

    2. If you do not want the automatic Chapter and Page titles to show, simply add the following to your css-local/userStyles:

      #pageTitle {

    The Standard Layout Grid

    A grid has been devised to facilitate a standard look for all the modules. The grid consists of two columns, with a width ratio of 67% to 33%. The order and width of the columns can vary as needed, but try to keep the overall ratio the same wherever possible.

    Click the image below to see the two columns highlighted in red.

    Module Template -Grid layout

    Layout Examples
    Some examples of the use of the grid are shown below for inspiration. Click each image to see enlarged view.

    Module Template - Nova 3

    Module Template - Nova 2

    Module Template - Nova 4

    Module Template - Nova 5

    Module Template - Nova 6

    For more articles on scorm, web development, powerpoint and other topics, see The Designspace
  • Posted by emeiselm at May 12, 2007 11:32 AM


    Login to leave a comment. Create a new account.