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

Lesson 10. Creating Layers

Lesson 10. 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 only supported by 4.0 or later browsers. They can control layout and appearance when used in combination with CSS, and they provide interactivity when used in combination with behaviors and timelines.

In this project, you will work within pages like this one to create layers, place text and images in them, move them to exact locations, and change their properties.

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, placement, and visibility. You will also convert your layers to tables in order to make it possible for users with older browsers to view your pages.

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


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


This lesson should take about one hour to complete.


Media File:


Starting File:


Completed Project:





Not a subscriber?

Start A Free Trial

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