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: info@designzzz.com </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

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved