Step-by-step walktrough for coding a Web Site from a Photoshop template

Hello again! This time we are going to do some PSD to XHTML/CSS, meaning we will make fully functional web page from a template we created in Photoshop. For this tutorial I created a very simple web page template which you can download in PSD format. It isn't very original-looking either, but it will serve it's purpose. And of course you can use it in any way (except of course altering the Croatia images or claiming them as your own).

Because this is a walkthrough we will go one step at a time so you can understand what is happening at each stage, rather than I just give you the final HTML and then a final CSS and let you figure it out yourself what each div or CSS property is for.

Anyway, here is a preview of what we'll be creating:

1. Analysing the PSD

  1. Header
  2. Menu (Navigation)
  3. Wrap (Content & Sidebar)
  4. Footer

As, you can see, we have classic 2 columns for our „Wrap”. So, we can divide our Wrap area into 2 parts:

  1. Content part
  2. Sidebar part

By analysing the PSD you can also see that our page will need the following features so it looks and acts good:

  • Header, footer & wrap backgrounds extend for entire width of viewport
  • Page centered in the viewport
  • Footer always sticks to the bottom of the page
  • Menu contained in CSS Sprite image

So, let's get into it:

2. Creating the basics needed for slicing

Open your favorite editor and create a HTML file. Let's create a basic layout. We will add aditional markup needed for for menus, content and sidebar later.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>My web site</title>
</head>
 
<body>
 
<!-- main div -->
<div id="outer">
     
    <!-- header -->
    <div id="header">header</div>
     
    <!-- wrap -->
    <div id="wrap">wrap</div>
     
    <!-- footer -->
    <div id="footer">footer</div>
     
</div>
 
</body>
 
</html>

Now we have a basic HTML layout for our site. Now let's do some basic CSS formatting of our layout, including sticking a footer at the bottom of the page.

Create a CSS and include it in head section of your HTML document:

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

First, we are going to reset the CSS. CSS Reset removes browser predefined styles for HTML elements. Now our styles should behave consistently across all browsers. For this task you can use either: Yahoo's CSS Reset or Eric Meyer's CSS Reset. In this example I used modified Yahoo's. So let's reset the CSS:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,td { 
    margin:0;
    padding:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}

Now let's make some basic adjustments and styling, including making our footer stay on bottom of the page. How it works you ask? First, we must set the height of html and body to 100%. The outer div then has 100% height even if the page is empty. It has position: relative property which enables us to absolutely position footer inside it. For further reading about the footer issues I recommend you consult the Internet :) For example: Get down! How to keep footers at the bottom of the page or Footers on fortysevenmedia or maybe A List Apart on footers or simply google it and have fun! :)

Anyway, I got a little bit carried-away with the footers. Just add the following CSS behind our reset:

html {
    height: 100%;
}
 
body {
    height: 100%;
}
 
#outer {
    min-height: 100%;
    position: relative;
    background: #ffcc66;
    font-size: 1em;
}
 
#header {
    background: #446b9a;
    height: 160px;
}
 
#wrap {
    padding-bottom: 200px;
}
 
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 125px;
    background: #d36111;
}

We get basic layout with our footer always at the bottom. It should look like this:

Now, as we said before, we need the web page actually centered in the viewport of the browser. In the same time we can divide the wrap area into two parts we mentioned earlier, namely content and sidebar.

To do that, let's first change HTML for header, footer and wrap a bit. Inside each add a new div with container class, and for wrap add two aditional divs for content and a sidebar.

<!-- header -->
<div id="header">
    <div class="container">
        <h1>My web site</h1>
    </div>
</div>
 
<!-- wrap -->
<div id="wrap">
    <div class="container">
        <div id="content">content</div>
        <div id="sidebar">sidebar</div>
        <div class="clear"></div>
    </div>
</div>
 
<!-- footer -->
<div id="footer">
    <div class="container">footer</div>
</div>

Now let's just modify our CSS a little bit to center the page and to create our 2 columns. Add the following to CSS:

.container {
    width: 960px;
    margin: 0 auto;
}
 
#content {
    float: left;
    width: 630px;
    margin-right: 30px;
}
 
#sidebar {
    float: left;
    width: 300px;
}
 
.clear {
    clear: both;
}

And that's it. Now for the fun part: slicing and adding content!

Note: We are going to add the menu later because it is done with CSS Sprites and adding those now would just complicate things, especially for beginners. So let's just focus on slicing and adding the content and simple things now, and we will be adding the menu later. Ok? I know it is! :-)

3. Slicing a template

Open Photoshop and prepare to slice and dice our template. Imagine, for slicing we are going to use Slice tool! If you downloaded the source I recommend you use the PSD without slices and make them yourself.

Grab a slice tool, zoom in our design enough so that we can slice with precision and start slicing. First, we need backgrounds for header, wrap and footer.

When slicing the background for header and wrap don't include the borders, because it is more flexible to add them via CSS. Also when slicing the footer you will need to include extra 1px of white (first border). Alternatively you could make another div inside footer with necessary borders. When working on the header make a orange menu-line part of the header too, because it's simpler. Consult the samples when needed.

When slicing a background for the wrap be sure to slice to the point where gradient ends and solid color (our #ffcc66) begins. We can use eyedropper tool to chech for that place.

When we finish with the backgrounds for wrap, header and footer, we can slice the background for boxes on the sidebar. Now we have finished with the backgrounds. Time for images we will use for content. Do not slice borders and spaces around the images, because we will add them via CSS. Now just to slice Social icons and we're done!

By the way don't forget to save the PSD as you are slicing. And don't worry about Photoshop adding unneeded slices, we will only save those we need.

Now when we're done, it is time to save the slices we need for coding our design. First, let's save slices for which we don't need transparent backgrounds, such as main image, blog image and gradients for header, footer and wrap:

Go to File -> Save for Web and Devices and using Slice select tool and shift key select the needed slices:

Then click save. On next screen make sure to select the option to save only selected slices. Of course we could save all slices and then delete those we don't need, but this is more convenient.

Now it is time to save the slices with transparent backgrounds. Those are: Social icons, Logo in the header, and &bdquo;Who am I icon&rdquo;. To do this first hide all the backgrounds beneath said elements, and then go to: File -> Save for Web and Devices.

Same deal here as before, except we need to select PNG-24 as our format of choice so that our transparency is preserved and that we can use those images on a background without ugly side-pixels. So we are aiming for a smooth look.

And we're finished with slicing! Just remember to name the images you save according to their position in the design. Now we are going back to the adding content and coding our HTML and CSS files.

Note: As I mentioned earlier, there is no need to slice the menu now, we will add it later and from a different file.

4. Styling our layout using background images

Now, let's style our layout with appropriate background images and see how it looks. But first, let's set some other useful things we'll need later, such as font size and family for the body. So let's modify our body a bit:

body {
    height: 100%;
    font-size: 62.5%; /* when this is set -> 1em = 10px */
    font-family: Arial, Helvetica, sans-serif;
}

And now, let's quickly style our layout with background images and borders:

#header {
    height: 160px;
     
    background: #446b9a url('images/header-bg.jpg') repeat-x;
    border-bottom: 1px #c66528 solid;
}
 
#wrap {
    padding-bottom: 200px;
     
    background: #ffcc66 url('images/wrap-bg.jpg') repeat-x;
    border-top: 1px #ffffff solid;
}
 
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 125px;
     
    background: #de834a url('images/footer-bg.jpg') repeat-x;
    border-top: 1px #d36111 solid;
}

Here's what our layout should look about now:

Ok, time to add the content inside our HTML file, so we can style it later.

5. Adding content to our HTML file

Content div (left side of wrap) of our HTML file looks like this:

<div id="content">content</div>

So, let's add texts and images from our design to it. Open your HTML file and edit your content div:

<!-- start content -->
<div id="content">
 
<h1>Welcome to my web site</h1>
<img class="photo" src="images/pula.jpg" width="618" height="227" alt="Roman Amphiteather in the city of Pula" />
 
 
    <div class="blog">
        <a href="#" class="post-photo"><img src="images/alkar.jpg" width="200" height="150" alt="Alkar Squire in the city of Sinj" /></a>
        <h1><a href="#">Greetings &amp; salutations</a></h1>
        <div class="post">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Mauris feugiat, eros vel commodo consequat, neque ligula 
            fermentum sem, quis elementum quam lectus eget orci.</p>
             
            <p>Suspendisse semper arcu ut urna sodales dignissim at vel felis. 
            Vestibulum non odio nulla, nec laoreet dolor. In at dui a ipsum 
            ullamcorper volutpat.</p>
             
            <a href="#">read more</a>
        </div>
    </div>
     
     
</div>
<!-- end content -->

Now we have added headers, text and images to our content div for the left side. Let's do the same for our sidebar:

<!-- start sidebar -->
<div id="sidebar">
 
    <div class="box">
        <img class="right" src="images/user.png" width="100" height="90" alt="Picture of me" />
        <h1><a href="#">Who am I?</a></h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus 
        fermentum facilisis lorem quis convallis. Donec id ipsum massa, sed 
        tristique elit. Quisque eu lorem dui. Etiam tellus justo, hendrerit 
        et lacinia a, viverra ut odio.</p>
    </div>
 
    <div class="box">
        <h1><a href="#">Image categories</a></h1>
        <ul class="links">
            <li><a href="#">Nature</a></li>
            <li><a href="#">Coastal</a></li>
            <li><a href="#">Cities</a></li>
            <li><a href="#">Arts &amp; Crafts</a></li>
            <li><a href="#">Panoramic images</a></li>
        </ul>
    </div>
 
    <div id="social">
        <a href="#" class="rss">Subscribe to my feed</a>
        <a href="#" class="twitter">Follow me on Twitter</a>
        <a href="#" class="facebook">Contact me on Facebook</a>
    </div>
     
</div>
<!-- end sidebar -->

Next we add text and links to our footer. Regarding the mail link I recommend that you encode your e-mail address using some of the online tools to prevent SPAM:

<!-- footer -->
<div id="footer">
    <div class="container">
     
        <div class="copyright">
            <h2>Copyrights &amp; Links</h2>
            <p>Images &copy; Croatian National Tourist Board</p>
        </div>
         
        <h2>My web site &copy; 2010.</h2>
        <p>All rights reserved.</p>
        <a href="mailto:email@domain.com">email@domain.com</a>
         
    </div>
</div>
<!-- end footer -->

Our page now looks like this:

All the content for our page is now added and the only thing left now besides a menu, which we will add later is to style our content. This is the fun part as we will be playing with CSS all the time. :-)

6. Styling the content with CSS

First, let's separate our page content from header and footer. To do this let's simply add some top and bottom padding to our content and sidebar divs. How much? We simply go to our design in Photoshop and using Ruler tool measure the distance from header to the sidebar box for instance. Anyway let's augment our content and sidebar and content divs with padding:

#content {
    float: left;
    width: 630px;
    margin-right: 30px;
     
    padding: 24px 0;
}
 
#sidebar {
    float: left;
    width: 300px;
     
    padding: 32px 0;
}

By the way I recommend that you keep your CSS organized in some way. A good place to start is perhaps dividing the CSS into different parts: for headers, for images, for paragraphs, etc. Let's style all the images on our page. Add it on the end of the current CSS. Our main image has a quite simple class:

img.photo {
    padding: 5px;
    background-color: #ffffff;
    border: 1px #d36111 solid;
}

Now let's style other images, including the image on the &bdquo;Who am I?&rdquo; part and blog post image and it's link. So right class is simple:

img.right {
    float: right;
    margin-left: 15px;
}

So HTML for our blog image looks like this:

<a href="#" class="post-photo"><img src="images/alkar.jpg" width="200" height="150" alt="Alkar Squire in the city of Sinj" /></a>

Regarding the image for a blog post, we must first style it's link, and then img tag itself. Observe:

a.post-photo {
    float: left;
    border: 1px #d36111 solid;
    background-color: #ffc757;
    padding: 5px;
    margin-right: 32px;
}
 
a.post-photo:hover {
    background-color: #de834a;
}
 
a.post-photo img {
    display: block;
    border: 1px #d36111 solid;
}

It is quite simple: first we float the entire thing, so it goes left of the blog title and text. Then we add border, margin and padding. We need the padding so that our image contained inside it is moved 5px from borders, and then we margin move blog text and title to the right.

Ok let's style the box div we use on the sidebar:

.box {
    padding: 18px;
    border: 1px #d36111 solid;
    margin-bottom: 32px;
    background: #ffffff url('images/box-bg.jpg') repeat-x;
}

Our page now looks a lot more like in Photoshop template:

Ok, time for styling headers and paragraphs! We will start with the h1 in the header section, and then get to those in the wrap and footer areas.

#header h1 {
    float:left;
    background: transparent url('images/logo.png') no-repeat;
    text-indent: -9999px;
    width: 259px;
    height: 56px;
    margin-top: 32px;
}

This header is a bit special, so let me just briefly explain (for beginners' benefit) what we did just now. What we did here is called image replacement. We move the text in the header outside the browser viewport and replace it with a background image (in our case logo.jpg). We need to specify dimensions of our logo so it's displayed entirely and we use the float and margin to position it where we want.

Next we style other headers, and links inside headers. First, let's set the styles shared on all h1 tags:

h1 {
    font: 3em Arial, Helvetica, sans-serif;;
    color: #414141;
    margin-bottom: 10px;
}

Confused by 3em? Remember what we said? When we set body font-size to 62.5% then 1 em = 10 px. So to get font size of 30px we use 3em. Why? Simply because if we set the font-size in px some browsers won't resize them.

Anyway, let's continue with styling our headers. Now when we have set the font-size and font-family for all the headers, we don't need to set them again. Instead those properties are inherited. Observe:

#content h1 a {
    color: #993300;
    text-decoration: none;
}
 
#content h1 a:hover {
    color: #d36111;
}
 
#sidebar h1 a {
    color: #d36111;
    text-decoration: none;
}
 
#sidebar h1 a:hover {
    color: #2469d1;
}

To style the blog post, let's briefly remember how the HTML for it looks:

<div class="blog">
    <a href="#" class="post-photo"><img src="images/alkar.jpg" width="200" height="150" alt="Alkar Squire in the city of Sinj" /></a>
    <h1><a href="#">Greetings &amp; salutations</a></h1>
    <div class="post">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Mauris feugiat, eros vel commodo consequat, neque ligula 
        fermentum sem, quis elementum quam lectus eget orci.</p>
         
        <p>Suspendisse semper arcu ut urna sodales dignissim at vel felis. 
        Vestibulum non odio nulla, nec laoreet dolor. In at dui a ipsum 
        ullamcorper volutpat.</p>
         
        <a href="#">read more</a>
    </div>
</div>

So we have a blog div which contains our entire post. We have already styled the images and links and now we just need to move it from the main image, set the font-size and line-height:

.blog {
    margin-top: 31px;
}
 
.post {
    font-size: 1.4em;
    line-height: 1.6em;
    float: left;
    width: 384px;
}
 
.post p {
    font-style: italic;
    color: #414141;
    margin-bottom: 25px;
}
 
.post a {
    font-weight: bold;
    color: #993300;
    text-decoration: none;
}
 
.post a:hover {
    color: #d36111;
}

After adding these styles, we have only one tiny problem displayed in the image below:

Our blog text now goes beneath the image, and we don't want that for this design. Fortunately, we fix it very easy. Just slightly change the post class:

.post {
    font-size: 1.4em;
    line-height: 1.6em;
     
    /* add this */
    float: left;
    width: 384px;
}

And Voila! Blog is finished!

Sidebar styling time! First let's take care of the paragraphs:

#sidebar p {
    font-size: 1.4em;
    line-height: 1.5em;
    font-style: italic;
    color: #414141;
}

And then, let's do the list of links in the Image categories section. First, let's have another look at the HTML behind it:

<ul class="links">
    <li><a href="#">Nature</a></li>
    <li><a href="#">Coastal</a></li>
    <li><a href="#">Cities</a></li>
    <li><a href="#">Arts &amp; Crafts</a></li>
    <li><a href="#">Panoramic images</a></li>
</ul>

So, we have a list, and inside every list item, there's a link. How do we style it? Easy:

ul.links {
    font-size: 1.4em;
    line-height: 1.8em;
    list-style: inside url('images/bullet.png');
}
 
ul.links a {
    font-weight: bold;
    color: #993300;
    text-decoration: none;
}
 
ul.links a:hover {
    color: #d36111;
}

Some might say: why use a image, when a bullet is a simple circle? Of course we could play with this list along these lines:

ul.links {
    list-style: disc;
    color: #993300;
    font-size: 2.5em;
    margin-left: 17px;
}
 
ul.links li a {
    font-size: 0.6em;
    position: relative;
    bottom: 5px;
}

But I say, let's keep it simple!

As for Social links on the sidebar, HTML is pretty simple:

<div id="social">
    <a href="#" class="rss">Subscribe to my feed</a>
    <a href="#" class="twitter">Follow me on Twitter</a>
    <a href="#" class="facebook">Contact me on Facebook</a>
</div>

So it's just a couple of links in a div. We style them like this:

#social a {
    display: block;
    color: #414141;
    font-size: 2.2em;
    padding: 5px 0 5px 40px;
    font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
    text-decoration: none;
    margin-bottom: 15px;
}
 
#social a:hover {
    color: #d36111;
}
 
#social a.rss {
    background: url('images/rss.png') no-repeat;
}
 
#social a.twitter {
    background: url('images/twitter.png') no-repeat;
}
 
#social a.facebook {
    background: url('images/facebook.png') no-repeat;
}

See what we did here? I hope you do. :)

OK let's do the footer really quick and we're done!

<!-- footer -->
<div id="footer">
    <div class="container">
     
        <div class="copyright">
            <h2>Copyrights &amp; Links</h2>
            <p>Images &copy; Croatian National Tourist Board</p>
        </div>
         
        <h2>My web site &copy; 2010.</h2>
        <p>All rights reserved.</p>
        <a href="mailto:email@domain.com">email@domain.com</a>
         
    </div>
</div>
<!-- end footer -->

First, when we look at the design we see that we must add some padding to our footer so that our texts are not directly at the top of the footer. We will add the padding to our container class in the footer, and not to the footer itself so it doesn't mess up our footer height:

#footer {
    color: white;
    font-size: 1em;
}
 
#footer .container {
    padding-top: 30px;
}

Now we float the copyright area and add some (pretty standard no-explanation-required :P) formatting to our links and texts:

#footer .copyright {
    float: right;
}
 
#footer h2 {
    font-size: 1.8em;
    font-weight: bold;
}
 
#footer p {
    font-size: 1.4em;
    line-height: 2em;
}
 
#footer a {
    font-size: 1.4em;
    font-weight: bold;
    color: #414141;
    text-decoration: none;
}
 
#footer a:hover {
    color: #ffcc66;
}

And after all this what do we get? We get this:

...which means the only thing left to do now is a menu. So, let's go!

6. Adding the menu

Let's have another look at the menu in our design:

Buttons in our menu have three states:

  1. Default-inactive (blue color)
  2. Hover (lime color)
  3. Selected or active (orange color)

So we need three different images for a single button and a mechanism to determine which button is the selected (active) one. Right?

Image for menu is contained in our samples, but you can get it here too (Right-click and &bdquo;Save Target As ...&rdquo;).

First, let's add the HTML for our menu into header:

<!-- header -->
<div id="header">
    <div class="container">
        <h1>My web site</h1>
         
        <!-- menu -->
        <ul id="menu">
            <li class="home"><a href="index.html">Home page</a></li>
            <li class="about"><a href="#">About me</a></li>
            <li class="blog"><a href="#">Blog</a></li>
            <li class="pictures"><a href="#">Pictures</a></li>
            <li class="contact"><a href="#">Contact</a></li>
        </ul>
        <!-- end menu -->
         
    </div>
</div>

See, our menu is contained in an unordered list. Each of the list items has it's class, which is needed for working with CSS Sprites, because each link has a different part of the background image shown. For detailed explanation about CSS Sprites, you can consult my blog entry about CSS Sprites.

Ok, first let's style and position our list:

#menu {
    width: 850px;
    float: left;
    height: 35px;
    margin-top: 15px;
}
 
#menu li {
    display: inline;
    text-indent: -9999px;
}

As you can see we once again use image-replacement for our menu, because the text is contained inside our images. Ok now we need to add the default properties for all the links in the menu:

#menu li a {
    display: block;
    float: left;
    background: transparent url('images/menu.png');
    width: 150px;
    height: 35px;
    margin-right: 8px;
}

As you can see, we get pretty nice buttons. We now need to position the sprite image so that we get proper text for each button:

#menu li.home a { background-position: 0 0; }
#menu li.about a { background-position: -151px 0; }
#menu li.blog a { background-position: -302px 0; }
#menu li.pictures a { background-position: -453px 0; }
#menu li.contact a { background-position: -604px 0; }

Ok, so now we get proper buttons for our menu. This stuff with the coordinates may look a bit tricky, but if you look at the patterns, you will see that it's pretty simple. Each button starts 151px of the previous one (of course, this depends on the Sprite image dimensions). Let's add the hover styles now:

#menu li.home a:hover { background-position: 0 -36px; }
#menu li.about a:hover { background-position: -151px -36px; }
#menu li.blog a:hover { background-position: -302px -36px; }
#menu li.pictures a:hover { background-position: -453px -36px; }
#menu li.contact a:hover { background-position: -604px -36px; }

Hover states are done! Only one thing left to do now. If you look at the design, now we need the buttons in the menu to indicate on which page we are just now. There are a lot of ways to do this, PHP for example, Javascript or pure CSS/HTML. I choose the Javascript solution because for pure CSS/HTML solution we would need to set id or class for body tag of each of our pages, and then insert the appropriate styles into CSS. It is in my opinion simpler to just use the javascript, and I have found just a neat little script for it here: Intelligent Navigation Bars with JavaScript and CSS

So in your favorite editor create a new Javascript file (.js) and paste the following code:

/*
    Adds class &bdquo;active&rdquo; to current page link
*/
 
function setActive() {
  aObj = document.getElementById('menu').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) {
    if(document.location.href.indexOf(aObj[i].href)>=0) {
      aObj[i].className='active';
    }
  }
}
 
window.onload = setActive;

Now let's save our file and include it in our HTML file:

<script src="script.js" type="text/javascript"></script>

When you do this, refresh the page and look at the source you should see &bdquo;active&rdquo; class added to the first (home page) link. So now we have a mechanism for determining which page is active and adds active class to the appropriate link. Only thing left to do now is to style our active links:

#menu li.home a.active { background-position: 0 -73px; }
#menu li.about a.active { background-position: -151px -73px; }
#menu li.blog a.active { background-position: -302px -73px; }
#menu li.pictures a.active { background-position: -453px -73px; }
#menu li.contact a.active { background-position: -604px -73px; }

Our active links need to have bigger height so that they seem connected to the orange line below the menu:

#menu a.active { height: 37px; }

And we're done with the menu, meaning we're done with the entire site! Here's what the menu looks like now:

Ok, thank you for you patience and I hope this post has been at least somewhat helpful to you. Enjoy your day!

Share this Post:

Comments

    Logged in users can add comments.

    Login

    Leave a new Comment