MS FrontPage —

FrontPage Layout Tables

For ages, Web designers have used regular HTML tables to help lay out their pages. Because these tables weren't originally designed to perform such duties, occasionally they buckle under the loador, put another way, they're not always as nimble as most designers would like them to be. For example, positioning cells exactly where you want them can be an ordeal. To address these limitations, FrontPage has added a powerful set of tools, called layout tables, which are designed expressly for page layout. Layout tables don't function like the regular tables you've been reading about so far. FrontPage's layout tables are based on drafting programs that let designers place elements in precise locations on a design grid. All measurements are fixed and absolute, not fluid like traditional HTML tables.

Fixed width tables do carry some drawbacks, which you'll learn about in a moment. If you decide that you want to use layout tables, read on to learn how to insert and format them to suit your needs. You'll also learn about another layout tool, called a tracing image, which lets you trace an image from a picture file and use it to shape your page design.

Pros and Cons of Layout Tables

For all their advantages, regular HTML tables can still make page design a challenge. If you'd like to add text to a specific spot in the middle of a page, maneuvering a cell into that precise location can take a lot of work. FrontPage's layout table gives you much more control. You can create a cell of any size anywhere you want. Then you can just plunk it down without a care in the world, and FrontPage does all the grunt work of arranging cells to support it.

This is truly one of FrontPage 2003's most impressive features, but it does come at a price. Layout tables work because they use fixed pixel dimensions. Unlike HTML tables that shrink or expand within a browser window, layout tables are static and unchanging (see the "Fixed vs. Fluid Design" box on Inserting A Table to understand the difference). If you use a layout table to create a page, not all browsers are going to be able to display it as you intend. For example, a page that looks great on your 1024 x 768 monitor won't fit on a Web surfer's 800 x 600 screen. She'll have to scroll to the right to see what's on the rest of the page. This may interfere with your graphics, hiding portions of pictures and text. FrontPage's layout tables can produce a great design, but not everyone can always enjoy it.

If you can deal with this, or if the allure of easy layout trumps any possible difficulties for your viewers, read on.

Inserting a Layout Table

FrontPage gives you a separate set of tools for layout tables, which are distinct from the HTML table controls covered earlier. You can manually create a new layout table or pick one from FrontPage's layout template selections. You can also turn an existing HTML table into a layout table, and vice versa.

Creating a layout table

You'll need the Layout Tables and Cells task pane to create and edit layout tables. To open it, select Table » Layout Tables and Cells, or click the task pane drop-down menu and make the same selection.

You can create a layout table using any of the following methods:

  • Use a template. Scroll down within the task pane to view the many table layout templates that come with FrontPage. The display at the bottom of the pane previews how the table would structure things on your page. The tables you see here represent a variety of page configurations and will probably satisfy most of your design impulses. Click a selection, and FrontPage inserts the layout table on your page, instantly organizing your workspace. Using one of these preformatted tables could save you a lot of work.

  • Draw a layout table by clicking the Draw Layout Table button (within the Tables toolbar or the task pane). Your cursor turns into a pencil. Use it to draw a table in the document window. A one-celled layout table appears to get you started.

  • Click the Insert Layout Table link at the top of the task pane. A one-celled table appears in the document window.

Adding layout cells

Layout tables consist of rows, columns, and cells just like other tables. However, unlike HTML tables, not all cells are created equal. Layout tables differentiate between layout cells and ordinary cells. Layout cells contain text or graphic elements while ordinary cells are empty. FrontPage creates ordinary cells to space out layout cells. (Microsoft probably should've called them inert cells or worker bee cells.)

When you create a layout table, you start off with only one cell. (This one cell is an ordinary cell, but if you were to type in it, it would become a layout cell.) To see how layout and ordinary cells interact, add another cell to your new table. Click the Draw Layout Cell button and draw a small cell in the center of the layout table.

Though you drew one cell, FrontPage unleashes a flurry of cellsit actually creates nine cells within the table, as shown in Figure 5-8. The cell you drew is the only layout cell. The other, ordinary cells surround it to keep it in place. FrontPage manages ordinary cells as it sees fit and may delete or rearrange them to support your layout cells. If you type any text into an ordinary cell, it rises in stature and becomes a layout cell.

When you click in a cell and type something, FrontPage hides the layout formatting display. To view the measurements of a layout table, drag your cursor over the table border until a green outline appears and click anywhere along the green line. Or, in the Tables toolbar or the task pane, just click the Show Layout Tool button twice.

Clicking the Show Layout Tool button converts your table to an HTML table only once (see the next section, "Converting tables").

Figure 5-8. When the Show Layout Tool is active, FrontPage displays layout tables with a green border (the dark line surrounding the table). Individual layout cells sport a blue border. Ordinary cells in a layout table are surrounded by dotted lines.

Converting tables

FrontPage makes it easy for you to transform your tables from HTML to layout tables. To convert an HTML table to a layout table, click anywhere in the table, then click the Show Layout Tool button within the Tables toolbar or the task pane. Or right-click anywhere in the table, select Table Properties, and then click the "Enable layout tools" radio button. Voil. Your HTML table turns into a layout table. To verify this, select the table. Design view displays advanced handling options and measurements like those pictured in Figure 5-9. Though you may still see your table's dimensions measured in percent, you'll only be able to adjust the table's dimensions by using pixel measurements from now on.

If you're having difficulty selecting a table in Design view, try this shortcut: click once inside the table, and then click the Table tag icon in the Quick Tag Selector toolbar (The Main FrontPage Window) just above the document window.

Figure 5-9. Layout tables always feature the profusion of colored borders and cell dimension tags that you see in the top of this document window. To see them, select the table. Old-fashioned HTML tables (like the one at the bottom) never show their dimensions in Design view even when you select them.

You can also do the reverse: turn a layout table into a normal HTML table. To do so, click anywhere in the table, and then click the Show Layout Tool button (within the Tables toolbar or the task pane) to deactivate it. (You can also right-click the table, select Table Properties from the pop-up menu, and click Disable layout tools.) The table is no longer a layout table, but FrontPage still measures it in pixels. If you want a fluid table, go into Table Properties and change table measurements to percentages.

Manipulating Layout Tables

Layout tables come with their own set of editing techniques, which are different from what you learned earlier about editing HTML tables. To edit a layout table, pass your cursor over the table border until a green outline appears and click anywhere along the green border. Or, within the Tables toolbar or on the task pane, click the Show Layout Tool button twice. Layout table and cell borders appear in green and blue with small square handles and dimension boxes.

You can drag the handles of layout cells and tables to whatever width and height you like or you can enter exact measurements. Click on any column or row measurement box and select either Change Row Height or Change Column Width. Within the dialog box that displays, enter the new number of pixels.

Setting more cell properties

To adjust cell properties like color and cell padding, select one or more cells and, in the task pane, click the Cell Properties and Borders link (or, if that's not visible, click Cell Formatting). A number of formatting options, including those for color and border, display in the task pane. FrontPage immediately applies the settings you make in the task pane to the cells you've highlighted.

To see additional decorative options, in the task pane, select the Cell Corners and Shadows link. Doing so displays controls that let you add L-shaped borders with a shadow effect that'll make your cell look 3-D. You can also add soft, curved corners to a cell. Click a curved corner button to turn it on and click it again to turn it off. When you turn on a corner button, you automatically activate the cell's header or footer setting, which you'll find if you click the Cell Header and Footer link in the task pane. The Header and Footer pane contains selections for formatting the top and bottom borders of a cell, with bands of color to frame cell contents. All these controls work together to create effects like those shown in Figure 5-10.

Figure 5-10. Layout cell formatting can include 3-D shadow effects and curved corners. A header band blends in with curved corners at the top of this cell, while the bottom features only a plain thick footer strip. In a browser, the table's dotted lines won't show up, so the cell looks like it's floating alone over the page.

Setting Page Margins

Page margins set the distance between the edge of a browser window and wherever the content starts on your page. Most browsers automatically set margins of 8 or 15 pixels. There may be times when you want to control margin display. For instance, maybe you want your colorful company banner to stretch to the very edge. In that case, you'd want to set your margin width to zero.

To do so, pop over to the Layout Tables and Cells task pane where you'll find a link called Set Page Margins. You can also select File » Properties and click the Advanced tab to make the same settings on any page. Both commands open the Page Properties dialog box, pictured in Figure 5-11.

Figure 5-11. The Page Properties dialog box seems to repeat itself: What's the difference, you might reasonably ask, between Margin Width and Left and Right Margin? The answer lies in the fact that different browsers respond to different margin settings. Details follow below.

Different browsers recognize different types of margin-setting instructions. For example, Netscape Navigator obeys your Margin Width and Height settings, but not your Top, Left, Bottom, and Right margin settings. The opposite is true of Internet Explorer. So, if you want your margin settings to work in a variety of environments, enter them in all the boxes that appear in this dialog box.

Adding Flexibility to a Layout Table

The fixed nature of layout tables can present you with some design challenges. Remember that layout tables are measured in exact pixels, which means that they're the same size, no matter how big or small your viewer's browser window is. If your page layout isn't large enough to fill a browser window, distracting areas of empty space may appear, as in Figure 5-12.

FrontPage helps you get around this problem with its autostretch feature. Use autostretch to allow one column in your table to be flexible instead of fixed. The column "stretches" to fill a browser window. Apply this to a column containing elements that expand gracefully, like long passages of text. In contrast, menu columns and fixed pixel graphics don't widen well. They can end up creating an unsightly blank space like the one you're trying to eliminate.

Figure 5-12. Top: Things that make a designer shudder. If a browser window is larger than a layout table's fixed size, your viewers end up looking at honkingly big white void.
Bottom: The solution lies in making one column flexible so that content expands to fill the screen.

Before you try this maneuver, make sure that you click the Show Layout Tool button (within the Tables toolbar or the task pane) once or twice until you to see your layout table's measurements. To make a column autostretch, click its measurement box and select Make Column Autostretch (see Figure 5-13). Save the page and preview in a browser to see the difference.

Figure 5-13. When FrontPage's layout tools are active, you can click any measurement box to display this pop-up menu. FrontPage limits you to setting only one column to autostretch.

The spacer image

When you save your page, FrontPage prompts you to save an image file called msspacer.gif. What's that? This humble image file holds the key to your table's new flexibility. To make one column flexible, FrontPage sets it at 100 percent screen size. If left alone, that autostretch column would hog the whole screen and muscle out the other columns. To preserve the width of the fixed columns, FrontPage inserts a transparent graphic in each column. As you learned earlier, a column can't be smaller than any element it contains. FrontPage sets the width of the transparent GIF to the pixel width of the column and inserts it, preserving the column's fixed width against its flexible neighbor. Take a peek in your page's code, and you'll see msspacer.gif inserted in various pixel sizes.

If you want to insert a spacer image manually, click the measurement box at the top of a column and select Use Column Spacer Image (see Figure 5-14). You can use this menu to remove a GIF as well. Select Use Column Spacer Image to turn the checkbox off. Removing the autostretch setting from a neighboring column also removes the GIF files.

Figure 5-14. A checkmark next to Use Column Spacer Image indicates that the column on the left contains a spacer GIF. The column next to it is the autostretch column, set to percent.

Web designers use transparent GIFs all the time to space out elements within table cells or text. Because these picture files are transparent, viewers never know they're there.

Using a Tracing Image to Create Page Layout

Some Web authors prefer to occasionally lay out a page by first drawing the design with pencil and paper. Or they may get Web page prototypes submitted to them by designers. If that happens to youhoney, can you make the site look like this?you may want to use FrontPage's image tracing feature to build your page layout.

FrontPage lets you take any image and place a washed out version of it behind your workspace in Design view. It's just like the old tracing paper trick you learned in grade school. You then use the program's layout tools to trace over the image as you create your page's layout structure. FrontPage saves the image with the site, but the picture never appears in a browser window.

Start out by selecting View » Tracing Image » Configure to display the Tracing Image dialog box. Browse to your tracing image and then select it. Move the opacity slider left toward Transparent to avoid confusing the image with page content and click OK. The image displays in gray on your page. Then use the layout table tools to draw a table based on the image. If you find that you'd like to make the image more or less transparent, you can go back into the Tracing Image dialog box and adjust it. To do so, select View » Tracing Image » Configure at any time.

Hide the image when you're done by selecting View » Tracing Image » Show Image to remove the checkmark. You can also use this same menu command later on, if you want to see your tracing image again.