Subtitles of the Movie

In this movie I review how to convert your AP elements into tables, and also how to convert your tables into AP elements. I'll be talking more about creating and positioning these div tags in the CSS chapter of the course. But when your done working with your page layout you can easily convert these AP elements into tables. Instead of using tables or layout mode to create their layouts, some web designers prefer to work with AP elements and then convert them into tables when their page layouts are completed. This technique has several advantages; many of my students find that tables are more stable then AP div layers. This is probably due to the fact that learning to properly position and format AP div tags takes much more time and practice then simply drawing them out and then converting the AP divs to tables. Another reason to convert your AP elements to tables would be if you need to support browsers before version 4.0, converting AP elements to tables can be problematic. However, because this can result in tables with a large number of empty cells and also it creates bloated code at least Dreamweaver will create the bloated code. The Dreamweaver documentation recommends that if you do need a page layout that uses tables, its probably best to draw the tables in layout mode and then use the various table formatting techniques that I'll cover in the next section of the course to fine tune and then format all your tables. To convert your AP div elements into tables, layout your pages, get everything exactly where you want it positioned, cause its much easier to position things with AP elements then with tables. And then choose from the main menu, modify, convert, AP divs to tables, that'll give you this convert AP divs to tables dialog. You'll want to definitely go through each of the options here and practice different combinations to see which ones will give you the best results. The table layout can be most accurate or smallest. In other words collapse empty cells. You can use transparent gifs, you can center on the page. The layout tools include preventing overlaps, showing AP elements panel, showing a grid and snapping to a grid. That's a great way to make sure that everything lines up consistently on the page and then click OK. Dreamweaver then converts everything into tables. In this case it created a fairly simple table because my layout was simple. It did change some things. Now don't worry if the results are not exactly as you expected because you can also go back and modify convert your tables back to AP divs. Here you have a new set of options. Prevent overlaps, show AP elements panel, show grid and snap to grid. click OK and now you have your AP div tags back here. Notice it threw up a grid as well to help you position these. But notice that there are my AP div layers back. And now I can go back and choose, modify, convert, AP divs to tables and then use several different options here to see if you can get better results. So in this way you can go back and forth between your AP divs and your tables to get your layout just the way you want it. Now let me point out some warnings about using this technique. When you convert a table back to AP elements, Dreamweaver converts the table back to AP divs regardless of the type of AP element you might have had on the page before the conversion to tables. Second you cannot convert a specific table or AP element on a page, you must convert all the AP elements to tables and all the tables to AP divs for an entire page. And one more warning, before you convert to tables, make sure that your AP elements do not overlap. Let me demonstrate this last warning by choosing modify, convert, and convert my tables back to AP divs. And now let's overlap them, like so, and now when I try to convert back to tables I get a warning, the file cannot be converted because it contains overlapping AP divs. So one solution is here in the AP elements window you can check prevent overlaps and now when you try to move your layers they won't overlap. So it's a good idea to keep this AP elements panel open, to help you work with your AP elements. And then always check prevent overlaps if you are planning on converting these AP elements to tables. And that will conclude this section of the course on the various methods and techniques that you have available to you in Dreamweaver CS3 for laying out your HTML pages. In this section you've learned how to draw tables and table cells in layout mode, how to draw over tracing images to create your page layouts. How to use div and AP div tags to create layouts and also how to convert back and forth between AP div elements in tables. In the next section of the course I cover in great detail how to format using tables in standard mode, although most of my students tend to learn one of these methods better then the others and pretty much stick with that method to layout all of their HTML pages. Each of these methods should have its place in your web design toolbox and you'll want to learn and use each of them depending on the needs and requirements of the page layout.