Create a structured page layout by using layout tables and cells

Applies to
Microsoft Office FrontPage® 2003

Do you often admire Web sites that provide sophisticated structures for the content they contain? Perhaps these sites contain detailed tabs with rounded corners and complex border decorations with shadows. You wonder how long it took the Web designer to create — and you also wonder whether you could ever create such a site.

With FrontPage 2003, you can create your own organized, visual structure for the content in your Web pages. To get that professional look, you use layout tables and cells:

  • Layout table   The framework that contains layout cells, spacer cells, and sometimes other layout tables.
  • Layout cell   A region within a layout table that contains Web content, including text, images, Web Parts, and other page elements.
  • Spacer cell   A table cell that adds structure within a table. Spacer cells do not contain any content except for a single nonbreaking space (NBSP).

The following image represents a layout table that contains two layout cells and a spacer cell in the center.

Layout table with cells

Callout 1 
 Layout table
Callout 2 
 Layout cell
Callout 3 
 Spacer cell

Cell formatting: More than just content organization

When you format cells, you can freely place content on a page and use more decorative elements than you can with original FrontPage tables and cells. For example, you can use rounded corners, complex border decorations, drop shadows, gradient backgrounds, and curved headers or footers.

With the original FrontPage tables and cells, you can organize content, but you can't enhance the table's appearance the way you can by using layout cells.

You can use FrontPage to edit a Web page containing layout tables and cells even if the page were created by using another Web authoring tool, such as Macromedia Dreamweaver.

Add a layout table

Before you can begin formatting cells, you must first add a layout table to your Web page. You can use the predefined layout tables that are available in the Layout Tables and Cells task pane — or you can draw your own.

Specify table size

After you add a layout table to your Web page, set the width and height of the table. You can also set the alignment and the properties for the top, left, bottom, and right margins by using pixels.

Add or draw layout cells

Next, decide where you want your Web content to appear on the page. Then add or draw cells to accommodate it. For example, perhaps you want to place a cell across the top of the page to contain the navigation bar, and then you want three cells to contain three separate blocks of content in the body of the page below the navigation bar. Knowing this ahead of time makes your layout job easier.

A good way to settle on a design layout is to find and copy another page design, one that meets your needs. There are many design ideas on the Internet.

Then you can use the FrontPage 2003 image tracing tool as a visual guide to trace the outline of that Web page. After you obtain the image, use it as a guide to help you draw your layout table and cells. The image itself appears in the background of the document window in Design view.

For more information about the image tracing technique, see About tracing images.

Set properties for layout cells

After you position the layout cells, you can begin setting the properties for those cells. This includes setting the following properties:

  • Width, height, padding, vertical alignment, and background color of the cell
  • Width, color, and style of the cell border
  • Margin properties of the cell
  • Height, padding, vertical alignment, background color, border width, and border color of cell headers and footers
  • Width, height, color, border color, and styles of a corner of a cell
  • Width, texture, color, and direction of a shadow of a cell

Add content to layout cells

You can add page elements such as text, images, Web Parts, and other content to your layout cells. Click in the cell where you want to add content, and then type the text or insert the page element you want.

 Note   If you add Web Parts to your Web pages, your Web site must be hosted on a server that is running Microsoft Windows® SharePoint™ Services. For more information about Web Parts, see About working with Web Parts.

Resize layout tables and cells

There are a few different methods for resizing a layout table or cell, including the following:

  • For layout tables, set precise pixel height and width settings in the Layout Tables and Cells task pane.
  • For layout cells, set precise pixel height and width settings by going to the Cell Properties and Borders section of the Cell Formatting task pane.
  • Select one column or row in a table and apply the "autostretch" function.

When you click the arrow on the column width or row height resize label and then click Make Column Autostretch or Make Row Autostretch, you make that cell an autostretch cell. The cell is automatically resized to fit the available space of a site visitor's browser window.

  • Click the border of a layout table or cell to display the resize label, and then click the arrow on the label to change column widths and row heights.

Layout table showing resize labels

  • Resize a layout table or cell in small increments by clicking the border of the table or cell and then pressing and holding ALT. Next, drag the border to resize it.

More about autostretch

You can apply autostretch to only one row or column in a layout table. The other rows or columns in the layout table must be set at a fixed width or height.

By default, FrontPage adds a spacer image when you set a column to autostretch. A spacer image is a transparent GIF image that you can use to control spacing in autostretch tables. A spacer image consists of a single-pixel transparent image, outstretched to represent a specified number of pixels in width.

A browser cannot draw a table column that is narrower than the widest image contained in a cell in that column, so placing a spacer image in a layout table column forces browsers to keep the column at least as wide as the spacer image.

Move layout tables or cells

To move a layout table or cell, do one of the following:

  • Click in the margin of a layout table or cell, and drag the table or cell to a new location.
  • Click on the border of a layout table or cell, and drag the table or cell to a new location.

Case scenario: Contoso Pharmaceuticals

Web developer Lori Kane is working closely with Sheela Word, the customer service department manager in the Consumer Care Division of Contoso Pharmaceuticals, to give the team Web site a fresh look. The customer service workgroup has a Windows SharePoint Services Web site on a department server.

Among other things, Sheela wants the site to include a list of departmental contacts, a location for shared documents, customer service region assignments including photographs of the customer service representatives, and a team tasks list.

From the Layout Tables and Cells task pane, Lori selects the predefined table layout with the following layout characteristics: Header, Body, Footer, and Left.

Select a predefined table layout

This table layout includes a horizontal layout cell across the top of the page that will contain the Consumer Care Division's Customer Service logo and some links to Web site information. It includes a vertical layout cell on the left that will contain the navigation links, and two cells on the right to include the main content.

Lori likes the number of cells provided in this predefined layout table, but she resizes them a bit anyway to meet her content needs.

She sets the properties for the layout cells, including setting the cell margins, specifying the borders and background colors, and adding some corners and shadows to the tabbed-like pages. She then adds the Consumer Care logo in the top layout cell and the navigation links in the left-hand layout cell.

Next Lori goes to work specifying where the content will go in the two right-hand layout cells.

Team Web site for Consumer Care division

Sheela and the customer service team love the new Web site and are already planning a new addition.

Sheela wants to include the latest regional sales numbers. Lori can include that functionality by creating a connection between the sales numbers in a source document and a Web Part in the Web site.

How to create a structured page layout

With the following procedures, you can create a structured page layout by using layout tables and cells. When you add layout tables and cells to your Web pages, you can resize and set properties for the tables and cells, and you can even delete them.

Turn layout tools for layout tables on or off

The layout tools in Microsoft FrontPage are turned off by default.

  • Do one of the following:

ShowTurn the layout tools on

  1. On the Table menu, click Layout Tables and Cells.
  2. In the Layout Tables and Cells task pane, add a layout table.

When you add a layout table, the tools are turned on automatically.

ShowTurn the layout tools off

  1. Click the border of a layout table or cell.
  2. In the Layout Tables and Cells task pane, click Show Layout Tool Button image.

ShowTip

If you maintain a layout table or cell in a page with the layout tools turned off, you can always turn the tools back on by clicking Show Layout Tool Button image.

Add or draw a layout table

  1. On the Table menu, click Layout Tables and Cells.
  2. In the Layout Tables and Cells task pane, do one of the following:

ShowAdd a layout table from the Table layout template list

  • Under Table layout, select a layout table from the list of templates.

ShowDraw a layout table

  1. Under New tables and cells, click Draw Layout Table Button image.
  2. Move the pointer to the leftmost corner of the document window, and then drag to draw the table.
  3. In the Layout Tables and Cells task pane, under Table properties, set the properties that you want.

Set properties for a layout table

  1. In the document window, click the border of the layout table that you want to set properties for.
  2. In the Layout Tables and Cells task pane, under Table properties, select the properties that you want.

ShowTip

To override the default margins of a Web page and let the layout table span to the edges of the document window, set the margin properties to 0 (zero).

Add a cell to a layout table

  1. In the Layout Tables and Cells task pane, under New tables and cells, click Draw Layout Cell Button image.
  2. On the layout table, drag the pointer to draw the cell.
  3. Repeat steps 1 and 2 to add more cells.

ShowTip

To draw two or more cells, one after the other, click Draw Layout Cell Button image, and press and hold CTRL while you drag the pointer.

  1. To set properties for a selected cell, in the Layout Tables and Cells task pane, click Cell Formatting and then select the properties you want.

Set the layout and border properties for a layout cell

  1. In the document window, click the border of the cell that you want to set the layout and border properties for.
  2. In the Layout Tables and Cells task pane, click Cell Formatting.
  3. In the Cell Formatting task pane, click Cell properties and borders, and then do one or more of the following:

ShowSet the layout properties for a layout cell

Under Layout cell properties, do one or more of the following:

ShowSet the border properties for a layout cell

Under Borders, do one or more of the following:

  • To set the thickness of a cell border, in the Width box, type a value in pixels to indicate the width of the border you want.
  • To add color to a cell border, click a color from the Color list.
  • Under Apply, click the button that indicates the type of border you want to apply to the cell.

Set the header and footer properties for a layout cell

  1. In the document window, click the border of the cell that you want to set the header or footer properties for.
  2. In the Layout Tables and Cells task pane, click Cell Formatting.
  3. In the Cell Formatting task pane, click Cell Header and Footer, and then do one or more of the following:

ShowSet the header properties for a layout cell

Under Header, click Show header, and then do one or more of the following:

ShowSet the footer properties for a layout cell

Under Footer, click Show footer, and then do one or more of the following:

Set the corner and shadow properties for a layout cell

  1. In the document window, click the border of the cell that you want to set the corner and shadow properties for.
  2. In the Layout Tables and Cells task pane, click Cell Formatting.
  3. Click Cell Corners and Shadows, and then do one or more of the following:

ShowChange the corner properties of a layout cell

ShowChange the shadow properties of a layout cell

  • Under Shadows, do the following:
    • To set the width of a drop shadow for a cell, in the Width box, type the value that you want in pixels.
    • To set the intensity of a drop shadow of a cell, in the Softness box, type the value that you want in pixels.
    • To add color to a drop shadow of a cell, click a color from the Color list.
    • To add color to a drop shadow of a cell border, click a color from the Border color list.
    • To set the side on which a drop shadow falls, under Apply, click the option that you want.

Resize a layout table or cell

Do one of the following:

ShowResize a layout table or cell in small increments

  1. Click the border of the layout table or cell.
  2. Press and hold ALT, and then drag the border to resize it.

ShowResize a layout table or cell by using autostretch

  1. In Page view, at the bottom of the document window, click Design Button image.
  2. To activate a layout table or cell, click the border.
  3. On the column width or row height label, click the arrow to display the drop-down menu, and then click Make Column Autostretch or Make Row Autostretch.

 Note   You can apply autostretch to only one cell in a layout table. The corresponding rows or columns in the layout table must be set at a fixed width or height.

Delete a layout table or cell

Do one of the following:

ShowDelete a single layout cell

  • Click the border of the layout cell and then press DELETE.

ShowDelete a layout table

Do one of the following:

  • If the layout tools are turned on and the entire layout table is activated, press DELETE.
  • If the layout tools are turned off or the layout table is not activated, in the Layout Tables and Cells task pane, click Show Layout Tool Button image to activate the table, and then press DELETE.
 
 
Applies to:
FrontPage 2003