| | |
Setting Photoshop to produce Div and CSS
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"
http://img384.imageshack.us/img384/1...rwebbx1.th.png
you will notice a little arrow next to your presets and on the border of the box with the image options
http://img384.imageshack.us/img384/77/arrowvo3.png
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.
ok once you have a document sliced and everything and you optimized all the images when you goto the "Save for web option"
http://img384.imageshack.us/img384/1...rwebbx1.th.png
you will notice a little arrow next to your presets and on the border of the box with the image options
http://img384.imageshack.us/img384/77/arrowvo3.png
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.
Similar Threads
- CSS DIV question (HTML and CSS)
- DIV & CSS (HTML and CSS)
- CSS Div problem (HTML and CSS)
- [CSS] How to center one div in a main div (HTML and CSS)
- Div Css Layout (Site Layout and Usability)
| Thread Tools | Search this Thread |
age amd analytics api apple avatar blog blogging bluegene bluray broadband browser business cellphones chips command computers console copyright database dell developer development dos economy email encryption energy enterprise facebook firefox games gaming google government gta hardware ibm ibm.news intel intelibm internet iphone ipod legal leopard linux mac malware medicine memory microsoft mobile news nintendo obama office openoffice opensource os pc politics prompt ps3 recession redhat registry root russia search security semiconductors software sony statistics stockmarket stocks sun supercomputer supercomputing technology technologystocks tiger trends tweaks twitter ubuntu unix verizon virus vista web webmail wii windows wireless working x86 xbox yahoo



