Now we have come to part 2 of this series on how to create a single page portfolio from scratch. This part focuses on the HTML and CSS mark up to convert our .psd file to a living web page. The tools we need for this is of course – Photoshop, an HTML editor (in my case I’m using Dreamweaver) and multiple browsers for page testing. We’re also going to toggle between these tools a lot so be prepared to switch programs by using alt + tab often.

To preview what we are going to build – see the demo page. Just in case you missed the first tutorial, click here. So are you ready to get started? Let’s begin:

The Wrap, Header and Feature Divs

First of all, you will notice that our layout doesn’t really have anything in the header. This is because I’m sure you will use your own logo for your design – so I left that out. Second, is there really is no need for a navigation bar because we’re only building a single page. Although we may include some anchors in this area so we can quickly jump from one section of the page to another. Also important to recognize that most modern websites now have a large “feature” section which packs the main message of the website. This effect is proven to be pretty effective – that’s why we’re applying the same concept to our portfolio site.

In Dreamweaver, create a new HTML page, name it “index.html” and save it.

Create a CSS document – name it “styles.css” and save it in the same location as “index.html”. Link to the stylesheet from index.html by using a link tag:

<link type="text/css"  href="styles.css" rel="stylesheet" />

Now, we create the main DIV – we’ll call this the “wrap”. In this DIV we’ll house almost all of our elements (all but one: the footer – which I’ll explain later). In index.html, enter the code:

<div id="wrap">  </div><!--wrap-->

Next, we grab the body style of our page. Go to Photoshop and open our mockup. Flatten the image (“Layer” > “Flatten Image”) and grab a piece of background:

Still in Photoshop, press Ctrl + C to copy the selected area, create a new document – and paste (this will be our HTML body background that will span horizontally). Save this file as “body-bg.gif” inside a folder called “images” in our root directory.

Next is we apply some fixin’s to our CSS:

* {padding:0; margin:0}
  body{background: url(images/body-bg.gif) repeat-x #f3f2ed;}

The above code tells everything to reset to 0 padding and 0 margin. It also applies the body background to the image we just created, repeat it horizontally and apply the color #f3f2ed everywhere else. View your file in the browser, you should have something like below:

Now remember we created the main div? That is just sitting in somewhere in the page. Let’s apply some standard measurements to it and align it so it settles perfectly in the middle of our browser.

Note that in the beginning of this tutorial – I was going to use the 960.gs framework, but feel as though I’m cheating because the tutorial calls for “from scratch”. So I decided, I’m not using the framework and code everything by hand, hence – “from scratch”.

Add this code to your style.css:

#wrap {margin:0 auto; width:960px; background:#CCCCCC;  min-height:500px;}

This centers our wrap in the middle of the page, as well as set the default 960 pixels width. The background color and the minimum height properties are added temporarily so we can tell from the browser what we’re working with. Refresh your page and you should have something like below:

Go back to index.html and add the header div inside the wrap div:

<div  id="header"></div><!--header-->

Back to our style.css – add this piece of code:

#header {height:32px; background:#333333;}

Refresh your browser – and you can see where our header sits nicely on top. The background color again is temporary.

Next is our feature div. Create a new div tag in your index.html with the id of “feature”, place in between the “feature” divs. Add two paragraph tags inside with your own text. In my case – I’m using the default Lorem latin filler text:

1
2
3
4

<div id="feature">
<p id="slogan"><!--your fantastic slogan goes here--></p>
<p><!--followed by a smaller, but also fantastic slogan here--></p>
</div><!--feature-->

Notice the first paragraph tag has an id of “slogan”. This is because this is the primary text that we are going to style with an image. We are treating it as regular text for SEO purposes.

Go back to your mock up in Photoshop and press “Step Backward” (ctrl + z + alt) several times until you get the fully layered version once again. Make sure the guides are showing – select the feature section like below:

In your layers panel, make sure you hide all the layers that shouldn’t be shown. This includes all the background layers and text elements. The only layer that should remain is the large feature image and the borders and glow to the left. Select the feature area and hit crop (“image” > “crop”). Save this as “feature.png” inside our images folder. This will be our feature div background image:

Now in our styles.css – add the following code:

#feature {background:url(images/feature.png)  no-repeat; height:394px;}

Go back to your mockup and click “Step Backward” (“Edit” > “Step Backward”) to uncrop. Unhide the slogan layer and select it according to the guides. Crop once again and save this as “slogan.png”.

Now add this code to your styles.css:

1
2

#feature p#slogan {background:url(images/slogan.png)  no-repeat; width:390px; height:192px; text-indent:-9999px; position:relative;  top:30px; margin:0;}
#feature p {font-family:verdana; font-size:12px;  color:#FFFFFF; width:320px; line-height:20px; margin:48px 0 0 28px;}

The above code styles the two paragraph tags inside the feature div. The first one with a background image, and the next one as plain text. Now when search engines crawl our page – it still thinks both are plain text – which is a good thing.

I’ve also taken out the color property in our wrap div to see how our feature looks like. Another thing to remember is that since our feature sits in its own div – it will be easy to add a slideshow or something to that effect as replacement.

Now that our wrap, header and feature is in place, we’re ready to move to the next sections: Testimonials and Previous Work: