Index

Tables and Layers

Laying out a page can be one of the hardest things to do in web design. The HTML specification provided no means for positioning an element on the page. An element's position was determined by the flow…(left to right, then down to the next line), and whether it was a block or inline element.

When tables were introduced with the version two browsers, designers soon realised that they could use them to position content on the page. However, tables collapse when the cells in them are empty, so a technique was developed using a spacer image, which was a transparent gif file 1x1 pixels in size. This could be resized as needed and used to make a cell a desired size by applying it to the cell as a background image.

Pages began to be broken up into slices, which were then recombined in a table on the HTML page. This type of site is known as a mortised site, and is the most common site type today.

When the CSS2.0 specification was released it offered a way to layout pages using layers, defined in a separate CSS file. In theory this should be a better way to do things, as it separates the layout from the content, but the implementation of CSS2.0 in browsers is inconsistent, and can cause many headaches for designers. We are going to use a combination of these techniques in Dreamweaver.

Dreamweaver offers many ways to layout a page. We are going to use an approach that puts all the content into layers, and then convert the layers into a table.

Adding A Layer

Make sure the insert bar is showing. Click on the Layout tab, and then click on the draw layer icon, second from the left.

(The draw layout icon is also in the common tab, fifth from the left)

The mouse pointer turns into a crosshair. Drag a rectangle across your web page. When you release the mouse a layer will appear.

The layer can be repositioned by dragging the box in the top left-hand corner, or resized by dragging the selection handles around the border of the layer. The layer can also be repositioned by changing the values in the propertied inspector.

Note also the Z index. Layers can be stacked on one another to create complex layouts. The Z index (it relates to the Z axis in geometry) will determine which layer is on top. A layer with a higher Z index will appear on top of one with a lower Z index. Its a good idea to change the default name (Layer1 in this case) to something more meaningful that reflects what is contained in the layer (content, surf_pic etc).

Note—these layers are absolutely positioned. That means their position is calculated from the top left point of the webpage, and will not change if the page is resized. This means that they can only be used for fixed width layouts, not ‘liquid’ designs that expand and contract with the browser window resizing.

A layer can contain text, images, background images or other layers. Essentially it is a mini web-page within the main page. Layers are a form of CSS positioning, but in this case the CSS information is written into the HTML page itself, rather than in a separate file. A Layout with layers can be turned into tables by going to the Modify menu and choosing

Modify => Convert => Layers to Tables

Note; all content must be in layers for this to work, and you may get unpredictable results if you have overlapping tables. It is not necessary to turn your layers into tables if you don’t want to, if you preview your page in the browser and it looks fine, then there’s no reason to change it. Most people convert their layers to tables so that they can create a liquid design, or a centred one.