| 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. |
