The Convert Layers to Table Command Page 11
September 20, 2002
Another Dreamweaver layout aid that can help you create tables without coding
tables is the Convert Layers to Table command. This command is provided as
an aid to those who like designing pages using layers, with all the advantages
of drag-and-drop and pixel-specific positioning; but who do not want their
finished layouts to remain in layers, perhaps because they are concerned about
inconsistent browser support of layer-based layouts. (See the next chapter
for more on using layers for page layout.) Using this command, you can create
your layout using layers, and convert the layers to a table-based layout when
everything is set to your liking.
Note
The Convert Layers to Tables command has a bug (a flaw in the way
the software performs) of which you should be aware. It is very similar
to the problem with Layout View discussed earlier in this chapter. Convert
Layers to Tables often creates empty table cells; this code will cause your
pages to display poorly in some browsers. For this reason, it is recommend
that if you use the Convert Layers to Tables command, be sure to place either
non-breaking space characters or spacer GIFs in these empty table cells.
This can be done manually in Code view, or by using Find and Replace.
Note
Convert Tables to Layers is intended to be used in conjunction with Convert
Layers to Tables, so that a layout can be converted back to layers for future
modifications.
The Basics of Converting Layers to Table
Essentially, this is a simple command, though it does require some care in
setting up your layer-based layout before it will work properly. It requires
setting up your layers a certain way, doing some planning as you build, and
making some strategic decisions as you apply the command.
Note
Creating layer-based layouts, and using Convert Layers to Table, can only
be done from Standard Design view, not from Layout view.
Prepare Your Layers
Layers that overlap each other cannot be converted to a table. If you're
thinking ahead, before you create your layer-based layout you'll open the
Layers panel (Window > Other > Layers, which opens the Advanced Layout
panel group) and select the Do Not Allow Overlaps option (see Figure
10.24). This option won't affect any overlapping layers you might already
have created, but it will stop you creating any new overlaps.
Figure 10.24
Disabling layer overlaps in the Layers panel preparatory to using the Convert
Layers to Table command.
If you've already created your layers without this safeguard enabled,
and still want to use the command, use your eyeballs and your judgment to
try to eliminate all overlaps. (If you miss any, Dreamweaver will tell you
about it when you try to convert!)
Choose and Configure the Command
When you're ready to convert, go to Modify > Convert > Layers to
Table. The dialog box that appears (shown in Figure
10.25) gives you various options for determining how the conversion will
take place, and what kind of table code it will create. The Layout Tools options
are not crucial to a good result; they simply offer some automatic choices like
opening the Layers panel. The Table options are crucial, as they determine how
the table code will be generated. They're discussed in the following sections.
Figure 10.25
The Convert Layers to Table dialog box.
Table Complexity: Most Accurate Versus Smallest
You must tell Dreamweaver to create the most accurate table it possibly can,
or the most efficient table. When you choose most accurate, Dreamweaver will
attempt to create a pixel-perfect reproduction of your layer structure in
the table. This often means many small (sometimes very small!) table cells,
a real mess for you to edit and for the browser to display. When you choose
smallest, Dreamweaver will automatically collapse any table cells within the
size limit you specify, to create simpler table code; but your layout might
shift slightly from its layer-based positioning.
Table Stability: Use Transparent GIFs
As discussed in the preceding chapter, and in the section on "Layout
View" earlier in this chapter, transparent single-pixel spacer images
help to solidify table structure. If this option is selected, Dreamweaver will
automatically include a control row of transparent pixels in the table code.
(See the discussion on using spacer images in Layout view, earlier in this chapter,
for more on control rows.)
Table Alignment: Center Table
This option applies the align="center" attribute to the
table, so it floats in the middle of the page.
Exercise 10.2 Creating a Flexible Layout in Layout View - Page 10
Inside Dreamweaver MX
Working Smart with Convert Layers to Table - Page 12
|
