- Viewing Aids
- Layout View
- The Convert Layers to Table Command
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
The Convert Layers to Table Command
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.
Working Smart with Convert Layers to Table
There are limits to what kind of page structure you can create with this command. Because Dreamweaver layers have fixed pixel widths, you can't use them to create flexible layouts. Because the command converts all layers in a document into one big table, you can't use it to create multi-table layouts, or layouts with nested tables.
But just because the command is limited doesn't mean you can't use it wisely, within its limitations. If you're careful and smart, you can use Convert Layers to Table to create workable pages, fairly quickly and very intuitively.
Tidy Layers Make a Tidy Table
If you understand what makes a good table, you'll know how to arrange your layers to create the same effect. Tables exist as row and column grids—respect this. Align layers carefully; match their dimensions where appropriate, so they form the simplest grid structure you can get them in. Don't create two layers where one will do.
To help accomplish simple table structure, choose the Smallest option in the Convert Layers to Table dialog box, allowing Dreamweaver to combine small cells into larger ones.
Know When to Use Other Tools
Just because your table started out life as a series of layers, doesn't mean you can't use the standard table-editing tools to clean it up or extend it. To make a flexible layout, convert your fixed layout to a table and then add percent-based widths as necessary to the table and its columns. To make a layout that uses multiple tables (nested or otherwise), use layers to build the layout for one table in one document, and convert to table; then use layers to build the layout for the second table in another document, and convert to table; then copy and paste to combine your tables.
Never Say Die!
And if at first you don't succeed, try again! If your conversion creates an unlovely table structure, Edit > Undo, tweak your layers to be tidier, and run the command again. You also can use the Modify > Convert > Table to Layers command to get your layers back—though doing so might not reproduce exactly the structure of layers you started with.
NOTE
In particular, if you convert Layers to Table and then reverse the process to converting Tables to Layers, you might end up with a whole row of skinny little layers at the bottom of your layout. These layers have been created from the table's control row—they contain that row's spacer images. You can safely delete these layers before continuing. The next time you convert Layers to Table, Dreamweaver will create another control row.
Exercise 10.3 Building a Page Layout Using a Tracing Image and the Convert Layers to Table Command
In this exercise, you'll create a layout by starting from a tracing image, creating a layer-based layout to re-create the design of the tracing image, and convert the whole thing to a table. You'll experiment with different conversion settings, and examine the resulting code to see how it's been created, how it can be improved on, and how it might have been done differently by constructing the table manually.
All files for this exercise are in the chapter_10 folder from the CD. If you haven't done so already, copy the folder to your hard drive and use it to create a Dreamweaver site called chapter_10.
-
For this exercise, you'll build a different version of the Rubber Baby Buggy Bumpers home page used for previous exercises in this chapter (see Figure 10.26). Start by creating a new HTML file and saving it in the chapter_10 folder as bumpers3.html.
-
The new layout for the Bumpers home page was created in Adobe Illustrator, captured as a screenshot and saved as bumperLayout.gif. To load this image as a tracing image, go to Modify > Page Properties.
-
The positioning of the tracing image could be improved. To match the finished layout shown in Figure 10.26, you want the banner flush against the top and left edges of the page. So your tracing image should be aligned that way, to help you work.
-
Now it's time to start creating layers. To keep yourself from accidentally overlapping them, open the Layers panel and select Prevent Overlaps (Window > Other > Layers, or expand the Advanced Layout panel group).
-
Using the images in the chapter_10/images folder, and the text in the chapter_10/filler_text.html file, fill your layers with content. Everything should be looking close to the tracing image by now, except the main banner. The layer containing it needs a background color matching the color of the image; and the image needs to be centered in the layer. To accomplish the first task, select the layer and use the color picker in the Layer Property inspector to sample the image's color. The second task can't be accomplished using the Property inspector—there are no alignment controls for layers listed there. But don't worry about it—you'll be able to set the alignment after you've converted to a table.
-
Back in Dreamweaver, remove the tracing image—it has served its purpose. Go to Modify > Page Properties, find the tracing image input field, and select and delete the contents. When you close the dialog box and return to Design view, your tracing image will be gone.
-
It's time to convert your layout—and for a bit of experimenting with settings. Choose Modify > Convert Layers to Table. In the dialog box that appears, select Most Accurate, and Use Transparent GIFs. You can deselect all the Layout Tools options. When you're all set, click OK.
-
Try again. Go to Edit > Undo, to get your layers back. Then choose Modify > Convert Layers to Table again. This time, change the settings to Smallest, collapsing all cells smaller than 6 pixels. Click OK, and check your table. That's much better! (See Figure 10.31).
-
Now that the layout is in a table, you can fix the banner alignment problem. Select the cell containing the banner and use the Table Property inspector to set the align attribute to center and valign to middle.
-
If you examine your table in Dreamweaver, you might see all sorts of ways in which it could be structured more efficiently than it is. Looking at the example in Figure 10.31, the center text column is slightly off-center; several rows have heights assigned, which isn't quite kosher; and you might think of various alternatives to having so many columns separating all the buttons (maybe a nested table, or multiple stacked tables creating the page). But it's not bad.
-
Now, for the ultimate challenge—can you make this layout flexible? A good flexible structure for this table would be if the banner cell stretched from side to side, and the empty columns at left and right stretched equally, so the fixed width content and button areas in the middle remain centered no matter what. While Dreamweaver couldn't create the table this way, using Convert Layers to Table, you can now tweak it.
)
Figure
10.26 The desired layout for the bumpers3.html page.
In the portion of the dialog box regarding tracing images, click the Choose button and browse to bumperLayout.gif (it's in the chapter_10/images folder). After the image is in place, click the Apply button to see it in your document. You don't want to use it at 100% opacity, because it will be hard to tell which parts of your layout are tracing image and which parts are real layout elements—so set the opacity slider to around 40%. Click Apply, if you want to see if 40% is a good setting for you, and adjust it if needed.
Before leaving the Page Properties dialog box, set the document's page margins to 0. When your dialog box looks like the one in Figure 10.27, click OK to close the dialog box.
)
Figure
10.27 The Page Properties dialog box for bumpers3.html establishing
the tracing image.
Go to View > Tracing Image > Adjust Position. When the dialog box opens, use your arrow keys to nudge the tracing image until it's in position. Figure 10.28 shows the Document window with tracing image, ready for use.
)
Figure
10.28 The bumpers3.html page with tracing image in place.
From the Common tab of the Insert bar, select the Draw Layer object and start drawing layers. You want one layer for the banner, one for each button, and one for the text block (see Figure 10.29).
)
Figure
10.29 The layers for the bumpers3.html layout in position aligned
with the tracing image.
Preview your page in a browser. As long as you're not using a version 3 browser, which doesn't support layers, you'll see your layout, looking almost perfect. The tracing image won't show.
NOTE
If you have overlapping layers, you'll get an error message when you try to convert. Check your layout carefully, looking for and adjusting all possible culprits, and try again.
How does your page look? Unless you were very precise in aligning layers, your table is probably pretty complex and ugly, like that shown in Figure 10.30. That's not an optimal result!
)
Figure
10.30 The results of using the most accurate setting, converting bumpers2.html
from layers to a table.
)
Figure
10.31 A much more compact table created from more efficient settings in
Convert Layers to Table.
Preview your page in a browser, to check it out. Now it looks like the desired layout you wanted to create.
First, select the table itself and assign it a width of 100%.
Next, drag to select all the cells in the leftmost column, and use the Property inspector to assign a width of 50% (see Figure 10.32).
)
Figure
10.32 Assigning a width of 50% to one column of bumpers2.html,
part of turning it into a flexible table.
Repeat the process for the rightmost column.
The table might look a little strange in Dreamweaver, stretching slightly beyond the edges of the Document window. Preview in the Browser, to see your final flexible layout (see Figure 10.33).
)
Figure
10.33 The final, flexible version of bumpers2.html as seen in the
browser.