Dreamweaver的CSS和HTML？

Question

im a pure backend programmer and i find it so difficult to position divs and add css styles.

what are your advices to make this as simple as possible for me?

use dreamweaver? what can it help me with exactly.

i have no idea how to add style to my prototype or handling positionings of divs and elements. some guides? tools? softwares? online scripts?

please all suggestions are welcome! guide me through...im all business logic and none design head.

eg. http://www.workey.se . how do you start with layout, design and all that stuff...

Answer 1

Depends exactly what you need to do, but learning the basics of css is pretty easy, mastering it is far more difficult of course. I'd suggest you just learn CSS and makes sure you get a decent browser add in like firebug so that you can see exactly what is going on. I'm not a fan of dreamweaver personally.

Answer 2

Dreamweaver is a good tool for initial design but I wouldn't recommend it for much more than that. Of course many people use it exclusively.

Why not try some CSS framework like the 960 grid? It can help with positioning elements on the page and leave you to worry about the specific implementation of your design like fonts and colors.

http://960.gs/

Answer 3

If you want simple page layouts something like YUI might help you. It has a large collection of pre-built code for you to use. Particularly the Grid Builder is great for creating multiple sections to populate within pages.

As for tools as long as it has decent syntax highlighting any text editor would be fine. Personally DreamWeaver tries too hard to 'help' and instead gets in the way but then I'm happier just with the raw mark-up.

Answer 4

I agree with some of the posts above, and empathize with the "pixel pushing" difficulties you might encounter when starting out.

I've been creating and recreating HTML layouts for about 5 years now, and after trying YUI, Google Blueprint, several css reset libraries, and my own home-brew layouts, I find YUI's grids, fonts, and resets are the most flexible and useful. Their templates are a little tricky, but only a little.

Here's my answer to a very similar question (in case people would rather not click through to see the answer...if this is spamming or against the rules, please let me know and I will remove the answer) :

"

All of the above are excellent. Dreamweaver (imho) has the most complete set of features for designing pages (Adobe actually licensed some of the technology from TopStyle a while back to improve their feature set). And it has excellent validation built-in.

Another FREE tool (remember, Dreamweaver will cost you at least a few hundred unless you steal it) is Aptana IDE. It has most code completion options that Dreamweaver has, and similar validation tools.

Aptana and Firebug plugin for Firefox make a pretty good combination. In addition, there are Firebug extensions and other Firefox plugins that are tremendously useful:

• Pixel Perfect: allows you to add a semi-transparent background image to line up elements on a page (shows up as extra tab within the Firebug plugin).
• Code Burner: adds html & css reference tab to firebug.
• ColorZilla (plain FireFOX extension): analyzes your colors and helps you manage them.
• MeasureIt (plain FireFOX extension): Helps you measure distances between elements on a page when Firebug isn't enough.
• WebDeveloper toolbar: does all sorts of nifty stuff, but I only use it to resize the browser to a specific window size (like 800x600).

"

Answer 5

you should use css templates ( a list here )

or download an already made layout (everywhere on the net) and change bits with firebug to see what pleases you. ( An example )

Edit : i am 'only code' too, i style my web UIs by hand. But there's a lot of addons for firefox that will greatly help you design your layout. ( Here's a list )