The Designing with Dynamic HTML and Advanced JavaScript training class teaches you the Dynamic HTML and JavaScript techniques you need to fully exploit the new capabilities of Netscape Communicator 4 and Microsoft Internet Explorer 4. The cutting edge topics you will master in this course include:
- 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.
- Page Animation:
CSS, in conjunction with JavaScript, enables you to move page elements gradually to specific locations on the page. You can also dynamically change the visbility of page elements, having sections appear and disappear in response to user actions.
- 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.
- Advanced JavaScript Skills:
The new versions of JavaScript supported by Communicator 4 and above, and Internet Explorer 4 and above use a much more advanced and powerful event model than the one supported by earlier browsers. We will teach you how to use the new event model and the new mouse, keyboard, and window event handlers to build dynamic pages that respond to selecting text, key presses, dragging and dropping of page elements, resizing of windows, and more.
- Controlling Cookies with JavaScript:
Cookies enable your pages to save information on the user's hard drive, from which it can later be retrieved by other pages on your site (but not pages on other sites).
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.
All students should be experienced users of all the HTML skills taught in WestLake's three HTML courses and should also have completed either
.
Student Objectives:
- 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 master the new JavaScript event model and event handlers for both Internet Explorer and Netscape. This will enable you to build sophisticated, practical Web-based applications that respond to a much wider range of keyboard and mouse actions
- To build cross-compatible pages which respond elegantly to different Browser versions
- To master the advanced JavaScript skills which Dynamic HTML requires
- To learn how to use cookies to enable you to save information to the user's hard drive for later retrieval by your page. This makes it much easier to develop Web applications in which information must be stored across multiple pages, such as "shopping cart" applications where the user browses page to page, adding items she would like to purchase to a virtual cart.
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:25 Break
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
12:00 Lunch
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
- Event handlers when used as JavaScript properties
2:30 Break
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:30 Break
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
12:30 Lunch
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
2:30 Break
2:40 Controlling Cookies with JavaScript
- Introduction to cookies and how to use imported cookie functions in JavaScript
- 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)
3:45 Conclusion