How to Convert a Corporate PSD Web Layout into HTML CSS

AD

A few weeks ago we published a free PSD web template for a corporate website. A design with classy elegant look, suitable for any business or corporate website. We also had published its tutorial a week earlier.  Today I’ll describe how to convert that PSD file into an HTML CSS working website.

This is my first PSD to HTML tutorial, hopefully you’ll like it. I’ll greatly appreciate if your comments and suggestions for my guidance.

Final Result

This is what we are creating, I’m presuming that you have the PSD file opened in your Photoshop, let’s move on.

Live Preview

html-css template

Head Area Code

As usual, we are creating this template in HTML4 as it still is the most common language of the web. We have created a simple <head> section.

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Business Company</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

Moving Forward to Body

Details of <body> are given below this step. Right now, you can just see that I have created a master <div> with an ID of Main Container.

<body>
<div id="main-container">

    <!-- All the Body Area Code -->
 </div>
 </body>

CSS Body and Main Container

These are the CSS code properties of main <body> and the <div> ID Main Container. I have extracted the the background from PSD file and I’m using that picture in code.  I have also associated a gray color in the background.

@charset "utf-8";
   /* CSS Document */
   html, * {margin:0;padding:0;}
   body
 {
 background:url(images/bg-header.jpg) repeat-x #363637;
 }
 a {
 color:#FFF; text-decoration:none;
}
 #main-container {
 width:1000px; margin:0 auto;
 }

Logo and Navigation Area

html-css-coding

Time to create the navigation. I made a JPG of the logo, and also created a <ul> list for the nav bar. Here’s the HTML.

<div id="header-bg">
 <div id="logo">
<img src="images/logo.png" alt="" /> </div>
 <div id="nav">
<ul>
<li class="active"><a href="#"> Home </a></li>
<li><a href="#"> About </a></li>
<li><a href="#"> Products </a></li>
<li><a href="#"> Services </a></li>
<li><a href="#"> Contact </a></li>
</ul>
</div>

Css for Nav Bar

Now the CSS. You should play with the values to create something of your own.

#header-bg
 {
 height:413px;
 top:auto;
 width:1000px;
 overflow:hidden;
}
#logo
   {
   margin-left: 10px;
   margin-top:10px;
   width:200px;
   float:left;
   }

   #nav
   {
   background:#39393a;
   border-bottom:#48494a solid 7px;
   overflow:hidden;
   margin-left:334px;
   text-decoration:none;
   line-height: 0px;
   width:666px;
   height:50px;
   float:left;
   }
#nav ul
   {
   list-style:none;
   color:#FFF;
   }
#nav ul li
   {
   font:bold 15px Arial, Monaco, monospace;
   font-style:normal;
   color:#ffffff;
   background:#393a3b;
   width:44px;
   padding:12px 35px;
   margin:0 auto;
   float:left;
   }
#nav ul li:hover
   {
   border-top:5px solid #626262;
   }
   .active
   {
    border-top:5px solid #626262;
   }

Featured Area

featured-area-html-css

I’m using temporary text from an article of Designzzz, neglect that please.

<div id="line">
<h2> SOLUTIONS </h2>
<img src="images/line.png" alt="" />
<div>
<h3>It is a long established fact that a reader<br/>will be distracted by the readable content<br/>of a page when looking at its layout.</h3>
</div>
</div>
<div id="featured">
<a href="#"><img src="images/pic.jpg" alt="" /></a>
</div>
</div>

Featured Area CSS

And now the CSS. Always give the CSS it’s due value. It is sometimes neglected.

h2
 {
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:25px;
 color:#FFFFFF;
 padding:25px;
 margin-left:10px;
 margin-top:10px;
 line-height:2px;
 width:200px
 }
 h3
 {
 font-family:Arial, Helvetica, sans-serif;
 color:#FFFFFF;
 font-size:12px;
 margin-left: 20px;
 margin-top: 22px;
 font-weight:300;
 width:250px;
 text-align:justify;
 }
#line
   {
   margin-left:5px;
   width:300px;
   }
   #featured
   {
   float: right;
   height: 250px;
   margin-right:50px;
   margin-top:-96px;
   border:solid #333;
   }

Gallery Area’s HTML

html-css-tutorial

This is the slider/gallery whatever you wanna call it.

<div id="bar">
<div class="left-arrow">
<a href="#"><img src="images/left-arrow.png" alt="" /></a>
<div class="right-arrow">
<a href="#"><img src="images/right-arrow.png" alt="" /></a>
</div>
</div>
</div>
<div id="image">
<a href="#"><img src="images/img1.jpg" alt="" /></a>
<a href="#"><img src="images/img2.jpg" alt="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" /></a>
<a href="#"><img src="images/img4.jpg" alt="" /></a>
 </div>

CSS for this Area

CSS here a little tricky, pay attention please 🙂

.left-arrow
 {
 margin-left:17px;
 padding-top:76px;
 }
 .right-arrow
 {
 margin-right:17px;
 float:right
 }
 #bar
 {
 background-color: #494a4a;
 width:100%;
 height:170px;
 }

 #image
 {
 margin-left:50px;
 margin-top:-166px;
 }
#image img
   {
   margin:0 7px;
   border: 2px solid #333;
   }

Moving Towards Content Area

free html-css- tutorial

This section doesn’t really has a name but it’s always present in corporate templates. I’m calling it Big-Box.

<div id="big-box">
<div class="box">
<h1>Finance</h1>
<div class="box-img">
<img src="images/box1.jpg" alt="" />
</div>
<h3>There are many variations of<br/> passages of Lorem Ipsum<br  /> available but the majority<br/> have suffered alteration in<br/> some form, by injected<br/> humour, or randomised words<br /> which don't look even slightly<br/> believable.</h3>
<div class="readmore">
<a href="#"><img src="images/read-more.jpg" alt="" /></a>
</div>
</div>
<div class="box">
<h1>Investment</h1>
<div class="box-img">
<img src="images/box2.jpg" alt="" />
</div>
<h3>There are many variations of<br/> passages of Lorem Ipsum<br  /> available but the majority<br/> have suffered alteration in<br/> some form, by injected<br/> humour, or randomised words<br /> which don't look even slightly<br/> believable.</h3>
<div class="readmore">
<a href="#"><img src="images/read-more.jpg" alt="" /></a>
</div>
</div>
<div class="box">
<h1>Research</h1>
<div class="box-img">
<img src="images/box3.jpg" alt="" />
</div>
<h3>There are many variations of<br/> passages of Lorem Ipsum<br  /> available but the majority<br/> have suffered alteration in<br/> some form, by injected<br/> humour, or randomised words<br /> which don't look even slightly<br/> believable.</h3>
<div class="readmore">
<a href="#"><img src="images/read-more.jpg" alt="" /></a>
</div>
</div>
<div class="box">
<h1>Management</h1>
<div class="box-img">
<img src="images/box4.jpg" alt="" />
</div>
<h3>There are many variations of<br/> passages of Lorem Ipsum<br  /> available but the majority<br/> have suffered alteration in<br/> some form, by injected<br/> humour, or randomised words<br /> which don't look even slightly<br/> believable.</h3>
<div class="readmore">
<a href="#"><img src="images/read-more.jpg" alt="" /></a>
</div>
</div>
</div>
</div>

Content Area CSS

CSS, this shouldn’t be so hard.

#big-box
 {
 background-color: #363637;
 width:91%;
 height:330px;
 margin:20px auto;
  }
 .box
 {
 background-color:#282828;
 border:#000 solid 1px;
 width:200px;
 height:342px;
 margin: 0 12px;
 float:left;
 }
h1
   {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:18px;
   color: #ffffff;
   margin: 10px 52px;
   } 

   .box-img
   {
    margin: 6px;
   }
   .readmore
   {
   margin: 8px 38px;
   }

Footer HTML

free-html-css-tutorial

And last but not the least, the footer.

<div id= "bottom">
<div id="footer">
<div class="bottom-ul">
<ul>
<li class="color"><strong> Links </strong></li>
<li><a href="#"> Home </a></li>
<li><a href="#"> About </a></li>
<li><a href="#"> Products </a></li>
<li><a href="#"> Services </a></li>
 </ul>
</div>
<div class="bottom-ul">
<ul>
<li class="color"><strong> Networks </strong></li>
<li><a href="#"> Designer's Dare </a></li>
<li><a href="#"> Blasting art </a></li>
<li><a href="#"> Designzzz </a></li>
<li><a href="#"> Imagzzz </a></li>
 </ul>
</div>
<div class="bottom-ul">
<ul>
<li class="color"><strong> Contact </strong></li>
<li><a href="#"> Email: [email protected] </a></li>
<li> Telephone #0900-78601 </li>
<li> Suite# 55 Floor #3<br /> Designzzz Building, ITville </li>
</ul>
</div>
<div class="bottom-ul">
<ul id="no-back">
<li class="color"><strong> Follow Us </strong></li>
 <li>
<a href="#"><img src="images/facebook.png" alt="" /></a>
<a href="#"><img src="images/twitter.png" class="icon" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/Rss.png" alt="" /></a>
<a href="#"><img src="images/Stumble.png" alt="" /></a>
</li>
<li>
<img src="images/logo-bottom.png" alt="" />
</li>
 </ul>
</div>
<div id="bottom-text">Copyrighted by designzzz.com © 2011
   </div>
</div>
</div>

Footer CSS

We conclude it with the CSS.

#bottom
 {background:url(images/footer-bg.jpg) repeat;
 width: 100%; overflow: hidden; margin:33px auto 0 auto;}
 #footer
 {
 width:1000px;
 margin: 0 auto;
 }

 #footer ul
 {list-style:none;
 color:#ffffff;
 margin-left:42px;
 }

 #footer ul li
 {
 padding:10px;
 text-decoration: none;
 background:url(images/underline.png) no-repeat bottom;
  }
 .color
   {
   color:#000000;
   background:none !important;
   }

   .image
   {
   margin-left:50px;
   }

   .bottom-ul
   {
   float:left;width:22%;
   margin-left:30px;
   }
   .bottom-ul ul li img
   {
   margin: 0px 2px;
   }
   #bottom-text
   {
   text-align:center;
   color:#FFF;
   }

Final Result

I hope you liked it. Please, your suggestions are very important for me right now. Do comment.

html-css template

Live Preview

create free website wix below post

Further Related Readings

Comments
  1. cythux October 9, 2011 at 9:03 am

    Hello, why to use not the new Doctype from HTML5 and the id like if found its cleaner as the xhtml strict 1.0

  2. nikesh811084 October 21, 2011 at 10:33 am

    Can anyone tell me how to slice psd files?

  3. lalas June 1, 2012 at 2:54 pm

    GOOD JOB MATE!!! ATLEAST ITS A GOOD THING FOR THE BEGGINERS TO GRAB THIS KINDA TUTORIAL…

    1. Jawad June 5, 2012 at 2:45 am

      it is always beginners in my mind when I write tutorials.
      Thanks for the comment.
      by the way, why all capital letters?

  4. fatimamj August 8, 2012 at 3:52 am

    this tuto helped me alooot…thx 4 sharen it with us

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved