DesignSchool Coded, Free CSS Template With PSD to HTML Tutorial

19 May 2009
Tutorials, Web Design
This post was written exclusively for PV.M Garage by piervix
Comments (22)»

In a previous post I have shared a Free PSD Template with a blog layout, DesignSchool.

This post describe how to convert a PSD layout in a real (X)HTML/CSS web-page. This is only a basic demonstration so I explain the basic issues to realize our home-page.

You can follow today’s post completely using the PSD Source file. Below there is a preview of the final result.
DesignSchool CSS Template

Draft, Sketch and Preliminary Operations

Before you play around with the code, it’s good practice to copy down on a sheet simplified diagram of the basic web-page layout.
From an initial analysis I divided the layout in header, sidebar, down-header, news-container and footer.
DesignSchool PSD Template Sketch

Layout from sketch

Below you can see clearly the base scheme applied to the template, the highlighted element are the “containers” for the main structure of the home-page.
DesignSchool PSD Template Sketch

Source Files

Create a new folder, in our case it has been named “designschool”, and inside we save ex-novo the files index.html and style.css, the images will be included in the “images” folder. I decided to create this files and folders because the main code will be made individually with a text editor (I used PsPad).
File sorgenti

Document type declaration

Once you create the new file .html it’s important to prepare optimally the document. Insert the version of (X)HTML, the tag <head> (where we highlighted meta-tag and the title) and specifying the tag <body> and <html>l>. At this point I also put the location of the CSS style sheet where I’ll be report the different rules.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DesignSchool | A free CSS Template | made in PV.M Garage</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

Background

The opportune choice of the image for background isn’t a simple operation. In this case we can see clearly the possibility to create a repeatable back-image that contains the background of the header and the gradient for the body of the page.
Choose from PSD the right part of background we need. First of all it must be reiterable. We have to focalize our attention on the inclined (little) triangles; then, our duty is to control that the gradient which shades completely into white is included ( #fff background colour of body).
Go to File–>Salva for Web for saving images from Photoshop and control devices for a correct choice between .jpg and .png selecting the appropriate size of them.

CSS Rules For Body

Now our image is available (in folder “images”), so with the text editor we edit a style file inserting the rules for the body. In addition to the background it’s useful include informations on the font-family and color.

body {
  background: #fff url("images/bck_top.jpg") repeat-x top;
  font-family: Georgia,Verdana, Arial,"Helvetica";
  font-size: 12px;
  color: #333;
}

Below you can see the result of this statement.
Background

Main Container

We’ll add the main structure of the web-page Between tags <body> </body> following the sketch of the previous step.

Why Main Container?

The segment div with id=”main_container” contains all the other elements except the footer. This is useful to define the general position and width. We add the following code in CSS style sheet:

#main_container {
	margin: auto;
	width: 950px;
}

HTML Layout

Now we add the other segments in the main container: header, sidebar, down-header e container.

<body>
<div id="main_container"><!--start main cont-->

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

  <div id="down_head"><!--start down head-->
  </div><!--end down head-->

  <div id="sidebar"><!--start sidebar-->
  </div><!--end sidebar-->

  <div id="container"><!--start container-->
  </div><!--end container-->

</div><!--end main cont-->
</body>

Header

In the header we have the logo and a second space in which to highlight important content.
In this case the images must be saved in png holding the transparecy (File–<Save for Web, select png-24 check trasparency option)
Header

Coding Header

Now we have the images available to update the index and style file as shown below.

<div id="header"><!--start header-->
    <div id="logo">
    <a href="#"><img src="images/logo.png" alt="Logo" /></a>
    </div>
    <div id="side_head">
    <a href="#"><img src="images/head_side.png" alt="Logo" /></a>
    </div>
  </div><!--end header-->

Di seguito riportiamo le dichiarazione per il CSS.

/*HEADER*/
#header {
  margin: auto;
  width: 800px;
}

#logo {
  margin-top: 50px;
  float: left;
}

#side_head {
  float: right;
  margin-top: 21px;
}
/*HEADER END*/

Down Header

The segment positioned just below the header is divided into three boxes: login-box, menu and advertisement-box.

Coding Down Header

We decide to use a single back-image and with the css property we manage the position.
Down Header .
Below you can see the markup.

<div id="down_head"><!--start down head-->
    <div id="menu"><!--start menu-->
       <ul>
         <li><a href="#" class="sprites"></a></li>
         <li><a href="#" class="sprites1"></a></li>
         <li><a href="#" class="sprites1"></a></li>
         <li><a href="#" class="sprites1"></a></li>
       </ul>
     </div><!--end menu-->
     <div id="adv"><!--start adv block-->
        <img src="images/adv.jpg" alt="Advertise" />
     </div><!--end adv block-->
     <div id="login"><!--start login form-->
      <form action="" method="get">
        <span class="login_text">UserName............</span><input type="text" class="login_field" value="" name="username" size="30" />
        <span class="login_text">............Password</span><input type="text" class="login_field" value="" name="password" size="30" />
      </form><!--end login form-->
     </div>
  </div><!--end down head-->

Now see CSS rules.

/*DOWN HEAD*/
#down_head {
  background: url(images/down_head.jpg) no-repeat;
  float: right;
  margin-top: 1px;
  width: 670px;
  height: 272px;
}

#down_head_right {
float: right;
border: 1px solid #000;
}

#menu {
  float: right;
  margin: 10px 25px 0 0;
}

#menu ul li {
  float: left;
  display: inline;
  margin-left: 30px;
}

.sprites {
  background: url(images/home.jpg) no-repeat -67px 0px;
  display:block;
  width: 67px;
  height: 43px;
}

.sprites:hover {
  background-position: 0px 0;
}

.sprites1 {
  background: url(images/page.jpg) no-repeat -67px 0px;
  display:block;
  width: 67px;
  height: 43px;
}

.sprites1:hover {
  background-position: 0px 0px;
}

#adv {
  position:relative;
  top: 63px;
  right: 18px;
  float: right;
}

#login {
  position: relative;
  top: 100px;
  left: 20px;
  float: left;
  width: 250px;
}

.login_text {
  font-size: 18px;
}

.login_field {
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
  width: 210px;
}
/*DOWN HEAD END*/

CSS Sprites

CSS sprite technique is a way to improve performance of a website by combining more images in a single, and with the CSS properties we can display the relevant portions of it on the page elements using background-position property.
CSS Sprites

Through properties width, height, display and background-position we can create a very responsive menu with a few lines of code.
Here there is an explanatory example.

This is the CSS rules:

.sprites {
  background: url(images/home.jpg) no-repeat -67px 0px;
  display:block;
  width: 67px;
  height: 43px;
}

.sprites:hover {
  background-position: 0px 0px;
}

Sidebar

We are forced to use two div elements “empty” for the sidebar.
In fact, in the original design we have two round corners (top and bottom), so we should use three back-image: one for the top, the second for the middle and the last on the bottom.
Again we save the images in PNG with transparency enabled.
Sidebar

Coding Sidebar

Elements div with id=”sidebar_top” and id=”sidebar_bottom” are empty, while in the element with id=”sidebar_middle” we put list elements.
The situation is clear looking the code.

  <div id="sidebar"><!--start sidebar-->
    <div id="sidebar_top">
    </div>

    <div id="sidebar_middle">
      <h1>I Nostri Corsi</h1>
        <ul>
          <li><a href="#">(X)HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">Adobe Photoshop</a></li>
          <li><a href="#">Adobe Illustrator</a></li>
          <li><a href="#">Adobe InDesign</a></li>
          <li><a href="#">Gimp</a></li>
          <li><a href="#">InkScape</a></li>
          <li><a href="#">Web Marketing</a></li>
          <li><a href="#">Search Engine Optimization</a></li>
        </ul>
     <h1>Le nostre sedi</h1>
        <ul>
          <li><a href="#">Gondor</a></li>
          <li><a href="#">La contea</a></li>
          <li><a href="#">Gran Burrone</a></li>
          <li><a href="#">Rohan</a></li>
          <li><a href="#">Mordor</a></li>
          <li><a href="#">Bosco Atro</a></li>
        </ul>
      <h1>Servizi</h1>
        <ul>
          <li><a href="#">E-leraning</a></li>
          <li><a href="#">Video Conferenze</a></li>
          <li><a href="#">Tutor accademici</a></li>
          <li><a href="#">Esami in sede</a></li>
        </ul>
      <a href="#" title="Materiale Didattico"><img src="images/download.png" alt="Materiale Didattico" /></a>
    </div>

    <div id="sidebar_bottom">
    </div>
  </div><!--end sidebar-->

In this markup we have used h1, so now we can write the style for heading tags and for link tag <a>

h1,h2 {
	color: #333;
	font-weight: bold;
}

h1 {
	font-size: 24px;
	line-height: 34px;
}

h2 {
	font-size: 18px;
	line-height: 34px;
}

h3 {
	color: #666;
	font-size: 18px;
	line-height: 34px;
}

a:link {
	color: #a20303;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #ac4545;
}
a:hover {
	text-decoration: underline;
	color: #ff0000;
}
a:active {
	text-decoration: none;
	color: #309DCF;
}

For the sidebar we can write:

/*SIDEBAR*/
#sidebar {
  float: left;
  margin-top: 10px;
}

#sidebar_top {
  width: 268px;
  height: 16px;
  background: url(images/sidebar_top.png) no-repeat;
}

#sidebar_middle {
  width: 268px;
  background: url(images/sidebar_middle.png) repeat-y;
  padding-left: 10px;
}

#sidebar_bottom {
  width: 268px;
  height: 23px;
  background: url(images/sidebar_bottom.png) no-repeat;
}

#sidebar_middle h1 {
  color: #a20303;
  font-size: 20px;
  line-height: 26px;
  margin: 0 15px 3px 0;
  padding-left: 5px;
}

#sidebar_middle ul {
  padding-bottom: 25px;
}

#sidebar_middle ul li {
  font-size: 14px;
  font-style: italic;
  line-height: 18px;
  padding: 5px 0 2px 15px;
  border-bottom: 1px solid #ccc;
  margin: 0 45px 0 20px;
}

#sidebar_middle ul li a {
  color: #666;
  text-decoration: none;
}

#sidebar_middle ul li a:hover {
  color: #a20303;
  text-decoration: none;
}
/*SIDEBAR END*/

Container and footer

The container is the segment where we put news and updates. While the footer follows the header design and there is a basic text with credits.

Coding Container

This is the markup.

<div id="container"><!--start container-->
    <h1 class="top_title">Ultime notizie dalla sede</h1>
      <div class="post">
      <h1 class="news_title">Lorem Ipsum Sit Amet</h1>
        <p>testo d'esempio
        <br /><span class="read_more"><a href="#">leggi tutto...</a></span></p>
      </div>

      <div class="post">
      <h1 class="news_title">Cicero</h1>
        <p>testo d'esempio
        <br /><span class="read_more"><a href="#">leggi tutto...</a></span></p>
      </div>

  </div><!--end container-->

Here the CSS rules.

/*CONTAINER*/
#container {
  float: left;
  width: 650px;
  min-height: 400px;
  background: url(images/bck_cont.jpg) no-repeat center top;
  padding-top: 15px;
  padding-left: 15px;
}

.post {
  padding-bottom: 15px;
  background: url(images/news_sep.png) no-repeat center bottom;
} 

h1.top_title {
  color: #a20303;
  line-height: 28px;
  margin: 0 15px 10px 0;
}

h1.news_title {
  padding-left: 20px;
  font-weight: normal;
}

#container p {
  font-size: 14px;
  line-height: 18px;
  padding-left: 20px;
  margin: 10px 0 30px 0;
}

.read_more {
  float: right;
  margin-top: 10px;
}
/*END CONTAINER*

Coding Footer

The footer is the only element that is outside the main container. This allows us to use a background image.
Below you can see the markup and CSS rules for footer.

<div id="footer"><!--start footer-->
  <div id="footercont">
  <p>© <b>DESIGN SCHOOL</b> 2009 all right reaserved<br />a <a href="http://www.pvmgarage.com">PV.M GARAGE PRODUCTION</a></p>
  </div>
</div><!--end footer-->

/*FOOTER*/
#footer {
  clear: both;
  height: 136px;
  background: url(images/bck_bot.jpg) repeat-x bottom;
  color: #ccc;
  font-size: 10px;
  line-height: 14px;
  font-family: Verdana, Georgia, Arial;

}

#footercont {
  text-align: center;
  padding-top: 85px;
}

#footer a {
  color: #ccc;
  text-decoration: underline;
  font-weight: bold;
}
/*END FOOTER*/

Testing, IEfix, Validation

The template should be checked in different browsers to evaluate the correct rendering. If there are troubles we can use conditional comments to select a different style sheet fo a particular browser. In our example we have a little problem with IE7 and so…

<head>
...
<!--[if IE 7]>
<link href="iefix/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

In the file ie7.css there is the correct code for IE7.

At the end we must validate the Markup here.

Other Interesting Stuff:

You may be interested in the following related articles as well. Don’t forget to Subscribe to our RSS Feed and Follow us on Twitter.

22 Comments

Leave Your Commment
RSS Feed


jpablobr
June 2, 2009 at 12:15 pm
Excellent! thank you so much!

Franz.jv
June 2, 2009 at 4:18 pm
It’s a good basic tutorial… great work!

marcelo
June 3, 2009 at 10:53 am
Brilliant work!
Could I use for a commercial project?
- Reply
  
  piervix
  June 3, 2009 at 11:10 am
  Yes, you can. It released under creative common license also for commercial use…
  Thanks!

web
June 3, 2009 at 11:09 pm
Brilliant thanks!

bakti fauzi
June 8, 2009 at 1:06 pm
You are my master, you explain the tutorial very good or amazing. i hope i can learn more and more from you. thank you for everything.

piervix
June 8, 2009 at 8:29 pm
Thanks for positive feedback bakti, and stay tuned because in the next weeks there will be other tutorials.

photo retouching
June 11, 2009 at 3:53 pm
Thanks for including the coding! most layout tuts leave you with a beautiful template and no idea about the code!

GuruShare
June 19, 2009 at 5:44 am
This is a really great tutorial and thank you for creating it. If you feel like creating a video of this tutorial we have a $1000 USD contest running for the best video tutorial. We are a social learning network and we would love to have great work like this displayed for everyone to learn from. Check us out @ http://www.gurushare.com, but regardless, thank you again for a solid tutorial.

John Gorsky
November 24, 2009 at 6:22 pm
Great work dude! Really, thanks for taking the time and making such a great tutorial.

R Aflec
November 26, 2009 at 9:04 am
“Great compilation! Thanks a lot for putting it all in one place, but there is another one to add to your list.

http://www.xhtml-css-code.com/html/things-to-remember-while-coding-a-website-to-make-it-search-engine-friendly

Though, not exactly a psd to html conversion article, but one must keep these tips in mind while coding a PSD into search engine as well as user friendly web layout.
“

php forms
February 1, 2010 at 8:00 pm
Thank you! Very informative great article!

Ashish Tank
February 19, 2010 at 2:48 pm
Cool Man Nice Tutorial… :)
Thanks for Posting

PV.M Garage | Web Design Blog