• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 10. Creating Layers > Creating Layers

Creating Layers

There are several different ways to create layers. Which method you choose may depend on how you plan to use the layer and where you plan to place it.

1.
Create a new document. Save the file as layers.htm in the Lesson_10_Layers folder. Title the document Learning Layers.

In this exercise, you will create several layers on this page and insert content into two of them.

2.
Click the standard view button in the View area of the Objects panel.

You must be in the standard view in order to create a layer.

3.
Click the draw layer button from the Common category of the Objects panel. Move the pointer into the document window (the pointer becomes a cross hair), and then click and drag to create a new layer on the right side of the page.

The pointer changes to a cross hair (+) when you move the pointer into the document window. After you drag and release the pointer, the new layer displays as a rectangle with a tab at the top left. The tab is the layer selection handle.

You should also see a yellow layer marker at the top of the document window. If the layer marker isn't visible, choose View > Visual Aids > Invisible Elements.

NOTE

You can use the layer marker for selecting the layer, but if your layer is positioned at the top left of the document window, the marker could get in the way and may appear to shift the position of the layer. This shift only happens in the document window. When the page is viewed in the browser, all elements will be in their correct positions. Turn the markers off by using View > Visual Aids > Invisible Elements. A check next to the command in the menu indicates the option is on.

By default, the layer code is inserted at the top of the page, just after the <BODY> tag. There are four tags you can set for your layers using the Tag drop-down menu in the property inspector: <DIV>, <SPAN>, <LAYER>, and <ILAYER>. The <DIV> and <SPAN> tags are the most common and widely supported; they allow the largest possible audience to be able to view your layers. Dreamweaver uses the <DIV> tag by default 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. <SPAN> uses relative positioning to determine the placement of the layer depending upon the position of other elements around it. The <LAYER> and <ILAYER> tags are only supported by certain versions of Netscape and are outside of the scope of this book.

4.
Place the insertion point in the layer. Open dive.txt from the Lesson_10_Layers/ Text folder, copy the first two paragraphs of text (“We returned…” through “…but made no night dives.”), and paste it into the layers.htm document.

The text will paste into the layer at the insertion point. The layer will expand if necessary to accomodate all the text. Layers expand to show you all of their content unless you change the overflow setting in the property inspector. You will change these settings in the Modifying Layers exercise.

5.
Place the insertion point in the document outside the layer and use the draw layer button on the Objects panel to draw a second layer on the page, to the left of the other layer. From the Lesson_10_Layers/Images folder or from the Image Favorites list in the Lesson 10 folder in the Assets panel, insert diver.jpg into the layer.

TIP

To draw multiple layers continuously without clicking the draw layer button more than once, hold down Ctrl (Windows) or Command (Macintosh) 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 will be nested inside the other layer. Nested layers can cause problems in browsers, so it is best to avoid using them.

At this point, your document should look similar to the example shown here.

NOTE

Layers that are not selected and not activated will be 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 check next to the command in the menu indicates the option is on.

6.
Place the insertion point in the document outside the first and second layers and choose Insert > Layer.

The layer appears in the top left corner of the document window with the default width and height specified by the layer preferences.

NOTE

Dreamweaver's default is 200 pixels for the width and 115 pixels for the height, but you can change this in the Layers category of the Preferences dialog box. To open the Preferences dialog box, choose Edit > Preferences and choose the Layers category.

A layer marker appears at the pointer location to show where the layer code has been inserted.

TIP

You can also insert a layer by dragging the draw layer icon from the Objects panel into the document window. A layer with the default width and height will be created in the top-left corner of the document window.

7.
Save the document.

Leave this file open for the next exercise.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint