Section 52. Designing with Layers

#52. Designing with Layers

For years, designing your Web pages using layers was a lot like trying to use hydrogen in your gasoline-propelled car. Web layout applications would write a bunch of excess code for browsers that barely supported layers. Well, times have certainly changed. These days most modern browsers include superior support for layers, and visual layout tools such as GoLive CS2 can now write the minimal amount of code required to render them.

Layer Grid Settings

While dragging out a layer, GoLive displays a 10 x 10-pixel snap-to grid. I personally like these settings, but if you want to adjust the grid size, or turn off the snap-to function or the grid display altogether, you can. Choose View > Layer Grid Settings to change any of these options.

Layers in GoLive are essentially HTML-based DIV tags accompanied by the requisite CSS needed to position them anywhere on the page. GoLive enables you to draw layers, resize and position layers, and not worry about the underlying source code (Figure 52). GoLive dynamically recodes the page with every change you make to the layer while keeping the source code as lean as if you coded it by hand. It's the truest sense of a visual layout Web editor.

Figure 52. Layers in GoLive behave much like frames do in InDesign. You can drag and position them anywhere on your page. Layers can even overlap each other. You can finally lay out your pages however you want without being constrained by table cells.

If you want to add a layer in GoLive, you have a few options available to you:

• Use the Layer tool (see #51) to draw a layer box on your page.

• Drag the Layer icon from the Basic Objects set in the Tools palette and drop it directly onto a page (or within an element on the page).

• Choose an insertion point by clicking a location on your page (for example, in another layer). Then click the Create New Layer button in the Layers palette (Window > Layers).

Using Split Source View

If you're curious to see the code GoLive generates when you add or edit a layer or any other object, switch to Split Source view by choosing View > Show Split Source. This is an excellent way to start learning to code for the Web by simply watching GoLive work.

Once you add a layer to your page, a small yellow marker appears representing the insertion point of the layer. To embed a layer within another layer, drag this marker into the other layer box. One of the key benefits of using layers is that you can easily resize or position them using the Object Selection tool. You can also assign a background color or an image to a selected layer using the Inspector palette. To add content to a layer, drag an object or asset into it or start typing into it using the Standard Editing tool. When you preview your page, the layer and its contents should appear exactly as you laid them out.