- Dynamic Positioning with Cascading Style Sheets (CSS): Cascading Style Sheets enable you to precisely control the position and appearance of all the elements on your page. In addition, individual page elements can be positioned absolutely, creating a layered, overlapping effect. In addition, you will learn how the Netscape proprietary <LAYER> tag fits into the CSS scheme, and how you can ensure that CSS works elegantly on both browser models.
- Phasing Page Elements with the Clip Style: With Dynamic HTML, you can make individual page elements gradually appear and disappear. This allows you to have control over how and when a page element appears, rather than being restricted to the default sequential appearance of HTML.
- Cross-Browser Compatibility: Cross-browser compatibility is the holy grail of dynamic HTML. Although each browser uses a somewhat different Document Object Model, and makes slightly different page elements available to dynamic event capturing, you will learn how to intelligently apply variables to smooth the workings of a multi-browser page. These variables, populated with Netscape- and Internet Explorer-specific information, allow you to script just one version of your page, and allow your site to respond elegantly to different browser models and versions.
For example, let's say you have a site that sells hardware. As the user goes from page to page and selects the items she wishes to order from you, these items could be recorded as cookies. Later, when she chooses to "check out," these cookies could be retrieved and processed as part of the order, and a cookie with her order number could be saved.
Since cookies can be saved even after the browser is quit or the computer shut down, when the user visits your site two days later to check on the status of her order, a page on your site could automatically read the cookie with her order number and use this to immediately alert her of the order's status, without her even having to click on a link or enter her order number.
Note: Despite rumors to the contrary, cookies pose almost no substantive privacy risk.
- A Glimpse into the Future of DHTML: We will spend some time at the end of the course examining the probable development of Dynamic HTML, and looking forward to the likely technologies available with future browser releases.
The course includes a comprehensive workbook, as well as a copy of O'Reilly & Associates' Dynamic HTML: The Definitive Reference. Although there are significant differences in how Communicator 4 and Internet Explorer 4 implement Dynamic HTML, this course applies evenly to both browsers, and teaches students how to work around the incompatibilities that exist.
Important Note: It is assumed that all students are familiar with the basics of CSS and Layers, as taught in Introduction to Dynamic HTML, prior to signing up for this course.
Prerequisites: It is assumed that all students are familiar with the basics of Cascading Style Sheets and Layers, as taught in WestLake's Introduction to Dynamic HTML class.
- To learn how to precisely control the appearance and layout of individual pages and series of pages by using Cascading Style Sheets
- To initiate page animation, so that your page assembles itself when and how you direct, rather than simply in the order in which it loads
- To build cross-compatible pages which respond elegantly to different Browser versions
Day One (9:00 am to 4:00 pm)
9:00 Introduction to Dynamic HTML
- Browser Compatibility Issues
9:20 Review of Cascading Style Sheets
- Using CSS to precisely position page elements (and the potential pros and cons of this)
- Exercise: Using CSS to greatly enhance the formatting of the home page for a fictitious company (we will be developing this company's site during the class).
9:45 Introduction to the Internet Explorer Document Object Model (DOM)
- Collections within the MSIE DOM
- Measuring the dimensions of page elements and the browser window
- Exercise: Laying out a menu Page dynamically in Internet Explorer
10:35 Dynamic Positioning in Netscape
- The <LAYER> tag and equivalents
- How <LAYER>s fit into the Netscape Object Model
- New properties and methods of the window object in Communicator 4
- Example: Dynamic Positioning with <DIV>s in Netscape
11:30 Timed Animation with CSS
- The processing abilities of Browsers
- Exercise: Animating the Menu page
1:00 Cross-Platform DHTML animation
- Simplifying Cross-Browser Compatibility with Variables
- Testing for Browser Make and Version
- Assignment of Browser-specific style properties
- Exercise: Making the menu page cross-compatible
2:00 Event Handling in Version 4 Browsers
- Old (pre 4th generation) vs. New Event Handling
- Internet Explorer and the Bubble-up Model
2:40 Phasing Elements with the Clip Style
- The "clip" property
- Example: gradual clipping to demonstrate event capturing
- Exercise: Using Event Capturing to Phase to another page in IE
4:00 Conclude Day One
Day Two (9:00 am to 4:00 pm)
9:00 Event Handling in Communicator
- Netscape's Trickle-down Event Model
- Event Capturing
- Compatibility concerns in Event Capturing
10:00 Adjusting the Clip Style in Netscape
- Exercise: Converting the phasing logo to Cross-compatibility
10:40 Dragable Content in Internet Explorer
- Movable content in <DIV>s and <SPAN>s
- Exercise: Creating a Movable Content Showroom in IE
11:30 Dragable Content in Netscape
- Event Capturing and Event Handling
- Exercise: Making the Showroom Dragable in Netscape
1:30 Making Page Elements Interact Smoothly
- Additional Page Elements and Dynamic Positioning
- Measuring the Relative positions of Page Elements
- Populating Hidden fields for Data transmission to CGI scripts
- Exercise: Completing the shopping cart
- Setting and retrieving cookies
- Restricting the URL and path from which a cookie can be retrieved
- Setting a cookie's expiration date
- Discussion/critique of security concerns with cookies
3:00 A look to the Future of DHTML
- Introduction to ActiveX, including how to ActiveX-enable Netscape Communicator (Internet Explorer already supports ActiveX)