Microsoft FrontPage 2003 Illustrated Complete Designing Web Pages with Layout Tables

Microsoft FrontPage 2003 Microsoft FrontPage 2003 Illustrated CompleteIllustrated Complete

Designing Web Pages Designing Web Pages with Layout Tableswith Layout Tables

2Designing Web Pages with Layout Tables Unit K

Use the Draw pointerUse the Draw pointer Create an interactive buttonCreate an interactive button Understand layout tablesUnderstand layout tables Use a layout table to format a new Use a layout table to format a new

pagepage

ObjectivesObjectives


ObjectivesObjectives

Work in a layout cellWork in a layout cell Format a layout cellFormat a layout cell Draw a new layout cellDraw a new layout cell Create a custom link barCreate a custom link bar


Designing Web Pages with Designing Web Pages with Layout TablesLayout Tables Use tables to create a framework or Use tables to create a framework or

structure to organize and store the structure to organize and store the content of Web pages and sitescontent of Web pages and sites

Tables allow you to design pages in Tables allow you to design pages in tables and rowstables and rows

Almost all browsers display tables Almost all browsers display tables consistentlyconsistently


Using the Draw PointerUsing the Draw Pointer

Three methods for creating a table in a Three methods for creating a table in a Web page:Web page:– Table menuTable menu– Insert Table button on the Standard toolbarInsert Table button on the Standard toolbar– Draw Table pointerDraw Table pointer

The Draw Table pointer is a good choice The Draw Table pointer is a good choice when you are experimenting with how you when you are experimenting with how you want your table to look or when you need want your table to look or when you need to draw new cells in an existing tableto draw new cells in an existing table


Using the Draw Pointer (cont.)Using the Draw Pointer (cont.)

New column being added to a tableNew column being added to a table

Draw Table pointer


Creating a Nested TableCreating a Nested Table

A A nested tablenested table is a table that appears is a table that appears in one cell of another tablein one cell of another table

Useful for controlling the format and Useful for controlling the format and appearance of table dataappearance of table data


Creating an Interactive ButtonCreating an Interactive Button

An An Interactive button Interactive button (also called a(also called a hover hover buttonbutton) is a button in a Web page that ) is a button in a Web page that changes appearance when the pointer changes appearance when the pointer moves over itmoves over it

Interactive buttons are animatedInteractive buttons are animated The act of moving the pointer over an The act of moving the pointer over an

interactive button is called interactive button is called mouse overmouse over Interactive buttons usually contain Interactive buttons usually contain

hyperlinkshyperlinks


Creating an Interactive Button Creating an Interactive Button (cont.)(cont.)

Interactive Interactive Buttons dialog Buttons dialog boxbox


Understanding Layout TablesUnderstanding Layout Tables

A A layout tablelayout table is a framework that is a framework that organizes the content of an entire organizes the content of an entire pagepage

You can use a layout table instead of You can use a layout table instead of creating a new Web page and then creating a new Web page and then adding a table to itadding a table to it

Each cell in a layout table can Each cell in a layout table can contain content such as images, text, contain content such as images, text, and hyperlinksand hyperlinks


Understanding Layout Tables Understanding Layout Tables (cont.)(cont.) You can create a layout table by You can create a layout table by

using a table layout template or by using a table layout template or by drawing your own layout tabledrawing your own layout table

After creating a layout table, you can After creating a layout table, you can change its properties just like you change its properties just like you can with regular tablescan with regular tables

A layout table’s framework is divided A layout table’s framework is divided into regions called into regions called layout cellslayout cells


Understanding Layout Tables Understanding Layout Tables (cont.)(cont.) Changing a column or row to Changing a column or row to

autostretchautostretch means that the browser means that the browser will automatically resize the layout will automatically resize the layout cell to fill the available space in the cell to fill the available space in the browser windowbrowser window

A A spacer imagespacer image is a picture that is a picture that serves as an empty placeholder to serves as an empty placeholder to add space between layout cells in the add space between layout cells in the tabletable


Understanding Layout Tables Understanding Layout Tables (cont.)(cont.) When you select a layout cell’s When you select a layout cell’s

border, sizing handles appear around border, sizing handles appear around the layout cellthe layout cell

Unlike working in regular tables, Unlike working in regular tables, resizing a layout cell in a layout table resizing a layout cell in a layout table does not automatically resize the does not automatically resize the other layout cells in the layout tableother layout cells in the layout table


Understanding Layout Tables Understanding Layout Tables (cont.)(cont.) Layout table created from a templateLayout table created from a template


Understanding Layout Tables Understanding Layout Tables (cont.)(cont.) You can use the You can use the

Layout Tables and Layout Tables and Cells task pane to Cells task pane to modify a layout tablemodify a layout table


Understanding Layout Tables Understanding Layout Tables (cont.)(cont.)

You can use the Cell You can use the Cell Formatting task pane to Formatting task pane to modify cellsmodify cells


Using a Layout Table to Format Using a Layout Table to Format a New Pagea New Page If you want to use a layout table to If you want to use a layout table to

format the page’s contents, you need format the page’s contents, you need to display the Layout Tables and to display the Layout Tables and Cells task paneCells task pane

To use a layout table to design an To use a layout table to design an entire Web page, the page cannot entire Web page, the page cannot include any shared borders include any shared borders


Using a Layout Table to Format Using a Layout Table to Format a New Page (cont.)a New Page (cont.)

Layout table added to Web page Layout table added to Web page


Working in a Layout CellWorking in a Layout Cell

There are multiple ways to create a There are multiple ways to create a new layout cell:new layout cell:– Use the Draw Layout Cell button on the Use the Draw Layout Cell button on the

Layout Tables and Cells task pane and Layout Tables and Cells task pane and use the pointer to draw a new celluse the pointer to draw a new cell

– Click the Insert Layout Cell link on the Click the Insert Layout Cell link on the Layout Tables and Cells task paneLayout Tables and Cells task pane

– Use the Tables toolbar buttons to split Use the Tables toolbar buttons to split an existing layout cell or insert rows an existing layout cell or insert rows and columnsand columns


Formatting a Layout CellFormatting a Layout Cell

After adding content to layout cells, After adding content to layout cells, you can use the Cell Formatting task you can use the Cell Formatting task pane to change the borders, colors, pane to change the borders, colors, and spacing of layout cellsand spacing of layout cells

In most cases, any formatting that In most cases, any formatting that you can apply to a cell in a regular you can apply to a cell in a regular table is allowed in a layout celltable is allowed in a layout cell


Formatting a Layout Cell (cont.)Formatting a Layout Cell (cont.)

Borders added to layout cellsBorders added to layout cells

border


Drawing a New Layout CellDrawing a New Layout Cell

There’s one significant difference between There’s one significant difference between working in a regular table and working in a working in a regular table and working in a layout table:layout table:

When you insert a layout cell in a When you insert a layout cell in a layout layout table, the size and dimensions table, the size and dimensions of of existing layout cells in the the layout existing layout cells in the the layout

table do not change to table do not change to accommodate itaccommodate it

If you want to insert a new layout cell, you If you want to insert a new layout cell, you must make room for itmust make room for it


Creating a Custom Link BarCreating a Custom Link Bar

You can create a custom link bar You can create a custom link bar when you want to include links to when you want to include links to only selected pages in a Web siteonly selected pages in a Web site

You can create one or more custom You can create one or more custom link bars in a Web site as necessary, link bars in a Web site as necessary, and multiple pages can use the same and multiple pages can use the same custom link barcustom link bar


Creating a Custom Link Bar Creating a Custom Link Bar (cont.)(cont.) Creating a custom link bar navigation Creating a custom link bar navigation

structurestructure


Creating a Custom Link Bar Creating a Custom Link Bar (cont.)(cont.) Link Bar Properties dialog boxLink Bar Properties dialog box


SummarySummary

Using the Draw pointerUsing the Draw pointer Creating an interactive buttonCreating an interactive button Understanding layout tablesUnderstanding layout tables Using a layout table to format a new Using a layout table to format a new

pagepage


SummarySummary

Working in a layout cellWorking in a layout cell Formatting a layout cellFormatting a layout cell Drawing a new layout cellDrawing a new layout cell Creating a custom link barCreating a custom link bar

Documents

Microsoft FrontPage 2003 Illustrated Complete Designing Web Pages with Layout Tables