Dynamic Overlay Tutorial : A Web Site on a single Dynamic HTML file

- Cross Browser Compliant -

By fully embracing the capabilities offered by Cascading Style Sheets, along with JavaScript (or VBscript), the developer can create a very fast, user-responsive website within a single dynamic HTML file.

This method uses 'overlays' which are DIVs, that are styled and filled to create the site content. The visibility and positioning of these DIVs is the primary work of the developer. To accomplish this successfully requires a substantial development editor, because the resulting HTML file, along with the script, will be BIG! Five thousand lines of source code is to be expected. If the development environment is weak, one will crash and burn quite easily.

Why should one depart from the current standards of many linked HTML files, or Active Server Pages, that inherently provide a relatively safe distributed method of design? Simply put, the site will operate faster, resulting in high user satisfaction because of its quick response. The website will operate better than those linking many files from an unpredictable server.

The Dynamic Overlay method expects, and is designed, with the erratic server in mind. The Dynamic Overlay Website makes use of its partially loaded file to give the user a seamless and unbroken display during the server's download.

Dynamic Overlay Websites will not run on broswer versions prior to 4.0 of Internet Explorer and Netscape. One must decide when not to base design on the lowest common denominator. Generally, a seperate site, without the improved performance offerred by Dynamic HTML, is presented to older browser versions.

---

I have created a test website that is intended to 'push the envelope' of Dynamic Overlay website design. It includes about a hundred images and overlays, providing an extreme test environment of lots of images on a slow server. It works very well. I suggest you view the site after you spend some time with the tutorial. The link is listed at the end of this page.

---

The following tutorial is intended to develop the features of the Dynamic Overlay website. It incorporates Dynamic HTML using JavaScript and Cascading Style Sheets. Each tutorial example has been tested under Internet Explorer, and Netscape Versions 4.0+, and are intended to be cross browser compliant up to, and including, Versions 5.0+.

Even if a developer will not fully employ the overlay method presented herein, there are, however, features that can be used within their current design methods.