Last week we published a tutorial for designing a basic corporate website layout in Photoshop, and in this tutorial we will walk through the process of coding that design in HTML and CSS. Here is a look at the design that we will be coding (click the image to see it in full-size).

In order to work though this tutorial you will need the PSD file from the first tutorial which can be downloaded here. I’d also recommend saving a backup copy of the PSD in case something that we do messes up the file that you are working with.

Step 1: The Files and Folders

The sample site that we will be coding will be contained inside a folder called “consulting” (of course, you can call the folder whatever you like). That folder will contain index.html and style.css. Also, the “consulting” folder will include an “images” folder where we will store all of the images that will be used to create the page. Go ahead and create those blank files and folders now.

Step 2: The Images

Before we get started with the HTML and CSS coding, we will first prepare all of the images that will be used in the design, including those that will be used as background images with CSS.

The design contains 10 images, so let’s get started with the one that will be used for the body background. Our design includes a narrow dark stripe with a thin border at the top of the page, followed by the header, a green horizontal band, and then the light gray background of the page. When we code the site we’re going to use the light gray as the body background color, and we’ll use an image to set the stripes and horizontal bands.

Open Photoshop and set a horizontal guide (View – New Guide) at 321 pixels. This will be immediately below the border between the green horizontal band and the gray background color. We want everything above the gray, include the border to be in our background image. Then set vertical guides at 1300 pixels and 1400 pixels. Because the gray header includes noise, we want to make this image wide enough that it looks smooth when it repeats horizontally. Use the rectangular marquee tool to select the area between the guides.

With that area selected, go to Edit – Copy Merged. Then create a new file (File – New) that is 100 pixels wide and 321 pixels high. In the new file, go to Edit – Paste to paste in what you have copied.

Save this file in the images folder as bg.jpg.

Next, we’ll work on the logo. Set vertical guides at 227 pixels and 440 pixels. Set horizontal guides at 11 pixels and 130 pixels.

In the layers palette, deactivate all of the layers in the header folder except the two text layers that make up the logo. Also deactivate the background layer in the background folder.

Then you should have something that looks like this.

Back in the layers palette, select both of the text layers of the logo (hold ctrl + click to select both), go to Layer – Merge Layers and both of the text layers will be combined. Now, select the crop tool and use the guides to crop just the area of the logo. It should be 213 pixels wide and 113 pixels high.

Save this file in the images folder as logo.png.

After that file is saved, undo the crop so that the full PSD is open again. If for some reason you have trouble with the undo, you can open up your backup copy.

Next, we’ll work on the header background image. Reactive the layers of the header except those that are use for the navigation menu. Now we want to deactivate the layer(s) that includes the logo, and you should have something that looks like this.

Set a horizontal guide at 170 pixels. Use the rectangular marquee tool to select everything above this guide, the full width of the canvas.

With that area selected, go to Edit – Copy Merged. The open a new file that is 1400 pixels wide by 170 pixels high and paste in the selection.

Save this in the images folder as header-bg.jpg

Next, we’ll work on the gradient background image for our teaser section. Set horizontal guides at 221 pixels and 309 pixels. Set vertical guides at 232 pixels and 233 pixels. Increase the view to about 700%. Use the rectangular marquee tool to select the area between the guides and go to Edit – Copy Merged.

Create a new file that is 1 pixel wide and 88 pixels high. Go to Edit – Paste to paste in the copied selection.

Save this in the images folder as teaser-bg.jpg

Next, we’ll do the same thing for the gradient background of the featured area, which is just below the teaser. Set horizontal guides at 321 pixels and 553 pixels. You can still use the vertical guides at 232 pixels and 233 pixels. Use the rectangular marquee tool to select the area between the guides and go to Edit – Copy Merged. Create a new file that is 1 pixel wide and 232 pixels high and paste in what you copied.

Save this in the images folder as featured-bg.jpg

Next, we’ll work on the “Get in Touch” button from the teaser area. In the PSD file, find the layer with the rounded rectangle shape that makes up the button and the layer of text that sites on top of it (they are in the “Featured Area” folder of the PSD). In the layers palette, click on the shape layer and then hold CTRL and click on the text layer that says “GET IN TOUCH”.

With both layers highlighted, go to Layers – Merge Layers. With the merged layer highlighted in the layers palette, go to Select – All, and then Edit – Copy. Create a new file that is 262 pixels wide and 52 pixels high, with a transparent background. Then paste in the button that you copied.

Save this in the images folder as get-in-touch-button.png.

Next, we’ll work on the “services” button from the featured area. You’ll want to follow the same process that we just did for the “get in touch” button. Find the shape layer and the text layer in the layers palette that make up the button, merge the two layers, copy the merged layer to your clipboard, create a new file that is 130 pixels wide and 35 pixels high, with a transparent background. Then paste in the button.

Save it in the images folder as services-button.png

Next, repeat this process for “testimonials” button. It is the same height and width as the “services” button.

Save it in the images folder as testimonials-button.png.

Next, we’ll do the chart icon. Use the layers palette to find the layer with the chart icon and click on that layer. Go to Select – All and then Edit – Copy. Create a new file that is 178 pixels wide and 200 pixels high, with a transparent background. Go to Edit – Paste to paste in the icon that has been copied.

Save it in the images folder as chart-icon.png.

Now we’re down to our last image, the news icon. Find the news icon layer (it’s in the “Sidebar” folder) and click on it in the layers palette. Go to Select – All and then Edit – Copy. Then create a new file that is 30 pixels wide and 26 pixels high, with a transparent background. Go to Edit – Paste to paste the icon in the new file.

Save it in the images folder as news-icon.png

Step 3: The HTML

Now that we have all of our images ready we can go ahead and start coding the page. Here is a diagram that shows the basic sections of the page as they will be coded.

Open the index.html file. I’m going to paste the full HTML code for the page here, and then as we work on specific sections of the design with CSS I’ll explain some things about the code.

[cc lang=”html”]

[/cc]

Here is a view of our unstyled page.

Step 4: The CSS

Ok, we’ll start with a CSS reset and some basic styling.

[cc lang=”css”]
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
body {
background: #dde0dd url(images/bg.jpg) repeat-x top;
font: normal 14px/24px Arial, Helvetica, sans-serif;
color: #171817;
padding-bottom: 20px;
}
a {
color: #112002;
}
a:hover {
color: #569814;
}
p {
margin: 20px 0;
}[/cc]

On the body tag we are applying the background image from the PSD file and we’re setting it at the top of the page and to repeat horizontally (along the X axis). This image will repeat so that on widescreen monitors the background will still be in place.

We’re also setting some basics like link styling and paragraph styling. The PSD file did not include anything for the hover state of links, but we’ll use CSS to give links a lighter shade of green on hover.

Of course, with just these styles our page isn’t much to look at, but here it is.

Now let’s take care of some of the header styling.

[cc lang=”css”]
#header {
width: 100%;
height: 170px;
}
#headerInner {
width: 960px;
height: 130px;
margin: 0 auto;
}
h1 img {
margin: 11px 0 0 5px;
}[/cc]

We are using a header with a width of 100%, and the reason for this is that our header image in the PSD file has a radial gradient applied behind the logo, and it extends beyond our width of 960 pixels that contains the content of the page. So then we are using CSS to set the background image of the header, and we’re placing it at the top and center with no repeating.

Inside the header we have the headerInner div, which will be centered using a margin of “auto” for the left and right. Our logo is inside the h1 tag, so we’re setting the h1 image to have a top margin of 11 pixels, which clears the dark gray bar at the top of the page.

Next, we’re working with the CSS for the navigation menu. We’re placing the unordered list inside a div with an id of “nav” and that div is 960 pixels wide and centered to keep it lined up with our headerInner div.

[cc lang=”css”]
#nav {
width: 960px;
height: 40px;
margin: 0 auto;
}
#nav ul {
width: 960px;
height: 40px;
list-style: none;
}
#nav li {
height: 40px;
float: left;
}
#nav li a {
width: 190px;
height: 39px;
line-height: 39px;
background: #959695;
color: #171817;
border-top: solid 1px #787a78;
border-right: solid 1px #bdbebd;
border-left: solid 1px #787a78;
display: block;
text-align: center;
text-decoration: none;
}
#nav li a:hover {
text-decoration: underline;
}
#nav li a.active {
height: 40px;
background: #356406;
color: #fff;
border: solid 1px #224003;
border-bottom: none;
}[/cc]

We’re using list-style-none on the unordered list to remove bullets, and each list item is floated left so they will line up horizontally rather than vertically. The non-active tabs are given a gray background color and border styling, and the active tabbed is styled separately through the class “active”. We’ve increased the height of this tab from 39 pixels to 40 pixels so it will overlap and cover the green bottom border, giving it the appearance of a tab that flows from the green horizontal band.

Here’s how it will look now.

The next thing we’re going to do is style the wrapper. The wrapper div contains every other part of content on the page that we have not styled already, except for the footer.

[cc lang=”css”]
#wrapper {
width: 960px;
background: #fff;
border: solid 1px #cccfcc;
margin: 39px auto 0;
}[/cc]

The wrapper has a width of 960 pixels and we’re using the auto margin on the left and right to center it.

Here’s how it looks after that small change.

Now we’ll work on the teaser section that includes some text and the “get in touch” button.

[cc lang=”css”]
#teaser {
width: 900px;
height: 68px;
background: url(images/teaser-bg.jpg) repeat-x top;
margin: 10px;
padding: 10px 20px;
border: solid 1px #646464;
}
#teaser p {
width: 635px;
float: left;
font-size: 16px;
margin: 10px 0 0 0;
display: inline;
}
#teaser img {
float: right;
margin-top: 8px;
}
.largeText {
font-size: 20px;
}[/cc]

We’re giving this div a width of 900 pixels with 20 pixels of padding on the sides and a 10 pixel margin. The margin creates the whitespace inside of the wrapper div. We’re also giving the teaser div a background image that will give the section the gradient background from our design.

The text of this section is inside of paragraph tags, so we’ll give the paragraph a width of 635 pixels and float it to the left. There is a span with a class of “largeText” and this is being styled to be 20 pixels instead of 16 pixels. The button is floated to the right.

Here is a preview.

Below the teaser area is the “featured” div, which we will style next.

[cc lang=”css”]
#featured {
width: 900px;
height: 212px;
background: #3c3934 url(images/featured-bg.jpg) repeat-x top;
margin: 10px;
padding: 10px 20px;
border: solid 1px #312f2b;
}
h2 {
width: 670px;
font-size: 30px;
font-weight: normal;
color: #f8fcf8;
margin: 10px 0;
}
#featured p {
width: 670px;
float: left;
font-size: 16px;
line-height: 24px;
color: #cfd1cf;
margin: 0;
}
.featured-button {
margin: 30px 45px 0 0;
}
.featured-icon {
float: right;
margin: 0 36px 0 0;
display: inline;
}[/cc]

Like the teaser div, the featured div is also given the same with, padding, and margin. We’re also using CSS to give it the linear gradient background image that repeats horizontally.

We’re then styling the h2, which is contained in the featured div, and the paragraph of text. We’re giving it a light color to be readable on the background. As with the teaser area, we are giving the paragraph a width and floating it to the left. The icon is then floated to the right. We’re giving the buttons a top and right margin to space them properly.

At this point our page looks like this.

The next area to tackle is the main content.

[cc lang=”css”]
#mainContent {
width: 580px;
float: left;
display: inline;
margin: 30px 30px;
}
h3 {
font-size: 18px;
font-weight: normal;
color: #112002;
}[/cc]

Here we are giving the mainContent div a width of 580 pixels and floating it to the left. We’re also setting the necessary margins, and in a minute we will float the sidebar to the right. Here we are also styling the h3 tage to have larger text and a dark green color.

Here is a look.

Now on to the sidebar.

[cc lang=”css”]
#sidebar {
width: 290px;
float: right;
display: inline;
margin: 30px 30px 30px 0;
}
h4 {
height: 26px;
line-height: 26px;
font-size: 18px;
font-weight: normal;
color: #112002;
padding-left: 40px;
background: url(images/news-icon.png) no-repeat left center;
}
h5 {
font-size: 14px;
font-weight: normal;
color: #112002;
margin: 15px 0 0 0;
}
h5 a {
text-decoration: none;
}
.small-text {
font-size: 12px;
color: #43433e;
margin: -5px 0 0 0;
}[/cc]

We’re giving the sidebar a width of 290 pixels, setting the margins, and floating it to the right. We’ll also style the h4 tag to match the h3 tag, except we will be using CSS to set the news icon as a background image, and then applying left padding to the h4 so that the text sits next to the icon.

We’re also styling the h5 tags, which are the news headlines, and using the small-text class on the paragraphs that contain the date the news was published.

And it now looks like this.

The last thing we have to style is the footer.

[cc lang=”css”]
.clear {
clear: both;
}
#footer {
width: 960px;
margin: 0 auto;
padding: 20px 0;
}
#footer ul {
list-style-type: none;
}
#footer li {
float: left;
}
#footer li a {
margin-left: 30px;
}[/cc]

We’ll start by adding the styling to the clear div so that the white background color of the wrapper stretches below the main content and the sidebar.

Then we will give the footer a width of 960 pixels and use the auto margin to the left and right to center it. We’ll give the unordered list in the footer (navigation) a list-style-type of “none” to get rid of bullets, and we’ll float the list items to the left to line them up horizontally.

And now we have the finished product.

The PNG Fix:

One last thing we’re going to do is add a PNG fix since we have used some transparent PNG files. This will help IE6 to handle the transparency correctly. We’re going to use the Unit PNG Fix from Unit Interactive. Download the zip file from their site and add the following code to the header:

[cc lang=”html”]
[/cc]

Save the unitpngfix.js file from the download to your site’s folder (the one we referred to as “consulting” at the beginning of the tutorial. And save the clear.gif file to the images folder. That’s it, and now the PNGs should be displayed properly in IE6.

If you’re interested, the files for this tutorial can be downloaded in a zip file. It contains the index.htm, style.css, and unitpngfix.js files, in addition to the images folder with all of the PNG, JPG, and GIF files. To try to make it easy to follow, the style sheet is organized in the order that it was presented in this tutorial. If you are actually going to use this for any real-world purpose you’ll probably want to re-organize the style sheet.