| As you've worked with tables, you may have noticed that sometimes it's hit or miss to get content placed where you want it or need it. After working with merging and splitting cells, adding transparent GIF spacers, and experimenting with the horizontal and vertical spacing, you may be thinking that there's got to be a better way. This is where layers comes in. When you think of layers, if the first thing that comes to mind is Adobe Photoshop and digital imagining stop. Although a stacking order is associated with layers, they're better known for alternative design options. Layers in the world of Web design means freedom from messy table workarounds and total control of content layout. The W3C included absolute positioning in the cascading style sheets (CSS) specification, offering precise placement of DHTML's layers. For layers to be visible in a browser, it must be a 4.0 or later version of Netscape and Internet Explorer. Typically the tag used to generate a layer is the <div> or <span> tags. These tags were chosen because they're rarely used by the HTML 3.2 specification. However, Netscape 4.0 is not compliant with the CSS standards with regard to layers and cannot read layers within these standard tags. Netscape 4.0 uses the <layer> and <ilayer> tags to generate layers. The <layer> tag refers to absolute positioning, whereas the <ilayer> tag refers to relative positioning. If compatibility with Netscape Navigator 4 is of no concern to you, the <div> or <span> tags will be fine. It's important to note that in Dreamweaver MX, you no longer have the capability to create Netscape 4-compliant layers in the WYSIWYG authoring environment; you'll have to hand code it. If the end user is viewing a site with a Web browser that is not compatible with layers, the result will be detrimental to the design of the site. Content will be missing and items will appear misaligned. Be aware of your target audience when using layers in your site. Layers also 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 will seem, resulting in an item closer to the background. Layers or Tables? The age-old question well, it's been only a few years because layers haven't been around too long but still a question that can baffle many designers. Again, the answer depends on who your audience is: will they have current browsers or will they have older ones? The other thing you should consider is whether your design requires layers. If it doesn't, at least you'll have peace of mind knowing that if you use tables, your site is compatible with the majority of browsers. If your site is geared toward people who are typically cutting edge, and you would expect them to have new browsers, layers can be a viable option. Furthermore, layers allow you to experiment a bit and create a more radical design. What's great is that Dreamweaver is extremely user friendly when it comes to layers and offers you the capability to design in a WYSWIG environment without touching the code. That is, if you don't want to touch the code. |
