How to code design from photoshop to xhtml/css

They have: 7 posts

Joined: Mar 2008

When I design a site in photoshop I slice it then use imageready to export as xhtml/css. But I've recently found that image ready doesnt code very well, so I was wondering If you would code the design by hand what would be the step by step process?

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

You really need to work on learning HTML and CSS first. Start with something simple and learn how the code works.

If you want an instant website the best thing to do would be to look for free web templates. They're not the best but it would get you started right away. There are also lots of sites that have basic layout templates availabe. There are also some included with Dreamweaver if you have it.

If you want to work from a photoshop comp, this is a rough process:

  1. Look at your layout and decide what needs to be done as images and what can be done with CSS (you need some experience for this!)
  2. Slice and export your images, keeping only the parts that need to be images or backgrounds
  3. Start working on the basic structure for your HTML page. Make an outline of the HTML elements, paying attention to the meaning of the elements.
  4. Begin coding the CSS, slowly bringing the layout into shape. You'll need to know a lot of CSS - this is why it's best to keep your layout simple at first and add in complexity as you learn.
  5. Add in your images as you work on the CSS. Many of your layout images will be backgrounds in CSS. Learn how to use the background properties to make images repeat in different directions (or not repeat at all).

That's pretty much it. I often reverse steps 2 & 3, starting with an HTML structure and then slice the images as I need them.

They have: 7 posts

Joined: Mar 2008

Thanks for the reply do you know of any good learning css books?

JeevesBond's picture

He has: 3,956 posts

Joined: Jun 2002

We quite liked CSS Mastery. It assumes you already know some stuff, it is pretty advanced. For basic learning the Web is good enough, this search looks like it has some good results.

For the basics you probably don't need a book. If you have any questions, of course, come back here and start a new topic. Smiling

a Padded Cell our articles site!

They have: 3 posts

Joined: Jun 2008

Yes I am just reading through the last case study in CSS Mastery its a good book, if you've played around with css and got frustrated before.

If you have a reasonable grasp of css you need to know very little HTML, its just the basic tags and you can create works of art.

check out www.csszengarden.com all of the sites are using the same HTML but different images and css and there all a totally different user experience.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.