| FrontPage 2003 (The Missing Manual)

Chapter 8. Layers

Chapter 5 showed you how tables can help lay out a Web page. All in all, they do a pretty good job, but they do have some limitations. Complex tables with lots of cells slow a page's download time. And a lot of new Web browserslike those in cellphones and palmtopscan't handle tables. And then there's all that tweaking. You could spend a whole afternoon fine-tuning columns and rows to position a cell just so. After spending a little time working with tables, perhaps you'll find yourself wishing for some kind of magic table cell that you could just draw and place anywhere on your page. Well, in a way, you can. Instead of using table cells, use a layer .

A layer is an invisible container that you can place anywhere on your page. It can hold anything you wantlike text, pictures, tables, or even a video. Why bother to put these things in a layer? Because layers give you controllike the ability to position them absolutely anywhere on a pagethat 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 pictureyou 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 chapter, you'll learn to create and position layers. Once you know how to use layers to control placement , move on to Chapter 9 to see how designers manipulate layers to create action .

Note: Older browsers don't support layers. Instead, viewers using browsers that predate IE 4.0 or Netscape 4.0 will likely see a hapless jumble of text and images. If you know you'll have a lot of such visitors , you shouldn't use layers and may want to turn off absolute positioning (Section 7.3.2.4) options altogether. To do this, select Tools

Page Options and click the Authoring tab. Turn off the CSS 2.0 (positioning) checkbox.

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.