Introduction to Layers

In the early days of Web sites, Web developers were content with having a Web page with columns of text for their hyperlinks. Web pages were boring and drab, but they served their purpose. As the Internet became more popular, Web sites became more interactive and dynamic. Instead of plain text and graphics, it is much more common now to see dynamic graphically-oriented Web pages with content that changes in real-time as you interact with the page.

A Web developer can use many techniques to create a Web page in which certain areas of the Web page change as the user interacts with it. Many Web developers use <DIV> tags to implement this kind of funationality because by using the style attribute of the <DIV> tag, you can easily control the <DIV> tag's position, size, and many other attributes.

FrontPage 2003 uses <DIV> tags to implement layers. A layer is a <DIV> tag that is absolutely positioned so that you have fine control over its position on the page. When an item on a Web page is absolutely positioned, it means that the tag used to render that item contains attributes that specify exactly where that item is to appear on the Web page. The position is specified using three attributes:

• left The distance between the left side of the Web page and the left side of the item.

• top The distance between the top of the Web page and the top of the item.

• z-index The position of the item in relation to other absolutely positioned items if you were to stack the items one on top of the other. A higher z-index indicates the item is higher in the stack.

The z-index is what defines a <DIV> as an actual layer. Because the z-index allows you to stack <DIV> tags in layers on a page, absolutely positioned <DIV> tags are known as layers.

CAUTION

If you change the properties of a layer and turn off the absolute positioning for the layer or if you edit the page in Code view and remove the style attribute, the <DIV> is no longer considered a layer and FrontPage will no longer provide you with the tools to edit it as a layer.

You encounter layers almost every time you go to a Web site. For example, when you see a menu system that pops up a submenu for items you point to, chances are that functionality is implemented with layers. Previous versions of FrontPage would allow you to add this kind of functionality to a Web page, but in order to do so, you had to hand-code it inside of Code view. FrontPage 2003 introduces the Layers task pane, which provides you with an intuitive interface with which to add and configure layers on your Web page without hand-coding.

NOTE

Layers can be used for much more than just menu systems. You can use layers to control any element on your page including graphics, blocks of text, and even other layers.

Over the course of this chapter, you will create a Web page with a dynamic menu system and other dynamic content using layers, Behaviors, and Interactive Buttons. Previous versions of FrontPage would have required that you do all of this by writing code. But by using FrontPage 2003, you will create it all without even looking at a single line of code!

NOTE

If you'd prefer to use a completed copy of the Web page described in this chapter, see the file layers.htm in the Ch25 folder on the CD-ROM that accompanies this book for the completed example.

For more information on using Behaviors in FrontPage, see "Using Behaviors," p. 449.

For more information on using Interactive Buttons, see "Using Interactive Buttons," p. 441.