How to Use HTML Layers

by Robert Karr

Layers in HTML offer a more flexible way to present and organize information on a Web page than the old style tables. Using layers in Web creation software such as Dreamweaver CS3 or Expressions Web may sound simple but can get tricky. Understanding the structure of layer coding in HTML can avoid painstaking fixes in more sophisticated web design programs. One caveat: HTML code is inserted between left (<) and right (>) angle brackets. In the brief tutorial below, because the real code would behave as HTML, simple brackets substitute for angle brackets. In practice, replace the left ([) and right (]) brackets below with the left and right angle brackets.

First Layer Code Example

Create a basic HTML document using a word editor such as Microsoft Notepad or similar—not a word processing program. Type the following text exactly as it appears on individual lines. Save it to the Desktop for easy retrieval with a file extension of ".html" instead of the default ".txt."[html][style type="text/css"][!--#apDiv1 {position:absolute;width:200px;height:115px;z-index:1;}--][/style][body][div id="apDiv1"]Here is my first layer creation.[/div][/body][/html]

Browser Display

Open a Web browser and select "File/Open." Locate the document from the location you saved it in the display window that appears. If the words “Here is my first layer creation” do not appear, go back and check that everything is entered exactly as above.

Second Layer Code Example

Change the position and size of the layer on the Web page, add a second layer and fancy up the page with background color. Make the following changes to the above code. [html][style type="text/css"][!--#apDiv1 {position:absolute;height: 44px;left: 350px;Top: 185px;z-index:1;background-color: #FFFF00;}#apDiv2 {position:absolute;width:200px;height:80px;z-index:1;left: 271px;top: 65px;background-color: #00FF00;}body {background-color: #0066FF;}--][/style][div id="apDiv1"]Here is my first layer creation.[/div][div id="apDiv2"] [h1 align="center"]Now I'm getting fancy[/h1] [/div][/body][/html]

Browser Display

Check the code as in Step 2, refreshing the page first by pressing "F5" or "View/Refresh" in the browser toolbar.

Insert pictures into layers by using the HTML tag [img src] followed by the name of the image file (jpg) in quotation marks within the [div id] line. Modify the code starting with the first "#apDiv" lines to read as below. Notice the page layout--height, width, left and top--information in the "#apDiv" definitions has been changed to display both objects clearly. Check the image to see the result.<html><style type="text/css"><!--#apDiv1 { position:absolute; width:175px; height:44px; z-index:1; left: 50px; top: 400px; background-color: #FFFF00;}#apDiv2 { position:absolute; width:150px; height:100px; z-index:1; left:400px; top: 25px; background-color: #00FF00;}body { background-color: #0066FF;}--></style><div id="apDiv1"><img src="wheres_dinner.jpg"><h2>Where's my dinner?</h2></div><div id="apDiv2"><img src="relaxation.jpg"> <h2>How to relax.</h</div></body></html>

Add action to layers. Check the Additional Resources for an example. View the code behind this page by selecting View/Source in the browser.

Tips

  • check Change the names of the layers--the apDiv1, apDiv2--to something more meaningful such as MyDiv1, MyDiv2. Just make sure the names match in both sections.
  • check The indents in the first layer text example are not necessary, but they do make the code easier to understand.
  • check Creative layers can improve graphic website design. The link in the additional resources section compares static tables to dynamic layers.

Warnings

  • close Every single mark of punctuation in the code is critical. Leave out one semicolon or bracket and the result probably will be a mess.
  • close Remember when writing the code to change the [ and ] brackets to .
  • close This is very basic HTML coding. However, most of the elements of complicated layer structure are here.
  • close Full Web pages have many more HTML elements, such as metatags and css styles.
  • close Older browser versions may not be able to display layers.

Items you will need

About the Author

Robert Karr has been a writer, indexer, reference librarian, computer programmer and Web designer. He has a Master’s Degree in Library Science. Karr has 30 years experience in reference and research and has been writing professionally for 25 years, focusing on the library, medical and computer areas.