Building Dynamic Web Sites

DHTML Training Overview

DHTML is a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (Cascading Style Sheets, CSS), and the Document Object Model.

A DHTML webpage is any webpage in which client-side scripting changes variables of the presentation definition language, which in turn affects the look and function of otherwise "static" HTML page content, after the page has been fully loaded and during the viewing process. Thus the dynamic characteristic of DHTML is the way it functions while a page is viewed, not in its ability to generate a unique page with each page load.

DHTML Training Objectives

1. To teach attendees how to enhance their sites with special effects created by integrating Cascading Style Sheets (CSS) and JavaScript
2. To teach students how to create these effects in a way that is compatible with a wide array of browsers, including Internet Explorer 4 through 6 and Netscape 4 through 7

DHTML Training Outline

1. Understanding Dynamic HTML
1. What is Dynamic HTML?
2. The flavors of DHTML
3. Why should I use DHTML?
4. Flash vs. DHTML
2. The Document Object Model (DOM)
1. Understanding the DOM: Roadmap to your Web page
2. Creating an object
3. Understanding event handlers
4. Detecting an event
5. How the DOM works
6. Using feature sensing
7. Detecting the DOM type
8. Building a cross-browser DOM
9. Using the cross-browser DOM
10. Netscape 4 and nested layers
3. Learning about your environment
1. Detecting the browser's name and version
2. Detecting the operating system
3. Finding the screen dimensions
4. Finding the supported color depth
5. Finding the browser's window dimensions
6. Finding the visible page dimensions
7. Finding the page's location and title
8. Finding the page's scroll position
9. Finding an object's dimensions
10. Finding an object's top and left positions
11. Finding an object's bottom and right positions
12. Finding an object's 3-D position
13. Finding an object's visibility state
14. Finding an object's visible area
4. Dynamic techniques: the basics
1. Making objects appear and disappear
2. Moving objects from point to point
3. Moving objects by a certain amount
4. Moving objects in 3-D
5. Scrolling a Web page
6. Changing an object's visible area
5. Dynamic techniques: advanced
1. Making a function run again
2. Passing an event to a function
3. Creating a global event handler
4. Animating an object
5. Finding your location on the screen
6. Identifying an object on the screen
7. Dynamic content between frames
8. Moving the browser window
9. Opening a new browser window
10. Changing a window's size
6. Dynamic techniques: CSS
1. Changing a definition
2. Changing an object's class
3. Adding a new rule
4. Disabling a style sheet
7. Advanced DHTML effects
1. Fading between objects
2. Transitions between pages
3. Making an element blur
4. Making an object wave