First of all, in order to convert PSD to XHTML code to get best cross browser compatibility an individual need to create HTML file by using Macromedia Dreamweaver (a web development application) select XHTML 1.0 Strict.dtd from the .doc type option and now, save XHTML 1.0 Strict.dtd as index.html. Now, an individual need to create CSS files in Adobe Dreamweaver and name the file style.css. Place both HTML files and CSS files in separate folders.
The most noteworthy part is that an individual have to reset padding as well as margin in order to get complete control over his layout. By this way a person can get rid from unwanted interference of automatic margin and paddings. So, attach another CSS file named as reset.css for the same which is easily available at Google or copy the below mentioned code in CSS files.
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
margin:0;
padding:0;
}
ul{
list-style:none;
}
fieldset{
border:0;
}
An individual have to link the CSS Stylesheet with his HTML document. Most of the times, popular web browsers Internet Explorer 6 & 7 tend to mess and therefore, a person should always create separate style sheet for each in order to sort out the incurred problems.
Create a new folder, which should be named “Images.” In this folder, a person has to place all his pictures. Since all the base files are completed, it’s time to open the PSD file now. Open the PSD file and then hide almost every layer instead of the background layer. An individual can make as many backgrounds as he wishes. Since these slices will be optimized for quality and therefore, an individual can cut down the size of the image but not the quality. Now, people have to implement slices in CSS.
body{
background:#000 url(../images/body_bg.jpg) center top no-repeat;
color:#000;
font:62.5% Helvetica,Arial,sans-serif;
line-height:16px;
}
Now, an individual needs to calculate the wrapper area. Suppose a person has to divide the wrapper area of 847px in width, then it should be divisible by two so that it can align in the center. After finishing up the wrapper area, the next thing that comes is Padding. If a person wants to give padding of 1px from right or left to his wrapper div, then the wrapper area should have 848px width in effect. Apart from the wrapper area and padding, an individual needs to make a header area. For making a header area, one has to calculate the area from the top of the screen to the bottom of the navigation. Suppose a person has to calculate 138px in height, but the navigation and logo are placed below the top. In that case, an individual should use top padding – 104px in height.
#header{
width: 847px;
padding: 0px 0px 0px 0px;
}
Now, its time to slice up the logo and navigation background. An individual can use sliding door technique by Douglas Bowman for the purpose of slicing the navigation background. The most noteworthy thing is that this technique of slicing navigation background should be used only if navigation is text. There are some buttons consists long words and small words too. In other words, a person don’t want each button with equivalent background to there text. Therefore, one require slicing navigation background in order to cover all of the words.
For example: An individual has “photo retouch” (long word) and “home” (small word). Now, he wants to rename “photo retouch” with “perfect photo retouch”. In that case, he would need to slice navigation background again.
Now, a person has to create an id named logo and write below mentioned style. The reason behind doing the same is not just place logo as an image and make it link but show as text for SEO purposes. Implement the same in HTML.
#logo{
display: block;
width: 90px;
height: 18px;
float: left;
margin: 10px 0px 0px 0px;
background: url(../images/logo.jpg) no-repeat;
text-indent: -999999px;
}
One can display <a></a> as a block within ul li and within that <a></a> . Besides that, a person need to display <span></span> as a block. The left slice of navigation will be applied to tag “<a>” which remain left aligned with no repetition. On the other hand, right slice applied to “<span>” means it will be left aligned and repeat horizontally. But, a person should never forget to use padding from top-left as well as right in order to get right adjustment alike PSD. In CSS, this will take place in below mentioned manner:
#header ul{
float: right;
}
#header ul li{
float: left;
height: 33px;
margin: 0px 0px 0px 16px;
}
#header ul li a{
display:block;
height: 33px;
padding: 0px 0px 0px 2px;
}
#header ul li a span{
display: inline-block;
height: 23px;
font-size: 13px;
color: #fff;
padding: 10px 6px 0px 6px;
}
#header ul li.active a{
background: url(../images/left_door.jpg) no-repeat left;
}
#header ul li.active a span{
background: url(../images/right_door.jpg) repeat-x right;
}
#header ul li a:hover{
text-decoration: none;
background: url(../images/left_door.jpg) no-repeat left;
}
#header ul li a:hover span{
text-decoration: none;
background: url(../images/right_door.jpg) repeat-x right;
}
(Note: Here, the class has been named “active” for active state.)
This is how your (X) HTML coding will look alike after inserting above codes. Now, an individual need to slice the hover designs for the purpose of navigation buttons. One has to make single image of hover design and then, create normal state button. After that, a person has to implement all these buttons in CSS:
a#left_button{
display: block;
width: 34px;
height: 84px;
float: left;
margin: 149px 0px 0px 0px;
background: url(../images/left_arrow.jpg) no-repeat;
text-indent: -9999px;
}
a:hover#left_button{
background-position: 0px -84px;
}
a.active#left_button{
background-position: 0px -84px;
}
a#right_button{
display: block;
width: 34px;
height: 84px;
float: left;
margin: 149px 0px 0px 0px;
background: url(../images/right_arrow.jpg) no-repeat;
text-indent: -9999px;
}
a:hover#right_button{
background-position: 0px -84px;
}
a.active#right_button{
background-position: 0px -84px;
}
Suppose, a person have almost six thumbnails in his content. In order to slice all six thumbnails one need <ul><li>. Besides that, simply take measurements from both sides and find out margins of each box between each other. Now, an individual need to write styles for them in CSS. Follow below mentioned codes.
ul.gallery{
width: 779px;
float: left;
}
ul.gallery li{
display: inline;
width: 224px;
height: 179px;
float: left;
margin: 0px 17px 30px 17px;
}
ul.gallery li a{
display: block;
width: 222px;
height: 177px;
border: 1px solid #cccccc;
}
ul.gallery li a:hover{
border: 1px solid #fff;
}
In the end, this is how the HTML will look alike:
<!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” xml:lang=”en” lang=”en”>
<head>
<title>PSD to XHTML/CSS</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” media=”all” />
</head>
<body>
<div>
<div>
</div>
<div>
<div>
<ul>
<li><a href=”#” id=”current”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
<div>
<div>
<img src=”img/landscape.jpg” alt=”landscape” />
</div>
<div><p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
<p>Made by WebDesignerHelp</p>
</div>
</div>
</div>
</div>
</body>
</html>
Now, the overall concept of PSD to (X) HTML conversion is complete in terms of (X) HTML and CSS coding. By simply following above mentioned steps a person can easily convert his PSD based file in to XHTML format without any hassle.
Posted By: CSSChopper Team
