Layers

Wouldn’t it be great if you could design web pages by just grabbing things and putting them wherever you wanted them on the screen? You wouldn’t have to bother with tables. You could design with total freedom. It would be great. You’d probably want to donate large sums of cash to the wonderful individual who taught you about such a thing…

It's a good thing you know about this web design course, because layers, dear soul, are the answer to your prayers. A layer is basically a box. You can put whatever you feel like inside that box. Then, you can move the box around on the screen. Put it wherever you want it.

Hassle free web design!

Dreamweaver uses DHTML to make layers. DHTML is a scripting language that allows HTML to change even after a page has been loaded into a browser.

Layers can overlap each other, allowing web designers freedom previously experienced by print designers.

DHTML is relatively new and only works on 4.0 browsers and up. For that reason, many designers convert layers into table format before finishing.

Sadly, layers do not take the place of HTML table knowledge. Many of the projects you will work on will be too intricate for layers. You will want the precision and easy alignment of tables. Often you will be reworking a page already designed in tables.

Before You Start…

Some versions of Netscape have a nasty bug that causes the page to display incorrectly when resized. This can be fixed by clicking:

COMMANDS-> ADD/REMOVE NETSCAPE RESIZE FIX

It’s really, really, important that you add this fix if you’re going to use layers. It should be automatic, but it’s not.

Creating Layers in Dreamweaver

Creating a layer in Dreamweaver is easy.

1. INSERT-> LAYER
   a layer will pop on the screen.

The little  that popped up next to the layer shows where you inserted the layer. In this case the layer is inserted into the page. You can insert a layer into another layer, but it’s not such a good idea if you might want to convert your layers to tables later on.

If you insert a layer into another layer, it will look like:

Notice the " " inside a layer?

Adding Elements to a Layer

Just click inside the layer and add text, images, whatever.

Moving and Resizing Layers

Selecting Layers

Before effecting a layer, you have to select it.

�.       To select a layer, click on it’s line.

Moving Layers

Layers are placed on the screen by pixel coordinates, measured from the left and top of the screen. The left and top coordinates will remain the same regardless of the user’s monitor settings. You can specify the coordinates on the Properties Palette, or simply drag the layers around.

To manually move a layer you have to grab it on it’s main handle. Then just drag it around.

or you can move a layer by adjusting it’s coordinates.

Z-index

Layers can be placed on top of each other. When stacked, the Z-Index field on the Properties Palette controls their order.  "1" is the bottom of the stack. To adjust a layer’s order, simply click the layer, and change it’s Z-Index on the Properties Inspector.

***NOTE Overlapping layers can not be converted into tables

Resizing Layers

To resize a layer, either change its Height and Width on the Properties Palette, or drag one of its handles with your pointer:

Layer Properties

Some of the Layer Properties are obvious, like background color, Height, and Width. Some are not so obvious. Here are some of the not so obvious ones:

Layer ID: JavaScript name for the Layer. Don’t worry about it.

Vis: Layer visibility. Layers are one of the ways to make rollovers. There are much easier ways. Don’t worry about it.

Tag: You can use specialized tags that only work in Netscape, but why would you want to do that? Leave it on "DIV"

Overflow:  You can stipulate what to do if the contents of your layer are bigger than your layer.

Clip: Placement coordinates that only work on Netscape. Eh, forget about it.

Converting Layers to Tables and Vice Versa

Converting Layers to Tables

You may wish to have the freedom of designing with layers, but the conventionality and easy editing provided by tables. You’re in luck. After you design with layers, you can convert the layers to a table by clicking:

MODIFY-> CONVERT-> CONVERT LAYERS TO TABLES

The Convert Layers to Table window will open:

�.       Leave it set to Most Accurate.

�.       Take the check out of Use Transparent Gifs. This will allow you more freedom and will speed load time.

All of the layers on the page will be converted into a table.

Tables created by Dreamweaver are pixel based. You can convert a table to percentage widths by selecting the table and clicking the "Convert Table Widths to Percent" button on the Properties palette.

Converting Tables to Layers

You will not be happy with Layer to table conversion results if there are pre-existing tables on the page. Dreamweaver seems to throw stuff willy-nilly. If there are pre-existing tables, convert them to layers before converting all layers to tables. You’ll be much happier with the results. You can also convert tables to layers to adjust a layer built table.

MODIFY-> CONVERT-> CONVERT LAYERS TO TABLES

continue to forms |