Using Layers in Dreamweaver
This chapter is from the book
This chapter is from the book
This chapter is from the book
In This Chapter
- Introduction to Layers
- Creating Layers
- Deleting a Layer
- Embedding a Layer with Style Sheets
- Inserting Content into Layers
- Sizing, Positioning, and Modifying Layers with the Properties Inspector
- Modifying Layer Properties with the Layers Panel
- Designing a Page with Layers
Introduction to Layers
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 come in.
When you think of layers, if the first thing that comes to mind is Adobe Photoshop and digital imaging—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 or Internet Explorer. Typically the tags used to generate a layer are 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 2004, 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, resulting in an item closer to the background. lower the z-index value, the farther 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.
A layer in Dreamweaver is essentially a visual way of creating a <div> tag. Using divs is the future of Web site design and layout. If you refer back to Chapter 10, "Cascading Style Sheets," you'll recall that it's possible to position these layers with CSS. All the rage and hype these days in the world of Web development is CSS-P (Cascading Style Sheet Positioning). Dreamweaver offers the common developer without CSS knowledge the capability to create CSS-P sites.