Subtitles of the Movie

In the previous movie, I demonstrated how to use tables to add content to a webpage. The advantage of tables is that once you get the tables set up the way you want them and formatted the way your layout requires, they're very stable and they tend to be consistent across browsers. However, they're difficult to use. You need to spend a lot of time learning tricks and techniques for formatting the tables the way that you need them. Layers, on the other hand, are very easy to use, very easy to create and modify and change, and particularly easy to move around the Dreamweaver document. However, they're not as stable and, unless you learn how to use cascading style sheets, they tend to float around on you when you look at them in different browsers. However, let me spend some time showing you just how easy it is to work with layers. You want to go to the layout tab of the insert panel up here at the top and there you'll get your layout options, including inserting div tags, drawing an AP div tag, Spry menu bar, Spry tabbed panels (which I'll cover in the full Dreamweaver CS3 course). What we want is the second option. We're going to actually draw on the document the layer which is defined as a div tag. Notice that there in the tag selector it says div #. What makes these layers nice is that I can add content directly inside the layer and then move that content anywhere I want in the document. I can also add another layer and overlap the content in those two layers. Let's go ahead and insert an image placeholder here so you can see the overlap options. I'm going to go ahead and make this bigger, but notice that I can overlap the content, something that you cannot do in Dreamweaver using tables. In fact, you can't do any overlapping of tables in any HTML document. You can also adjust the stacking order of these layers, using our faithful property inspector. Notice that with my layer selected, I have something called the Z index. The Z index is essentially the stacking order, so the higher the number, the higher in the stack that layer will appear, so stacking order or Z index of 0 is on the bottom. If I change that Z index to 3 or 2, notice that it goesÉlet's see what the stacking orderÉthe Z index of that one is 2, so let's set this one to 1. Notice that my image now is on the bottom and my text is on top of it. Let's change my Z index of my text back to 0 and it will go behind it. So the real advantage of these layers is they give designers great freedom and flexibility in how they want to add content and then rearrange that content on the document space here. The trouble you'll get is that these layers will tend to move on you in different browsers, so to get the best of both worlds, you'll want to learn cascading style sheets, which I'll cover a little bit later, to anchor down and set the precise location of each of these layers.