Portfolio Design Part 2 ~ Vote For Your Interesting Internet

Portfolio Design Part 2

Written by Mohd JohariSeptember 26, 2008

This is the second part of the portfolio design tutorial where we are creating a stylish side-scrolling gallery where we can show of our work. This part will focus on the html/CSS side of things, even though this is a Photoshop website, it’s still important to branch out occasionally and a portfolio is useful for displaying your work anyway. This is a beginner tutorial.

INTRODUCTION

If you haven’t already read it then you should check out part one of the tutorial. I’ve not gone into all the basics of html and CSS but if you know some of the basics then this is a good opportunity to put your knowledge to use. This tutorial shows how to code the site using html and CSS only which maybe isn’t that efficient but I’m trying to focus on the layout and the styling so if you know a bit of PHP then you can use that to maybe loop over the images etc. I’m working on developing a CMS for portfolios like this which I’ll release soon and so far it has functions like image upload and resize, an admin dashboard, the ability to create new pages and to add a bio, I’m still working on template integration and a few other things so check back or subscribe so you don’t miss it. You can check out the final portfolio here. And lastly this is not developed for IE, I would need to create a separate stylesheet so if anyone feels like doing that then I would be happy, else I’ll just do it myself then put it available for download. Let’s go!

STEP 1

First we need to work out structure of our site; since this is a simple html/CSS only site then it won’t be complicated. We’re going to create everything on our computer then if you want to upload it to a hosting service then you can do that at the end. Since we’re only using html and CSS then you don’t have to worry about installing any programming languages or databases etc. Below I’ve shown a diagram of the structure of the site. The topmost folder, ‘.root’ is the root directory of the site, you only have to worry about this if you are going to put the site online otherwise just create a folder named portfolio then within that create the other folders using the same structure as well as the index.html and the style.css documents.

STEP 2

Open up your ‘index.html’ document in a text editor; notepad will do but there are better alternatives like Notepad++. Now type or copy out the code shown below into you document then I’ll explain it.


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
 
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Portfolio of Ross Aitken | PSDlearning</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
 
<body>

On line one we specify the type of document, here we’ve set it to ‘Xhtml 1.0 strict’, I’m not going to go into much detail but basically ‘DOCTYPE’ will tell the browser what kind of html we are using (there are a few) and this saves the browser from guessing. Next we have our ‘html’ tag, which begins the html code. After that we have the ‘head’ of the html document which contains some meta info, the title and links to any external stylesheets, javascripts, favicon etc. Here we’ve put the title which you can change then a link to the CSS stylesheet. Lastly we’ve got the ‘body’ opening tag which specifies the start of any content that will be shown in the browser window.

STEP 3

Now add this code below that.

<ul class="scroller">
 
 
 <li class="item">
  <a href="images/1.jpg">
   <img src="images/s_1.jpg"/>
  </a>
  <h3>Image Title</h3>
  <p>Client</p>
 </li>
 
 <li class="lamp">
  <img src="css/img/lamp.png"/>
 
 
 
 </li>
 
 
 <li class="item">
  <a href="images/2.jpg">
   <img src="images/s_2.jpg"/>
  </a>
  <h3>Image Title</h3>
  <p>Client</p>
 </li>
 
 <li class="lamp">
  <img src="css/img/lamp.png"/>
 </li>
 
</ul>

First we’ve got the ‘ul’ tag which specifies the start of an unordered list the ‘class=”scroller”‘ means we can style this element in the stylesheet seperately. Next we have the ‘li’ tag which denotes the start of a list item, this has class named ‘item’ attached to it and contains an image then the title and client of that image. After that we’ve got another list item which contains the lamp. I should also point out that the ‘‘ tags are used to comment out text so we can read them but the browser cant basically. After that we’ve got exactly the same two list items for the second image so you can see how to add more images by just copying and pasting these. Whenever you open a tag you have to also close it so thats why some of the tags start with’/’.

STEP 4

Now we’re going to quickly test our code but first you need to put some images in the ‘images’ folder, for each image we add to the portfolio we will have a small version and a large version; so for image 1, the large version will be named 1.jpg and you’ll have to resize it so it has a height of 522px exactly, the small version will be named s_1.jpg and will have dimensions no bigger than 480×360px (so as big as you can get it without going over these limits). Add at least two, if you add more then make sure you edit the code above. You’ll also want to download the image of the lamp here and save that in the ‘css/img’ folder. Now save the html document then open it in any browser except IE. You should get something pretty horible that resembles the image below, If not then recheck your code.

STEP 5

Now either type or copy the code below into the index.html document.

<div id="bio">
 <h2>Name</h2>
 <p>Bio</p>
</div>

The ‘div’ tag denotes a division in the code and is ussually used as a container we’ve set the id as ‘bio’, the id does exactly the same as the class where it lets you refer to the element in the stylesheet, however id’s are meant to be used when you are only going to have one element with that id whereas the same class can be used multiple times. For example we are only going to have one ‘bio’ on this page but may have multiple ‘lamps’. ‘h2′ is is just a header, ‘h1′ is the largest header and ‘h6′; the smallest but they can be styled anyway. The ‘p’ tag just means paragraph, so insert you or your company’s name where I put ‘Name’ and a short bio where I’ve put ‘Bio’.

STEP 6

This goes below again:

<div id="menu">
 <ul>
 
  
  <li>
   <a href="http://portfolio.psdlearning.com">All Work</a>
  </li>
  <br/>
 
  
  <li>
   <a href="http://portfolio.psdlearning.com/clients">Clients...</a>
  </li>
 
  
  <li>
   <a href="http://portfolio.psdlearning.com/contact">Contact...</a>
  </li>
 
 </ul>
</div>
 
</body>
 
</html>

You should understand this alright and if you want to add another menu item then just copy the part labeled ‘General menu item’. The ‘br’ tag here just specifies a line break and last of all we are just closing the ‘body’ and ‘html’ tags.

STEP 7

CSS code is fairly self explanatory and everything here is fairly simple so look over the code below then copy it into the style.css document. Note that I’ve put the word ‘COLOR’ as a comment beside certain parts of the code, these are the elements that I’ve colored lime green so if you want to go for a red theme then yo would change all these values to reddish hex value or just put in ‘red’. THe background property of the ’scroller’ element refers to background.gif, this is the pattern that we used in the previous part of this tutorial, you can downlound the one that I used here then make sure you put it in the ‘img’ folder. Some parts of this stylesheet are a bit strange and hard to understand and that’s because we’re making a side-scrolling web page where all browsers automattically wrap text an make thing scroll down so there are a few parts which are edging on CSS hacks. There may be a better way to do this but I haven’t found one yet. Lastly if you’re not familiar then a ‘#’ refers to an id and a ‘.’ refers to a class.

body {
margin:0;
background:#0c0c0c;
color:#ddd;
font-family:"courier new", rockwell, serif;
font-size:12px;
}
 
ul{
list-style:none;
margin:0;
padding:0;
}
 
a{
color:#ddd;
text-decoration:none;
}
 
a:hover{
color:#bfda29; /*COLOR*/
}
 
a:active{
outline:none;
}
 
a:focus{
outline:none;
}
 
h2{
font-size:24px;
margin:5px 0 0;
color:#bfda29; /*COLOR*/
}
 
h3{
font-size:14px;
letter-spacing:1px;
}
 
.scroller {
background:url(img/background.gif);
white-space:nowrap;
position:absolute;
padding:50px 200px 30px 400px;
top:80px;
border-top:1px solid #3a3a3a;
border-bottom:1px solid #3a3a3a;
height:440px;
}
 
.scroller li {
display:table-cell;
}
 
.scroller li.lamp {
padding:0 80px;
}
 
.scroller li.item{
text-align:center;
}
 
.scroller li.item img {
border:2px solid #bfda29; /*COLOR*/
}
 
.scroller li.item p{
text-transform:uppercase;
letter-spacing : 5px;
font-size:12px;
color:#bfda29; /*COLOR*/
}
 
#bio{
width:180px;
position:absolute;
padding:50px 15px;
top:80px;
z-index:8;
}
 
#menu{
position:absolute;
top:80px;
width:150px;
height:522px;
background:#0c0c0c;
border-right:1px solid #3a3a3a;
border-left:1px solid #3a3a3a;
margin-left:220px;
}
 
#menu ul{
text-align:right;
margin:97px 15px 0 0;
}
 
#pagetext{
width:200px;
}
 
#page{
overflow:hidden;
}

CONCLUSION

If you experiment with the stylesheet you’ll find that it’s very simple to change things about the site like the background color, the font, and even the wallpaper pattern. You can also try substituting the lamp image for something else if you really want to personalise the portfolio. Note that here I haven’t shown how to create pages but basically you just need to copy and paste the index.html file then rename it and substitute the images for text; simple. Hope you found that helpful and feel free to ask any questions in the comments.