What You Have Learned

In this lesson, you have:

Created basic rollovers (pages 279282)
Learned how to edit the behaviors by choosing different events and adding actions while creating a pop-up message (pages 282287)
Learned how to make multiple images on the page change when the user rolls over one by adding multiple behaviors to one user action (pages 287293)
Created a status bar message to give your viewers more information about a link when they roll over it (pages 293294)
Used the Check Browser behavior to redirect users to different pages based on the browser version they are using (pages 294297)
Used a behavior to make a new browser window open when the page loads (pages 297300)
Created a JavaScript pop-up menu with multiple menu items (pages 300305)

Lesson 9. Creating Layers

A layer is a rectangular container for HTML content that you can position at an exact location in the browser window. Layers can contain a wide variety of elements: text, images, tables, and even other layers. Anything you can place in an HTML document you can also place in a layer. Layers are especially useful for placing elements atop each other or making them overlap. Layers are supported by 4.0 or later browsers only. They can control layout and appearance when used in combination with Cascading Style Sheets (CSS), and they provide interactivity when used in combination with behaviors.

In this lesson, you will learn several ways to create layers in Dreamweaver. You will draw a layer on the page to the size you want and place a layer on the page using a predetermined width and height. You will learn to modify layer attributes including size ,

In this project, you will create layers, place text and images in them, move them to exact locations on the page, and change their properties. You'll also learn about layer-based animations that make use of multiple layers in a timeline with keyframes to control visibility and create movement.

placement, and visibility. You will also convert your layers to tables to make it possible for users with older browsers to view your pages.

To see an example of the finished page, open layers.html from the Lesson_09_Layers/Completed folder.

What You Will Learn

In this lesson, you will:

Create layers
Name layers
Modify layer sizes and locations
Use layers to control content on your page
Change the stacking order of layers
Nest and unnest layers
Change layer visibility
Set rulers and grids
Use a JavaScript fix for a Netscape bug
Make pages designed with layers compatible with earlier browsers
Learn about timelines

Approximate Time

This lesson should take about two hours to complete.

Lesson Files

Media Files:

Lesson_09_Layers/Images/…(all files)

Starting Files:

Lesson_09_Layers/ layers .html

Completed Project:

Lesson_09_Layers/Completed/layers.html

Lesson_09_Layers/Completed/layers_table.html

Lesson_09_Layers/Completed/transparent.gif

Creating Layers

A layer is simply a container, known as the <div> tag, that makes use of specific CSS properties (absolute positioning and z-index) that allow it to overlap other elements.

There are several different ways to create a layer. The method you choose might depend on how you plan to use the layer and where you want to place it. In this exercise, you will create several layers and insert content into them.

1.	Open layers.html from the Lesson_09_Layers folder. Switch to the Layout category on the Insert bar and verify that the Standard button is selected. Tip You should be using Design view for this lesson. Standard view is the default, and the Standard button on the Insert bar will be highlighted to indicate that it is active. You must be in the Standard view to create a layer.
2.	Click the Draw Layer button in the Layout category of the Insert bar. Move the pointer into the Document window; then click and drag to create a new layer on the right side of the page. The pointer changes to a crosshair (+) when you move the pointer into the Document window. After you drag and release the pointer to create the layer, a rectangle appears, displaying the new layer.

3.	Choose Dreamweaver > Preferences (Macintosh) or Edit > Preferences (Windows). Select the Invisible Elements category and check the Anchor Points For Layers box. Click OK. You should now see a layer marker at the top left of the Document window. The outline of the layer appears blue when it is selected. Note You can use the layer marker to select the layer, but if your layer is positioned at the top left of the Document window, the marker could appear to shift the position of the layer. This shift happens only in the Document window; when the page is viewed in the browser, all elements will be in their correct positions . Turn the markers off temporarily by using View > Visual Aids > Invisible Elements. A checkmark next to the command in the menu indicates that the option is on. By default, the layer code is inserted at the top of the page, just after the `<body>` tag. Dreamweaver uses the `<div>` tag to create layers that use absolute positioning to determine the placement of the layer in relation to the top and left sides of the browser window. The `<div>` tag is a block-level element, which is a container that structures portions of your pageit begins on a new line or a new block. Other block-level elements include `<p>` (paragraph) and `<ul>` (unordered list). Block-level elements can contain other block-level elements as well as inline elements. Inline elements usually contain only text and other inline elements, and are used within block elementsthey do not create new blocks or lines. Some examples of inline elements include `<span>` (span), `<br>` (line break) and `<a>` (anchors, otherwise known as links). Note Dreamweaver recognizes several additional tags that can be used to create layers ( `<span>` , `<layer>` , and `<ilayer>` ), but it does not provide the option to use these tags to create layers. The `<span>` tag, which is an inline element, uses relative positioning to determine the placement of the layer depending upon the position of other elements around it. The `<layer>` and `<ilayer>` tags were supported only in Netscape Navigator 4. Netscape no longer supports these tags, and Internet Explorer has never supported them. The Design view does not render or display these types of layers, although it does insert a layer marker for the layer.
4.	Position the pointer over the border of the layer. Click to select the layer when the pointer turns into a hand (Macintosh) or a four-headed arrow (Windows). When the pointer rolls over the lines that indicate the border of the layer, the lines turn red to indicate that you can select the layer. The layer is now shown with a square tab at the top left. This tab is the layer selection handle. The blue squares on the borders of the layer are sizing handles.

5.	Place the insertion point inside the layer. Insert a table into the layer with the following attributes: 1 row, 1 column, 300 pixels wide, border of 0, cell padding of 5, cell spacing of 0, no header, no caption, and no summary. Open about.txt from the Lesson_09_Layers/Text folder, copy all the text, and paste it into the table you created inside the layer. Tip The Layout category of the Insert panel contains an insert Table button. The layer expands if necessary to accommodate the size of the table and the text that the table now contains. Layers expand to show you all their content unless you change the overflow setting in the Property inspector.

6.	Place the insertion point in the document outside the layer. Click the Draw Layer button and draw a small second layer on the left side of the page. Insert the studio-om.jpg image from the Lesson_09_Layers/Images folder, into the layer. Use OM for the alternative text for the image. The layer expands if necessary to the dimensions of the image. The layer does not change size if it is larger than the image. Tip To draw multiple layers continuously without clicking Draw Layer more than once, hold down Cmd (Macintosh) or Ctrl (Windows) as you draw the first layer. You can continue to draw new layers until you release the modifier key. If the insertion point is within a layer when you insert the layer, the new layer is nested inside the other layer. Tip Be aware that nested layers can cause problems in older browsers. At this point, your document should look similar to the example shown here. Note Layers that are not selected and not activated are displayed with a faint, thin gray line marking their borders. You can turn this on or off by choosing View > Visual Aids > Layer Borders. A checkmark next to the command in the menu indicates that the option is on.
7.	Place the insertion point in the document outside the first and second layers and then choose Insert > Layout Objects > Layer. Insert the teaching.jpg image from the Lesson_09_Layers/Images folder into the layer and type teaching for the alternative text for the image. The layer appears in the upper-left corner of the Document window with the default width and height specified by the layer preferences. This third layer might overlap the second layer you created earlier. Note Dreamweaver's default is 200 pixels for the width and 115 pixels for the height, but you can change these options in the Layers category of the Preferences dialog box. To open the Preferences dialog box, choose Dreamweaver > Preferences (Macintosh) or Edit > Preferences (Windows) and choose the Layers category. You can also use the Layers preferences to set default visibility, background, nesting, and compatibility options, all of which will be covered later in this lesson. Depending on the location of the insertion point, markers might not be visible for the layer you just placed, although the layer code has been inserted. The layer markers might be hidden behind the new layers. When adding layers by drawing them onto the pages, the layer code will be placed at the top of the page, with no paragraphs or other code between them. Using other methods to insert layers might place them between or inside of other tags, such as the `<p>` (paragraph) tag. You can remove these tags in the code, which you'll learn to work with in Lesson 16. At this point, the third layer might partially obscure the layer markers and portions of the other layers.

8.	Click in the Document window outside of the existing layers to deselect the layer you inserted in the previous step. Drag the Draw Layer icon from the Insert bar into the Document window and drop it outside the existing layers. Click inside the new layer to place the insertion point inside of it and insert the class.jpg image from the Lesson_09_Layers/Images folder into the layer; type class for the alternative text for the image. Tip Don't drop the Draw Layer icon into another layer; dropping it would cause the layers to be nested. A fourth layer with the default width and height is created in the Document window, over top and offset slightly to the right of the last layer you created, similar to the following example. After you insert the layer, the insertion point will automatically be in that layer.
9.	Save the layers.html document.

Leave this file open for the next exercise.

With each method of creating a layer that has been used in this exercise, the <div> tag was placed in the body of the document, whereas the CSS properties that define those layers were placed in an internal style sheet in the head of the document. CSS was covered in Lesson 4. Another way to create layers would be to specify the CSS properties that define the placement and positioning of the layers in an external style sheeteither by exporting the internal styles or by initially creating the styles in the external style sheet.