Core Computer: Dreamweaver Notes

Converting Layers to Tables and Tables to Layers

Convert Layers to table

If you have used layers to create a basic page, at the end of the process you need to convert the layers to a table layout so the page can be viewed by users with older browsers.(3.0 browsers don't support layers.) When you do this Dreamweaver creates table columns, rows, and cells to fit the layers on a page.

It is a good idea to simplify the table as much as possible so reduce the number of table columns, rows, and cells you create when you convert. You do this by aligning layer elements before converting.

If you have not already done so make use of the grid feature and the Align layers feature in Dreamweaver to line everything up. This is where the arrow keys come in handy for fine adjustments. Remember too that you can use the Property inspector to position layers in a document and fine tune by typing in the exact pixel width you need.

Now after all that mucking about to convert the layers to a table.

Click anywhere in the document to deselect the layers.

Use

Modify > Convert > Convert Layers to Table.

The dialog box appears.

These are your options.

Most Accurate creates a cell for every layer, and any cells necessary to preserve the space between layers. This produces quite a complex table which is not always necessary.

Smallest: Collapse Empty Cells aligns the any of the layers' edges that are placed within the number of pixels that you have specified. In other words it will nudge a layer in line if it out a few pixels. This option produces a simpler table because it has fewer empty rows and columns, but may not match your layout precisely.

Use Transparent GIF's fills the table's last row with transparent GIF's. This means that the table is displayed with the same column widths in all browsers. This is good for some layouts but remember what I said about defining a table as a percentage of your screen? If you are going to do this, don't enable this option. The other implication of this is since Dreamweaver sets the space between the table columns using transparent GIF's after this conversion process you'll see the file tranparent.gif in the root level of your site folder. Do not move this file; if you do, you'll see broken image icons when you view your page in a browser. When Use Transparent GIF's option is disabled, the table produced by dreamweaver will not contain transparent GIF's, and the widths of the columns can vary between browsers. Also when you have used this option, you cannot edit the resulting table by dragging its columns.

Centre on Page centres the resulting table on the page. If you do not use this option the table produced by Dreamweaver starts at the left edge of the page. This can look pretty silly in some browsers.

Select your options and click OK

The layers are now converted to a table.

Convert Table to layers

Of course you convert the other way. If you need to convert a table to layers you simply go to

Modify > Convert > Convert Table to Layers.

The dialog box appears.

These are your options.

Show Grid and Snap to Grid are pretty obvious. They allow you to use the grid to layout and position the layers that are about to be generated.

Prevent Layer Overlaps does what it says.

Show Layer Palette displays the Layers panel after the conversion.

Make your choice and Click OK.

When the tables are then converted to layers any empty cells are not converted unless they have background colours.

Note: Something to remember if you are using templates. You can't convert layers to tables or tables to layers in a document which is a template. So any switching back and forth between layers and tables to fine tune your design should be done in a non-template document, and then convert it before saving it as a template.

These notes are written for students who undertake the Core Computer course at School of Art, Australian National University. Students of the course should feel free to contact any member of staff with comments questions and general suggestions..

< Home Index > < Staff Contact > < Class groups > < Assessment >

< Basics Module > < Photoshop 1 Module> < Photoshop 2 Module> < Illustrator Module > <3D Module > < Web Design Module >

< Terms and Jargon > < Online Resources >