Beyond HTML: Tools for Interactivity

Tool #2: DHTML

Dynamic HTML is simply HTML that can change even after a page has been loaded into a browser.  Anything that can be done in HTML can be redone after the page loads.

Dynamic HTML is enabled by a number of other tools, including JavaScript, VBScript, and the Document Object Model (DOM).  The DOM defines all items on a Web page, such as headlines, graphics, and images, as objects that can be manipulated, and thus provides much more flexibility than HTML alone.

Browser Support

Navigator 4.x and higher; IE 4.0 and higher.

What can DHTML do?

You can achieve greater control over the appearance, layout, and behavior of your web pages with:

1. Style sheets
   
   Example--hand coded (view the source code to see how it works):
   http://www.itc.virginia.edu/training/examples/wdcss.html
   (can also be done with Dreamweaver as taught in Dreamweaver Advanced, no coding needed)
   
   
2. Page elements can be positioned without the use of tables through DHTML layers.  If you’ve ever used My Yahoo or other personal web pages, you’ve seen DHTML layers in action.
   
   An example and how-to:
   http://www.quirksmode.org/js/cross_dhtml.html
   
3. Downloadable fonts solve the designer’s frustration over using default fonts on web pages. 
   
   An article on the subject (which uses embedded fonts):
   http://525.fims.uwo.ca/~craven/525fon.htm
   

Pitfalls

• The biggest drawback to DHTML is that there are “two flavors” of DHTML. Pages built following Microsoft's DHTML model (which uses VBScript) probably won’t work in Navigator (which requires JavaScript) and pages built using Netscape’s DHMTL model don’t work well in IE.
  
  
• DHTML does not always degrade gracefully in older browsers—it is better to create alternate pages for  3.0 browsers.

Effect on System Performance

§         Negligible effect—load time of pages should not be impacted noticeably.

DHTML Resources

1. Create Cascading Style Sheets and Layers in Dreamweaver, no scripting required. Search the Offered Courses at the Division of Training site for ITC’s Dreamweaver Advanced Course
   
   
2. Take a look at cross-browser issues and other hints for creating your own DHTML:
   
   builder.com.com’s DHTML Pages
   http://builder.com.com/1200-31-5087750.html
   
   
   

Go on to Tool #3: CGI/Perl

Introduction | Tool Types
JavaScript | DHTML | CGI/Perl | Cold Fusion | Java