DesignSchool Coded, Free CSS Template With PSD to HTML Tutorial

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 Piervincenzo Madeo
  • Comments (281)»

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

Download Source
Download Source

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.
Background

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 information 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.

Author: Piervincenzo Madeo

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development.

website design and development

281 Comments

  1. jpablobr

    Excellent! thank you so much!

  2. Franz.jv

    It’s a good basic tutorial… great work!

  3. marcelo

    Brilliant work!
    Could I use for a commercial project?

    • piervix

      Yes, you can. It released under creative common license also for commercial use…
      Thanks!

  4. web

    Brilliant thanks!

  5. bakti fauzi

    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.

  6. piervix

    Thanks for positive feedback bakti, and stay tuned because in the next weeks there will be other tutorials.

  7. photo retouching

    Thanks for including the coding! most layout tuts leave you with a beautiful template and no idea about the code!

  8. GuruShare

    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.

  9. John Gorsky

    Great work dude! Really, thanks for taking the time and making such a great tutorial.

  10. R Aflec

    “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.

  11. php forms

    Thank you! Very informative great article!

  12. Ashish Tank

    Cool Man Nice Tutorial… :)
    Thanks for Posting

  13. jimmy swag

    IF I LOVED MEN. I WOULD LOVE YOU !

  14. Reidy

    …trying to learn the trade and really appreciate guys such as yourself who take the time to post tutorials like this one! i know i’ve got a long, long way to go to learn web design but everyone had to start from somewhere! if i changed the images, color scheme and layout could i use this for a project? great tutorial by the way! cheers!

  15. html5 tutorial

    useful info. thanks..soon html5 will take over the web :)

  16. Eugenia L. Drummonds

    Hmm singular this instal is totaly digressive to the look ask I entered in google but it was recorded on the original attender.

  17. Sherrell Dorene Bonaparte

    This appears a great site. I like the design and colour scheme and the posts.

  18. Alla Stelle

    Remember to excuse my own English, I am just learning. I enjoy your site very much, I find it worth it to read and I saved a bookmark in my world wide web.

  19. graphic design services

    Now days the online news websites play a vital role in educating and informing people about all the latest happenings around the world. Generally speaking, the role of an online news website is really very important in today’s fast life where no one has enough time to sit in front of Television to know what’s going around him.

  20. yard sprinkler systems

    I’m also commenting to make you be aware of of the great encounter my child developed reading the blog. She came to find some pieces, most notably how it is like to possess a wonderful helping character to let other people effortlessly learn several problematic issues. You actually exceeded her desires. Thanks for providing such informative, healthy, educational as well as fun tips on that topic to Julie.

  21. Armand Arico

    This domain seems to recieve a good ammount of visitors. How do you get traffic to it? It offers a nice individual spin on things. I guess having something authentic or substantial to give info on is the most important thing.

  22. Wycieczki Zagraniczne

    I am impressed. I dont think Ive met anyone who knows as much about this subject as you do. Youre truly well informed and very intelligent. You wrote something that people could understand and made the subject intriguing for everyone. Really, great blog youve got here.

  23. ixwdjavzisi

    k2HWkW wmpfqadbfigz, [url=http://xeobyivgciud.com/]xeobyivgciud[/url], [link=http://ofwkhzrzzsfx.com/]ofwkhzrzzsfx[/link], http://kczsddcutcqu.com/

  24. do follow

    There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM

  25. aqua aerobics when pregnant

    how to get pregnant fast?

  26. calorie intake to lose weight

    wow!I think you are amazing

  27. Darin Heneisen

    Youre so cool! I dont suppose Ive learn anything like this before. So good to seek out any person with some original ideas on this subject. realy thank you for starting this up. this website is one thing that’s needed on the net, someone with a bit originality. helpful job for bringing one thing new to the web!

  28. HXBrandon

    you can clean [url=http://www.cheaptiffanyandcouk.net/tiffany-rings]Tiffany White[/url] the tiffany jewelry [url=http://www.cheaptiffanyandcouk.net/tiffany-bracelets]Tiffany Bracelet[/url] with a way like giving this [url=http://www.cheaptiffanyandcouk.net/tiffany-bracelets]Tiffany Bracelets[/url] task to the professional [url=http://www.cheaptiffanyandcouk.net/tiffany-bracelets]Tiffany Charm Bracelet[/url] cleaning store,or do it by [url=http://www.cheaptiffanyandcouk.net/tiffany-bracelets]Tiffany Heart Bracelet[/url] themselves after they learn [url=http://www.cheaptiffanyandcouk.net/tiffany-bracelets]Tiffany Heart[/url] something about how to clean the jewelry,I [url=http://www.cheaptiffanyandcouk.net/tiffany-necklaces]Tiffany Necklace[/url] think you’d better select the first one.good luck!

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US