DHTML Training : DHTML : Cross-browser Techniques

DHTML Cross-browser Techniques (Second Edition) is a hands-on, 3-day course that will present ways you can add Dynamic HTML effects to your Web pages.

This is an advanced course. To successfully complete this course, you should be able to do the following:

• You must be comfortable programming in JavaScript. DHTML builds strongly on the foundation of JavaScript.
• You must be proficient at creating Web pages through HTML coding and formatting the content of those Web pages with Cascading Style Sheets (CSS).
• You should know how to use Netscape Navigator versions 4.x and 6.x, and Internet Explorer 4.x, 5.x, and 6.x.

• Describe the component technologies of DHTML, define Document Object Model (DOM), describe the DOMs from both Navigator 4.x and Internet Explorer 4.x-5.x, and compare the early DOM models to determine similarities and overlap. You'll also be able to create dynamic images that change when the mouse pointer is placed over them.
• Describe the W3C-standard DOM and use it to examine a document's hierarchy and to access document components.
• Use DOM-enabled methods to change styles associated with page elements.
• Animate elements using DOM-standard methods and properties.
• Modify the document structure, write to existing elements, read and write attributes, and create and delete page elements all using DOM-standard techniques.
• Examine the real-world difficulties of creating cross-browser DHTML-enabled Web pages, as well as the techniques for dealing with those challenges. You will also be able to 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, and 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 effects through methods of the ActiveElement object.
• Get user input through mouse events.
• Enable drag-and-drop functionality that relies on handling mouse events, create drop-down menus that are enabled by events, and create auto-generating code.

Lesson 1: DHTML and the Document Object Model

• Topic 1A: DHTML Defined
• Topic 1B: Document Object Model Beginnings
• Topic 1C: The Level 0+ DOMs
• Topic 1D: DOM Standards

Lesson 2: The W3C HTML DOM

• Topic 2A: Page Hierarchy
• Topic 2B: Standard Methods and Properties

Lesson 3: Changing Styles

• Topic 3A: Exploring the Style Object
• Topic 3B: Changing Styles
• Topic 3C: The DOCTYPE Switch

Lesson 4: Animating Page Elements

• Topic 4A: Positioning Elements on the Page
• Topic 4B: Moving Elements

Lesson 5: Modifying the Document Structure

• Topic 5A: Reading From and Writing to Existing Elements
• Topic 5B: Reading, Writing, and Adding Attributes andValues
• Topic 5C: Creating Nodes
• Topic 5D: Removing and Replacing Nodes

Lesson 6: Creating the Core DHTML Library

• Topic 6A: Coding for Backward Compatibility
• Topic 6B: The Custom Object Technique

Lesson 7: Adding Methods to the Custom Object

• Topic 7A: Adding Methods
• Topic 7B: Adding Secondary Methods to the ActiveElementObject

Lesson 8: Moving Elements on the Page

• Topic 8A: Moving in Geometric Shapes

Lesson 9: Clipping

• Topic 9A: Clipping
• Topic 9B: Clipping With Code

Lesson 10: Getting User Input With Events

• Topic 10A: Events
• Topic 10B: Event Information
• Topic 10C: Events and the ActiveElement Object

Lesson 11: Applying Mouse Events

• Topic 11A: Dragging and Dropping
• Topic 11B: Drop-down Menus

Appendix A: ActiveElement Reference