High Quality
Open the downloaded document, and select print from the file menu (PDF reader required).
Overview
Dynamic HTML
Dynamic HTML (DHTML) is an all-in-one word for web pages that useHypertext Markup Language (HTML), Cascading Style Sheets (CSS), and relyon JavaScript to make the web pages interactive. DHTML is a feature of Netscape Communicator 4.0, and Microsoft Internet Explorer 4.0 and 5.0and is entirely a "client-side" technology. It relies only the browserfor the display and manipulation of the web pages and is unrelated toother client-side technologies like Java, Flash.Someone once asked me for a non-technical definition of DHTML, my replywas:
"A way to build web interfaces by using the built-in capabilities of Netscape and Internet Explorer"
DHTML excels in creating low-bandwidth effects that enhance a web page'sfunctionality. It can be used to create animations, games, applications,provide new ways of navigating through web sites, and create out-of-thisworld page layouts that simply aren't possible with just HTML. Althoughmany of features of DHTML can be duplicated with either Flash or Java,DHTML provides an alternative that does not require plugins and embedsseamlessly into a web page.Although the underlying technologies of DHTML (HTML, CSS, JavaScript)are standardized, the manner in which Netscape and Microsoft haveimplemented them differ dramatically. For this reason, writing DHTMLpages that work in both browsers (referred to as cross-browser DHTML)can be a very complex issue.Links for more DHTML information:Microsoft DHTML Documentationhttp://msdn.microsoft.com/workshop/author/default.aspNetscape DHTML Documentationhttp://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm
Cascading Style Sheets
Cascading Style Sheets (CSS) is an addition to HTML that givesdevelopers a sophisticated manner to structure web pages. It does thisby separating the content of a web page (the text) from the display (thecolors, styles, and positioning).Cascading Style Sheets Positioning (CSSP) is an extension to CSS that
2allows pixel-level control over the position of HTML elements.Links for more CSS information:W3C CSS-Positioninghttp://www.w3.org/TR/WD-positioning.htmlBuilder.com's CSS Guidehttp://builder.cnet.com/Authoring/CSS/index.html
JavaScript
Contrary to its name, JavaScript is very much unrelated to Java.JavaScript is scripting language built into web browses that controlsHTML elements, whereas Java is a high-level programming language forbuilding cross-platform applications (among other things like Appletswhich are Java programs that can be displayed in a web page).JavaScript first appeared in Netscape 2.0, and was primarily forscripting the contents of a web page, and providing added functionalityto HTML forms, frames, and windows. Netscape 3.0 added more featureslike image rollovers and audio/video controls. Microsoft InternetExplorer 3.0 (released shortly after Netscape 3.0) also implementedJavaScript, but marketed it as JScript which is essentially the same asJavaScript with a few minor incompatibilities that Microsoft threw in tolure developers into using their version of JavaScript.Extensions to JavaScript were added in Netscape 4.0 and InternetExplorer 4.0 to give developers a way to manipulate DHTML (HTML elementsthat use CSS). However these extensions were not standardized before therelease of the 2 browsers. And as a result we now have two versions of JavaScript that are largely incompatible.Links for more JavaScript information:Netscape JavaScript Guidehttp://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htmJavaScript Referencehttp://developer.netscape.com/docs/manuals/communicator/jsref/index.htmMicrosoft JScripthttp://msdn.microsoft.com/scripting/default.htm
The Dynamic Duo
The Dynamic Duo, is a tutorial written by me, Dan Steinman, and is theresult of my experimentation and successes in creating Cross-BrowserDHTML.This tutorial focuses primarily on the JavaScript issues involved inDHTML. It only covers the portions of CSSP and JavaScript that can beused in both Netscape and Internet Explorer. By no means does thistutorial cover everything, or necessarily offer the best solutions to a
3particular task, but rather the things that I have tried and have hadgood results with.If you are not unfamiliar with JavaScript and CSS, this tutorial may notbe the best starting point for you. However, I do start out slowly andcover much of the ground knowledge needed to understand how DHTML works.The programming concepts in this this tutorial are not extremelycomplex. However, cross-browser DHTML requires a level of debuggingskills that can be quite daunting to a beginner. You will be workingwith browsers that are only partially compatible, and computer languagesthat are only partially implemented. You will encounter bugs andlimitations not only between the 2 browsers, but between differentoperating systems, as well as between incremental versions of thebrowsers. This tutorial only scratches the surface of the problems thatyou will encounter with building your own DHTML pages... and do believeme on this one, I am not kidding.With that said, I have done my best to lay down a set of guidelines thatmakes cross-browser DHTML feasible. Following the tips and techniques inthis tutorial you can create just about anything you can think of. Bytime you are finished reading, you will understand nearly all theconcepts involved in DHTML, learn a rich set of JavaScript programmingtechniques using my DHTML API (The DynLayer), as well as learn how tobuild your very own DHTML objects for creating reusable widgets andcomponents for your website.I'd appreciate any comments or suggestions you have about this tutorial,I'm always looking for ways to improve it. Also, I'd be very gracious of any contributions you have, including modifications to any code in thistutorial, or any DHTML objects that you've created and want to sharewith other people. And if you have built a website, game, or applicationusing this tutorial, I would be more than happy to provide a link frommy DHTML Resources links page.
Add a Comment
qsservicesleft a comment