Ganga: How to Convert a Corporate PSD Web Layout into HTML CSS

FINAL RESULT

Live Preview

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

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

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

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

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

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.

Ganga

Thứ Tư, 22 tháng 8, 2012

How to Convert a Corporate PSD Web Layout into HTML CSS

FINAL RESULT

Live Preview

Head Area Code

Moving Forward to Body

CSS Body and Main Container

Logo and Navigation Area

Css for Nav Bar

Featured Area

Featured Area CSS

Gallery Area’s HTML

CSS for this Area

Moving Towards Content Area

Content Area CSS

Footer HTML

Footer CSS

FINAL RESULT

Live Preview

Không có nhận xét nào:

Đăng nhận xét

Tìm kiếm Blog này