Setting Photoshop to produce Div and CSS

[mikeandike22]

Here is a very short tutorial on how you can set your photoshop to produce Divs and CSS rather than the old fashion tables. This is very useful becuase this is becoming the new way to work with web pages and lets you add a lot more room to do stuff that wouldnt be possible with non expandable tables.

ok once you have a document sliced and everything and you optimized all the images when you goto the "Save for web option"
[IMG]http://img384.imageshack.us/img384/125/saveforwebbx1.th.png[/IMG]

you will notice a little arrow next to your presets and on the border of the box with the image options
[IMG]http://img384.imageshack.us/img384/77/arrowvo3.png[/IMG]
click that box and select "Edit Output Settings" from the drop down menu.

This will open up the "Output Settings" dialog box. In here on the "HTML" settings page you want to:
Select the Output XHTML box
Set tags case to: lowercase(body)
Set attribute case to: lowercase(rowspan)
and you can pretty much leave everything else default.

Then from the drop down menu where it says "HTML" select "Slices". All you need to do here is change the "Slice Output" setting to Generate CSS and from the drop down menu select By ID.

And finally you want to save the profile so click the save button and save it to whatever you want. Just remember when you click save on the "Save For Web" dialog you need to change the settings in the save dialog to whatever you saved it as. I just saved it as default because I always use it.

Now you have a fully functional Div and Css layout and you are no longer stuck with the limits of tables.

[webeon]

how do i center the design after loading the slices in Dreamweaver? No matter what I do, they always seem to alight to the left...

[MindSter]

Here's how to center a div:

<div id="divid" style="margin-left: auto;margin-right: auto;">
Blah
</div>

Thanks mikeandike22 for the tip!