Download FrontPage 2003

Microsoft FrontPage 2003
Illustrated Complete
Designing Web Pages
with Layout Tables
Objectives




Use the Draw pointer
Create an interactive button
Understand layout tables
Use a layout table to format a new
page
Designing Web Pages with Layout Tables
Unit K
2
Objectives




Work in a layout cell
Format a layout cell
Draw a new layout cell
Create a custom link bar
Designing Web Pages with Layout Tables
Unit K
3
Designing Web Pages with
Layout Tables



Use tables to create a framework or
structure to organize and store the
content of Web pages and sites
Tables allow you to design pages in
tables and rows
Almost all browsers display tables
consistently
Designing Web Pages with Layout Tables
Unit K
4
Using the Draw Pointer

Three methods for creating a table in a
Web page:
– Table menu
– Insert Table button on the Standard toolbar
– Draw Table pointer

The Draw Table pointer is a good choice
when you are experimenting with how you
want your table to look or when you need
to draw new cells in an existing table
Designing Web Pages with Layout Tables
Unit K
5
Using the Draw Pointer (cont.)

New column being added to a table
Draw Table
pointer
Designing Web Pages with Layout Tables
Unit K
6
Creating a Nested Table


A nested table is a table that appears
in one cell of another table
Useful for controlling the format and
appearance of table data
Designing Web Pages with Layout Tables
Unit K
7
Creating an Interactive Button

An Interactive button (also called a hover
button) is a button in a Web page that
changes appearance when the pointer
moves over it
 Interactive buttons are animated
 The act of moving the pointer over an
interactive button is called mouse over
 Interactive buttons usually contain
hyperlinks
Designing Web Pages with Layout Tables
Unit K
8
Creating an Interactive Button
(cont.)

Interactive
Buttons dialog
box
Designing Web Pages with Layout Tables
Unit K
9
Understanding Layout Tables



A layout table is a framework that
organizes the content of an entire
page
You can use a layout table instead of
creating a new Web page and then
adding a table to it
Each cell in a layout table can
contain content such as images, text,
and hyperlinks
Designing Web Pages with Layout Tables
Unit K
10
Understanding Layout Tables
(cont.)



You can create a layout table by
using a table layout template or by
drawing your own layout table
After creating a layout table, you can
change its properties just like you
can with regular tables
A layout table’s framework is divided
into regions called layout cells
Designing Web Pages with Layout Tables
Unit K
11
Understanding Layout Tables
(cont.)


Changing a column or row to
autostretch means that the browser
will automatically resize the layout
cell to fill the available space in the
browser window
A spacer image is a picture that
serves as an empty placeholder to
add space between layout cells in the
table
Designing Web Pages with Layout Tables
Unit K
12
Understanding Layout Tables
(cont.)


When you select a layout cell’s
border, sizing handles appear around
the layout cell
Unlike working in regular tables,
resizing a layout cell in a layout table
does not automatically resize the
other layout cells in the layout table
Designing Web Pages with Layout Tables
Unit K
13
Understanding Layout Tables
(cont.)

Layout table created from a template
Designing Web Pages with Layout Tables
Unit K
14
Understanding Layout Tables
(cont.)

You can use the
Layout Tables and
Cells task pane to
modify a layout table
Designing Web Pages with Layout Tables
Unit K
15
Understanding Layout Tables
(cont.)

You can use the Cell
Formatting task pane to
modify cells
Designing Web Pages with Layout Tables
Unit K
16
Using a Layout Table to Format
a New Page


If you want to use a layout table to
format the page’s contents, you need
to display the Layout Tables and
Cells task pane
To use a layout table to design an
entire Web page, the page cannot
include any shared borders
Designing Web Pages with Layout Tables
Unit K
17
Using a Layout Table to Format
a New Page (cont.)

Layout table added to Web page
Designing Web Pages with Layout Tables
Unit K
18
Working in a Layout Cell

There are multiple ways to create a
new layout cell:
– Use the Draw Layout Cell button on the
Layout Tables and Cells task pane and
use the pointer to draw a new cell
– Click the Insert Layout Cell link on the
Layout Tables and Cells task pane
– Use the Tables toolbar buttons to split
an existing layout cell or insert rows
and columns
Designing Web Pages with Layout Tables
Unit K
19
Formatting a Layout Cell


After adding content to layout cells,
you can use the Cell Formatting task
pane to change the borders, colors,
and spacing of layout cells
In most cases, any formatting that
you can apply to a cell in a regular
table is allowed in a layout cell
Designing Web Pages with Layout Tables
Unit K
20
Formatting a Layout Cell (cont.)

Borders added to layout cells
border
Designing Web Pages with Layout Tables
Unit K
21
Drawing a New Layout Cell
There’s one significant difference between
working in a regular table and working in a
layout table:
When you insert a layout cell in a layout
table, the size and dimensions of
existing layout cells in the the layout
table do not change to accommodate it
 If you want to insert a new layout cell, you
must make room for it

Designing Web Pages with Layout Tables
Unit K
22
Creating a Custom Link Bar


You can create a custom link bar
when you want to include links to
only selected pages in a Web site
You can create one or more custom
link bars in a Web site as necessary,
and multiple pages can use the same
custom link bar
Designing Web Pages with Layout Tables
Unit K
23
Creating a Custom Link Bar
(cont.)

Creating a custom link bar navigation
structure
Designing Web Pages with Layout Tables
Unit K
24
Creating a Custom Link Bar
(cont.)

Link Bar Properties dialog box
Designing Web Pages with Layout Tables
Unit K
25
Summary




Using the Draw pointer
Creating an interactive button
Understanding layout tables
Using a layout table to format a new
page
Designing Web Pages with Layout Tables
Unit K
26
Summary




Working in a layout cell
Formatting a layout cell
Drawing a new layout cell
Creating a custom link bar
Designing Web Pages with Layout Tables
Unit K
27