I'm sure everyone goes about this very differently, but for me:

1. Think about it. If stuck, leave for a few days, or sleep on it...
2. Sketch on paper
3. Mockup in Fireworks
4. Sketch css layout on paper, and research if required (http://www.glish.com/css/, http://www.bluerobot.com/web/layouts/ etc)
5. Build a skeleton CSS/html page to test layout
6. Build final site

for 3stripe
Some questions :)
Step 3 - how do you make mockup in Firefox?
Step 4 - what is the difference between step 2?
Step 5 - how do you build it? What software you use etc

I spend SO MUCH time debugging my non-table designed pages :)

Usually, I must do some amount of programming for each of the sites I do. So here's how I start.

- I make the website work on a stripped html design using Dreamweaver. With only the needed sementic tags.
- I make the design in Photoshop with that structure in mind (though I really should draw them more)
- Then it's a matter of touch-ups until the site renders the same on most browsers.

The question stated from "idea" to "new website".

First thing first: Start with a plan.

1. What is the objective of the site?
2. What is your audiences' expectations?
3. What does your audience want?
4. What do you want your audience to want?

Now determine your content and its hierarchy

1. What content do you have?
2. What content will you have for launch?
3. Create a sitemap (I use Viso) to determine where your content will live and how users will get to that content
4. Create wireframes (I use Viso) to detemine where your content will go on individual pages

Now you start designing

1. Like a coloring book, start to color in the lines of your wireframe (I use PhotoShop)
2. I use Illustrator for any vector graphics needed or maniulated
3. Be sure to layout your site design with guides/grids that resemble how you will code the site (this is the foundation for your structure)
4. This is a good time to ensure you have a solid color pallet (helps me determine the little detailes like my H tags and Link attributes

And finally we build the beast

1. Translate those guides and grides from Photoshop into CSS elements accordingly (I use Dreamweaver). At this point your site should start to look like a high fidelity wireframe
2. Then you slice and dice (I use Photoshop again, "save for web" option)
3. Now that you have some HTML that looks like your mock-up, add the details using CSS to the rest of the mark-up
4. At this point the template is complete and you can start to concentrate on the interaction of elements/actions

You don't need all of these steps and many of you know there are a lot more steps to be included or elaborated on (depending on the project). But this is what I typically use as a starting block for most site designs. Some of the steps I skip or keep in my head (like the wireframe for example; at least on smaller sites).

1. S.W.O.T analysis
2. content profile
3. site map
4. Mood board
keywords doc
image searches
Style, colours etc.
Sort Branding guidlines
5. Design Swatch
Layout decisions based on content profile
Sketch up ideas in pencil
Photoshop CS2 (considering 768px or 998px widths)
Usually about 10-20 different look & and feels with lorem ipsum content. (considering how these will be built)
6. Design development
Lowerlevel design more detailed visuals.
7. wireframe
Using some realistic potential content and the sitemap.
8. HTML coding
I use dreamweaver 8 in code view as it gives me HTML & CSS code hints which can be handy.
NO CSS or Div's at this stage just <h1> <p> <a> <Blockquote> etc. (this helps separate content from Style)
9. CSS coding
Linked css file
Add divs and css to style homepage (validate HTML and CSS & Cross Browser check)
build lowerlevel and key page CSS (validate HTML and CSS & Cross Browser check)
10. PHP & Ajax integration and testing
11. CMS template integration and testing
12. Testing
validate HTML and CSS & Cross Browser check
Accessiblity considerations and testing
Content & design reassesment

& probably many other things which have totally failed to enter my brain at this stage...

You slice the mockup and generate images. You write the code manually.

Hey Horisont!

There is no magic button that you can click and convert Photoshop/illustrator layout to CSS/XHTML.
You have to decide how you want to stucture you website and what objects will be present in final design.
It's borring manual job by hand even if you using DW8 and can take hours and hours depending how complicated is design.
CarelDraw was never designed for web it's vector graphic editor for publishing. Photoshop is the winner if we talking about website mockups. I know couple people that using Illustator for making mockups but they have publishing background and just get used to it.

Cheers, DS

SpookyET --> I usually do 770 or 990, makes the math easier.

Horisont -- if you want a simple "one-push" button to make a wesbite, then just use tables. Your mark-up will never be semantic. If you're looking for these types of solutions -- you've come to the wrong place for answers. Everyone here is cringing at the very idea of auto-generated mark-up from PhotoShop (b/c we know the results).

None-the-less, here is your solution:
How to convert your photoshop document to a CSS in less than 30 seconds, a precise tutorial with illustrations

NOT RECOMEDNED!

I do everything manually. Dreamweaver has a few shortcuts (ie: auto complete) functions that I utilize; but discourage using it for the WYSIWYG editor. Asking why we develop code manually rather than finding a "one-button-push" application to transform our designs into mark-up is broad topic. Obviously -- if such an application existed, I would use it. Most of the applications that claim to do this will produce poor mark-up. Why do we care if our mark-up is poor? Why do we value CSS structured sites over table-based sites? These are the questions you have to ask yourself. If you are only doing it to "be cool" (HA HA) or because you notice most job descriptions demand it -- then I suggest doing some research first.

Are you asking why we code manually? Or are you asking what the value in semantic and valid mark-up might be? A simple answer to the question, why do I code manually -- because there is no better alternative. It is challenging to code manually, thus exciting -- but not really "fun". Obviously a "one-button-push" alternative from a production cost stand point would be amazing -- it is just in my opinion near impossible to do.

Step 3 - how do you make mockup in Firefox?
Step 4 - what is the difference between step 2?
Step 5 - how do you build it? What software you use etc

3. Fireworks is a web graphics program, easily confused with Firefox, lol. And it came out first!

4. Sketching CSS layout - this is just a wireframe sketch - the div layout in rough, just some boxes with names I guess. You could even overlay it over your sketches from 1 I guess.

5. I build my sites in Smultron, a text editor for the Mac. When I think back to a year ago when I relied 100% on Dreamweaver to code for everything me, it makes me smile :) For my last build, I decided to position the basic blocks first as empty divs, with different coloured backgrounds. Ony once I'd made sure this layout was 100% perfect in ALL browsers, did I add any content. Seemed to help!