Hi Seno,
I always start with a Photoshop design too.
I can show you an example of what I do to take a design to the web.
Ok, here is my site mockup in Photoshop. Just layers of my pictures and demo text.
[attachment=4430:site.jpg]
In order to turn this into a working web page layout, we're going to need to 'slice' up the elements into their own images. The text content isn't so much important right now, so mainly we just want to get the header, the background, and the borders into their own files.
So looking at my design in photoshop, I start visualizing how I am going to chop it up. It looks a little messy, but it's really just thinking about how to compartmentalize each part of the page. It's only as complicated as you want it to be.
[attachment=4431:demo.jpg]
Allright, so with that thinking in mind, I go to work and get everything divided up into jpg, pngs, or whatever suits best.
I open up Dreamweaver, because it's one of my prefered web developers, and I begin to make the skeleton. I start out by making either DIVS and/or TABLES that will serve as containers for those images I sliced up. You can set images to be content within cells/divs or you can add them as 'background' properties so that text can display over them.
In this website I used a table, so here is what it looks like in Dreamweaver with all the graphics in place. It should look cleaner, yet reminiscent of that pre-planning sketch
I just created a table with the right number of rows and columns to fit everything in.
[attachment=4432:site2.jpg]
It takes some tweaking to get everything to fit just right. But when you've finally got the graphical framework in place you can start adding your actual content in, i.e. "Hello and welcome to my site."
. So, when I go to publish my website, it looks like this in the browser.
[attachment=4433:done.jpg]
Well hopefully that made some sense. I'll be happy to help ya as you go along with your project.
