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 (278)

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 todays post completely using the PSD Source file. Below there is a preview of the final
result.
Draft, Sketch and Preliminary Operations
Before you play around with the code, its 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.
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.
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).
Document type declaration

Once you create the new file .html its 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 Ill 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 isnt 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 its 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.
Main Container
Well 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">
<div id="header">
</div>
<div id="down_head">

</div>
<div id="sidebar">

</div>
<div id="container">

</div>
</div>

</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)
Coding Header
Now we have the images available to update the index and style file as shown below.
<div id="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>
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.
.
Below you can see the markup.
<div id="down_head">
<div id="menu">
<ul>
<li><a href="#" class="sprites"></a></li>
<li><a href="#" class="sprites1"></a></li>
</ul>
</div>
<div id="adv">
<img src="images/adv.jpg" alt="Advertise" />
</div>
<div id="login">
<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>
</div>
</div>
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.
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.
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">
<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>
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 {
color: #ac4545;
}
a:hover {
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;
}
#sidebar_middle ul li a:hover {
color: #a20303;
}
/*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">
<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>
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">
<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>
/*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;
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>
...

</head>
In the file ie7.css there is the correct code for IE7.

At the end we must validate the Markup here.

Designschool Coded, Free Css Template With PSD To HTML Tutorial

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Designschool Coded, Free Css Template With PSD To HTML Tutorial

Uploaded by

Copyright:

Available Formats

DesignSchool Coded, Free CSS Template With

PSD to HTML Tutorial

Document type declaration

Below you can see the result of this statement.

Why Main Container?

<div id="down_head">

<div id="sidebar">

<div id="container">

</div>

Di seguito riportiamo le dichiarazione per il CSS.

Coding Down Header

Now see CSS rules.

This is the CSS rules:

For the sidebar we can write:

Container and footer

Here the CSS rules.

Testing, IEfix, Validation

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

You might also like