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 (268)»

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

PV.M Garage | Web Design Blog

DesignSchool Coded, Free CSS Template With PSD to HTML Tutorial

Draft, Sketch and Preliminary Operations

Layout from sketch

Source Files

Document type declaration

Background

CSS Rules For Body

Main Container

Why Main Container?

HTML Layout

Header

Coding Header

Down Header

Coding Down Header

CSS Sprites

Sidebar

Coding Sidebar

Container and footer

Coding Container

Coding Footer

Testing, IEfix, Validation

Author: Piervincenzo Madeo

268 Comments

Trackbacks

Leave your comment

Socialize With Us

Friends and Partners

Web Design Updates

PV.M Garage | Web Design Blog

DesignSchool Coded, Free CSS Template With PSD to HTML Tutorial

Draft, Sketch and Preliminary Operations

Layout from sketch

Source Files

Document type declaration

Background

CSS Rules For Body

Main Container

Why Main Container?

HTML Layout

Header

Coding Header

Down Header

Coding Down Header

CSS Sprites

Sidebar

Coding Sidebar

Container and footer

Coding Container

Coding Footer

Testing, IEfix, Validation

Author: Piervincenzo Madeo

268 Comments

Trackbacks

Leave your comment

Socialize With Us

Community News

Resources

Friends and Partners

Web Design Updates