The Idea...
To start off with, this is not a "fit all" tutorial, and I am not a writer. What I can do though, is show you how to take a photoshop layout and make xhtml compliant website that's easy on the eyes, easy to maintain, and good step in the "standards" direction.
Its so far from the normal photoshop + web development direction, that it might frighten some. But if I can get one graphic designer to stop turning out photoshoped sliced sites, and start doing it right... well the world will be a better place. And its a better plan than my "worldwide tour of death to slicers" idea.
I cry hypocrite!
Yes, yes, before you get all upset... Yes, the current layout of "joplan.com" IS table based. (it was a rush job of about 20 minutes, but now I can do a div based site in less time!) Just look at the source code and you will see why I build div based sites now! Its not a "bad" example of how to use tables right if your going to do it that way. But trust me, div based sites are the way to go!
The first step... Design.
Creating the design in photoshop first has been the staple way for designers to get started with a web project for a long time. And by some means it still is, but its not 100% necessary. With a div based layout, a site shell can be constructed before one pixel is ever created. Allot of more code minded people find this to be the best place to start, and graphics can tie it together later. That can work just fine, it just depends on your designer and the workflow. Most often though, its a good idea to mock-up a photoshop proof for your client. Also decide ahead of time on its attributes like fixed width or fluid or.... whatever.
We are going with the idea of creating the site in PhotoShop, then making it transfer to the web.
Here we see what I have in PS... A simple header, content, footer site. fixed width, centered.
Now if you use the rectangular marquee selection tool select each area, it will snap to wherever you put guide lines. From there you can copy merged into new documents and save from there to web. I am assuming you have some PS knowledge here? ok good...
This is what each slice(shudders) er, image looks like.
top "header" slice
middle "content loop" slice
bottom "footer" slice
With slices in hand, all we have left to do is create a shell with divs...
<body>
<div id="container">
<div id="top">
<div id="menu"></div>
</div>
<div id="middle">
<div id="content"></div>
</div>
<div id="bottom">
<div id="menu2"></div>
</div>
</div>
</body>
- Notice that we have a container div we wrap the site in. And there are added divs for top menu, content and footer text.
Now we add primary css
html,body {
height: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
font-size: small;
color:#333333;
margin: 25;
padding: 25;
}
#container {
margin: 1em auto;
text-align: left;
width:700px;
}
#top {
width:700px;
height:98px;
background:url(images/top.jpg) no-repeat;
}
#middle {
width:700px;
background:url(images/middle.jpg);
text-align:left;
}
#bottom {
width:700px;
height:72px;
background:url(images/bottom.jpg) no-repeat;
}
- Notice above, that the "top". "middle" and "bottom" id's have the 3 images in them, but the middle div is NOT set to no-repeat.
and some tweaks...
All we do here is positions our content within their respective divs.
#menu { padding-top:63px; padding-left:260px; }
#footer { padding-top:28px; padding-left:270px; color:#333333; }
So that's it.
To see this site in use, well your looking at it. And you really should have figured that out by now. Also you can download a .zip of the whole project including the .psd here
Also be sure and check out the source of this page. The background sides are a last minute addition, and really simple to do. Check the css. Oh and it looks good in IE too ;-)