Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

7.2 Layout Mode

In Layout mode, you can start creating a table-based design using either of the two
drawing toolsthe Layout Cell drawing tool or the Layout Table drawing tool. Both
tools await on the Layout tab of the Insert bar (see Figure 7-3).

7.2.1 How to Draw a Table in Layout Mode

Drawing a table is as simple as dragging. Click the Layout Table tool in the Insert bar's
Layout tab (see Figure 7-3); the cursor changes to a + sign when you move it over the document window. Drag diagonally to create a rectangular boxthe outline of the
table. When you release the mouse button, a gray box appears, complete with green
borders and a tab in the upper left labeled Layout Table (see Figure 7-4).

NOTE

Although Dreamweaver uses the words Layout Table and Layout Cell, they're still just HTML tables
and cells. In other words, a Layout Table is simply a table viewed in Layout mode, and a Layout Cell is just
a table cell viewed in Layout mode. In Standard view, the same items are just called tables and cells. In this
book, you'll see the terms Layout Cell and Layout Table appear when referring to actions you perform while
in Layout mode.

This Layout Table tool may be a bit confusing until you learn some of Dreamweaver's
rules for drawing tables:

If the document is blank when you draw a table, the table appears in the upper-left
corner of the page.

You can't draw a table over anything that's already on the page. If you move the
Table tool over text, the cursor changes to a forbidden () symbol, and nothing happens
when you drag. If there's anything on the pagetext, images, tables, even an
empty paragraphyou must move the cursor to the bottom of the page in order
to draw a table. For this reason, it's usually best to start with a blank document,
draw your tables and cells, and only then add content.

Tables can't overlap. The Table tool won't create a table if you drag over the edge
of an existing one.

You can draw a Layout Table inside another Layout Table, a technique called nesting tables (see Section 7.10). However, you can only draw the second table inside the gray area of the Layout Table. In other words, you can't draw a Layout Table inside a Layout Cell.

To draw a number of tables one after another, without having to keep reselecting the Table tool, hold down the Ctrl () key when drawing a table. The Table tool remains selected between drags.

Tables are made up of rows and columns, a structure Dreamweaver helps maintain by
making the edges of tables snap against nearby tables or cells as you draw. If the cursor
comes within eight pixels of the edge of a cell or another table, the table edge you're
drawing snaps to the other table or cell's edge. This behavior helps you accurately
align the borders of your tables. But if it bothers you, turn this snapping feature off
by pressing the Alt (Option) key as you draw the table.

FREQUENTLY ASKED QUESTION Dreamweaver isn't PageMaker (or QuarkXpress, or InDesign) I'm used to graphic design programs like PageMaker and QuarkXpress. But when I use Dreamweaver's layout mode, I constantly run into problems with my designs. Even though Layout Mode acts similarly to page layout programs, you shouldn't attempt to emulate the kind of freedom available in print design. It's not Dreamweaver's fault. It's just how tables work. Even though you can draw layout cells to create boxes anywhere on a page (as shown here on the left), the resulting HTML is a nightmare (right). If you don't have a background in building HTML tables, the temptation to create these kinds of layouts can be very strong. The best advice when using Layout Mode (and even when building HTML tables in general) is to keep it simple. The tutorial at the end of this chapter includes a good example of using Layout mode to create a well-crafted table. In addition, always keep in mind that you're ultimately just building HTML tables, which isn't the most robust layout tool. So follow the tips in Section 7.7.6, and review the helpful tutorials at www.dwfaq.com/Tutorials/Tables/ . Finally, remember that Cascading Style Sheets is quickly becoming the technique of choice among professional Web designers. CSS offers many of the design options that print designers are accustomed to, including exact placement of content on a page, freedom from the rigid grid pattern of tables, and the ability to overlap images, text and other content. You can read more about that approach in the next chapter.

7.2.2 Layout Table Properties

After drawing a Layout Table, you'll see a rectangular gray square in the document
window. A tab labeled Layout Table appears in the upper-left corner of the table, while
information about the table's width appears at the bottom. (You won't see any of this
helpful information if you've turned on Hide All Visual Aids. To see the measurements,
choose ViewVisual AidsHide All to remove the checkmark next to this option.)
The Property inspector lists additional properties, such as table height, width, and
background color (see Figure 7-5).

NOTE

Table and cell width information usually appears at the bottom of the table, as in Figure 7-5. However,
when a table is below the top of the document window, this information moves to the top.

The Remove Table
Nesting button in the
Property inspector is
available when you
select a Layout Table
that was drawn (or
nested) inside another
Layout Table.
This button converts
the nested table
into cells within the
outer table. The
three other buttons
at the right of the
Property inspector
are described on the
following pages. All
of these options are
also available from
the Layout Table's
menu (bottom).

7.2.2.1 Table dimensions

The width and height of the table appear in the Property inspector. You can adjust
these values by typing new pixel-measurement values in the Fixed and Height fields.
Alternatively, to resize a table, you can drag one of the three handles that appear on
the bottom edge, lower-right corner, and right edge of the table in the document
window.

Instead of having a fixed width, a table can automatically adjust to fit the available space
of your visitor's browser window. To activate this feature, click the Autostretch radio
button in the Property inspector. (See Section 7.2.6 for full detail on flexible layouts.)

If you find the table tabs that appear at the bottom or top of a layout table distracting, you can turn them off. Choose ViewVisual Aids and select the Hide All option. The keyboard shortcut Ctrl+Shift+I (Shift--I) also works.

7.2.2.2 Background color

You can give your table a background color that's independent of the page color. To
pick a background color, click the Bg color box in the Property inspector and select
from the pop-up palette. (You can actually select any color on your screen using the
eyedropper; see Section 1.3.3.)

NOTE

As with most properties that affect the look of an HTML element, CSS now offers an equivalent. You
can use the Background Color property (Section 6.7.2) to create a style that applies a background color to a
table or table cell.

After you click, you may wonder whether Dreamweaver has gone colorblindthe
table's color doesn't match the color you selected. Tables in Layout mode have a light
gray background to indicate empty areas of the table (places where no cells have yet
been drawn). Dreamweaver mixes this gray with the color you selected, creating a
muddy blend. That gray is just for showing you the table's boundaries in Dreamweaver
and doesn't appear in a Web browser.

You can modify this color. Choose EditPreferences (DreamweaverPreferences on the Mac) and click the Layout Mode category. You can modify colors for the table and cell outlines as well as the cell highlight and table background colors.

7.2.2.3 Cell padding and cell spacing

When you add a background color to the cells in a table, you may sometimes want to
create a visual gap between them, like the grout between tiles (but without the mold).
To add this kind of space between cells in a table (see Figure 7-2), type a pixel value in the CellSpace field.

To add margins around all four edges inside a cell, type a pixel value in the CellPad
field. This space keeps the text or graphics inside a cell from touching the edges of the
cell. By default, both the CellSpace and CellPad values are set to 0, which is appropriate
for a design that requires graphics to meet at the edges of cells.

Notice, for example, that the chicken in Figure 7-1 is actually made of four different graphics, each in its own cell. Chopping up a graphic in this way is a typical Web design
trick that lends special flexibility. In Figure 7-1, for example, the chicken graphic
appears to jut straight down into the text area of the Web pagea feat that would
be impossible if the chicken were a single rectangular image. In this case, if either
the CellSpace or CellPad were set above 0, there would be visible gaps between the
segments of the image.

NOTE

Note: There is no CSS equivalent for cell spacing. If you want space between each cell, stick with a table's
cell spacing properties.

However, CSS does provide a more flexible alternative to cell padding. You can use the CSS Padding property
(see Section 6.7.4) to control the padding on each edge of a table cell. In other words, you can indent the left
edge 10 pixels, the top edge 20 pixels and leave the other edges alone. You would create either a class style
or a tag style (Section 6.1.3) for the <table> or <td> tag, and set the Padding property to the dimension you
wish. There's an example of this property in the tutorial in Section 7.12.7.

7.2.3 How to Draw a Layout Cell

With the Layout Cell drawing tool, you can add cells to any Layout Table on the
page. However, you don't need to draw a table before using the Cell drawing tool.
In fact, many people use the Cell tool to sketch out the content areas of their pages,
drawing boxes freehand on the screen and letting Dreamweaver create the rest of the
table to fit.

For example, suppose you have a banner ad that must be placed in the upper-right
corner of the page. First, you could select the Cell tool in the Layout tab of the Insert
bar (see Figure 7-3); the cursor changes to a + sign when it's over an empty area of
a Layout Table or an empty area of the document window. You create a new cell just
by dragging diagonally in the document window or inside an existing Layout Table.
(If you draw a cell inside an existing Layout Table, Dreamweaver creates a rectangular
cell. If you draw a cell in an empty document window, Dreamweaver creates a cell
and a Layout Table that encloses it.) Because tables are organized like a grid, Dreamweaver
must organize cells in rows and columns. To indicate this underlying grid,
Dreamweaver displays white lines projecting from the sides of a cell to indicate the
rows and columns of the table (see Figure 7-6). In addition, as you add more cells to
a table, the cursor snaps to these guidelines, as well as to table edges, when it's eight
pixels away or closer. This snapping feature helps you accurately align the edges of
your cells; once again, you can temporarily override this feature, gaining complete
dragging freedom, by pressing Alt (Option) as you draw the cell.

After drawing a cell, the insertion point blinks patiently inside the newly created cell, awaiting the text or graphics you're about to type, paste, or import. Creating another cell requires another click on the Layout Cell tool. As in the previous tip, however, you can draw several cells in sequence without having to reclick the Layout Cell tool after each just by pressing the Ctrl () key while drawing a cell. The Layout Cell tool remains selected when you release the mouse, ready to draw another cell.

As with Layout Tables, there are some limitations to drawing Layout Cells:

You can't draw a cell over already existing content. If you move the Cell tool over
text, images, or other content on a page, the cursor changes to a symbol and won't
draw over that area.

Cells can't overlap one another.

You can't draw a cell within a cell.

7.2.4 Layout Cell Properties

Like a table, a cell has its own width and height, and can have its own background
color. You set these properties in the Property inspector.

To see the properties for a Layout Cell, first select it by clicking any highlighted edge
of the cell (the edges appear highlighted in red when your cursor approaches). Resize
handles appear around the cell, and the Property inspector displays its attributes (see
Figure 7-6).

When you select
a Layout Cell, the
Property inspector
reflects its size
and cell alignment.
Turning on No Wrap
prevents a cell's contents
from wrapping
to the next line, usually
with ugly results.
Dreamweaver MX
2004 adds the ability
to apply a CSS class
style to the cell using
the new Class menu,
which lists all class
styles for this page.

7.2.4.1 Alignment

By default, content added to a Layout cell aligns with the left side of the cell, and rises
to the top of the cell vertically. You can change either or both of these alignment options
by setting the horizontal and vertical properties of the cell (see Figure 7-6).

To align the content horizontally inside a cell, select the cell, and then choose an
alignment option from the Horz (Horizontal) menu in the Property inspector (see
Figure 7-6):

The Left and Right options align a cell's contents with its left or right walls. (Since Left is the default, choosing Left here only adds unnecessary code to your page.)

The Center option centers the cell contents between the left and right walls of the
cell.

The vertical alignment property works the same way; use the Vert (Vertical) menu
of the Property inspector:

The Top and Bottom options makes the cell contents rest against the cell's top or
bottom edge, respectively.

The Middle option makes the cell contents float in the vertical center of the cell. (This is the default behavior of a cell. Choosing Default instead will give the same
results without adding any additional code.)

The Baseline option aligns the bottom of the first line of text in the cell with the
baseline of text in all the other cells in the row (see Figure 7-7.).

Top: A cell's horizontal (top row) and vertical
alignment (bottom row) properties affect
how contents are aligned within a cell.

Bottom: The baseline option aligns the bottom
of the first line of text in one cell with
the other cells in the row. In other words,
the first line of text in each cell rests on an
invisible line called the baselinerepresented
in this figure by the black underline.

7.2.5 Moving and Resizing Layout Cells and Layout Tables

Once you've drawn cells and tables, you're not locked into that one design. Dreamweaver's
Layout mode provides several ways to adjust the size and position of cells
and tables. As usual, Dreamweaver makes a pleasant task out of a normally timeconsuming
and error-prone job.

To move a cell, drag one of its edges. (Avoid grabbing one of the eight resize handles,
however, or you'll change the cell's size instead of move it.) Dreamweaver lets you
move the cell anywhere within the table. However, you can't move it outside of its
Layout Table, into or overlapping another cell, or into another Layout Table. If you
try, Dreamweaver displays the symbol.

You can nudge a selected cell by 1 pixel at a time by pressing the arrow keys. Hold down the Shift key, too, to nudge the cell 10 pixels per press of the arrow key.

Once you've moved the cell, Dreamweaver redraws the underlying table to accommodate
this change.

Resizing a table or cell is easy: For numerical precision, select the table or cell and use
the Property inspector to adjust the Width and Height values. You can also resize a
table or cell by dragging the handles that appear when you select it. However, since
cells can't overlap one another or extend outside of a table, you can't drag the edge
of a cell over another cell or out of a table.

Different colors
identify Layout
Tables and cells.
A cell outline is
generally blue; when
you move your
mouse over it, the
outline turns red.
Table outlines are
green, and a table's
background is gray.
You can change any
of these colors in the
Preferences box, as
shown here.

7.2.6 Building Flexible Page Layouts in Layout Mode

When you set a fixed width for a Layout Table, as described in Section 7.2.2, it remains
the same width regardless of your visitor's browser window size. This level of certainty
and control is great for making sure elements go where you want them. On the other
hand, fixed-width designs leave large areas of empty space when viewed on larger
monitors (see Figure 7-9 for an example).

One solution is to build flexible tables with Dreamweaver's Autostretch option. Flexible
tables, sometimes called liquid HTML, expand or shrink to fit a browser window's
available display area. In this way, your design can accommodate 15-inch and 21-inch
monitors. (Imagine if newspapers grew or shrank to fit a reader's arm span!)

Flexible table widths
provide one solution
to Web designers'
greatest challenge:
designing pages for
different monitor
and window sizes.
A layout that uses
a fixed width often
has unwanted and
distracting white
space when viewed
on larger monitors.
The top two images,
for example, show
the same fixed
width table viewed
on a small screen
(left) and a wider
one (right). Flexible
tables, on the other
hand, can shrink
or grow to fit the
browser window, as
shown in the bottom
two images.

7.2.6.1 Creating a flexible-width table

Instead of being a certain number of pixels wide, a flexible table always fills the entire
window. To achieve this effect, you must set one column in the table to Autostretch;
that column will expand to fill the page. For instance, in the example in Figure 7-9,
the column containing the headline "Pisces" expands, while the left-hand column,
containing the navigation bar, remains a fixed width.

To create a flexible column, click the down-pointing triangle next to the pixel width
number in the column header (see Figure 7-10) and choose Make Column Autostretch
from the contextual menu. You can also select the cell you wish to make flexible and
click the Autostretch button on the Property inspector. (Although you can also create
a flexible table by selecting the table and setting its width to Autostretch, it's not
necessary to do so. Dreamweaver automatically sets it to Autostretch when you create
a flexible column.)

If you want to change the column back to a fixed width size, use the same menu,
shown in Figure 7-10, to choose Make Column Fixed Width.

7.2.6.2 Adding spacer images

In order for the Autostretch function to work, Dreamweaver uses a transparent image
an actual, see-through GIF file called a spacerto control the spacing of the
columns that don't stretch.

In the column header of
a Layout Table, the number
in quotes"245"is
the width specified in the
HTML for that cell. The
number in parentheses
(247) is the actual width
as it appears onscreen.
This discrepancy can
happen when you insert
something into a fixedwidth
cell that's wider
than the cell itself. The
cure: Choose Make All
Widths Consistent from
the Layout Table menu.

Understanding why Dreamweaver adds these invisible spacer images requires some
understanding of the way it thinks. When you ask it to make the autostretch column
grow as necessary to fill a browser window, Dreamweaver uses a little trick. It sets the
column's width to 100 percent. In other words, the column attempts to take up all the
space available, even space used by other columns. This greedy behavior, of course,
would ordinarily squish the table's other columns into hyper-thinness. That's why
Dreamweaver inserts a spacer image (of the width you've specified) into each fixed width
column. The image acts like a steel beam across the walls of the fixed-width
column, reinforcing it and preventing it from shrinking smaller than the size of the
spacer image (see "Do the Math" in Section 7.7.6.4).

The first time you make a column an autostretcher, Dreamweaver opens a Choose
Spacer Image dialog box. It offers you three choices:

Create a spacer image file. If you choose this option, Dreamweaver will create a 1-pixel by 1-pixel, transparent GIF image and prompt you to name the file and
save it into any folder of your Web site.

Use an existing spacer image file. If you're already using a 1-pixel by 1-pixel transparent GIF (a standard Web-design tool), choose this option. Dreamweaver then
lets you browse to and select the GIF file in your site folder. (For one use for such
an image, see "Shrinking Down to a Pixel" in Section 7.7.6.5.)

Don't use spacer images for autostretch tables. This is not a wise choice if you want to use the Autostretch feature; it also doesn't work in Netscape 4. Most likely,
your fixed width columns will appear much smaller than you intended.

NOTE

After you've set the spacer image for the site, Dreamweaver continues to use that file whenever
you need one. You can select a different file at any time from the EditPreferencesLayout mode tab
(Dreamweaver MXPreferencesLayout mode in Mac OS X), as shown in Figure 7-8.

While Dreamweaver automatically inserts spacer GIFs, you can also add them manually
by choosing Add Spacer Image from the column header menu (see Figure 7-10).
This command is grayed out if you turned on the "Don't use spacer images" option
in the Choose Spacer Image dialog box.

7.2.6.3 Removing spacer images

To remove a spacer image from a column, choose Remove Spacer Image from the
column header menu. You can also remove all of the spacer images on a page by
choosing Remove All Spacer Images from the Layout Table menu, or by clicking the
Remove Spacer Images button on the Property inspector when a table is selected
(see Figure 7-5).

WORKAROUND WORKSHOP Where Does the Spacer Image Go? When inserting a transparent, 1-pixel-tall spacer image in a column, Dreamweaver creates a new table row at the bottom of the table. The spacer image is inserted in each fixed-width cell in that row. Keep this behavior in mind if you try to place one table on top of another. If the two tables need to touch seamlesslyfor example, if two cells in two separate tables share the same color and need to appear connectedthat 1-pixel tall row created by the spacer images creates a 1-pixel gap between the two tables. Unfortunately, you can't solve this dilemma in Dreamweaver's visually oriented Design view. You must delve into the HTML code; after consulting Chapter 10, choose View Code to open Dreamweaver's Code view. You'll need to locate the closing Table tag for the offending autostretch table. Directly above that, you'll find a single table row composed of an opening <tr> tag, several lines of <td> (table data or cells) tags, and a closing </tr> tag. Select the entire row, cut it, and paste it directly after the opening <table> tag. This essentially moves that bottom row (containing the spacer) to the top, and allows the table to rest seamlessly on any table directly below it. And what if you also want to prevent a gap at both the top and the bottom of an autostretch table? Go to the page's HTML source code and locate the last row of the table, the one containing only spacer images. Delete it. Then, back in Design view (ViewDesign), click inside one cell in each fixed width column, insert a spacer image (see Section 5.1.1), and set its width to match the desired width of that column. (These cells probably contain text or images. Insert the space image after any content in the cell.)

7.2.7 Using a Tracing Image

Layout mode lets you draw your designs directly in the document window, which is
a wonderful feature. However, unless you can visualize the layout you want, you may
feel that you're just aimlessly drawing boxes on a blank canvas.

Dreamweaver's Tracing Image feature helps you find your way around the dreaded
blank screen. With it, you can import a graphic representation of your finished page
designa sketch you've created in a more art-oriented program like, say, Fireworks
or Photoshopand use it as a pattern for tracing the table and cells of your page. In
fact, it's very common in the Web-design biz to work up, in a program like Photoshop,
a graphic that looks like a finished Web pagebut it's one giant image, without
individual buttons, tables, or editable text (see Figure 7-11).

To add a tracing image to your page, choose ModifyPage Properties (or choose
ViewTracing ImageLoad); the Page Properties dialog box opens (see Figure
7-11). Select the Tracing Image category and click the Browse button near the bottom
of the window (next to the Tracing Image field); find and open a GIF, JPEG, or PNG
file to use as the background image.

Now use the Image Transparency slider shown in Figure
7-11. To fade the image into the background of the page, move the slider toward the transparent setting, making
it easier to distinguish between the tracing image and the actual content on the Web
page.

When you click OK, you return to your Web page with the tracing image in place.
(The tracing image appears only in Dreamweaver, never on the Web.)

Top: You can hide or show the tracing
image using the Options menu
icon at the top of the document
window.

Bottom: In addition to setting
various properties for a Web page
such as text color, margins, and
background color, the Page Properties
window lets you add a tracing
image to your document and fade it
into the background as much as you
want. In this example, the tracing
image represents a banner for the
National Exasperater Web site. As
you can see by the Transparency
slider, it's been faded to 55 percent
into the background of the page.

7.2.7.1 Hiding a tracing image

If you want to temporarily hide a tracing image, choose Tracing Image in the toolbar's
View Options menu (shown at top in Figure 7-11); choose the same command again to show it. (The long way: Choose ViewTracing Image and turn off the Show option.)

7.2.7.2 Moving a tracing image

When you first select a tracing image, it appears against the top and left margins, if
you've specified them (see step 12 in Section 1.3.3). If you didn't specify margins, Dreamweaver places the tracing image several pixels from the left and top edges of the document
windowjust where it would put text or graphics into a new Web page.

You can't just drag the tracing image elsewhere on the page. If you need it anywhere
other than the upper-left corner, choose ViewTracing ImageAdjust Position. Type
pixel values in the X and Y fields in the Adjust Tracing Image dialog box; the X value
is the distance from the left edge, and the Y value is the distance from the top edge.

You can also align the tracing image to a selected object on the page, which comes in
handy when you want to use a tracing image to create a portion of a Web pagea
footer or sidebar element, for example. Select the element on the page and then choose
ViewTracing ImageAlign with Selection. The tracing image's upper-left corner
aligns with the upper-left corner of the selected element. (In the case of a table cell,
however, Dreamweaver isn't so smart. It aligns the tracing image with the top-left
corner of the table containing the cell, not the cell itself.)

NOTE

To reset the tracing image to the upper-left corner of the page, choose ViewTracing ImageReset
Position. Unfortunately, this command doesn't place the image in its original position, at the margins of the
page; it merely places it at the very corner (the 0,0 position) of the document window. You'll probably need
to adjust it by choosing ViewTracing ImageAdjust Position. (To restore the default values, use 8 pixels
along the X axis and 11 pixels along the Y axis.)

Once you've finished building the Web page, it's a good idea to remove the tracing
image. Not only is it distracting when you view the page in Dreamweaver, but
Dreamweaver introduces extra lines of Dreamweaver-specific HTML to accommodate
it. These extra bandwidth-consuming bytes are unnecessary once the page is
complete.

To remove a tracing image from a page, open the Page Properties dialog box once
again, and then select and delete the file name in the Tracing Image field.

Tracing images aren't just for the Layout mode. You can use a tracing image anytimea handy feature when you're using Dreamweaver's Layers tools (see Chapter 8).