DHTML : Cross-browser Techniques (Second Edition)

Course length: 3 days

Course Description

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

Prerequisites: This is an advanced course. To successfully complete this course, 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). Furthermore, you should know how to use Netscape Navigator versions 4.x and 6.x, and Internet Explorer 4.x, 5.x, and 6.x. At minimum, you should have taken both Software Training courses listed below or have extensive equivalent experience:

JavaScript: Programming (Second Edition)

Web Development With Cascading Style Sheets

Additionally, you will be even better prepared to meet the challenges of this course if you have taken Software Training 's JavaScript: Advanced Programming course, though that is not a requirement.

Delivery Method: Instructor-led, group-paced, classroom-delivery learning model with structured hands-on activities.

Benefits: Students will be able to add interactivity, animation, and dynamic features to their Web pages.

Target student: Students enrolling in this course should be interested in creating dynamic HTML elements, including animation and stylistic effects.

Performance-Based Objectives

Lesson objectives help students become comfortable with the course, and also provide a means to evaluate learning. Upon successful completion of this course, students will be able to:

· 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.

Course Content

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 and Values

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

Additional Info:

Additional appendices are provided as PDF files accompanying the student data files.