-->

XHTML tutorial from PSD

XHTML tutorial from PSD


XHTML tutorial from PSD:

From PSD to HTML / XHTML (PSD to XHTML / HTML) the planning tie is the most important rest of the job i.e. easy to write code. Below is a step-by-step process to create HTML (actually XHTML) from a full PSD:

Project download link:
The first thing you have to do is look at the PSD file and think. The whole structure of the site you have to think div based. All divs will be inside a div then every part of the site will be inside one div. Thus ..



Slice the PSD file (with slicing tool in Photoshop). The matter of slicing is entirely up to you. If you want, you can work without slicing. Just because you can do it doesn't mean you have to. Instead, slicing needs to be done. Slicing should also be done by planning. Share the site. The main benefit of slicing is that when any other designer sees this PSD file, he will understand how to do the work (plan).



Create a folder as I did XHTML_Coach_Lee This time there will be a total of 3 folders (css, images and js) and 2 files named index.html and style.css. The css folder will have a CSS file named style-ie.css. There will be code that will be written only to make it compatible with Internet Explorer browser. However, there is no such code in this project. Then there will be all the images in the images folder. Used to display images (although there are no png images in this project, but these JavaScript files would work if there were).

The index.html file will contain all the HTML codes. Copy and paste the following code into the index.html file.





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coach Lee Green :: Home</title>
<meta name="description" content="content" />
<meta name="keywords" content="keywords" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="/style.css"/>
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen,projection" href="/css/style-ie.css"/>
<script type="text/javascript" src="/js/ie6PngFix.js" ></script>
<![endif]-->
</head>
<body>
<!--OUR ALL CODE GOES HERE -->
</body>
</html>

These codes have not been re-explained here as discussed in previous HTML and CSS tutorials. We have to write all the code inside the body tag.


There is some new code inside the if statement (lines 9 to 12), if there is a CSS file for IE or a png image, then only this code will add the two files to index.html (style-ie .css and ie6PngFix.js).

First of all I will take a div called wrapper where all the other divs will be (except the footer div only).

<div id="wrapper">
<!--- All div goes here (Ekhane Sob div rakhte hobe)-->
</div>


style.css Write the following code for this wrapper in the file. Before writing the code of the wrapper div in this file of the project, the codes are kept to give some common style.

 #wrapper{margin:0 auto;overflow:hidden;width:1007px;}



margin:0 auto; This puts the alignment of the wrapper in the middle. Because of this, no matter which browser the user browses the site, everything on the site will show in the middle. Width: 1007px; I gave it because the width of the original structure in PSD is 1007px. overflow: hidden; By this, this div will act as the container of all the floated divs inside it. If there is more than one div inside a div and if there are floats in these divs, then the overflow of the parent div must be hidden.



Now look at the PSD, it has everything in a box, the background of the box is white and there is shadow on the top and bottom of it. Now using CSS 3, shadow can be added to the box, but it still does not support all browsers. Let's create, the box will be such that if the content inside it, the box will be bigger automatically. And there will be a shadow on the top and bottom of the box exactly like the PSD file.

HTML code:

<div id="main_bg">
<div id="bg_top">
<div id="bg_bottom"><!--Baki sob div ekhane dite hobe--></div>
</div>
</div>

First I took bg_top div inside main_bg div and bg_bottom div inside this div. This is a 3 part box making technique (but if png image then this technique is a little different)

CSS for Div 3:

#main_bg,
#bg_top,
#bg_bottom{width:1007px;
float:left;}
#main_bg{background:url(images/main_bg.jpg) repeat-y;}
#bg_top{background:url(images/bg_top.jpg) no-repeat top left;}
#bg_bottom{background:url(images/bg_bottom.jpg) no-repeat bottom left;padding:10px 0;}


I cut the image by slicing from Photoshop, look at the image folder called bg_top.jpg I cut the image to 1006x7 pixels from the top of the PSD (to take a bit of shadow). I cut the bg_bottom.jpg in this way. It is easy to cut the image in Photoshop from Rectangular Marquee Tool. If you want to cut as many pictures as you want, you can drag the picture and select Shift + C. If you press Ctrl + N, the picture will be copied. If you give + S, a saving window will appear. Save the required name here.



Giving no-repeat top left in bg_top div's CSS will make the image sit on top of the main_bg div and will not be repeated. Thus I have given bg_bottom down and giving 10 pixels below its padding will always be 10 pixels away from the original content (because all content is now this bg_bom There will be.



Now I have taken a div called main_background, because look at the PSD, there is a blue background above the white background at the bottom. This div will only have a div called main_wrapper. CSS for this


#main_background{background-color:#003698;width:990px;margin:0 auto;}


margin:0 auto; If given, it becomes in the element center of a dev.

Inside this div is the CSS of the main_wrapper div

#main_wrapper{width:971px;margin:0 auto;padding:10px 0;overflow:hidden;}



main_background Since there is a space of about 10 pixels around the div, I reduced the width of the main_wrapper div and brought out the background of the div below from both sides and brought out the background of the div from top to bottom with padding.

Now take 3 divs inside main_wrappper div.


<div id="header"></div>
<div id="menu"></div>
<div id="container"></div>


And Div 3's CSS:

#header{width:971px;height:146px;overflow:hidden;margin:0 auto;}
#menu{height:37px;background:url(images/menu_bg.jpg) no-repeat;margin:10px 0;}
#container{margin:0 auto;overflow:hidden;}


XHTML When doing this it is a strategy that you first visualize the whole site horizontally then you will divide the divs vertically as needed. For example, the header div has two parts, first the logo and then a picture. Therefore, I will divide this div into two parts and put two things (logo and picture) on both sides. Write the code of the two div below inside the header div.

<div id="logo"><a href="/index.html"><img src="/images/logo.jpg"/></a></div>
<div id="header_img"><img src="/images/header.jpg"/></div>

CSS of these two div:

#logo{width:492px;height:146px;float:left;cursor:pointer;}
#header_img{width:479px;height:146px;float:left;}

 I have left the float of these divs left so their parent div header overflow: hidden; Had to pay.

After the work of the diameter header is finished, the work of menu div starts. Since this div will have a menu, create a menu here with <ul> and <li>. The code inside the menu div.

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Meet Lee Green</a></li>
<li><a href="#">Coach Lee Media</a></li>
<li><a href="#">Duke Basket Ball</a></li>
<li><a href="#">Camps and Clinics</a></li>
<li><a href="#">Share</a></li>
<li><a href="#">Contact Info</a></li>
</ul>

Write this code on the menu div. When doing the menu, always keep in mind that the menu structure has to be done inside a div with the <ul> then <li> and the link <a> tag inside it. Now type the following CSS to make this menu look like a PSD file.

#menu ul{}
#menu ul li{float:left;}
#menu ul li a{font-family:Verdana;font-size:16px;display:block;float:left;padding:10px 15px;text-decoration:none;color:#000;}
#menu ul li a:hover{color:#003698;}


These CSSs have to be remembered very well because these are the codes used when creating menus. The original code was written in #menu ul li a, <a> since it is an inline element so it is used to create a block level element display: block; Then float: left; According to the characteristics of the floated element to be given, one after the other is sitting from the left side.

Note that this tutorial only explains the important codes that are used to create the original structure.

One thing you must have noticed is that the menu overflows in Div CSS: hidden; No, the only reason is that this div does not have multiple divs that are given a float.

Now work will start with the most important div of the site. Container div. Inside this div there will be basically two div one, one content and the other sidebar div.



<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>



container Div CSS:

#container{margin:0 auto;
overflow:hidden;}

content There will be everything under it (in the PSD file) with the div banner and whatever is below it with the pictures on the right side of the divbar.

CSS of content and sidebar div:

#content{float:left;width:662px;margin-right:8px;overflow:hidden;}
#sidebar{width:280px;float:left;padding:10px;background:#fff;overflow:hidden;}


Here I have calculated the time given to the width of the div. If you add the width of the div, the width of any parent div should not be greater than or equal to their added width. 72 + 280 = 942 This is the width of the div. Their parent div is the container and there is no width given to it, which means that the width of the container div now has its own width. The parent div of the container is the main_wrapper and its width is 960 pixels. Where did it go? 20 pixel padding and 8 pixel margin.


This is a rule of padding that you have to subtract the amount of padding from right to left (padding-right or padding-left) from the original width. This means it has padding around it so the original width is 300 to 20 minus width: 280px; I did.

Now let's start working on the content div, there will be two divs, banner_holder and the other text_holder. The first div will have the banner banner.jpg image and the next div will have the texts.

<div id="banner_holder"></div>
<div id="text_holder"></div>

CSS of Div Two:


#banner_holder{float:left;width:642px;padding:10px;background:#fff;}
#text_holder{float:left;width:642px;padding:10px;background:#fff;margin-top:10px;overflow:hidden;}


No new code has been added here so no explanation. Margin-top only: 10px; Yes. It should be noted about the margin that the margin is removed with the div and the padding is added with the height / width of the div.

banner_holder There will be only one image inside the div.

<div id="banner">
<img alt="" src="/images/banner.jpg"/>
</div>
banner_holder Div CSS
#banner{width:640px;height:265px;}

Now the important div will be the work of text_holder. There will be a total of 5 divs, the same style of the first 4 divs so I will explain the code of only one div from here. And then there will be the explanation of the 5th div.


<div class="content_text remove"></div>
<div class="content_text"></div>
<div class="content_text"></div>
<div class="content_text"></div>
<div id="pagination"></div>


Since I will give the same style to the first 4 divs, I have given the class without different id of div 4, so if you write CSS for this class, this effect will fall on all other divs. Write the following code in each of the 4 divs named content_text.

Here, I have removed the content_text with a space after the class in the first div. Now this remove will work as a class where only I can give a different CSS for that div. Yes (see content_text below CSS) but I need to remove the margin of the first div so see the CSS below remove class margin-top: 0! Important; I did.



<div class="date_text">
<div class="date">20</div>
<div class="month">jul<br/>2020</div>
<div class="auth_text">
<p>AUTHOR</p>
<a href="#">Mike McAlister</a>
<p>COMMENTS</p>
<a href="#">3 Comments</a>
<img alt="" src="/images/icon.jpg"/>
</div>
</div>
<div class="main_text">
<a href="#">Myhtmlcode.</a>
<p>Learn Free Web design.  </p>
</div>



content_text And CSS for whatever is inside:


..remove{margin-top:0!important;}
..content_text{float:left;background:#e9eaee;width:622px;padding:10px;margin-top:10px;}
..date_text{float: left;width:110px;}
..date{float:left;font-size:48px;font-family:Arial;font-weight:bold;padding-right:3px;}
..month{float:left;font-size:20px;color:#5a5a5a;font-family:Arial;font-weight:bold;padding-top:4px;}
..auth_text{float:left;font-family:Verdana;font-size:12px;line-height:20px;border-top:1px solid #a6a6a6;}
..auth_text p{text-align:left;font-weight:bold;padding-top:5px;}
..auth_text a{text-align:left;padding-bottom: 10px;display:block;}
..main_text{width:480px;float:right;background:#fff;padding:10px;text-align:left;}
..main_text a{color: #2251a6;font-family:Verdana;font-size: 22px;line-height:23px;}
..main_text p{font-family: Verdana;font-size: 12px;line-height: 20px;padding-top:5px;text-align: left;}


remove since the class is only in the first div so margin-top: 0! important; It only worked for the first div. In front of any properties in CSS! Important If you give this property more importance.




.remove{margin-top:0!important;} This caused only the first div to have margin-top zero (although usually this div also had margin-top: 10px;).


The other CSSs are explained in the site tutorials, also explained above, so I will not explain them a second time. The main task here is not HTML or CSS code but planning. OK.



The code inside the pagination div

<a href="#">Page 1 of 22</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">10</a>
<a href="#">20</a>
<a href="#">...</a>
<a href="#">Last>21</a>



pagination Div CSS:


#pagination{float:right;padding: 18px 0 15px;}
#pagination a{border: 1px solid #CBCDD2;padding: 5px;background:#e9eaee;margin: 0 3px;font-family:Verdana;font-size:12px;text-decoration:none;color:#003698;}
#pagination a:hover{background:#003698;color:#fff;}


Now the work of sidebar div started. There will be a total of 6 div

<div class="advertise remove"><img alt="" src="/images/advert1.jpg"/></div>
<div class="advertise"><img alt="" src="/images/advert2.jpg"/></div>
<div class="advertise"><img alt="" src="/images/advert3.jpg"/></div>
<div id="subscribe">
<h2>Weekly Basketball Tips</h2>
<p class="sub">For weekly busketball tips please subscribe to us.</p>
<div id="subcribe_form">
<form action="#" method="post">
<input type="text" value="Name:"/>
<input type="text" value="Email:"/>
<input class="sub_button" type="submit" value="SUBMIT"/>
</form>
</div>
Facebook Comments

Follow by Email