FrontPage 2003 Support

Create a structured page layout by using layout tables and cells

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.

• FrontPage 2003 Support

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

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.

   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.

 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.

 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:

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:

   Add a layout table from the Table layout template list

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

   Draw a layout table

   1. Under New tables and cells, click Draw Layout Table
   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.

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
2. On the layout table, drag the pointer to draw the cell.
3. Repeat steps 1 and 2 to add more cells.

   Tip

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

4. 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:

   Set the layout properties for a layout cell

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

   • To set the fixed width or height of a cell, in the Width and Height boxes, type the value that you want in pixels (pixel: A single unit of measurement that your computer's display hardware uses to paint images on your screen. These units, which often appear as tiny dots, compose the pictures displayed by your screen.).
   • To set the padding for the number of pixels between content in a cell and the cell boundaries, in the Padding box, type a value in pixels.
   • To set the vertical alignment of a cell, in the VAlign list, select Top, Middle, or Bottom.
   • To set the background color of a cell, click a color in the BgColor list.

   Set 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:

   Set the header properties for a layout cell

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

   • To change the default, in the Height box, type a value that you want in pixels.
   • To set the cell padding for the number of pixels between the cell header and the cell boundaries, in the Padding box, type a value in pixels.
   • To set the vertical alignment of a cell header, in the VAlign list, click Top, Middle, or Bottom.
   • To set the background color of a cell header, click a color in the BgColor list.
   • To set the thickness of a header cell border, in the Border width box, type a value in pixels to indicate the width of the border you want.
   • To add color to a cell header border, click a color from the Border color list.

   Set the footer properties for a layout cell

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

   • To change the default, in the Height box, type a value that you want in pixels.
   • To set the cell padding for the number of pixels between the cell footer and the cell boundaries, in the Padding box, type a value in pixels.
   • To set the vertical alignment of a cell footer, in the VAlign list, click Top, Middle, or Bottom.
   • To set the background color of a cell footer, click a color in the BgColor list.
   • To set the thickness of a footer cell border, in the Border width box, type a value in pixels to indicate the width of the border you want.
   • To add color to a cell footer border, click a color from the Border color list.

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:

   Change the corner properties of a layout cell

   • Under Corners, do one or more of the following:
     • To add a custom image to a corner of a cell, click Use custom image, and then click Browse to locate the graphic you want to use.
     • To set width or height of a cell corner, in the Width or Height box, type the value that you want in pixels.
     • To add color to a cell corner, click a color from the Color list.
     • To add color to the border of a cell corner, click a color from the Border color list.
     • To apply a corner to the top, bottom, or both top and bottom of a cell, under Apply, click the options that you want.

   Change 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:

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

Resize a layout table or cell by using autostretch

1. In Page view, at the bottom of the document window, click Design .
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:

Delete a single layout cell

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

Delete 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 to activate the table, and then press DELETE.