cells, adding transparent GIF spacers, and experimenting with the horizontal and vertical spacing, you might be thinking there's got to be a better way to structure your site. This is where layers come in.           Introduction to Layers When you think of layers, if the first thing that comes to mind are digital imaging programsstop. Although a stacking order is associated with Dreamweaver layers, they're better known for alternative web page design options than they are for creating collages and masking effects. Layers in the world of web design means freedom from messy table workarounds and total control of content layout. To achieve this, layers expose properties for precise placement of elements on the page. Even better, layers offer a third dimension, much like their names suggest. This dimension is called the z-index, ripped from geometric practices based on x, y, and z coordinates. The higher a layer's z-index value, the closer it appears to the front of the screen. The lower the z-index value, the further away it seems, resulting in an item closer to the background. Precise placement of elements on the page? Why would you ever fumble with tabled structures again? This is the question that plagues designers and developers. The answer lies in your user's target browser, which, for the most part, is impossible to know. For layers to be visible in a browser, the browser must be a 4.0 or later version of Netscape or Internet Explorer. For advanced properties exposed by layers to be viewed correctly, the browser must be a newer browser version such as Netscape 7, Internet Explorer 6, or Firefox 1. Figure 11.1 shows the Dorknozzle website design using layers in Firefox. Figure 11.1. The Dorknozzle site, designed using layers, shown in the Firefox browser. [View full size image]   Firefox is considered a modern browser and supports the newest CSS specifications as they relate to the advanced positioning properties of layers. The outcome would be similar if we viewed the site in Internet Explorer 6, Opera, or Netscape 7. However, Figure 11.2, shows the same design in Netscape 4.8. Figure 11.2. The Dorknozzle site, designed using layers, shown in the Netscape 4.8 browser. [View full size image]   In this second scenario, the outcome is not as desirable as the first. You can see that the navigation items are falling under the icons, the bitmaps aren't being drawn correctly, and in general, the page just looks bad. The reason for this is simple and lies in the support of layers by older browsers, the introduction of positionable tags with the inception of HTML 4.0, and the code generated by Dreamweaver. Before we get ahead of ourselves, however, let's backtrack a bit by introducing and discussing the evolution of layers. In the late 1990s, the W3C established a new HTML 4.0 specification that introduced radical changes to the way developers could write HTML, and even better, format that HTML using a new and more robust CSS specification. Combined with JavaScript, the phenomena was coined Dynamic HTML (DHTML) and thus introduced designers and developers to a whole new way of