[Content Page] [Next]

Layers

A layer is an invisible container that you can place anywhere on your page. It can hold anything you want like text, pictures, tables, or even a video. Why bother to put these things in a layer? Because layers give you control like the ability to position them absolutely anywhere on a page that you just can't get with regular page elements on their own.

Unlike table cells, you can easily move and rearrange layers as you edit your page. Layers can even sit on top of one another. Try that with a table. To see how this is all possible, take a look at Figure 8-1. In FrontPage's document window, layers appear as blue boxes. After you fill the boxsay with text or a picture you can drag it around and place it anywhere.

Meanwhile, your viewers have no idea that you used layers to create your page. Figure 8-2 shows the same page as it appears in a browser. No layer boxes are visible. You can create a layout like this with just a few clicks. It's so fast, and so direct, that many Web designers are turning to layers to handle page design and abandoning tables altogether.

Figure 8-1. FrontPage's Design view shows four separate layers with a blue border and a label on the top left of each one. You place pictures and text within a layer. Layers can be moved anywhere on the page and they can even overlap each other.

But layers don't stop there. When FrontPage adds a pinch of JavaScript (a coding language that works alongside HTML to spice up your pages), layers can bring motion and interactivity to your Web pages. Want a click on a menu heading to unfurl submenus? Or have a car zoom across the screen when a page loads? Layers can deliver these slick effects.

In this tutorial, you'll learn to create and position layers. Once you know how to use layers to control placement, move on to Tutorial 9 to see how designers manipulate layers to create action.

Figure 8-2. The same layers that you saw in Figure 8-1 appear here, but their borders are now invisible when the page displays in a browser. Page elements overlap and sit exactly where you place them.

[Content Page] [Next]