Dynamic HTML Introduction

Cutting-edge web design requires more than just the skills to make attractive graphics and write well-designed text. From mouseovers to page animation and expanding menus, sharp Web design increasingly incorporates elements of Dynamic HTML (DHTML). This course gives students the skills needed to make crisp, elegant pages that respond dynamically to the actions of the users and make the most effective use of the limited space available in a browser window.

After completing this one-day course, students will be able to:

• Use Interactive Design Theory
• Position Elements Dynamically
• Create Mouseover Effects
• Toggle Information On and Off

Target audience

All students should have a good understanding of Cascading Style Sheets and HTML gained through experience or attendance on an appropriate training course. Moderate JavaScript experience, including basic image rollovers, is also required

Course content

The Role of DHTML in Design What is Dynamic HTML? • A brief history of DHTML • Browser Compatibility Issues • A note about the focus of this workbook • Introduction to Our Case Study • Exercise 0: Downloading and Installing the Files for Class

Positioning Objects with CSS CSS Positioning Properties • Knowing the Dimensions of your Elements • Exercise 1: Page layout with Cascading Style Sheets

The JavaScript Object Models for Dynamic Content An Introduction to 4th-Generation JavaScript • Event Handlers • Example: Event handler demo

Measuring the Browser Window Browser-specific JavaScript Classes • Measuring height and width in IE: The body Object • Measuring height and width in Navigator: The window Object • Using Scalar Variables • Demo: Initializing JavaScript Variables • JavaScript Fundamentals • Measuring the Screen • Exercise 2: Recording the width and the height of the screen

Dynamic Element Positioning The visibility style • The onLoad Event Handler • Introduction to JavaScript Functions • Invoking a Function • Exercise 3: Invoking an initialization function

Cross-Compatible Style Adjustment Style Adjustment in Netscape • Style Adjustment in Internet Explorer • Example: Positioning Elements Dynamically • Exercise 4: Positioning your Elements Dynamically

Working with the JavaScript Image Object Preloading Images • Exercise 5: Adding Mouseovers to Your Page

Using Functions for Image Rollovers A breakdown of the code • Do the different browser object models matter? • An explanation of the changed code • Exercise 6: Writing Rollover Functions

Page-Level Dynamism Exercise 7: Triggering the Display of Descriptions for Each Icon

Pop Down Menu A breakdown of the code • Exercise 8: Pop Down Menu

Appendix A: Style Sheet Reference

Appendix B: Color Values and their Hex Triplet Equivalents

Appendix C: Recommended Resources

About Courseware Company :: Instructor-led training courseware :: Self-study solutions :: Buy online today