Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Creating CSS Layers in Dreamweaver

The template is coming together. You've reconstructed much of the original design from Fireworks, and the hardest part is behind you. As you'll recall from the original design, below the logo and navigation bar there should be two regions on the page. On the left is a special content area, while on the right is the main content area. Each of these regions will be enclosed in its own CSS layer. In this task, you'll create both of these layers.

By default, the Common category is selected.

The Layout category contains tools that enable you to inser233 objects that control page layout, includin220 tables, CSS layers, and framesets. As you know, the preferred way to handle page layout needs is with CSS layers.

[View full size image]

Don't worry about the size just yet.

[View full size image]

Here, you're giving your new layer a unique ID. This ID is invaluable, because it makes it possible for you to use CSS to format the layer.

[View full size image]

[View full size image]

Where did these numbers come from? L is the distance from the left, so it's set to 0 to move the layer all the way to the left edge. T is the distance from the top, and the logo layer above it is 115 pixels tall; thus, by setting this layer's distance from the top to 115, you ensure that it lines up perfectly below the logo layer. The width of the logo layer is 161, so you're setting this layer's width to the same value. The height doesn't need (and should ordinarily have) a value. You specified 25 pixels, because if you had not, the layer might collapse down so small that you wouldn't be able to put anything in it! After you put content in the layer, you will eliminate this value, so that the layer stretches to accommodate its contents, which is the behavior you want.

Note

Don't forget to specify the px after each of the number values. Some browsers, including Dreamweaver's design view, will display the layers correctly. Others, however, will not be smart enough to guess that by 161 you mean 161 pixels, and they will simply ignore the properties altogether.

Again, don't forget the px after each of the numbers. Also, as before, the 25 pixel H value is a temporary trick to make it easier to work with the layers.

[View full size image]

The layers are now ready for use.

[View full size image]