Chapter 10. Designing with Layers

Creating the Layout

Labeling the Layers

Converting a Fixed-Width Layout into a Liquid Layout

So, you're designing with layers, eh? You've opted for the cutting edge. Congratulations on your forward thinking. Fixed-width layouts by way of layers are a breeze to build in Dreamweaver (as long as you don't need to center them; see Chapter 4 for a refresher). Liquid layouts require a bit more work, but you knew coming in that layers could be tricky, and if that didn't dissuade you, then you're up to the challenge.

Whenever you work with layers in Dreamweaver, do yourself a favor and open the Layers panel from Figure 10-1 by choosing Window Layers from the main menu. The Layers panel helps you to keep track of the various layers on your page. Also, from this panel you can prevent your layers from overlapping, which comes in handy when youre drawing the areas of your design. Make sure you check the Prevent Overlaps option before you do anything else.

Figure 10-1. Use the Layers panel to view layers and prevent overlaps

TIP

The Prevent Overlaps option in the Layers panel only applies to layers that you manually drag in the document window. If you modify the positions of your layers from the Property Inspector, you can create layer overlaps that Dreamweaver doesn't catch.

When you have layer overlaps, the border of the overlapped layer appears as a dashed line in the document window. When you're building a page layout, you don't want the dashed line! All your layers should have solid borders.

HOTKEY

Press F2 to toggle the Layers panel.

You should also go to the Insert panel and choose Layout from this panel's menu, as Figure 10-2 shows. The Layout collection of objects includes the one for drawing layers. If you don't see the Insert panel on screen, choose Window Insert from the main menu.

Figure 10-2. Choose Layout from the Insert panel's menu

HOTKEY

Press Ctrl-F2 or Command-F2 to toggle the Insert panel.

Finally, if your document window happens to be in Layout mode (see Chapter 9), you want to switch to Standard mode by clicking the Standard button in the Insert panel. When you're in Layout mode, the object for drawing layers is grayed out.

With these settings made, you're ready to draw your layout.