HTML in 10 Steps or Less- P28 doc

Figure 243-2: Setting table dimensions and attributes more precisely Figure 243-3: A table ready to house text, images, or simply blocks of color based on cell background colors cross-re

Inserting Tables

Tables may be one of the most powerful design features you can employ in a Web page — and FrontPage makes creating and customizing tables so easy, you’ll find yourself using them all the time to control the placement of text and images

1. In Page view, click to place your cursor where the new table should appear

2. Determine ahead of time the number of rows and columns for your table You can do this in any number of ways, as described in Steps 3 and 4

3. Click the Insert Table button on the toolbar and drag through the resulting grid (see Figure 243-1) to indicate the dimensions of the table

Figure 243-1: Dragging through the grid in the Insert Table tool

4. You can also choose Table ➪ Insert ➪ Table to open the Insert Table dialog box (see Figure 243-2)

5. Click OK to insert the prescribed table (see Figure 243-3)

note

• Use the Borders and

Shading command

dis-cussed in the previous task

to apply borders and

shad-ing to individual cells,

sin-gle rows or columns, or to

an entire table Just select

the portion of the table you

want to border or shade

and then choose Format ➪

Borders and Shading.

• Using the Insert Table dia-log box allows you to per-form several table-planning tasks in one place Set table dimensions; establish cell alignment, spacing, and padding; and choose border options You can also apply a background

to your table.

Figure 243-2: Setting table dimensions and attributes more precisely

Figure 243-3: A table ready to house text, images, or simply blocks of color based on cell background colors

cross-reference

• Learn to insert a table with Dreamweaver (see Task 207).

Adding and Deleting Table Rows, Columns, and Cells

Once you build a table, you can always make changes later Insert new rows or delete existing ones, and add or delete columns

1. In Page view, select the column (see Figure 244-1) or row you want

to delete, or click next to where a new column or row should appear Look for a small black arrow just outside a column or row and then click to select it

Figure 244-1: Selecting a table column

2. To delete the selected row or column, choose Table ➪ Delete ➪ Rows, or Columns (depending on what you’re doing) The selected row or column disappears

3. To insert a new column or row next to the selected table content, choose Table ➪ Insert ➪ Rows, or Columns (depending on what you’re doing) The Insert Rows or Columns dialog box opens (see Figure 244-2)

note

• If you start out with a

col-umn selected and choose

to insert one or more

additional columns, the

Location options will be

Left of Selection and Right

of Selection If you start out

with a row selected, your

choices for Location will be

Above Selection or Below

Selection.

• Use this technique to build

a single-cell table (where there was no table at all before) Just click where you want the cell to appear

on the page and choose Table ➪ Insert ➪ Cell Resize the cell and adjust its border and background settings by choosing Table ➪ Properties ➪ Cell.

Figure 244-2: Selecting how many new rows or columns to add, and where they should appear

4. To insert a lone cell within a table, first click in the cell that should be

to the left of the new one

5. Choose Table ➪ Insert ➪ Cell A single cell appears to the right of

the selected cell (see Figure 244-3)

Figure 244-3: Adding a single cell to a block of cells

cross-reference

• You can build a single cell in Dreamweaver, too (see Part 15).

Splitting and Merging Table Cells

It’s easy to change the dimensions of a table after you’ve created it You can break existing cells into more cells or merge two or more cells into a single large cell Splitting or merging cells makes it possible to build tables that accom-modate your content as you want to present it, with the layout you had in mind

By using the Split Cells and Merge Cells commands, you achieve a greater degree of flexibility than can sometimes be achieved by adding whole rows and columns

1. To split a single cell into multiple cells, start by clicking in the cell you want to split

2. Choose Table ➪ Split Cells to open the Split Cells dialog box (see Figure 245-1)

Figure 245-1: Making two or more cells from a single cell

caution

• You can split a single cell

into two or more rows or

into two or more columns.

If you need to create both

rows and columns from a

single cell, repeat Steps 2

through 4 until you’ve

achieved the number of

new cells you want.

• Merge all cells in the top row of a table to create a handy place for the table’s title.

3. In the Split Cells dialog box, enter the number of columns or rows

you want to create from the cell

4. Click OK The cell splits (see Figure 245-2)

Figure 245-2: Splitting a single cell into three cells

5. To merge two or more cells into one, start by selecting the cells —

they must be adjoining cells, either side by side, above or below each other, or in a block

6. Choose Table ➪ Merge Cells The cells merge into one This can be

useful for creating a single cell to house a table’s title, to create a big cell for a lot of text, or to make room for a large image without changing the entire table’s layout

cross-reference

• Controlling table dimen-sions in HTML, including cell merging and splitting,

is covered in Part 6.

Resizing and Reformatting Table Cells

FrontPage makes it easy to change any aspect of a cell’s appearance, size, and position

1. To resize a table cell in Page view, point to a side border on the cell

in question and look for your mouse to change to a two-headed arrow (see Figure 246-1)

Figure 246-1: A two-headed resizing arrow appears when you mouse over a cell’s border

notes

• The Cell Properties dialog

box allows you to adjust

the cell height Unless you

prefer to resize things “by

eye,” skip the mouse

tech-nique altogether.

• You can enter numbers

either as a pixel height or

width, or as a percentage

of the current size For

example, if you enter 50

and choose In Percent, the

cell will be reduced by half.

• The Horizontal and Vertical

Alignment settings don’t

affect the appearance of

an empty cell but they do

affect the alignment of

what you put in the cell.

• Open the Cell Properties dialog box by right-clicking the cell and choosing Cell Properties from the short-cut menu.

• The Rows Spanned and Columns Spanned fields don’t explain themselves very accurately to anyone not completely familiar with table construction in HTML.

The concept of spanning

other parts of the table comes from the colspan attribute in HTML (see Task 45) What happens when you use these options is the same as when you use Table ➪ Merge Cells and Table ➪ Split Cells If your selected cell is changed to span two columns, it appears like two merged cells above or below the cells that remain in two columns If you span two or more rows, the single cell overlaps the number of cells (vertically) that you specified

in the field.

2. Click and drag to resize the cell Drag outward to make the cell

larger, or inward to make it smaller Unlike Dreamweaver, which allows you to resize table cells vertically as well as horizontally (see Task 208), FrontPage sticks to the pixel height set when the table was created; you cannot drag to make a cell taller or shorter

3. To make fine adjustments over and above (or instead of) the changes

you can make manually with the mouse, click in the cell you want to resize and choose Table ➪ Table Properties

4. From the submenu, choose Cell to open the Cell Properties dialog

box (see Figure 246-2)

Figure 246-2: Adjusting the size, fill, border, and alignment of any selected cell with the Cell Properties dialog box

5. Using the Cell Properties dialog box, enter new numbers in the

Specify Height and Specify Width fields

cross-reference

• Adjusting cell height and width in HTML is a matter

of entering new values for table properties (see Part 6).

Populating a Table with Graphics and Text

Inserting a picture or text in a table is a little more complicated than doing so on

a simple Web page You have to choose which cell contains the picture or text and inform FrontPage how to align the content (horizontally and vertically) You can also format the text to fit within the table if the table’s dimensions are dic-tated by the page design or some other constraint

1. To insert a graphic inside a table cell, click within the cell to select it (see Figure 247-1)

Figure 247-1: Populating your table by clicking in the first cell to receive content

2. Choose Insert ➪ Picture ➪ Clip Art, or From File — whichever is appropriate for the image you want to insert

3. Once the image appears in the cell, manipulate its placement by using the Formatting toolbar (see the relevant tools in Figure 247-2)

Figure 247-2: Applying horizontal alignment from the formatting toolbar by clicking the Left, Center, or Right alignment buttons

To access more tools for controlling cell content, right-click the cell and choose Cell Properties (see Figure 247-3)

Center alignment

Left alignment Right alignment

notes

• The Justify alignment

but-ton is only for text It

cre-ates a straight right margin

so there’s no jagged edge

of text This form of

align-ment does not apply to

graphics (which have no

edge, of course).

• Text vertical alignment is

Middle by default If you

want to have the text start

at the top of the cell,

choose Top from the

Vertical Alignment

drop-down list.

• Merge cells before typing text into them Alternatively, use the Cell Properties dialog box and enter a number of columns for your text to span.

Figure 247-3: Specifying horizontal and vertical alignment for the cell’s content in the Cell Properties dialog box

4. To add and format text in a table cell, click inside the cell and simply

start typing You can also use the Paste command (Edit ➪ Paste or Ctrl+V) to copy text from elsewhere — a Microsoft Word document

or another Web page — and see it fill the cell (see Figure 247-4)

The cell’s dimensions control word-wrapping within the cell

Figure 247-4: Text and images inserted into table cells

5. Continue typing in cells, using the cell resizing techniques discussed

in Task 246 to make the cells the right width for the overall page and table design, as well as to accommodate your text The size of the cell when you start typing dictates the width of any paragraph you type (see Figure 247-4)

6. After typing in any particular cell, reopen the Cell Properties dialog

box (by right-clicking the cell, not the text) and make sure No Wrap

is turned off (it’s off by default) so that your table cells don’t widen to accommodate your text They’ll lengthen but you may not want them to widen, which could throw off the overall table layout

cross-reference

• Fine-tune your tables in HTML (see Part 6).

Creating Frames

Frames are Web pages within a frameset Once you add frames to a Web page, that page goes from being a simple Web page to being a home (frameset) to one or more frames that are pages unto themselves Through FrontPage’s frame-creation and customization tools you can determine where frames appear, how big they are, how to display their content, and whether or not visitors can resize them in the browser

1. Choose File ➪ New to open the New task pane

2. In the New task pane select More Page Templates

3. In the Page Templates dialog box, click the Frames Pages tab to see a series of frame constructs you can apply to the new page

4. Click once on each of the Frames Pages icons Each one displays a different preview, which shows you the arrangement of frames within that template

5. Double-click the Frames Page template you want to use and see the frames created on a new page (see Figure 248-1)

Figure 248-1: Creating frames automatically from a template instead of one at a time

by hand

6. Click the appropriate button (Set Initial Page or New Page) in each frame

7. Resize the frames as needed by pointing to their borders and drag-ging with your mouse

note

• Clicking Set Initial Page

brings up the Insert

Hyperlink dialog box, which

allows you to choose a Web

page (by entering a URL) or

an existing HTML file stored

locally on your server.

Either option displays the

page within that frame.

Clicking New Page inserts a

blank Web page within the

frame Use FrontPage to

populate that page with

text and graphics.

caution

• Frames pages are usually

ignored by search engines.

This makes using frames

slightly risky if you rely on

visitors coming to your site

from Yahoo or Google.

• Add what’s called an inline frame to an existing page Choose Insert ➪ Inline Frame and click New Page (one of the two buttons that appears inside this new “box” on your page) This creates a frame within your page, rather than turn-ing your entire page into a frames page or frameset.

• If you chose New Page as the content for a given frame, right-click the frame and choose Page Properties from the short-cut menu to format the page (within the frame)

as you would any other Web page You can even use the Format ➪ Theme command on an individual frame and apply a separate theme to that frame only.

8. To customize an individual frame, right-click it and select the Frame

Properties button to open the Frame Properties dialog box (shown in Figure 248-2)

Figure 248-2:Naming your frame and choosing how the frame looks and functions for the user

9. Once the frames are set up as you want them, proceed to add content

to them, inserting text and graphics as desired (see Figure 248-3)

Figure 248-3: Each frame contains original content you inserted or displays an existing page from another site

Change Show Scrollbar option depending on need Allow visitors to resize frame Set inner frame margins Resize frame

cross-reference

• Learn how to format frames

in HTML in Part 8.

Adding Layers

Layers are like frames that float above the Web page, and by virtue of the fact that they’re not part of a rigid frameset, you have greater flexibility in their placement, size, and relationship to other content on the page You can size and format them easily, and they can contain anything you want: images, text, tables, even other layers Some older versions of browsers don’t display them, however,

so use them judiciously if you know your audience is likely to view your site with older computers, older operating systems, and older browsers

1. In Page view, click to position your cursor where the layer should appear

2. Choose Insert ➪ Layer A layer appears on the page (see Figure 249-1)

Figure 249-1: A small box with a numbered Layer tab appears on the page

3. Move the layer, as needed, with your mouse Point to the layer and when your mouse turns to a four-headed arrow, drag to reposition the layer

4. If desired, resize the layer by clicking on it to display its handles (see Figure 249-2) and drag from any handle to increase or decrease it

5. To build layer content, click inside the layer and use FrontPage’s tools

to insert and format text, and to insert graphics (see Figure 249-3)

6. Right-click the layer and choose Page Properties to open the Page Properties dialog box Here you make adjustments to the layer’s background, font colors, and font sizes and adjust internal margins

note

• By default, layers are clear

so you can see your main

page content through

them.

caution

• Avoid putting essential,

not-to-be-missed content

in a layer on your page.

Visitors who use an old

browser (prior to version

4.0) won’t be able to see

the layer at all.