Formatting issues
Formatting issues
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?
- Nathan Lundholm
- brienicole
- Posts: 132
- Joined: Mon Aug 29, 2011 5:02 pm
- Location: Sparks, Nevada
Re: Formatting issues
There should be one table.
~Brianne Porterfield
"What a crazy random happenstance!"
"What a crazy random happenstance!"
Re: Formatting issues
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.
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.
- Nathan Lundholm
- Instructor
- Site Admin
- Posts: 1869
- Joined: Thu Jul 21, 2011 8:51 am
Re: Formatting issues
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
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
"Inspiration is for amateurs. The rest of us just show up and get to work." — Chuck Close
Michael Ganschow-Green - GRC 175 Instructor
mganschow@tmcc.edu | 673-8200 ext.5-2173
Michael Ganschow-Green - GRC 175 Instructor
mganschow@tmcc.edu | 673-8200 ext.5-2173
Re: Formatting issues
I wish I'd seen that earlier. I ended up manually converting the table to CSS. Thanks. Now I know for future projects.
- Nathan Lundholm
- Instructor
- Site Admin
- Posts: 1869
- Joined: Thu Jul 21, 2011 8:51 am
Re: Formatting issues
Don't sweat it. We'll be building our other sites from scratch in Dreamweaver.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.
"Inspiration is for amateurs. The rest of us just show up and get to work." — Chuck Close
Michael Ganschow-Green - GRC 175 Instructor
mganschow@tmcc.edu | 673-8200 ext.5-2173
Michael Ganschow-Green - GRC 175 Instructor
mganschow@tmcc.edu | 673-8200 ext.5-2173
Re: Formatting issues
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.
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.
- Nathan Lundholm