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

Lesson 15. Creating Layers

Lesson 15. 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 CSS, and they provide interactivity when used in combination with behaviors and timelines.

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.

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.html from the Lesson_15_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 Files:

Lesson_15_Layers/Images/…(all files)

Starting Files:

Lesson_15_Layers/Text/…(all files)

Completed Project:





Not a subscriber?

Start A Free Trial

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