How to code web templates?

[alan s]

Hey , Im just after creating a template in Photoshop , i have the psd file saved aswell as the gif file. I also have dreamweaver im just not exactly sure on how to code the template so it isnt just one big image and its actually a proper editable page that can be edited in a normal html editor.

Can anyone give me a few tips or a link to a site that might help me?


Thanks


- Alan S


P.S Screen Of Template Attached Just For Anyone Thats Curious

[IchBin]

I think the biggest thing that you'll have to do is slice the image up. Create slices so that you can take the images and use them in your HTML layout. Doing the HTML is pretty much up to you on how you want to do it. You can use Tables or Divs along with a bunch of CSS to accomplish the same task in many different ways.

[alan s]

Thanks for the very quick reply. I'll have a go at slicing it up. I'll be able to do the html no problem. I just wasnt really sure on how to actually get the psd into different parts.

Thanks again!

[akulion]

From my limited knowledge of looking & fiddling with themes this is what ive learned so far:

The header is usually either set as a BG of the table cell or just satright front as a image. There are more benefits of setting it as a BG for the table and having an extra table cell with a repeating background since this allows you to accomodate different screen resolutions

As for the block Titles (in ur there the green bars) - u only need to take a very small strip from the image and set it as the BG of that table cell for the blocks.

The most important aspect of course as u may have already noticed is the table layout in HTML

The rest is just fitting in the correct function calls into the right table cells and setting their looks by either using background images for headers and body.

Also important is the CSS file where you define different <TD> types and accordingly in your template call them by ID like <TD ID="cellblock"> etc. that way you can have a predefined table layout and all you need to do in your PHP file is to call each look by ID and viola it appears.

Hope that little bit of info helps out :up: