PSD to HTML (with text) conversion

Question

Hi,

I just downloaded a website template that is in a .PSD form. I have made the changes via photoshop, setup the splices then clicked "Save for web devices".

I export the website and I get the images directory and the html file. All ok so far.

I next open the html file using dreamweaver.

My question is what is the best method to create the text content of the site. The images are all embedded at part of a table i.e.

<tr>
    <td colspan="2" rowspan="8">
    <img src="images/storage.jpg" width="28" height="118" alt=""></td>
    <td colspan="4" rowspan="5">
    <img src="images/index_39.jpg" width="125" height="75" alt=""></td>
    <td colspan="4" rowspan="8">
    <img src="images/storage-41.jpg" width="81" height="118" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="3" alt=""></td>
</tr>

I set the image as the background to the table element however I am wondering what would be the best method for creating the text i.e. create a table in a table, or div etc?
I dont know too much about css so if you have an example I would be grateful

Also, are there are tools / websites out there that does this automatically for you?

Thanks

Answer 1

I think starting with Photoshop to create a website isnt the best way, as you can see by your markup. Start by picking up some simple tutorials, making your self knowing the basic html elements, also for creating the main markup for site style (often with div elements). After this you enter your desired graphics by hand. This ends in a lot more maintainable website.

Answer 2

If you dont wanna get in details, you can send your psd to a service like http://www.psd2html.com/. They do it for money...

Answer 3

Did your template only come with a PSD file?

Typically, the PSD file allows you to edit the graphical portion, then save off the images you need, to be placed back in HTML, rather than generating HTML directly from the PSD.

Since you asked for the best way to do this, I will give you my answer based on my opinion.

Using tables for layout is not a good way to design webpages.

Tables should be used for tabular data.

You should place content in HTML, and use CSS for layout/presentation.

If you want to learn about CSS, I suggest the following:

• CSSZen
• HTMLDog
• DesignMeme

If you have a Mac, I highly recommend downloading and trying out CSSEdit. For a PC, Visual Studio 2008 has a nice CSS editor as well.