Layers for layout

DreamWeaver lets you work with layout "layers" (they're actually <div>'s) in a way that's very similar to working with PhotoShop layers.

These notes are meant to be used in conjunction with assembling the scanning lab. But if you haven't done that yet, here is an image or two to work with.

Remember to save your web page in a particular folder before you insert any images into it, so that DreamWeaver knows how to make the (relative) links to your images.

To insert a layer

... choose "Insert | Layout Objects | AP Div". or use the Insert-Layout button bar:
insert an ap div

AP stands for "Absolute Positioning" layer.

The first thing you should do is give your layer a semantic name! (You'll have to change the id in the div tag as well as the associated id style rule.)

You'll see a rectangle on the screen with a handle on the top-left corner (or else, you get to click-drag to draw a rectangle). Some things you can do with layers:


To rename a layer

DreamWeaver creates a new id when you create a new layer. Usually these are named "#apDiv1", "#apDiv2", etc. But of course, you're going to change these id names to something that reflects their function as soon as possible :-> ! Here's how to re-name your apDivs:

#1: click anywhere inside the "box" (division).
#3: change the name of your division here
#2: select the <div...> tag

renaming a layer

You can edit the id just like you'd edit any other class or id by looking for it on DW's CSS window.

Some things you may want to set for your layers: