The term layer still seems to cause a great deal of confusion among many Dreamweaver users. To understand what Dreamweaver layers are and how you should use them, you need to start by taking a trip back in time to 1997.

The original concept behind layers was to enable graphic artists and designers to be involved with the web design process and to enable users to create much richer and more interactive pages than they had been able to in the past.

The idea was that with Dreamweaver you could use the Layer tool to create complex, pixel-precise designs which were compatible with Netscape Navigator 4 and Internet Explorer 4 by simply drawing layers on your pages.

Because many version 3 browsers were still popular, Dreamweaver also included a convert layers to tables feature (3.0 browser compatibility), which converted layers into table-based pages. This ensured that a developer's pages would work in all Internet Explorer and Netscape browsers including (version 2 and version 3).

At this particular point in time, many web developers/designers wanted to create web pages that users could interact with. The idea being that DHTML (Dynamic HTML) would transform the web into a true multimedia playing field.

The problem was that unfortunately the version of DHTML implemented in Internet Explorer 4.0 and Netscape Navigator 4.0 were completely incompatible, and it was this DHTML compatibility issue that Dreamweaver sought to address.

In fact, Dreamweaver was the first DHTML editor that took away the need for web developers to have to create complex chunks of nested JavaScript driven-code, and it actually worked!

Using JavaScript code, Dreamweaver offered users a way of creating elements that could react to mouse and keyboard events, accomplished using Behaviors and the Dreamweaver Timeline.

Now that you have insight into why Dreamweaver includes layers, let's look at the code that Dreamweaver generates when a layer is added into a document window. Whenever you draw a Dreamweaver layer, Dreamweaver will write a line of code that looks like the following:

<DIV id="Layer1" style="position:absolute; left:91px; top:37px; width:298px; height:346px; z-index:1"></DIV>

In addition you may be interested to learn that Dreamweaver also includes a block of JavaScript code in the Head section of your document, which circumvents a Netscape 4.x bug that causes layers to lose their positioning coordinates when a site visitor resizes the Netscape 4.x browser window.

If Netscape 4.x isn't a browser you need to support, then you can prevent this JavaScript code from being added by selecting Edit > Preferences > Layers and deselecting the Add resize fix when inserting layer option.

Original Content - Top Things You Didn't Know about Dreamweaver

The code that Dreamweaver generates when you add a layer to your page consist of a DIV element and some CSS style information (properties)...How to Add a Layer in Dreamweaver?

Let's start by looking at the DIV element. The DIV element has been part of the HTML specification since HTML 3.0. A DIV (division) element can be used to structure a web page as a hierarchy of divisions, or break up the page into a number of chunks. A DIV element serves as a generic block and is used when it's not appropriate to use other semantic block elements such as a heading <h1> or a paragraph <p> .

Although the DIV element has been around for many years, it wasn't until browser makers started to include CSS support that developers started to catch on to how powerful a DIV element could be.

By adding CSS to a DIV element, you end up with a method of holding content that can be placed anywhere on the page. Thanks to the z-index axis defined in the CSS specification, this content also has the ability to overlap. If that weren't enough, adding JavaScript into the mix enabled site visitors to interact with the content. With all these possibilities, it's no wonder why developers envisioned the web becoming a truly interactive/multimedia environment!

In reality, a Dreamweaver layer is actually a generic DIV container that has been positioned using the CSS absolute positioning scheme.

With the absolute positioning scheme, content is literally pinned to the page. The left and top properties determine where the DIV is positioned, and the width and height determine the dimension of the content.

The z-index is used to alter the way the DIV elements (layers) overlap. In this coordinate system, the higher the z-index number, the close to the content is to the person reading the content. The lower the number, the further away the content will be. The z-indez enables the content to overlap or to be stacked.

Note: To achieve stacking in Dreamweaver, you can use Layers panel or the Property inspector.

Having read the last few paragraphs, you may be left with the idea that using layers offers both a convenient and effective method of building a website, but unfortunately you would be wrong. The main reason why using layers isn't the best approach to structure your web pages is because Dreamweaver includes the CSS styles within the DIV element (inline CSS).

Where at all possible when working with CSS, the most effective way of styling your web pages is to attach an external CSS file(s) to each of your files. This means that if you do need to make any changes, then the only file you need to modify is your CSS file. It's worth pointing out that during the development phase of a website, many web designers/developers embed their CSS styles in the head section of their master document(s). Once they have fixed any browser issues that may have occurred, they transfer the CSS to an external file, which they then use to structure and style the rest of the site. It's worth mentioning that when working in Design view, if you create styles using the Page Properties dialog box or the Property inspector, Dreamweaver writes embedded CSS code. You can then transfer this code to an external style sheet using the Dreamweaver export CSS command (File > Export > CSS Styles).

Changes that need to be applied to CSS written inline (such as Dreamweaver Layers) can, for the following reasons, be a real headache:

• Changes need to be applied to each item one by one.
• All files that have been modified need to be uploaded again to the web server.

Original Content - Top Things You Didn't Know about Dreamweaver

• <div> tag on W3School.com
• Layers in Dreamweaver by SAMS
• Creating Dynamic Layers in Dreamweaver