Students will learn how to create Dynamic HTML-enabled Web pages that work equally well in both Netscape Navigator and Microsoft Internet Explorer.

Upon successful completion of this course, students will be able to:

• Create dynamic images that change when the mouse pointer is placed over them
• Define Document Object Model (DOM)
• Describe the DOMs from both Navigator and Internet Explorer
• Compare the two models to determine similarities and overlap
• Write a constructor function that defines the DHTML-enabling ActiveElement custom object
• Add methods to a custom object
• Describe the prototype-based inheritance model of JavaScript
• Add secondary methods to a custom object through linked-in libraries
• Move elements on the page by using methods of the custom ActiveElement object.
• Add clipping and transition effects through methods of the ActiveElement object.
• Scroll content of elements on a page and dynamically load new content into those elements.
• Get user input through mouse events.
• Enable drag-and-drop functionality using mouse events.
• Create slide-out and drop-down menus that are enabled by events; create auto-generating code.
• Get user input through keyboard events.
• Enhance HTML forms
• Selectively show elements of a form by creating tally-as-you-go forms

Prerequisite(s):

To register for this course students must either take, or have the equivalent working knowledge of, the following course(s):

• HTML Level 1
• HTML Level 2

The Career Center Course Curriculum for DHTML:

Lesson 1: DHTML Overview

• DHTML Defined
• The Real World of DHTML

Lesson 2: Dynamic Images

• Image Rollovers
• Slide Shows

Lesson 3: Dueling DOMs

• The Document Object Model
• The Navigator 4.x DOM
• The Internet Explorer DOM
• Dealing with DOM Differences

Lesson 4: Creating the Core DHTML Library

• The Custom Object Technique

Lesson 5: Adding Methods to a Custom Object

• Adding Methods

Lesson 6: Adding Secondary Methods and Properties

• Adding Secondary Methods to the ActiveElement Object

Lesson 7: Moving Elements on the Page

• Moving in Geometric Shapes

Lesson 8: Clipping

• Clipping
• Clipping with Code
• Enabling Transitions with Clipping

Lesson 9: Dynamic Content

• Scrolling
• Dynamically Loading Content

Lesson 10: Getting User Input: Mouse Events

• Capturing Mouse Events
• Event Information

Lesson 11: Dragging and Dropping

• Dragging and Dropping

Lesson 12: Applying Mouse Events: Menus

• Menus
• Drop-down Menus

Lesson 13: Getting User Input: Keyboard Events

• Capturing Keyboard Events

Lesson 14: Dynamic Forms

• Forms and DHTML
• Tally-as-you-go Forms