Using Layout Tables

With FrontPage 2003, Microsoft introduces the concept of the layout table and layout cell. In short, they are tools for doing pixel specific layout from within FrontPage. This approach to Web design was standard in several other Web development products, and it is great to see this toolset added to FrontPage 2003.

The Layout Table is the framework for a specific page layout made up of different regions made up of layout cells. As a result, FrontPage doesn't handle them the same way it handles traditional tables. At the core, a layout table is the same as a regular one-celled table, but FrontPage ads a <!-- MSTableType="layout" --> tag to identify it as such. You can edit the properties of layout tables the same way regular tables are updated. The tag has no effect on the rendering of your site, and it is there so that FrontPage can identify it as a layout table and offer the appropriate program support.

The layout tool shows the exact pixel size of all layout tables and cells. Figure 10.15 shows a layout table with the tool turned on. Use the table tool to get an exact view of your site down to the pixel level and make additional layout decisions accordingly.

Figure 10.15. The Layout Tool shows the exact pixel size of each element in a layout table. Clicking any of the numbers attached to the table will let you further set table elements.

Layout cells are the building block to a layout table. They can either be drawn with the draw layout cell tool or inserted automatically when the Layout Tables and Cell task pane is used.

Height and width is set in a layout table cell, regardless of whether you set one specifically. The implications of this issue are discussed later in this chapter.

Layout Tables and Cells Task Pane

The Layout Tables and Cells task pane, seen in Figure 10.16, provide the tools and means to develop an entire layout table.

Figure 10.16. The Layout Tables and Cells task pane provides the tools needed to create right layout tables.

The three areas of the pane and what they do are described below.

Inserting New Tables and Cells

The Insert Layout Table text link in the New Tables and Cells area of the Layout Tables and Cells task pane will add a layout table to the page your are working in.

NOTE

You can edit the table size through the Table Properties dialog box.

The Insert Layout Cell text link opens the Insert Layout Cell dialog box, seen in Figure 10.17. You can set all aspects of a layout cell through this interface.

Figure 10.17. The Insert Layout Cell dialog box lets you insert layout cells into your layout table through an easy text interface.

The Draw Layout Table or Draw Layout Cell buttons let you create layout elements with a simple drawing interface. These are the same tools as found in the Tables toolbar described earlier in this chapter.

The Show Layout Tool button toggles the Layout Tool on and off.

Table Properties

The Width and Height boxes in the Table properties area of the Layout Tables and Cells task pane let you modify the size of the table through a simple text interface.

The alignment buttons let you set the alignment of the table against the page it is located on.

Table Layout

The Table layout area of the Layout Tables and Cells task pane lets you select a page layout template from a number of preset options. You aren't forced to use these layout options, but they do provide a great starting point for most table layout designs.

TIP

The table layout templates provided by FrontPage are actually quite good and provide a number of solid options for page design through this method. Consider using them in the design process. (They are considerably better than the other templates provided by Microsoft.)

Cell Formatting Task Pane

The Cell Formatting task pane, seen in Figure 10.18, contains most of the tools that make layout tables so powerful. It is actually made up of three different parts, all accessible through the first three text links in the task pane. It is accessed by clicking the Cell Formatting option on the Layout task pane.

Figure 10.18. The Cell Formatting task pane lets you set all aspects of any layout cell in a layout table.

Editing and Configuring Layout Tables

As with most elements of a FrontPage Web site, a right-click of a layout table or cell will let you open one or more dialog boxes for properties associated with the area right-clicked. Tables, layout tables, cells, and layout cells are no different. To edit or configure any element of a table or cell (regular or layout), right-click the element and make the appropriate selection from the menu.

Cell Properties and Borders

The Cell Properties and Borders page of the Cell Formatting task pane, seen in Figure 10.19 lets you set a number of cell-specific options.

Figure 10.19. The Cell Properties and Borders page lets you set some new features to your layout cell.

The Layout Cell Properties area lets you set traditional cell formatting:

Option	Action
Width, Height, Padding	Let you set exact cell specifications.
VAlign	Sets the vertical alignment of the cell's content.
BGcolor	Lets you set the background color of the cell.

The Borders area is new to FrontPage 2003 and lets you set cell borders similar to what is traditionally seen in other products such as Microsoft Excel, PowerPoint, and Word. You can set the width and color of each border and toggle on/off which locations of the cell you would like to place the borders on. Figures 10.20 and 10.21 show a simple cell set with a left and right border and how that effect looks in Internet Explorer.

Figure 10.20. A cell in Design view is given two borders with the Cell Formatting dialog box. Compare this with Figure 10.21.

Figure 10.21. The page seen in Figure 10.20 as displayed in Internet Explorer.

CAUTION

At publication time, this feature was still a bit "buggy." We hope everything was fixed at final release, but don't say that we didn't warn you.

NOTE

Each of the images in this section is very simple in nature to show you the specific elements that can be accomplished through these tools. In Figure 10.28 at the end of this section, we show the type of effects these tools can accomplish.

Figure 10.28. Multiple cell border and shadow effects were used to produce the advertising cell to the right.

The Margins area lets you set the margins for a cell.

NOTE

Borders are done external to the cell in new cells. If you placed padding on the cell, it will pad from the newly created cells that hold the borders.

If you find getting your layout cell effects to "take" is harder than expected, see "Layout Cell Effects" in the "Troubleshooting" section at the end of this chapter.

If you find your shadow effects are skewed after editing them, see "Shadow Effects Went Bad" in the "Troubleshooting" section at the end of this chapter.

Cell Header and Footer

The Cell Header and Footer page of the Cell Formatting task pane, seen in Figure 10.22, lets you add header and footer information to any layout cell.

Figure 10.22. You can add Cell Header and Footer information to a cell.

Any content can be added to a cell header or footer, and the background color and border can also be set through this interface. In Figure 10.23, a cell with a footer using a grey background is set.

Figure 10.23. A small footer for the cell is set with a grey background by using the Cell Header and Footer page of the Cell Formatting task pane.

Cell Corners and Shadows

The most interesting effects that can be added to a layout cell are a corner or shadow. Both effects are visually impressive and can easily be added with the Cell Corners and Shadows page of the Cell Formatting task pane (see Figure 10.24).

Figure 10.24. The Cell Corners and Shadows page of the Cell Formatting Task Pane lets you add shadows and corners to any layout table cell.

The Corners effect adds one or more curved corners to a cell element. This helps reduce the impact of the normally squared corners of any table or cell. This effect can be seen in Figure 10.25.

Figure 10.25. A curved corner is added to a layout cell.

NOTE

In addition to the corner graphics, you can use a custom corner image through this interface.

The other effect provided via the Cell Corners and Shadows page is the Shadows effect. The Shadows effect places a number images around the cell as specified, producing an impressive basic 3D effect. An example of this can be seen in Figure 10.26.

Figure 10.26. A shadow placed against a layout cell produces a simple 3D effect.

In addition to the application and color of the shadow effect, the width and softness of the shadow can be set through this interface.

It is important to note that shadows and borders can be used together for an interesting effect. An example of this is seen in Figure 10.27.

Figure 10.27. A shadow and border are used together to provide an artistic effect.

Putting it All Together

In Figure 10.28, a Web page is shown in Internet Explorer that uses a number of the previously shown effects to produce an impressive three-dimensional frame that stands out.

The combination of all these tools can produce the look and effect your are aiming for. Spend some time practicing each of these effects individually, and you will find that you are producing rich layout effects in no time at all. For reference purposes, Figure 10.29 shows the HTML behind the effect shown in Figure 10.28.

Figure 10.29. The HTML behind the layout table effect shown in Figure 10.28.

Table Layouts for Dynamic Web Templates

Because FrontPage layout tables and cells provide a powerful controlled environment for developing Web pages, they also make great tools for the design and implementation of FrontPage Dynamic Web Templates.

This is exactly what Microsoft created them for so go ahead and take advantage of this powerful combo.

You can set each cell as an editable region right in FrontPage and quickly save your work as a new Dynamic Web Template.

For more on FrontPage 2003's Dynamic Web Templates, see "Dynamic Web Templates," p. 411.