Are there tools that allow you to draw a layout and have it rendered directly into CSS?

In the past, the use of table to create website layouts was very intuitive and quick. It was easy to just "whack out" a layout and then throw in the sliced images from photoshop and then its content and the website is up. At least, in Dreamweaver, there was a very visual way to create the table layouts. But this method eventually becomes outdated.

Ever since the use of CSS box model became more and more popular, I also started to use CSS to create my websites' layouts. However, I 开发者_开发百科have always found creating layout through CSS a lot slower. The process is very textual, which I thought is an issue to me since layout isn't logic programming and I just find it difficult. Dreamweaver may have features that can render the CSS visuals on the fly as I type in the CSS styles, but still, the process of creating the layout is textual as I have to type in the CSS, trial and error with the pixel size numbers, etc. This process is very slow.

I am ok with CSS and have created quite a number of websites with CSS but I just find the process to be tedious and time consuming. It feels like whatever that I have laid out in Photoshop is just a draft reference because after that, I have to rewrite the whole layout in CSS again to imitate the one I had in Photoshop.

Is what I am going through normal? Is there a faster and more efficient way to get a design concept into CSS layout and not having to always write CSS from scratch? It is just too time consuming and ineffective if I've to do this for every website I start on.

There are certain patterns and tools that you can use from project to project that will assist in the conversion of a Photoshop document into a standards compliant site.

The best advice is to learn CSS like the back of your hand. This will allow you to slice psd files correctly - only using images that are necessary. It will also help you understand the limits you must work within, in Photoshop or any other image tool, to create websites. The stronger your CSS knowledge becomes the higher the limit...

Helpful patterns/tools:

• CSS Grid Systems
  • http://960.gs/
  • http://www.1kbgrid.com/
  • http://www.blueprintcss.org/
• CSS Reset Definitions
  • http://meyerweb.com/eric/tools/css/reset/

Once you've had success with certain tool-sets and patterns you can re-use them to increase your efficiency...

I have a few suggestions:

One, more directly answering your question: have you looked into CSS frameworks? Things like the Grid960 System can go a long way to providing structure to your site quickly. You'd be surprised how quickly you can get something reasonable going using a pre-built layout file. You don't even have to use someone else's; you could make your own once and re-use and adapt as necessary.

Second, is why don't you try starting out with the CSS from the design in your head? It'll feel a lot less redundant when you go straight to the styling. This becomes even easier if you incorporate suggestion one. Not that you can't use Photoshop at the same time...but if you let the site grow out of CSS, it'll feel a lot more natural to use it.

And third, there are certain tools (that seem rather dubious to me) like PSD2HTML that purport to do that work for you.

Is what I am going through normal?

Yes.

Is there a faster and more efficient way to get a design concept into CSS layout and not having to always write CSS from scratch?

There are faster ways, but I won't call them efficient. Things will really soon start to became uncontrollable and the code ugly with many horrific unnedeed bits. Also sooner or later your layout will most likely break.

It is just too time consuming and ineffective if I've to do this for every website I start on.

The best you can do is learn to use html and CSS as their best, making the code as clean and clear as possible. You should also start making some little pieces of code (snippets) and store them in a safe place, ready to use them as a basic layout structure for every site you make.

You will realize then you only need to accomodate the layout with little adjustements most of the time.

As a UI developer who gets paid to worry about box model and IE incompatibilities, I'm going to always answer the question of "what can auto-generate layouts?" with one simple answer: nothing. There's no replacement for a good UI developer, especially with Microsoft out there making up the game as they go along....IE is the reason that people like me can stay gainfully employed.

That being said, the closest thing to an auto design tool I can think of is a grid generator. This is my weapon of choice: http://www.gridsystemgenerator.com/

There are tools out there that generate fairly acceptable code....Apple's web design tool comes to mind. But every major project that ends up in my office that's done in tools like Apple's design software, Adobe's new Web Catalyst, Dreamweaver (proprietary coding tools anyways) ends up getting redone. Why? Because I haven't found a single one that both supports the box model issues AND generates perfectly w3 compliant HTML.....after all, that's the standard we all are here to live by.