How to Use HTML Layers
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.
- Difficulty:
- Moderately Easy
Instructions
-
-
1
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]
-
2
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.
-
3
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]
-
4
Browser Display
Check the code as in Step 2, refreshing the page first by pressing "F5" or "View/Refresh" in the browser toolbar.
-
5
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>
-
6
Add action to layers. Check the Additional Resources for an example. View the code behind this page by selecting View/Source in the browser.
-
1
Tips & Warnings
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.
The indents in the first layer text example are not necessary, but they do make the code easier to understand.
Creative layers can improve graphic website design. The link in the additional resources section compares static tables to dynamic layers.
Every single mark of punctuation in the code is critical. Leave out one semicolon or bracket and the result probably will be a mess.
Remember when writing the code to change the [ and ] brackets to < and >.
This is very basic HTML coding. However, most of the elements of complicated layer structure are here.
Full Web pages have many more HTML elements, such as metatags and css styles.
Older browser versions may not be able to display layers.
