Using Layers

 

Introduction

blue arrowLayers are used to position elements precisely on a page. A layer that you create can contain a variety of objects including text, images, and other objects.

blue arrowThere are two basic types of layers that can be used.

CSS-P layers are generic layers that if used, can be interpreted by both Microsoft and Netscape browsers. These layers are specified by the World Wide Web's Consortium and so are somewhat standardized.

Netscape layers using the <Layer> and <Ilayer> tags can only be interpreted by Netscape browsers.

blue arrowCSS-P layers can be created with two different tags, the <Div> tag and the <Span> tag. Depending on what you wish to accomplish, the two tags behave similarly. The default tag is the <Div> tag. You can change the default. From the Edit menu, select Preferences. Click Layers in the Category box. Change the default layer tag from <Div> to <Span>


Layer Properties

Once a layer is inserted, you can control its properties with the Property box. Among the properties you can control are the following:

Background color - a layer can have a background color separate from the document inside which it resides.

Background image - a layer can have a separate background image.

Z order - you can stack layers on top of each other. The Z order controls the order in which the layers are stacked.

Visibility - layers can be visible or invisible. Under program control (JavaScript) you can toggle the visibility property so that layers appear or disappear when students take some action.


Inserting a Layer

blue arrowFrom the Insert menu, select Layer. Or from the Objects palette, select the Draw Layer icon.

The new layer appears as a box inside your document window. Notice that the cursur is active inside the layer, ready for you to type text.

blue arrowClick the small box in the upper left hand corner to select the layer. While it is selected, you can drag it with your mouse to any new position. The position coordinates change in the HTML window as you drag.

Positioning by dragging to a new position has not been possible with web pages until layers were developed. Although we have become accustomed to very precise positioning with other non-web based applications.

Activity------------------------------------------------

blue arrowOpen the Admissions file from the diskette if it is not already open.

blue arrowInsert a layer in the document. Notice that the layer load on top of the text in the document. Type some text in the layer. You can position the text very carefully when it is in a layer.

blue arrowInsert a graphic from the diskette inside the layer.

When the layer you inserted is selected, the Properties box changes to reflect layer properties. You can use the Property box to change a layer's properties.


Return