Tutorial 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 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. 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.

One reason layers are so popular is that creating them is a snap. It's just as easy to add content to them as well. The easiest way to create layers is in Design view, using the invaluable assistance of the Layers task pane. To open it, select Format Layers or open the Task pane menu and select Layers.

8.1.1. Inserting Layers

You can create a layer in one of three ways:

• In the Layers task pane, click the Insert Layer button.

• In the Layers task pane, click the Draw Layer button, and then drag your cursor diagonally across the space on the page you want your layer to occupy.

• Select Insert Layer.

Once you create a layer, it appears on the page as a blue box, and it also shows up in the task pane list. FrontPage automatically gives layers such exciting monikers as layer1, layer2, and so on. To avoid confusion, give the layer a proper and descriptive namesomething like Fido, if it'll contain a picture of your dog, or Product-Menu, if it'll be part of a series of menus. To rename a layer, double-click it within the task pane, or right-click the layer in the task pane and then select Modify ID. FrontPage highlights the layer name to show it's editable. Type a new name (and remember not to include any spaces or special characters).

8.1.1.1 Adding content to a layer

Layers can contain a variety of content, such as pictures, video, or text. You add these items to a layer just as you would to a table cell. Within the document window, click inside the layer and start typing, or insert a picture (select Insert Picture From File or just drag a graphic into the layer). Poof! Your content appears in the layer. If you enter a lot of text or insert a picture that's larger than the layer, the layer expands to contain it. That's all there is to it. FrontPage saves changes you make to a layer whenever you save the page.

Before you can resize, move, or modify a layer, you first need to select it. Use one of the following methods:

• In the Layers task pane, click the layer's name.

• Run your mouse over the layer's border. When your cursor turns into a four-headed arrow, click.

• Click the layer's label, or handle, in the document window. You'll find the label on the upper-left corner of the layer.

When eight little blue boxes appear around a layer's edge, you know you've selected it.

Each time you insert a layer, FrontPage plops a 100 x 100 pixel layer in the upper left corner of the document window (unless you've manually "drawn" the layer's shape, as described above). So in most cases, you'll need to make some adjustments. Everything you need to know about resizing and positioning layers follows.

8.3.1. Resizing

When you select a layer, eight small, square, resizing handles appear along the edges. Drag any handle to change the dimensions of the layer. Dragging like this is the quickest, most direct resizing method.

If you're a precisionist and prefer typing in exact dimensions, then in the task pane, click the Positioning link (or select View Toolbars Positioning) to display the Position dialog box. The Position dialog box and the Positioning toolbar (both pictured in Figure 8-3) offer Width and Height fields that you can use to resize a layer.

Figure 8-3. Control layer placement and size with the two tools pictured here. The Position dialog box (at top) includes controls you don't really need for layers, like wrapping and relative positioning. Use only the absolute positioning controls, which appear in the lower portion. The Positioning toolbar (at bottom) features handy buttons, like the Bring Forward and Move Backward options on the far right.

Note: Within the Position dialog box, don't select Relative Positioning. If you do, your layer will disappear, leaving only its content. To FrontPage, a layer is nothing without absolute positioningliterally. (See the "Layer Positioning and CSS" sidebar on Section 8.4.)

8.3.2. Placing Layers

To move a layer, first select it. Then you can drag the layer anywhere you want. When you set a layer down in the document window, FrontPage sets the location absolutely, meaning that it measures, in pixels, how far the layer is from the top and left side of the page.

Tip: If you need to fine-tune layer placement, use the arrow keys on your keyboard to nudge a selected layer into the right spot.

If you want to adjust these coordinates, you can enter pixel measurements in the Left and Top fields of the Position dialog box or in the Positioning toolbar. FrontPage always places layers by measuring from the left and top of a page. Why? Because you read a page from left to right and from top to bottom (in Western countries, anyway). So, your browser window expands out to the right and bottom, making those two axes unpredictable. If you're tempted to position a layer in relation to the bottom and right side of a page, don't. Results are erraticnot just due to varying browser window size, but also because various browsers handle settings in these fields differently. If you enter values in all four of these fields, FrontPage takes control and uses the Left and Top field measurements to place the layer.

Also, be careful about combining layers with regular page content. As you now know, FrontPage positions layers absolutely. At the same time, the program positions regular page content relatively. As a result, your layer might float over your page and block out text beneath it. If you're using layers, you're usually better off absolutely positioning everything on the page.

8.3.3. X, Y, and Z

Because layers can overlap, a designer must work in three dimensions. So far, you've set elements along a page's x and y axis. (Algebra nostalgia alert: dust off your high school math skills.) In other words, you've positioned elements horizontally, along the x axis, by aligning them left or right. You've also situated them vertically, along the y axis, by setting items between the top and bottom of a page. Now, you're going deeper. An object's stack level, or position from front to back, is known as the z-index. Adjust a layer's z-index by using the Bring Forward and Move Backward buttons on the Positioning toolbar (see Figure 8-3), or by entering a numerical order within the z-index field, at the far-right end of the toolbar. (In a lapse of continuity, the Position dialog box in Figure 8-3 calls this field z-order. It controls the same thing.)

Numbers in the z-index rise in orderlowest to highestup from the page. In other words: the smaller the number, the closer the layer is to the page. The larger the number, the closer the layer is to the viewer. For example, if you have two layers and you want one to display on top of the other, give the bottom layer a zindex of one and the top layer a z-index of two. (Actually z-index numbers don't need to be sequential. Just make the second number larger than the first. Entering 11 and 32 has the same effect.) The Bring Forward or Move Back buttons actually increase or decrease the z-index number by one. You may need to click the button more than once to bring a layer forward many levels.

You can even go negative, if you wish. Enter1 in the z-index field, and that layer will appear behind any other content on the page, such as regular text that's not positioned in a layer. The z-index of regular page content is zero. Work up or down from there.

Tip: If two layers have the same z-index value, the layer that appears first within a page's HTML code appears behind the one that follows.

Layer appearance can range from completely invisible (yes, you can even hide a layer's contentmore soon on why you'd want to do that) to a "look at me" bright pink background with a chartreuse border. To learn how to achieve effects like that, or anywhere in between these two extremes, read on.

8.4.1. Setting Layer Appearance

Layers created in FrontPage are automatically transparent. In other words, no one can see the outline or background of this invisible containeronly whatever objects you put in it. Most designers prefer layers this way, because a layer's content is the real star of the show. But, if you want, you can give your layers a little personality by adding a border or a background (see Figure 8-4).

Figure 8-4. Layers don't have to be invisible. You can add a background color to set off one area of a page (upper left). Or you can use borders to do the same thing and make it look like a picture frame (upper right). By adding background color, foreground color, and a border you can even make a layer look like a button (lower left). Though a much better way to include buttons in your layer is to insert FrontPage's interactive buttons into the layer (lower right), which you'll learn about in the next tutorial.

To do so, first select the layer. Then, within the Layers task pane, click Borders and Shading. The Borders and Shading dialog box that appears offers the following options:

• Set border style. If you want to outline the edge of your layer, give it a border. When you make a selection, FrontPage previews its effect within the Border tab.

• Set layer padding. Layer padding is like cell padding. (Recall from Tutorial 5 that padding is the distance between a border and its content.) But you can be more persnickety here than you can be within a table cell. FrontPage lets you specify a different setting for each side of the layer. This might be useful if you want to set text away from the left edge of a layer, for example.

• Set layer background and foreground. Click the Shading tab to access options for setting the background of your layer. Then choose a color or use a picture. If a picture is smaller than the layer, it will tile (appear multiple times) just like it does in a cell. Use the Foreground color field to control text color in a layer.

Tip: The Layers task pane doesn't give you any way to align content within your layer. Instead, you need to use the alignment tools you learned about earlier (Section 2.4.1). First, select the text or picture that you wish to align. On the Formatting toolbar, click the alignment button (left, center, justify, or right) you want, or select Format Paragraph and set alignment within the Paragraph Properties dialog box.

8.4.2. Visibility

When FrontPage creates a layer, it makes layer content visible automatically. But there are times when you want a layer to be entirely invisible to viewers. This is usually so you can pull off some masterful sleight of hand. Imagine this: on your Web site, a visitor's cursor passes over text that says "Grand Canyon" and a picture of the canyon appears in the middle of the screen. The cursor then passes over text that says "Yellowstone," and a picture of Old Faithful replaces the photo of the Grand Canyon. You can easily create this impressive effect by using FrontPage Behaviors (which you'll read about in the next tutorial) to make a layerlike the one containing the picture of Old Faithfulinvisible and then visible.

To see your visibility options, right-click a layer within the Layers task pane. Three visibility choices appear on the pop-up menu:

• Visibility: Default is the automatic setting FrontPage gives to any new layer. In other dialog boxes, FrontPage calls this option Inherit. Under this setting, the layer is visible, but if you give it a parent layer (a way to make one layer share another layer's attributes, which you'll read about in the next section) the layer automatically takes on the visibility setting of its parent.

• Visibility: Visible means that the layer is visible no matter what (even if its parent is invisible).

• Set Visibility: Hidden makes the layer invisible no matter what (even if its parent is visible).

Right-clicking gave you access to all those choices, but there's actually a much easier way to set visibilitywith a simple click in the Layers task pane (see Figure 8-5).

Nesting layers is not like nesting tables. One layer doesn't sit inside another. Instead, nesting is a way to group layers within parent-child relationships. In this arrangement, child layer settingslike display and positioningare linked to those of their parent layer. Why would you want to group layers like this? The advantage is that parent layers manage the attributes of their children (just like in real lifeyeah, right).

Figure 8-5. The far left side of the Layers task pane features a visibility column topped by an eye icon. This column provides a handy way to set visibility and is also great for viewing the visibility properties of all your layers at a glance. Click in the visibility column to the left of a layer. An open eye appears. This is the pictorial equivalent of the Visibility: Visible command, explained above. The open eye indicates that the layer is visible. Click again, and the eye closes, setting the layer to hidden. Click one more time, and the eye disappears, returning to default (inherited) visibility.

For instance, if you move a parent layer (say, a long menu bar), all its children (submenus for the menu bar) move with it. So, if you've spent the morning setting up a beautiful multi-layered composition and find you need to move it in its entirety over to the right, you can do so in one move. Child layers also inherit some display attributes from a parent layer. For instance, if you set a parent to be invisible, all its children are invisible as well (unless you specify otherwise). Or, if you set a parent's foreground color to green, then the text in any child layers becomes green, too.

Note: Nested layers stick together. This remains true even when you're positioning nested layers along the z-index. If you lower the z-index setting of a parent layer so it appears behind all other layers, all its children will also display behind other layers. In other words, FrontPage won't let you insert an outside layer between nested layers.

8.5.1. Inserting Child Layers

You can give any layer one or many child layers. Even a child layer can have its own children.

To create a child layer, select the layer that you want to make the parent and then click the Insert Layer button or select Insert Layer. FrontPage creates a new layer. In the document window, it looks like any other layer, but you can tell that the new layer is a child of your existing layer because within the Layers task pane, the child layer is indented below its parent, as illustrated in Figure 8-6.

Figure 8-6. The Products layer is indented below the Shop layer, indicating that Shop is the parent layer. Control layer properties using either the "Borders and Shading" link or the Positioning link within the Layers task pane.

8.5.2. Changing Parent-Child Relationships

Even if you've already created layers, it's not too late to organize them into parent-child relationships. For example, you can easily give a layer a new parent. First, create the parent layer. Then, in the Layers task pane, click the layer that you want to turn into a child layer and drag it onto the layer you want to make its parent. FrontPage moves the layer beneath its new parent and indents it. The child layer will take on the attributes of the parent layer.

If the relationship isn't working out, go ahead and free a layer from its parent. Select the child layer in the Layers task pane and drag it up onto the column heading bar just above the pane, or down into the empty space beneath the list of layers. Now you've got two completely independent layers.

discuss this topic to forum