Converting a Dark Furniture Web Design from PSD to HTML

AD

During the previous month we published a tutorial for Creating a Furniture Website and Gallery Layout, I hope you followed the tutorial and made a design of your own, but if you hadn’t, we published Download Free Furniture Website and Gallery PSD Layout. This post included a Photoshop File of a web design/gallery design for a furniture or any craft maker’s website. It was in dark colors so that the displayed products look shiny.

Today I’m ready to convert from PSD to HTML. Let’s begin…

I should mention that if you haven’t yet checked out the previous posts, you should give them a glance. All your questions about the design will are answered there.

Final Result

This the design we are converting into HTML.

Free Photoshop Tutorial

Live Demo

Head Area Code

Again, I’m keeping in HTML4 because good old Internet Explorer doesn’t yet properly support HTML5. Here’s the <head> code. This is the basic code, you can of course include codes for Search Engine Optimization, such as meta codes but since they would make this tutorial confusing, I’ve avoided them.
You may also notice that we have a CSS file attached. All our CSS code is in there.

<!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>Furniture Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

Moving Forward to Body

Now let’s check the master code of <body>. We’ll check the codes for content area in just a bit.

<body>
<div id="main-container">
<!-- All the codes carrying body content -->
</div>
<body>

CSS Body and Main Container

Here is the stylesheet code. As you know we named the master <div> of body as “main container” here we are making it’s styles.

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

Logo and Navigation Area

Now we come into ‘main container’ div. Let’s start with the header area which will contain navigation bar logo.

Html-Css-Tutorial

<div id="header">
	<div class="contact">
	<img src="Images/icon.png" alt=""/>
 	Contact Us
	 </div>
<div id="logo">
	<img src="Images/logo.png" alt="" />
</div>
<div id="nav">
	<div class="up">
		<a href="#">Home</a>
	</div>
	<div class="down">
		<a href="#">About </a>
	</div>
	<div class="up">
		<a href="#">Projects</a>
	</div>
	<div class="down">
		<a href="#">Gallery</a>
	</div>
	<div class="up">
		<a href="#">Contact</a>
	</div>
	<div class="down">
		<a href="#">Feedback</a>
	</div>
</div>
</div>

CSS of this area

If you checked the HTML code of header area deeply, you’ll understand this easily.

#header
 {
 height:224px;
 overflow:hidden;
 }
 .contact
 { margin-left:538px;
 text-align:center;
 margin-top:12px;
 color:#fff;
 text-decoration:underline;
 }
 #logo
 {
 margin: 10px 10px;
 width:200px;
 float:left;
 }

 #nav{
 margin-left:0px 51px;
 text-decoration:none;
 line-height: 0px;
 width:384px;
 height:130px;
 float:right;
 margin:50px 148px;
 }

	.up{
	background:url(Images/down.png) no-repeat;
	line-height:30px;
	}
	.down{
	background:url(Images/up.png) no-repeat;
	margin:0px -52px;
	line-height:120px;
	}

   .up, .down {
   float: left;
   width:106px;
   height:90px;
   text-align:center;
   }

Featured Area HTML

This is just a <div> and you can make it a slideshow/album or whatever. Right now I’m just adding static image which is featuring an article on the website.

Free-Html-Css-Feature-Area

<div id="featured">
</div>

Featured Area CSS

I added the image through CSS background so that if we want to add text in HTML, it would be easier and simpler.

#featured{
background:url(Images/featured.jpg);
margin:55px auto;
width:898px;
height: 338px;
border:#212121 3px solid;
border-radius:7px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
		}

Gallery Area’s HTML

This is a slider/scroll below featured item. You can also combine this scroll with the featured preview above. Let your imagination fly, sky is the limit.

Html-CSS-Furniture Gallery-Template

<div id="bar">
<div class="arrow-left">
<a href="#"><img src="Images/left-arow.png" alt="" /></a>
</div>
<div class="arrow-right">
<a href="#"><img  src="Images/right-arrow.png" alt="" /></a>
</div>
<div class="image">
<a href="#"><img src="Images/image.jpg" alt="" /></a>
<a href="#"><img src="Images/image1.jpg" alt="" /></a>
<a href="#"><img src="Images/image2.jpg" alt="" /></a>
<a href="#"><img src="Images/image3.jpg" alt="" /></a>
<a href="#"><img src="Images/image4.jpg" alt="" /></a>
</div>
</div>

CSS for this Area

As usual, this is the CSS.

#bar{
background-color: #000000;
height: 98px;
margin: 0 auto;width: 64%;
}
 .arrow-left
 {margin-left:-57px;
 float:left;
 }
 .arrow-right
 {margin:1px -60px;
 float:right;
 }
.image
{
margin:16px;
padding:5px;

}

Link Area HTML

In the bottom I made another area for links. This kind of stuff suits galleries so if you are going to use it as a gallery, this is a must. And of course, there is no harm in using it even if you are making an complete website.

Free-HTML-CSS-Template

<div id="block">
<a href="#"> Bathroom</a>
<a href="#"> Bedroom </a>
<a href="#"> Kitchen </a>
<a href="#"> Decorating </a>
<a href="#"> Painting </a>
</div>

CSS for this Area

Without CSS, HTML is like a fish without water.

#block{
margin:0 auto;
width:800px;
height: 152px;
}
#block a{
font-family:"Verdana", Geneva, sans-serif;
font-size:14px;
color:#898988;
margin:66px 20px;
float:left;
text-shadow: black 0.1em 0.1em 0.2em;
background:url(Images/point.png) no-repeat left center;
padding-left:15px;
font-weight:bold;
}

Footer Area HTML

I kept the footer pretty simple, you can enhance it according to your needs.

HTML-CSS-Tutorial

<div id="footer">
<h3>© 2011 Designzzz. All Right Reserved</h3>
</div>

Footer Area CSS

The last CSS of this tutorial.

h3{
color:#ffffff;
font-family:"Verdana", Geneva, sans-serif;
font-size:12px;
margin:14px;
text-align:center;
}
#footer{
background:url(Images/footer-bg.jpg);
height:45px;
margin:0 auto;
width:78%;
border:2px solid #080808;
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
}

Final Result

Eureka…!!
Free Photoshop Tutorial

Live Demo

create free website wix below post

Further Related Readings

Comments
  1. Rasha October 29, 2011 at 7:24 am

    Hallo,
    Thank you for your nice article. There are many useful information.
    Thanks

    1. Jawad October 30, 2011 at 3:27 pm

      Hello Rasha,

      Thank you so much for your appreciation.

      Thanks

  2. Jawad November 2, 2011 at 1:37 pm

    Thanks

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved