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.

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.

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 working with web pages. The idea was simple: DHTML was the harmonious combination of HTML, CSS, and JavaScript. Among other things, DHTML would allow developers to change the style declarations of an HTML element by means of JavaScript. Even better, through the use of "layers," elements on the page could be precisely positioned in the browser window using absolute or relative positioning properties. As part of this transition, browsers scrambled to support what was touted as the next "big thing" in web development.

As a result, the two major browsers (Netscape and Internet Explorer) ended up supporting very different extensions to the original specification. For instance, the HTML 4.0 specification brought about two tags used to generate and work with layers: the <div> and <span> tags. Although Internet Explorer supported these tags, Netscape 4.0 didn't (in terms of creating layers), instead opting for the proprietary <layer> and <ilayer> tags. To make a long story short, the dust settled, and a major shift in the browser industry saw users preferring Internet Explorer over Netscape version browsers. The web development trend also moved to support the more popular and much more flexible <div> and <span> tags. Newer versions of Netscape, Firefox, and Internet Explorer now fully support the use of <div> and <span> tags while the <layer> and <ilayer> tags have since become deprecated. In fact, Dreamweaver doesn't even support the use of <layer> and <ilayer> tags but creates layers using the <div> or <span> tag.

NOTE

Although Dreamweaver no longer supports the <layer> and <ilayer> tags in its visual environment, that doesn't mean that you can't use these tags. If you're adamant about supporting older versions of the Netscape browser (maybe it's the browser of choice for your organization), you can still find the tags in the code hints menu in Code view. What this means is that if you plan on supporting older versions of Netscape and you must use layers in your site, you'll end up coding everything by hand.

In short, you must be aware of your target audience. If your organization is structured such that your livelihood depends on your next online sale, tables are probably your best bet because they are supported by a much greater array of browsers. If, however, you've developed a new media site to market development services, you might opt for a more standards-compliant alternative in layers to impress and show off design and development capabilities. Be aware though, that if the end user is viewing your site with a web browser that is not compatible with layers written using the <div> or <span> tags, the result will be detrimental to the look of the site, as you saw in Figure 11.2. In the end, it's crucial to be aware of your target audience when using layers in your site.