So, you’ve designed your next site but you’re having a little trouble turning your lovely PSD into a coded layout. This tutorial should help you learn how to analyze either a new template, or even your current layout to find the best way to code it.
(_Click image for a larger version_)
Here is a basic design composition. The problem now becomes turning it into code while maintaining the style and structure that was decided upon as well as making sure that the site is accessible across browsers/platforms and is as light and elegant as possible.
(_Click image for a larger version_)
The first thing I do once I receive a finalized composition is attack it with a pencil. Analyze every detail of the layout and write down what you think will work. Begin by marking up the widths and basic structure of the site and then move to the details such as the typeface and font-size.
The full PNG of the layout above as well as the font used can be downloaded here
(_Note: You can remove the red markings by making the “Code Overlay” layer invisible._)
Now that we have a good idea of where we’re going, let’s get started.
The first task is to set up your files; luckily, Dreamweaver takes care of that part for me. I usually keep my CSS right in the header when I’m getting started so that I can set up the markup and styles side by side.
I’ve decided how I will be applying the drop shadow – a background on the body will be the easiest and won’t require any extra markup.
By applying the CSS for the background image as well as the “page” div, we now have the basic structure we’re looking for.
body {
margin: 30px 0 0 0; padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
background: url(images/body_bg.png) center top no-repeat;
}
#page {
width: 619px;
margin: 0 auto;
padding: 30px 40px;
border: 1px solid #eee;
}
*Take a look at Step 1*
It is best to complete the structure of the layout before moving on to details such as the logo. Setting up the sidebar and main column before moving on makes it easier to locate and fix any problems.
With a few more CSS rules defining the sidebar, main column and footer, the layout is complete. The only step now is to fill in the details.
#sidebar {
width: 180px;
padding: 0 20px 0 0;
float: left;
}
#main_column {
width: 390px;
padding: 0 0 0 20px;
float: left;
}
#footer {
clear: left;
}
*Take a look at Step 2*
After adding the logo using the negative text-indent method (as well as an overflow: hidden to cut the Firefox dotted border short) and floating an unordered list to create the navigation, the coding is almost complete. Once the CSS has gotten to a point where it is no longer efficient to keep in the markup, move it to a separate stylesheet.
*Take a look at Step 3*
With a little more basic tweaking of colors and headline styles, the design is complete. It may seem like I skipped a great deal between steps 3 and 4, but all of the changes were simply modifying the default styles to match our design.
*Take a look at Step 4*
The most important thing to remember when coding a template is to follow the logical path of coding and testing the basic structure first and then moving to the details later.
The template, images and code are all free for your use and can be downloaded here. Good luck with your own work.