Please support our Web Development advertiser:
Jul 15th, 2006, 1:08 pm
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.
This blog entry was written by mikeandike22. It has received 5,983 views, 0 comments, and 19 linkbacks. 1 voter has rated this entry 5 out of 5 stars. It was promoted to featured status Jul 16th, 2006.
Post Comment
•
•
•
•
Only community members can start a blog or comment on blog entries. You must register or log in to contribute.
•
•
•
•
•
•
•
•
DaniWeb Web Development Marketplace
Related Blog Entries
- Open Web Foundation to Help Shepard Standards (7 Hours Ago)
- DNS Security Flaw In the Wrong Hands? (2 Days Ago)
- ISO Uses PDFs Too, Standardizes Format (22 Days Ago)
- Microsoft announces host of new Internet Explorer 8 security features (22 Days Ago)
- Latest Mac OS X Trojan Might Be Sign of Things to Come (24 Days Ago)
- Yahoo Mail Open—then Closed—to Hackers (28 Days Ago)
- Barack Obama is following me on Twitter! (29 Days Ago)
- Salesforce Says ‘Hey, Google, Get Onto My Cloud’ (31 Days Ago)
- Web forms are still the gateway to security hell (33 Days Ago)
- Ruby, Ruby, Ruby - Vulnerable, Vulnerable, Vulnerable (33 Days Ago)
Related Forum Threads
- CSS not for FIREFOX? (HTML and CSS)
- I need to grab the height of a div. (JavaScript / DHTML / AJAX)
- CSS - Making div vertically "overflow" (HTML and CSS)
- CSS Div's For Myspace (HTML and CSS)
- Table with CSS (HTML and CSS)
- CSS seperator problem (HTML and CSS)
- CSS menu hover question (HTML and CSS)
- tutoring for CSS ? (HTML and CSS)
- Css ? (HTML and CSS)
Featured Entry