If you are new to using Macromedia Dreamweaver or image editing software you probably are a bit sketchy on the definition of a layer. A layer is a container of HTML content. The container holds elements such as text, graphics, animations, color, and any other object or item that can be placed on a Web page (Towers, 1999). We said before that tables are great for controlling the items in a layer. Layer items can also be controlled by CSS attributes.
Cascading Style Sheets allow items to be positioned absolutely on a Web page. For our uses and for people with little experience, CSS can be skipped over for now. We will learn about CSS later in this web design lesson. Each layer occupies a separate, stacked position on the Z axis. Z is the axis of depth. Layers have a Z axis because they can be stacked on top of one another, thus creating depth.
The Web page has X for width, Y for height, and Z for depth.
Here are some of the virtues of layers:
- Layers can be added and deleted easily.
- Layers can hold any Web asset or object.
- Layers can be dynamically controlled (DHTML) using a timeline.
- Layers can be resized, colored, and positioned to fit conveniently into your Web page design.
- Tables can be nested inside layers to provide extensive content control.
Using layers with tables is an easy and highly effective way to develop Web pages from scratch, without using Fireworks to create an entire page. In this case, you would use Fireworks for optimizing and exporting individual graph- ics, instead of entire pages. The layers inspector lists all the layers on the current page.
Go to WINDOW>LAYERS, and the layers inspector will pop up. When you create a new layer, the layer1 name will appear in the name section of the layers inspector. You can click on the layer name and rename it descriptively. This will help when you have many layers on the page. The layer will also have an assigned Z index number. The Z index refers to the stacking order of the layers and to the load sequence on the page.
The top-down stacking order is represented on the page in the same manner. The layer at the top is the highest number. It will always load at the top of the page, above other indexes. In sum, the highest number loads last and on top. You can prevent overlaps with layers, but you might want to overlap layers in your page design process.
So, you might want to leave the overlap button unchecked unless you need to use it. To manage positioning of layers, you can use the rulers, properties inspector positioning fields, and the grid. The grid allows you to snap the layers to a predefined grid. Or, you can move the layers freely where you want with conforming and locking to the grid. The advantage to using the grid is that you can position items consistently and accurately on the Web page.
Using a grid will also help you simplify your Web pages so that they are streamlined and built for the user to enjoy the content. Grids help you maintain visual integrity with the placement of your Web page components. To insert a layer go to the menu item INSERT>LAYOUT OBJECTS>LAYER.
To scale a layer, click on it on the page or in the layer inspector and grab an anchor handle (use a corner to do two sides at once). Resize layers to snuggly fit their content. You can also type size numbers into the width and height field on the properties inspector to scale the layer precisely to a desired numeric size.
You can position a layer freely by clicking on its bounding box and grabbing the tab in the top corner. To position on an exact page location, use the properties inspector and type in the X and Y location values. For example, X = 100 and Y = 100 would move the top corner of the layer down 100 pixels and over 100 pixels.
Layer properties on the properties inspector (You can position and size layers precisely. This allows for a free form design of Web pages that is more difficult to achieve using only tables.)
It’s easy to get content into layers.
Any Web content can be placed into layers:
- Multimedia (Flash)
- Other layers
To get content into layers you can Insert >Images into a layer or you can type directly into layer. We will be using layers more and more so you may want to practice creating a page and adding some layers, then adding some text or an image from your images folder. Now that you have learned about layers, let’s discuss how to make them animate and move.