Portfolio Layout #10: Learn To Code It

Before attempting this tutorial I highly suggest you create the layout before hand and have it ready. For this you should reader this tutorial. The whole of the css document is well documented with every style entry comment coded on what it does.

Right lets get started, the first thing you need to do is create your template directory, just make a folder on your desktop called "portfolio" within this folder you need another folder called "images", a blank HTML document and a blank CSS document. Once you have those in place your ready to rock and roll.

Now when I code from a PSD file I generally code from the top and work my way down and slice the images as needed. When saving your images save them as a PNG file within the images folder, and try to use a name which corresponds with the image. Right lets take a look at our PSD and work out what we need.

Right looking at the image above we need a container div which will hold all our content in, a header wrapping div which will hold our logo and navigation, inside the header wrapper div we need a logo div and a navigation div. Then we need to set up a class for our content. Why use a CLASS and not DIV I here you say??? well a class can be repeated as many times as needed, a DIV shouldn't a DIV should be a unique element of the site. So our HTML structure should look like this.

Add the following code to your HTML document, once your done with the structure of the document add the code below inbetween your HEAD tags. Without the code below your CSS style sheet will be useless.

Open up your styles.css document in dreamweaver ready for your styles. The first thing we need to style is the main body of our document, we want to set all margins to 0, set our default font, size and color. We also need to set our background color and image. Head over to photoshop, flattern your layers into one layer (DONT SAVE IT THOUGH), select the rectangular marquee tool and make a selection like this.

The selection should cover your topbar and background up to the footer. Copy and paste the selection to a new document and save it as "bg.png" in your images folder. Now in the step above I mentioned we need to set our background color, well the background color we need to choose is the color in which ends at the bottom of the selection. You can get the color code by using the eye dropper tool in photoshop. How it works is the background image will be displayed up until the point it ends, then the background color will take over. Right now for the CSS.

Refer to the commented code for each element. The next DIV we need to style will be our container DIV and head wrap DIV. The code for these DIV'S looks like this.

Right that's our containers sorted, now we need to add our logo or website text in our case. You can do this two ways, the 1st one is save the website text and box as an image BUT doing this means you'll have to edit the image each time you want to update your text inside the box. The 2nd way is to just slice the box into an image and add the text using CSS. Now the choice is yours on the route you take. I'm going with the 2nd one as it offers the most flexibility and is quickest. The way we go about it is first you need to hide all your layers on your photoshop document except the rounded see through box.

Select the rectangular marquee tool and draw a box around your rounded box, make sure you include the drop shadow, its best if you zoom in and just follow the last pixel on the drop shadow. Once you've made the selection just goto "image > crop" (don't save .psd file) save the image as "logo.png". Now for the code.

Right you will notice height and width of the logo is the same specified in the CSS file this is important, your's might be different though as depends on where you made the selection in the PSD cutting stage. Also the HEAD_WRAP DIV is also 90px high which also corresponds with the logo. The head_wrap DIV is the box which will hold our logo box and navigation, there is no need for the head_wrap DIV to be any higher than our logo. We have also set a h1 tag within our logo DIV this will be the actual text of our website I.E yourname the #logo P tag is our slogan underneath our website title. Add the following to your HTML file within the logo DIV.

If you view your HTML document you should see everything display similar to your PSD file. The background, logo box, website title and slogan.

Right the next part we need to code is our navigation, firstly lets draft the navigation bar in our HTML document. Put the following code in your navigation DIV.

You'll notice there are now additional tags we need to style "ul", "li", "a" and some sort of hover. All these tags will have a class of "nav_links". The CSS looks like this.

That's it for the top half, save your work and test it out in your browser. Were now going to code and style our content box, don't forget the content box will be a CLASS not a DIV. Your going to need to slice your content box image, to do this you need to hide all your layers in your PSD file and leave in view the content box and the pattern, goto "edit > merge visible" (don't save .psd) draw out your selection using the rectangular marquee tool, either crop it or copy & paste to a new document then save as content_box.png

You can now add the styling to your content class, which looks like this.

The height and width refer to the actual dimension of your content_box.png image. Yours might be different depending on where you made the selection. Once you've added the styles above you can view the HTML file and your content box should show up. The content inside the content box will each have there own classes and will be coded like this.

The HTML code for the image above looks like this.

The CSS styling for the class above looks like this.

The width and height in the content_thumb class will refer to the height and width of your thumbnail image, we create our thumbnail image by merging the thumbnail and thumbnail border layers as one, then simply copy and paste to a new document, save as what ever thumb.png. Right lets insert out content into our content box. We need to place our thumbnail in there, our header for the image, descriptive text and then our footer app and date.

Check your HTML document in your browser you should have everything placed nicely. If you wanted to create another box for another project just copy and paste everything in the content class. so from DIV CLASS CONTENT to CLOSING DIV CLASS CONTENT then paste it underneath. You will just need to edit the thumbnail and content within the box to your new project, as easy as that.

Finally we need to add our footer styles.

The footer background image will refer to the footer slice, you should no how to create the footer image by now similar to how we created our background image, just make a selection about 4 pixels wide. The image will then be repeated in CSS. You just need to add your P tag in your HTML document.

That's it basically all done. Spread the word and I hope to see all your portfolios out and about you've got no excuse not to have one now.

Additional steps

You can make your portfolio more interesting by adding a bit of jquery interaction. These extra steps will get your images loading up in lightbox. The simple lightbox jquery plugin were using is by by Lokesh Dhakar, I haven't really tested out a lot of plugins but I no this one works and does the job. All the files needed for the lightbox are included in the download in a folder called lightbox. Just copy & paste the folder into portfolio directory. Open up your index.html file and reference the files like we do our CSS file.

The files are referenced find your thumbnail code and just add rel="lightbox" within the A tag.

Upload your files to your server and test it out Note lightbox only works with images and you need the full size image of the thumbnail in a folder somewhere on your server.

Many thanks for reading this tutorial. Till next time.