Page 1 of 1
Formatting issues
Posted: Tue Sep 27, 2011 11:11 am
by 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?
Re: Formatting issues
Posted: Wed Sep 28, 2011 9:19 am
by brienicole
There should be one table.
Re: Formatting issues
Posted: Wed Sep 28, 2011 11:36 am
by 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.
Re: Formatting issues
Posted: Wed Sep 28, 2011 4:09 pm
by 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
Re: Formatting issues
Posted: Wed Sep 28, 2011 5:52 pm
by Lundholm
I wish I'd seen that earlier. I ended up manually converting the table to CSS. Thanks. Now I know for future projects.
Re: Formatting issues
Posted: Wed Sep 28, 2011 7:22 pm
by Instructor
Lundholm wrote: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.
Re: Formatting issues
Posted: Thu Sep 29, 2011 3:20 am
by 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.