Formatting issues

[Lundholm]

When I clicked Save for Web and Devices and it exported the html it formatted the whole page as a table. A page should not be formatted as a table. How do I fix this without alot of work?

[brienicole]

There should be one table.

[Lundholm]

In my coding class we learned why you don't want to format the page as a table.
But I found a convert to divs function that worked fine. Made alot of white space that didn't look good but I fixed that by moving some stuff a pixel or two.

[Instructor]

Yeah, you don't want tables. They're poopy. Fortunately, Save for Web and Devices allows you to export div tags!

After you have optimized your slices in Save for Web and Devices, when you click Save, a "Save Optimized As" menu pops up. You'll see a set of dropdown menus at the bottom. Make sure "Save as Type" is set for "HTML and Images", then go down to the "Settings" menu and select "Other...". Another box called "Output Settings" should pop up. Go to the second drop down menu from the top (it should have "Saving Files" selected) and select "Slices". The box should change slightly. In the middle of this new box, there should be a radio button labeled "Generate CSS". Make sure it's selected. Go through and make sure your other settings are to your liking, then click "OK". Lastly double check your "Save Optimized As" window to make sure your're exporting the file(s) where you want them and then click "Save". Viola! You now have a div atg and CSS driven website.

The video below also covers the process if you want a handy dandy visual aid:

Exporting DIVs from Photoshop

[Lundholm]

I wish I'd seen that earlier. I ended up manually converting the table to CSS. Thanks. Now I know for future projects.

[Instructor]

I wish I'd seen that earlier. I ended up manually converting the table to CSS. Thanks. Now I know for future projects.

Don't sweat it. We'll be building our other sites from scratch in Dreamweaver.

[Lundholm]

If anyone else runs into the same problem. How to fix:
Step 1: Use Dreamweaver's convert table to divs (this will seem to destroy your site as you end up with lots of white space breaking up your beautiful site. Don't fret it)
Step 2: Find the CSS positioning rules. Edit the numbers (changing them by just a few pixels will do it but you'll have to do it several times to experiment until the white space is just barely gone)
Step 3: Move the CSS positioning rules to an external file.
I am willing to help anyone who asks but not during class.