MACROMEDIA DREAMWEAVER 8-GETTING STARTED WITH DREAMWEAVER Bedienungsanleitung PDF herunterladen (Seite 14)

Chapter 214

Set a relative width table in Standard view

A percentage-based table stretches and shrinks based on the width of a browser window. (For

example if you specify that a table uses a width of 75%, the table stretches to fill 75% of the

horizontal space regardless of the browser window size. This can be useful in some instances, such

as making sure a navigation menu is always displayed when a window is resized.

When you want to set the size of a table regardless of how a user resizes the browser window, use

pixel-based tables. When you want the table to stretch to the size of the browser window,

percentage-based tables are best.

To see the difference in percentage-based and pixel-based tables, you’ll add one of each to a page,

then view it in a browser.

1 In Dreamweaver, choose File > New.

2 In the New Document dialog box, the Basic Page category is already selected; in the Basic

Pages list, double-click HTML to create a new HTML document.

The document opens in the Document window.

3 Save this file to your local site folder. Name it tableWidth.

4 Place the insertion point in the document.

5 In the Common tab of the Insert bar, click the Table button.

6 In the dialog box that appears, set the following options:

In the Rows text box, type 2.

In the Columns text box, type 3.

In the Width text box, type 90, and select Percentage in the pop-up menu to the right of the

Width text box.

In the Border text box, enter 1 to set a 1-pixel border around the table and table cells.

7 Click OK.

The table appears in the document.

8 Click in the top, middle cell and drag to the bottom cell to select the middle column.

9 In the Property inspector, use the color picker to apply a background color to the column.

Create a pixel width based table

Now you’ll add another table. A pixel width table is set to a specific width and doesn’t adjust to

the browser window size.

1 Insert a paragraph return after the table you just inserted.

2 In the Common tab of the Insert bar, click the Table button.

1 2 ... 9 10 11 12 13 14 15 16 17 18 19 ... 65 66

Keine Kommentare

MACROMEDIA DREAMWEAVER 8-GETTING STARTED WITH DREAMWEAVER Bedienungsanleitung Seite 14