Core Computer: Dreamweaver Notes

Page layout with layers In Dreamweaver...

Layers in Dreamweaver

What is known in the web design world as “Layers” are ideal for creating complex page layouts.

These are not like the layers we know in Photoshop or Illustrator. In Dreamweaver layers are basically boxes in which to put stuff or the phrase it more elegantly to layout the contents of your page. The layers function is useful since you can reposition page elements that have been placed in layers by dragging the layers around the page.

The work process is that you use layers to lay out your page then convert the layout to a table so that the page will accurately display in older browsers. Please take note that you cannot convert layers to tables if you have used nested or overlapping layers. For this reason always make sure that the 'Prevent Overlaps' box is selected when you set up your layers- this is how you do it.

To open the layers palette go to

Window > Others > Layers

Make sure the Prevent Overlaps box is selected.

The other way to make sure that layers will not overlap is to go to

Modify > Arrange > Prevent Layer Overlaps.

Click in the Document window to activate the document you want to layout.

Then to add a layer to the document go to

Insert > Layer.

You have created a layer .

You can also select and manipulate a layer so that you are able to change the position or shape of the layers in your document. To do this click the border of the layer (not on the inside of the layer). When a hand icon appears you can click and drag a layer.If you hold your cursor over the corners of the layer box handles appear if you click these handles you are able to drag the handle to the size you want.

To move a layer you can also use the arrow keys.This is handy to be able nudge a layer along a bit. If you want to be able to move the layer in greater increments hold down Shift and use the arrow keys to move a layer five pixels in the direction of the arrow. The other way of moving the layer is to click the tab in the top left corner of the layer and drag the layer to the desired position.

You can use the Property inspector to position layers in a document and fine tune by typing in the exact pixel width you need.

There is another way of inserting a layer:

In the Insert bar's Common panel, click the Draw Layer button. Move the pointer to the Document window; the pointer changes into a drawing tool. This drawing tool draws a layer -it is not a drawing tool in the sense of any of the drawing tools found in graphics programs such as Illustrator or Photoshop. The tool simply draws a layer- try it in the space below the first layer, drag the pointer to draw a new layer.

Note: As I suggested at the start you unless there is a good reason not to do so after you have laid out your page I suggest you convert the layers to a table. You will find the information about this under Converting Layers to tables.

Also see To colour the background of a layer and background images in a layers.

The Grid

To display the grid go to

View> Grid> Show Grid

The other feature, found in the same menu, you can use is the “snap to grid” the layers as you work.

View > Grid > Snap to Grid.

If you don't like the default size of the grid you can change them in the “Grid settings”

Have Show Grid selected otherwise you wont see any changes.

View > Grid > Grid Settings

OK these are your options

Colour specifies the colour of the grid lines. Use the colour swatch to select a colour.

The show Grid option is fairly obvious as it makes the grid visible in Design view.

Snap to Grid means that as you work all page elements will snap to the lines of the grid.

Spacing will control how far apart the grid lines are.

Display gives you the choice of a grid of lines or dots.

Click Apply to apply the changes without closing the dialog box this gives you visual feed back on how it will look. If you don't need this feature simply click OK.

Align Layers

Lining up layers by eye can be a fussy way of doing it another way is to make use of the align feature.

Hold down the shift key and click on two or more layers to select them. Next go to align. This is found in

Modify > Align

As you can see you have a number of options which are all pretty obvious. You can align the layers so that tops, sides and bottoms line up, or make them the same width or height . Use which ever you need.

Remember too that the layers won't overlap, because hopefully at the start of the layout process you remembered to have the Prevent Overlap is selected in the Layer panel.

These notes are written for students who undertake the Core Computer course at School of Art, Australian National University. Students of the course should feel free to contact any member of staff with comments questions and general suggestions..

< Home Index > < Staff Contact > < Class groups > < Assessment >

< Basics Module > < Photoshop 1 Module> < Photoshop 2 Module> < Illustrator Module > <3D Module > < Web Design Module >

< Terms and Jargon > < Online Resources >