Last week we published a tutorial for designing a clean portfolio site in Photoshop. In the past I’ve had several requests to follow up the Photoshop tutorials with one for coding the HTML/CSS of the page, so that is what we are going to do today.

In this tutorial we will start with the Photoshop file that was designed as part of the previous tutorial (which can be downloaded from Folio Focus), and we will work our way through the process of converting that design into a coded page. We’re also going to implement a jQuery slider, so the lead image will be part of a rotation rather than just a static image.

target=”_blank”You can view a live demo of the page here. Additionally, the design is available in a free five-page template that can be downloaded from Folio Focus.

Before we get started with the coding it is helpful to get an idea of how the page will be structured. The image below shows the major sections of the design.

Create a New Folder:

Somewhere on your computer create a new folder that will be used to contain all of the files that we will be creating. Within that folder, create folders named “images” and “css”. The HTML that we will be working with should be saved in a file called index.html in the main folder.

The Images:

This design does not require very many images, so it should be fairly easy to slice. At this time we will create the image files that we will be using, including those that will be used as background images with css.

The Background Image

When coding the site we will be using one fairly small image to be set as the background image on the body of the page (using CSS). We want the image to include the blue gradient for the header area, the brown horizontal band, and the borders that go with each. This is very easy to do. In the Photoshop file, set a horizontal guide (View – New Guide) at 320 pixels (the bottom of the brown horizontal band) and vertical guides at 200 and 210 pixels. It should look like this (the exact vertical guides are not important, I just want to get a narrow section that includes the horizontal bands and none of the content area).

Using the rectangular marquee tool, select the area between the two vertical guides and above the horizontal guide (be sure the selection goes all the way to the top of the canvas).

Once you have the area selected, go to Edit – Copy Merged. This copies all layers for the selected area rather than just the active layer. Then create a new file (File – New) and paste the selection that you copied (Edit – Paste).

Save this as bg.jpg in the “images” folder.

The Logo Image

Next, we’ll need to create the image that will be used for the logo of the site. Clear the previous guides (View – Clear Guides). Create a new horizontal guide at 120 pixels and new vertical guides at 320 pixels and 700 pixels. Using the rectangular marquee tool, select the area between the guides.

With the logo area selected, go to Edit – Copy Merged. Create a new file (File – New) and paste in the selection that was just copied (Edit – Paste). This is what you will have.

Save this as logo.jpg in the “images” folder.

The Navigation Background Image

Next, we’ll be creating an image that will be used for the green gradient background of the navigation area. Create horizontal guides at 150 pixels and 190 pixels, and vertical guides at 540 pixels and 550 pixels. Use the rectangular marquee tool to select the area between these guides.

With the area selected, go to Edit – Copy Merged. Then create a new file (File – New) and paste in the selection that was copied (File – Paste). This is what you will have.

Save this as nav-bg.jpg in the “images” folder.

The Slider Image

The large area that will be used in the jQuery slider will be one image that is 910 pixels by 240 pixels. Set horizontal guides at 215 pixels and 455 pixels, and vertical guides at 345 pixels and 1255 pixels. Use the rectangular marquee tool to select the area between the guides.

With the area selected, go to Edit – Copy Merged. Then create a new file (File – New) and paste in the selection (Edit – Paste). This is what you will get.

Save this image as slider-image-1.jpg in the “images” folder.

The Quote Button

The last image is for the “Get a Quote” button. Set horizontal guides at 485 pixels and 515 pixels, and vertical guides at 1118 pixels and 1240 pixels. Use the rectangular marquee tool to select the area between the guides.

With the area selected, go to Edit – Copy Merged. Then create a new file (File – New) and paste in the selection (Edit – Paste). This is what you will have.

Save the button as quote-button.jpg in the “images” folder. You could also use a png file with a transparant background (for the corners of the image) in case you wanted to change the background color of the site later, but for simplicity we will just use it as a jpg.

The Basic Structure of the Page:

The next step is to give the page a skeleton structure. It will involve a wrapper div that contains everything on the page, than when we get to the CSS we will center the wrapper div. For now, here is the code that we will be using to start.

[cc lang=”html”]

[/cc]

The structure of the site is very simple. As I mentioned earlier, it uses a wrapper div to hold everything. There is a header div that will be used for the logo, a nav div for the main navigation menu, a slider-container and slider div for the jQuery slider area, a tagline div that will include the tagline text and the button, two content divs that will sit next to each other, and a footer div. The slider divs, tagline div, content-left and content-right divs will all be contained in a content div.

Adding the HTML:

Before we do any of the styling we will be adding all of the HTML. However, instead of starting with the slider we will code the HTML as if we are just using a static image instead of the slider. I find it to be easier this way because you can get the HTML entered, then style everything with CSS, then once it looks good you can put the finishing touch on by coding the slider.

The Header

We’ll start with the HTML for the header, which is very simple. We are just using an image for the logo, so here is the code that we will be using.

[cc lang=”html”]

[/cc]

The Navigation Menu

Right after the header comes the code for the navigation menu. We’ll need to use some IDs on the list items in order to style the tabs properly (which we will get to later), but everything is very straightforward.

[cc lang=”html”]

[/cc]

The Slider Area

To start with, we will code this area with just a static image. Later we will incorporate the slider. So for now this is the code that we will be using.

[cc lang=”html”]

[/cc]

The Footer

The last part of the HTML that needs to be added is for the footer. It includes links and we will also close out the wrapper div.

[cc lang=”html”]

[/cc]

That completes the basic HTML for the page. With no styling, at this point we’ll have a page that looks like this.

CSS:

With the base HTML set for the page, now we can focus on getting it styled to match the design that was done in Photoshop.

The Reset

The first thing we will do with the stylesheet is to add a reset. If you’re not familiar with resets, I recommend reading an article by Jacob Gube at Six Revisions, Resetting Your Styles with CSS Reset. Here is the CSS code that we’re using for the reset (save this as style.css in the “css” folder).

[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;
}[/cc]

The Body Styles

Next, we’ll add some style to the body tag, including the background image, background color, and font styling.

[cc lang=”css”]body {
background: #b1a38d url(../images/bg.jpg) repeat-x top;
font: 14px/20px Arial, Helvetica, sans-serif;
color: #463328;
}[/cc]

With the reset and the body styling, our design should look like this.

The Wrapper

Now we can add a few styles to the wrapper div that will center the layout.

[cc lang=”css”]#wrapper {
width: 960px;
margin: 0 auto;
}[/cc]

The Header

The header of this design is very simple and the background image on the body tag is doing most of the work, so all we have to is set the width and height, as well as a bottom margin that will push the navigation menu down and allow some of the brown horizontal band to show.

[cc lang=”css”]#header {
width: 960px;
height: 120px;
margin-bottom: 29px;
}[/cc]

Here is how it is looking at the moment.

The Navigation Menu

The navigation menu involves a good bit of CSS, so I’ll provide the code and then explain some things.

[cc lang=”css”]#nav {
width: 960px;
height: 40px;
background: url(../images/nav-bg.jpg) repeat-x;
border-top: solid 1px #d3f291;
}
#nav ul {
height: 40px;
list-style: none;
}
#nav ul li {
height: 40px;
float: left;
}
#nav li a {
height: 40px;
line-height: 40px;
display: block;
text-align: center;
text-decoration: none;

}
#home-tab a, #services-tab a, #portfolio-tab a, #themes-tab a {
width: 190px;
color: #fefae8;
border-right: solid 1px #bbdc75;
border-left: solid 1px #7b9c33;
}
#contact-tab a {
width: 190px;
color: #fefae8;
border-right: solid 1px #7b9c33;
border-left: solid 1px #7b9c33;
}
#home-tab a:hover, #services-tab a:hover, #portfolio-tab a:hover, #themes-tab a:hover, #contact-tab a:hover {
color: #463328;
}
#active-tab a {
width: 192px;
margin-top: -1px;
background: #fefae8;
color: #463328;
border: none;
border-bottom: solid 1px #fefae8;
}[/cc]

In the code above we are first including styles for the nav div, setting the width and height, a one-pixel border at the top, and using the green gradient image that we created earlier. The background image repeats horizontally (“repeat-x”), so we only need the small image.

The list items (links) are styled to not have a bullet, and they are styled to float left, which allows them to line up horizontally rather than vertically. The width of each tab is set to 190 pixels. 190 x 5 equals 950 pixels. The width of the nav div is 960. The active tab is styled to be 192 pixels, because it will not have a left or a right border like the other tabs.

Here is what it looks like at this point.

The Content Area

Now we can move on to the main content area. The content div contains several other divs that will each be styled, so there are only a few things we need to do with the content area.

[cc lang=”css”]#content {
width: 960px;
background: #fefae8;
padding: 20px 0;
}[/cc]

The Slider Area

For now we will only be adding styles to get the image centered and to give it the appearnace of a border. If we were going to be leaving it this way we would not need the slider-container div, but since it will be needed later we will go ahead and use it and style it now.

[cc lang=”css”]#slider-container {
width: 920px;
background: #e3d8c5;
margin: 0 20px;
padding: 5px 0;
}
#slider {
margin: 0 5px;
}[/cc]

Now our design is starting to take shape. This is how it looks.

The Tagline

To style our tagline div and button we will be floating the paragraph to the left and the image to the right. We’re also changing the font for this area to Georgia and putting it in italics.

[cc lang=”css”]#tagline {
width: 920px;
height: 38px;
margin: 20px;
border-top: solid 1px #e3d7c5;
border-bottom: solid 1px #e3d7c5;
}
#tagline p {
float: left;
margin-left: 20px;
font-family: Georgia, “Times New Roman”, Times, serif;
font-style: italic;
line-height: 38px;
}
#tagline img {
float: right;
margin: 4px 20px;
}[/cc]

Here is a look at the design in progress.

The Two Columns of Content

Now we are moving on to styling the two columns that make up the main text of the page. Each column is 440 pixels wide, one is floated to the left and the other is floated to the right. Margins are added to each column to allow for some whitespace at the edge of the design, and the left column also has a 40 pixel margin to the right that creates the gutter between the two columns.

[cc lang=”css”]#content-left {
width: 440px;
float: left;
margin: 0 40px 0 20px;
}
#content-right {
width: 440px;
float: right;
margin: 0;
}
#content-left p {
margin: 20px 0;
}
#content-right p {
margin: 0 0 20px;
}[/cc]

The columns look ok, but the background color is not filling the columns and the footer is sliding up under the right column.

We can fix this by adding a clear to the empty div that we added after the right column of content.

[cc lang=”css”].clear {
clear: both;
}[/cc]

Now it looks like this.

The H2 and H3 Tags

The content columns include some sub-headers, so we will need to style them as well. We’ll style the H3’s so they can sit directly above the paragraph below without any extra space, which means we’ll also need a style for the first one to have a top margin.

[cc lang=”css”]h2 {
font-size: 24px;
line-height: 36px;
color: #7b9d33;
}
h3 {
color: #cf8b1f;
font-size: 14px;
line-height: 20px;
margin: 0;
}
.top-margin {
margin-top: 20px;
}[/cc]

And it now looks like this.

The Footer

The footer is the last thing we have to style before moving on to the jQuery slider. We’re only adding a few simple styles to set the padding and to change the color of the links.

[cc lang=”css”]#footer {
padding: 20px;
}
#footer a {
color: #463328;
}[/cc]

And here is how it looks. The page is perfectly usable like this, but we will continue on with the slider.

Adding the jQuery Slider

There are a lot of slider scripts and plugins available and we will be using one from CSS Globe that was created by Alen Grakalic. Alen has released a few different versions of the Easy Slider plugin, and for this tutorial we will be using Easy Slider 1.5. There is also a newer version of the plugin that has additional features, but 1.5 has more than we will need. I recommend reading the post that Alen published with the first version of Easy Slider as it explains everything about the slider and how it work.

So the first thing to do is go to CSS Globe and download Easy Slider 1.5. Unzip the file and you’ll find a few different folders. Copy the “js” folder and paste it inside the folder that you created for the site that we are coding.

We will be using three different images in the slider, the last two that I am using are just filler images. Of course, you would replace these images with whatever you choose. All of the images should be the same height and width. We are using images that are 910 pixels wide and 240 pixels high.

Changes to the HTML

The slider works with a basic unordered list, so all we want to do with the HTML is remove the image that we initially coded in the slider div and add the unordered list. Here is the HTML.

[cc lang=”html”]

[/cc]

In the head tag of the HTML file, add the following code.

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

Remove the following code from the CSS file.

[cc lang=”css”]#slider-container {
width: 920px;
background: #e3d8c5;
margin: 0 20px;
padding: 5px 0;
}
#slider {
margin: 0 5px;
}[/cc]

Replace it with the following code.

[cc lang=”css”]
#slider-container {
width: 920px;
background: #e3d8c5;
margin: 0 20px;
padding: 5px 0;
}
#slider {
margin: 0 5px;
}
#slider ul, #slider li {
margin: 0;
padding: 0;
list-style: none;
}
#slider li {
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width: 910px;
height: 240px;
overflow: hidden;
}
span#prevBtn {
display: none;
}
span#nextBtn {
display: none;
}
[/cc]

In the easyslider1.5.js file (in the “js” folder), we’re going to make a few minor changes. On line 52 change the setting for “auto” from “false” to “true”. This will set the slider to automatically scroll rather than on click. On line 54 change the setting for “continuous” from “false” to “true”. This will cause the slider to go back to the first item after it has scrolled through all of the items. We’ll also change the speed from 800 to 1200 (line 51) to slow down the slide a little, and change the pause from 2000 to 4000 (line 53) so that it stays on each item for a little bit longer. Of course, you can change all of these settings as you desire.

And that’s it, the slider should now be working. You can see the live demo here.

If you’re interested in the free template, you can get it at Folio Focus.