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

Lesson 15. 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.html in the Lesson_15_Layers folder. Title the document Lighthouse Layers. Set the background to white and the text to black in the Page Properties dialog box.

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

NOTE

You should be using Design View for this lesson.

2.
Verify that the Standard View icon is selected on the Layout tab of the Insert bar.

You must be in the Standard View in order to create a layer.

3.
Select Draw Layer on the Common tab 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, the new layer displays as a rectangle.

You should now see a layer marker at the top of the document window. It will appear blue when it is selected and yellow when it is not selected. 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 two tags you can set for your layers using the Tag drop-down menu in the Property inspector: <DIV> and <SPAN>. The <DIV> tag is the most common, allowing 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. The <DIV> tag is a block-level element. <SPAN> uses relative positioning to determine the placement of the layer depending upon the position of other elements around it. The <SPAN> tag is an inline element.

NOTE

Dreamweaver recognizes two additional tags, <LAYER> and <ILAYER>, but it does not provide the option to use these tags to create layers. These tags were only supported in Netscape Navigator 4. Netscape no longer supports these tags, and Internet Explorer has never supported them. The Design View will not render or display the layer, although it will insert a layer marker for the layer.

4.
Position the pointer over the border of the layer. When the pointer turns into a hand (Macintosh) or four outward-facing arrows (Windows), click to select the layer.

The layer is now shown with a square tab at the top left. This tab is the layer selection handle. The black 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 column, 1 row, 300 pixels wide, 5 cell padding, and 0 cell spacing. Open locations.txt from the Lesson_15_Layers/Text folder, copy all the text, and paste it into the table you created inside the layer.

The text will paste into the layer at the insertion point. The layer will expand if necessary to accommodate all the text. Layers expand to show you all of their content unless you change the overflow setting in the Property inspector. The length of this layer listed on the Property inspector is still the same as when you first inserted the table, when it had no text. The actual length of the layer will vary since the size of the text will vary depending on the system, browser, and font settings that the visitors to your page are using.

6.
Place the insertion point in the document outside the layer. Click the Draw Layer icon on the Common tab on the Insert bar to draw a small second layer on the left side of the page. Insert the PMlight70.gif image, from the Lesson_15_Layers/Images folder, into the layer.

The layer will expand if necessary to the dimensions of the image. The layer will 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 Command (Macintosh) or Ctrl (Windows) as you draw the first layer. You can continue to draw new cells 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.

7.
Place the insertion point in the document outside the first and second layers and choose Insert > Layer. Insert the rocks-ocean.jpg image, from the Lesson_15_Layers/Images folder, into the 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 third layer marker appears after the first two markers to show where the layer code has been inserted.

8.
Drag the Draw Layer icon from the Insert bar into the document window and drop it outside the existing layers. Insert the landscape.jpg image, from the Lesson_15_Layers/Images folder, into the layer.

TIP

Don't drop the Draw Layer icon into another layer; that would cause the layers to be nested.

A fourth layer with the default width and height will be created in the top left corner of the document window, over top and offset slightly to the right of the last layer you created.

9.
Save the layers.html 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