Photoshop CS3 + CSS
amb1s1 (10 points) | Wed, 2008-10-22 09:49I used to play around with photoshop and dreamweaver like 4 years ago, but I stop after i got into my new job. I have no experience with CSS, so be gentle. I would like to know if there is a way to implement CSS when slicing a web template on photoshop before transferring to dreamweaver if not which is the best way to implement CSS when you transfer the web template to dreamweaver. Thanks
'Slicing' up a photoshop file for the web isn't really how its done anymore. The html that PS outputs is all tables based, and that's not really what CSS is for.
Using CSS with a tables based layout is like putting lipstick on a pig. Its true power comes when you use it to control your entire layout, and for that, forget 'slicing' up a photoshop file.
I don't use Dreamweaver anymore, but the last time I did, it would generate 'inline' styles, which is another thing to avoid.
To really understand how CSS could best fit into your Dreamweaver workflow, you really need to understand CSS. I would start with a book called 'Styling with CSS.' Great book that takes you from the beginning to some fairly advanced techniques in a short time.
~
CS4 is a LOT better about the inline styles, but still not ideal.
And I too recommend staying away from the Photoshop slicing deal. There is a Photoshop plugin called SiteGrinder that you may want to try. It claims to take a Photoshop design and turn it into a fully functional website. If it does what it says it does, then it is truly an amazing tool (though I'm sure it still doesn't have nearly as much control as hand-coding), but I can't vouch for it as I haven't tried it.
CSS really isn't as complicated as it seems. I suggest finding some resources and learning. Or, as I did, just sort of peek at source code of sites, start coding, and seek out specific tutorials when you hit bumps in the road.
I use Dreamweaver, but I use it to hand-code. I don't use its WYSIWYG capabilities really, except to get a general idea for what the site's actually looking like as I code. But I plan on dumping Dreamweaver as Espresso software coming next month looks extremely promising (for Mac). Frankly it looks like it's going to pwn DW in the face.
I currently use Coda as my main development tool, but I really miss the power that CSSEdit provides. I'm sure I'll be trying it out once they release it. Thanks for mentioning it.
http://www.htmldog.com/ is a good one
----
UPDATED PORTFOLIO
www.jhousedesign.com
----
Jack
----
BRANDING | PRINT | WEB
www.jhousedesign.com
----
It’s easy as long as you know where to click!
Compare to Photoshop CS2 it’s the same but not at the same place…
First create all your slices [press K in Photoshop].
Then:
Goto Files - Save for web and devices or press Alt+Shift+Ctrl+S
Click on save button and select the “other…” settings, it will pop-up a new window
Check the XHTML box, so it will format a clean XHTML files
Check the Generate CSS radio Button and Save, your Html file will be generated with a CSS scripts (you can notice that it’s still tagged as “ImageReady”, someone forgot to do the update…)
1z0-051
I my point of view it’s a good way to do quick CSS design without getting crazy with rulers.