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.
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 Modifying Layers.)
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.
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.
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.
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 Positioning and CSS
Select a layer and then take a quick peek at your layer page's HTML code. How does FrontPage set exact coordinates for layers?
The <div> tag is your layer. The tag is short for division, representing a portion of a Web page that you can position or move in a block (layer). The <div> tag has style attributes that look something like this:
Style="position: absolute; top: 50px;left: 30px;"
When you position a layer, you create an inline style (Styles an Introduction). FrontPage positions your layers using CSS.
In fact, when absolute positioning is changed to relative (be it through a code edit or the Positioning dialog box), the layer evaporates in Design view. While the <div> tag still exists behind the scenes, the FrontPage Layers pane won't recognize it as a layer without the absolute positioning attribute.
