Dreamweaver 8 Design and Construction (OReilly Digital Studio)

10.1. Creating the Layout

To begin, go to the Insert panel, and click the Draw Layer icon, as Figure 10-3 shows. Move the mouse pointer into the document window, and it turns into a crosshairs.

Choose the topmost area to start. Position the crosshairs in the upper-left corner of this area. Then hold down the mouse button, and drag the mouse to draw the layer. When the size of the layer closely matches the one in your tracing image or layout sketch, release the mouse button, and Dreamweaver adds the layer to the page, as Figure 10-4 shows.

While this layer is selected, go to the Property Inspector (also called the Properties panel) at the bottom of the screen. If you don't see it, choose Window Properties from the main menu.

Note four key fields in the Property Inspector: L, T, W, and H. These stand for left offset, top offset, width, and height, respectively. The values in the L and T fields control the position of the layer on the screen. For instance, a layer with a left offset of 10 pixels and a top offset of 20 pixels appears 10 pixels from the left side of the browser window and 20 pixels from the top. The values in the W and H fields control the size of the layer, as you might expect.

All the layers that form the topmost row of your layout, such as the one for the banner, should have a T value of 0that's zero offset from the top, which positions the layer at the very top of the browser window. Similarly, all the layers that form the leftmost column of your layout, like the navigation area in a side-nav design, need to have an L value of 0 to position them snugly against the left side of the browser window. If your layer touches the top of the browser window and runs down the left side, then both the T and the L values should be 0.

Unless you have a very steady hand, your first layer is probably off by a couple pixels. You can remedy this by typing 0px in one, the other, or both the T and L fields of the Property Inspector. Make sure that you add the px (for pixels) to the end of the value, and don't separate the value and the units with a space. This is the appropriate format for CSS, from which layers derive their appearance attributes.

While you're checking values in the Property Inspector, make sure that the width and height of your layer match the measurements in your tracing image or layout sketch. If they don't, simply type the correct values in the W and H fields. Don't forget to include the px.

Notice also that Dreamweaver has given your layer the generic ID Layer1. The ID is exactly what it sounds like: a unique label to identify the layer. Left to its own devices, Dreamweaver simply numbers your layers in the order in which you draw them. While the generic, Dreamweaver-supplied ID is fine, you should probably change it to something more descriptive, like the name of the area that you just drew. This way, you don't have to remember which layer number corresponds to which area of your layout. So, type banner or nav or something to that effect in the Layer ID field of the Property Inspector, as Figure 10-5 shows. Just make sure that each of your layers has a unique ID. In other words, don't use the same ID more than once.

You've now added the first layer to the layout. Go back to the Insert panel, and click the Draw Layer object again. Move the mouse pointer into the document window, position it, and draw the next layer in your layout. For best results, build the top and left sides of your layout first, and work your way down and right.

Always check the positioning and the size of each new layer in the Property Inspector before you move on to the next area in your design. Pay special attention to the T and L values. Your layers should sit snugly against each other on the page. If, for instance, your main content area sits immediately below the banner, and the banner has a height of 100 pixels, you know that the correct top offset for the main content area is exactly 100px. Likewise, if the main content area sits immediately to the right of the navigation area, and the nav layer has a width of 150 pixels, then the correct L value for the content layer is exactly 150px.

As you work, you can resize a layer visually by clicking its edge to select it and dragging one of the small square handles along the sides. Move a layer by selecting it and then dragging its large handle in the upper-left corner. Because you selected the Prevent Overlaps option in the Layers panel, you can't resize or reposition a layer so that it creeps into the territory of another layer, so you might have to change the size and position attributes of the adjacent layers temporarily to give yourself enough room for whatever adjustments you need to make. Just be sure to put the adjacent layers back where you found them.

When you finish, your document window looks something like Figure 10-6.

Congratulations! You now have a fixed-width layers-based layout that's ready for service. To remove the tracing image, so go to Modify Page Properties, select the Tracing Image category in the Page Properties dialog box, either clear out the contents of the Tracing Image field or drag the Transparency slider all the way to the left, and click OK.