Convert PSD To HTML in Just 15 Steps - Silly Things

Convert PSD to HTML in just 15 steps | Silly Things
http://sillythingsthatmatter.com/applications/psd2html.php
Tweet
11
Home
HTML5
PHP
Applications
DOM
Javascript
AJAX
Jquery
Developing Templates Was Never So Silly.
PSD To HTML
Flexify 2
www.flamingpear.com HDR Panoramas & polyhedra plug-in for digital paint
To develop your first template , you must have a basic knowledge of CSS and HTML. Please go through them first before starting this application, so that you can understand everything in a better way. You can go through these topics at home page.
Sitemap
+ HTML + CSS + HTML5
To start with, you will need a text editor and photoshop. However, if you dont have photoshop , any tool which supports color picking and cropping, will do. In this tutorial, we will be helping you to convert a PSD into a website template using the concepts discussed in our earlier tutorials of CSS and HTML. Later, in the advanced level, we will be using some javascript to further decorate the template. Before starting our tutorial, we would like to show where we will reach at the end starting from scratch. Check it out Please download the following files here, which will be required during the project. This is obtained at the end of this tutorial. So, lets start developing our first ever webpage.
+ DOM + PHP + Javascript + Ajax + Jquery + Applications

Refer to your friends Contact me
Step 1
To start with we will make a folder name project which will further contain two folders for images and css. We will make a file called index.html(blank for now) and a file called main.css (blank) in css folder. We will then put the doctype and meta tags as explained earlier here in our index file defined. So, this is how our index file will appear for now. Putting meta tags in files help in SEO to some extent and is considered a good practice. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
1 of 17
2/6/2014 11:28 AM
2 <html xmlns="http://www.w3.org/1999/xhtml"> Copyright 2011, Sillythingsthatmatter.in Site developed by Prashant Singh || Write to me Links 3 <head> 4 <title>Converting PSD to HTML</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" HTML5 6 <meta name="keywords" content="My first template carved from PSD" 7 <meta name="description" content="It PHP is my first template obatined by direct imple 8 </head> MYSQL 9 <body> 10 <p>We will put some designing stuffs here :)</p> DOM 11 </body> 12 </html>
Javascript AJAX Jquery
Step 2
Quotations Before putting some designing stuffs there, lets decide how to implemet the
template. Looking at the picture shown below which is a simple template, you can say that it consists of three different containers (differentiating on the basis of their background color). The first one contains login and logo of the company, second contains the main matter of the website, while the last one contains the footer. Thats all, we don't need to think anymore. As we have discussed earlier in CSS that containers in webpages are divs. These divs are
customizable in all ways are very friendly. You will come to know about that till the end of the tutorial. So, we will start with making three basics for header(one containing login),
contents and footer. This is how the body tag of index file looks after defining these divs. 1 2 3 <div id="header"></div> <div id="contents"></div> <div id="footer"></div>
So, just paste the code above in body tag and see the difference. You will not find anything on webpage, it is because you have not placed any content inside those containers. So, lets fix them at their positions first using some CSS in next step.
Step 3
Seeing the picture of our template, one can guess that the contents of the template do not occupy the complete screen. Instead, they occupy a part of it. So, we will make it of a fixed width say 960 px. However, the background should extend to complete width of screen. So, we will put the content container(div) inside another div which will occupy the full screen, named wrapper. Hence, our modified code looks like this.
2 of 17
2/6/2014 11:28 AM
1 2 3 4 5
<div id="header"></div> <div id="wrapper"> <div id="contents"></div> </div> <div id="footer"></div>
Lets fix the design of above defined containers first. Since, we wish to color every pixel of the screen, we need to use the entire screen as body. This can be done by setting the width to 100% and margin to 0. Similarly, as we said earlier that our wrapper will cover the entire screen while contents will take 960 px space in the middle. Putting contents in middle is ensured by putting margin to auto. With this, we can add these to our main.css file 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 body { width: 100%; margin: 0; } #contents { width: 950px; margin: 0 auto; } #wrapper { width: 100%; margin: 0; background-color: #39302b; } #header { width: 100%; background-color: #2c2520; min-height: 200px; }
?
To remind you, an ID is accessed in CSS by a '#' (hash) , while class is accessed by '.' (dot). We used a color-picker to pick the background color of the template and it was found to be #2c2520. Please note that min-height is set to a container(div), if we wish to see a container of a minimum height irrespective of the amount of contents in the div, because height of a container is decided by the amount of contents and their height by default. However, we can put some constrain by using max-height, min-height.
Step 4
Lets insert the logo of the company now. We will put it in a div called logo and set the logo as its background-image. We need to fix its min-height because there will be no contents in the the div. Please note that we need to put this div inside the header div at the left most corner. The div can be positioned to the leftmost point by setting the float attribute to left. So, make these changes in index file. 1 2 3 4 <div id="header"> <div id="logo"> </div> </div>
3 of 17
2/6/2014 11:28 AM
We also need to set the CSS of logo div in main.css file You need to crop or extract the logo from PSD and save it in the images folder. Write the code below in your css file to place the logo of the company at the right position. 1 2 3 4 5 6 #logo { background-image: url(../images/logo.png); min-height: 191px; min-width: 230px; float: left; }
?
Step 5
Lets move to the other part of the header, i.e., the login panel. This has to placed in a separate div which would be placed in the rightmost corner of the header. We will set its float attribute to right. We use a h3 tag for putting the heading of the panel. This tag has to be customized so that it looks similar to the one shown in template. To know the font of the design, you can open it in photoshop and get the font name. It was georgia in our case. These styles were given to h3 using following rules :1 2 3 4 5 #header h3 { color: #cbc3ae; font-family: georgia; font-size: 15px; }
?
The HTML portion of the login table will be like this. It comprises of two input fields and header tag and is placed inside header div. 1 2 3 4 5 6 7 8 9 10
? <div id="log"> <h3>CLIENT LOGIN</h3> Username <input name="username" id="username" type="text"> <input name="login" value="Login" id="login" type="button"> <br> Password: <input name="password" id="password" type="password"> <input name="register" value="Register" id="Register" type="button" </div>
Clearly, the input fields seem very odd and different from the one given in template. Lets see how we can improve the presentation using CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 #log { min-height: 200px; float: right; color: white; font-family: Tahoma; font-size: 70%; } #header input { background-color: #392f2b; padding: 2px; } #login , #Register { background-color: #483f3c; min-width: 80px; max-height: 25px; color: white; background-color: #392f2b; }
?
4 of 17
2/6/2014 11:28 AM
In the code above, we fix the height and default font of the entire log box. We further changed the background color of the input field. We further adjusted the height of the login and register buttons.
Step 6
Last and most important part of the header is set of links. It is advisable to place the set of links in list tag. It help web crawlers to know more and more about our site in less effort. So, we will place all the links in a separate container , navigation. Here is the HTML part you need to put inside the header div. As explained earlier, we have placed the links as unordered list. 1 2 3 4 5 6 7 8 9 10 <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Product</a></li> <li><a href="#">Services</a></li> <li><a href="#">News</a></li> <li><a href="#">Contacts</a></li> </ul> </div>
?
Check the template we made so far in your browser. You will see that the links are not shown in the way we expected. They are placed one after another like notes :(. So, we need to do the rest by CSS. We will first wish to place the entire div at correct position on the screen. We need to change the CSS of navigation div for fixing that. We fix the position of this div keeping the height of header in mind, since, it should reside at the bottom of the div. The next and most important part is that I need to decorate these links. Please note that we need to change the CSS of li tag for this purpose. We will first set it to inline display. The next step is to remove the default style of representation of a link. We will set the text-decoration to none for this. So, we will have to add these in our CSS file. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 #navigation{ padding-top: 158px; float: right; margin-right: -200px; z-index: 100; } #navigation li { display : inline; } #navigation a { text-decoration : none; font-family: Tahoma, calibri; font-size: 15px; color: #f8f8f8; }
?
5 of 17
2/6/2014 11:28 AM
On seeing the webpage, you will notice that links are yet not as shown in the template. Moreover , you would have noticed that one of the link is different from the rest. It is because it has been selected for now. So, we need to design to styles for li tag. However, we will be using class instead of id now. Do you know why ? It is because, we wish to impart same design to a group of tags. However, ID is unique to a particular element. We define two classes active and inactive differing in their background color only. We have grouped the two classes as explained in CSS , so that we have to type least. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .active , .inactive { min-width: 100px; padding-left: 5px; padding-right: 5px; padding-top: 3px; padding-bottom: 2px; } .active { background-color: #afaba5; color: black; } .inactive { color: white; background-color: #392f2b; }
?
At the end, we need to distribute the classes among the various li tags. So, update your navigation section in the way shown.In any working website, we add class or remove class using javascript when user clicks a link. Hence, the CSS of the page changes as per the user actions. We will discuss about that in our second part of tutorial which will be uploaded soon. 1 2 3 4 5 6 7 8 9 <div id="navigation"> <ul> <li class="active"><a href="#">Home</a></li> <li class="inactive"><a href="#">Product</a></li> <li class="inactive"><a href="#">Services</a></li> <li class="inactive"><a href="#">News</a></li> <li class="inactive"><a href="#">Contacts</a></li> </ul> </div>
?
Step 7
Once , we are done with the header block, lets move to the contents div. To remind you again, we have placed the content div in another div called wrapper, which streches to the entire screen length. In the contents, we will first implement the welcome part. We will put it in a div called intro1 which will fix the position of the contents. We will put the contents of this div in a sub div called welcome . So, insert the code below in your contents div. 1 2 3 4 5 <div id="intro1"> <div id="welcome"> <h3>Welcome to Somara</h3> <p>It is a long established fact that a reader will be distracted by the readable c <p>There are many variations of passages of Lorem Ipsum available.</p>
6 of 17
2/6/2014 11:28 AM
6 7
</div> </div>
We need to define h3 and p style for the welcome div. This is done by nesting as shown. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 #intro1 { min-width: 30%; max-width: 35%; min-height: 250px; float: left; padding: 10px; padding-right: 50px; padding-left: 50px; color: #cdcdcd; } #welcome h3, p { font-family: Myriad Pro; color: white; text-align: center; font-weight: normal; } #welcome p { color: #cdcdcd; font-size: 20px; }
?
Step 8
Now, we will consider the right part of the contents div. It contains a slideshow. However, we will replace it by a static image for now. We will cover that in our next tutorial series. For now, we will make a div called portfolio and then fix it height using CSS and set its background-image to the image shown. 1 2 <div id="portfolio"> </div>
?
Css to fix the container configuration is as shown. 1 2 3 4 5 6 7 8 #portfolio { min-width: 45%; min-height: 250px; background-image: url(../images/portFolio.jpg); background-repeat: no-repeat; float: left; margin-left: 55px; }
?
Please note that we wish the image to appear only once, so we set the background-repeat to none. You might be worrying that even if we need the div to be placed in the right corner, we have set its float attribute to left. We should have set it to right, right ?? The answer is that , here we wish the containers to come one after another. In all other cases we have shown so far, you should notice that we set float to right, only when we required to place the div with respect to the screen. However, we wish the right div to just follow left div. So, both has been set to float to left. For having an idea about margin and padding , you must go through this to continue.
Step 9
7 of 17
2/6/2014 11:28 AM
Going through the template, you will realize that we need to design three boxes now, each having some text. So, we will start with defining three divs. We will make modifications in this div to reach to the final one step by step. For the time being, we will add these three divs in the contents div as shown :1 2 3 4 5 6 <div id="box1"> </div> <div id="box2"> </div> <div id="box3"> </div>
?
Clearly, these divs need same design, so we will group them together and define all the rules. Check out the CSS for giving some basic design to the three containers developed so far. 1 2 3 4 5 6 7 8 9 10 11 12 13 #box1, #box2, #box3 { background-color: #2c2520; margin: 10px; min-height: 300px; min-width: 260px; max-width: 25%; float: right; border: 1px solid #28201a; } #box1 { margin-right: 9%; }
?
Please note that rightmost div is box 1 in the template, since we have set the float of all to right. We could have done it other way round also by setting the float attribute of all of the boxes to left. We need to set some margin-left to the first box from left in that case. Hope i am making some sense.Lets add some contents to these boxes now.
Step 10
We will start with putting three different images in the three boxes. We will define three different divs for that, each having different classes. Please note that since the picture in all the three boxes are different, we can use ID also instead of class, because we need to define 3 classes for our job. 1 2 3 4 5 6 7 8 9 10 11 12 <div id="box1"> <div class="pic3"> </div> </div> <div id="box2"> <div class="pic2"> </div> </div> <div id="box3"> <div class="pic1"> </div> </div>
?
We will now decide the design of these classes. Since they are similar, we will assign design simulatneously. You can either use the image given in
8 of 17
2/6/2014 11:28 AM
tthe download folder initially or crop the images for your own . Please keep it in the images folder that we made earlier. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 .pic1, .pic2, .pic3 { background-repeat: no-repeat; float: right; min-width: 50px; min-height: 50px; margin-top: 5px; margin-right: 25px; } .pic1 { background-image: url(../images/man.jpg); } .pic2 { background-image: url(../images/graph.jpg); } .pic3 { background-image: url(../images/ppl.jpg); }
?
Step 11
We need to put the heading and tagline for all of the boxes now. Since they are similar for all the three boxes, we will definately use same class for each of them. We will place the heading in h4 tag and tagline in a different div with a specific class. Lets see the structure of tables, after we add these stuffs to the boxes. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div id="box1"> <div class="pic3"> </div> <h4>WHY CHOOSE US ?</h4> <div class="tagline">Opening doors to future and more. </div> </div> <div id="box2"> <div class="pic2"> </div> <h4>WHY CHOOSE US ?</h4> <div class="tagline">Opening doors to future and more. </div> </div> <div id="box3"> <div class="pic1"> </div> <h4>WHY CHOOSE US ?</h4> <div class="tagline">Opening doors to future and more. </div> </div>
?
Lets set the style of these classes and h4 , so that it appears exactly similar to the template. 1 2 3 4 5 6 7 8 9 10 11 12 #box1 h4, #box2 h4, #box3 h4{ color: #7b7467; font-family: Georgia; text-align: left; padding-left: 20px; font-size: 12px; } .tagline { font-family: Tahoma; font-size: 11px; color: #d8660d;
?
9 of 17
2/6/2014 11:28 AM
13 14 15
padding-left: 20px; padding-bottom: 4px; }
As you can see, we have set color, font and its size of the h4 tag. Next step was to impart style to the tagline class. We obtained the color and font-family for each of these different type of texts using photoshop. We required different amount of padding for these classes, so that text appears with proper indentation.
Step 12
Our next target is to draw a line and put the main contents in all of these boxes. We define a div which has a border at its end. We fix its min-height to the thickness of the line. So, it comes out to be a good solid separator. We will then define a div with class text whixh will help us put contents in these boxes with proper indentation. This is how a particular box appears after adding line and text to one of the boxes. Put th eseparator and text class to all the three boxes in the same way. 1 2 3 4 5 6 7 8 9 10 11 12
? <div id="box1"> <div class="pic3"> </div> <h4>WHY CHOOSE US ?</h4> <div class="tagline">Opening doors to future and more. </div> <div class="separator"> </div> <div class="text"> It is a long established fact that a reader will be distracted by the readable con </div> </div>
We will now define the style properties for the separator and the text class now. While the separator class contains just a border line. Text will contain entire information to be shown in the boxes. Text-align has been set to justify so that text appears in the middle of the boxes. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .separator { width: 80%; margin-left: 23px; text-align: center; min-height: 2px; border-bottom: 2px solid #847f79; } .text { font-family: Tahoma; font-size: 12px; color: #cdcdcd; padding-left: 26px; padding-right: 43px; padding-top: 12px; line-height: 1.4em; text-align: justify; }
?
Step 13
10 of 17
2/6/2014 11:28 AM
Only thing left in this box is the read now button.It has to be in the right end of the boxes, so we will float it to right with proper offsets. Put it in the end of each of the boxes. 1 2 3 <div class="read_more"> Read More ! </div>
?
Style for this button is as defined :1 2 3 4 5 6 7 8 9 10 11 12 13 14 .read_more { min-width: 80px; min-height: 20px; background-color: #392f2b; text-align: center; padding: 5px; float: right; margin-right: 15px; margin-top: 10px; font-family: Tahoma; font-size: 12px; color: #cdcdcd; cursor: pointer; }
?
We fix the min-height, width, background-color, position(float), font, font-size, text-color(color) of this button.
Step 14
Only thing left in the template is the footer now.It contains simple horizontal navigation and a copyright line. We start with introducing navigations. As said earlier, we will be using unordered list to place various links . We need to set the display to be inline for this. To place the things in center , we will be using center tag. To place the line in between the links, we will be using the same trick, a div with a bottom-border, it is called separator2 here. 1 2 3 4 5 6 7 8 9 10 11 12 13 14
? <div id="footer_nav"> <center> <ul> <li><a href="#">Home </a></li> <font color="white">|</font> <li><a href="#">Product </a></li> <font color="white">|</font> <li><a href="#">Services </a></li> <font color="white">|</font> <li><a href="#">News </a></li> <font color="white">|</font> <li><a href="#">Contacts</a></li> </ul> </center> <div class="separator2"> </div> <p>Copyright 2009 Somara.com , All rights reserved. Design by Faisal Zahid</p> </div>
Step 15
Now , we will be combining them all, so the body of our index.html will look like this :1 2 3 <center> <div id="container"> <div id="header">
11 of 17
2/6/2014 11:28 AM
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
<div id="logo"> </div> <div id="log"> <h3>CLIENT LOGIN</h3> Username <input name="username" id="username" type="text"> <input name="login" value="Login" id="login" type="button"> <br> Password: <input name="password" id="password" type="password"> <input name="register" value="Register" id="Register" type="button" </div> <div id="navigation"> <ul> <li class="active"><a href="#">Home</a></li> <li class="inactive"><a href="#">Product</a></li> <li class="inactive"><a href="#">Services</a></li> <li class="inactive"><a href="#">News</a></li> <li class="inactive"><a href="#">Contacts</a></li> </ul> </div> </div> <div id="wrapper"> <div id="contents"> <div id="intro1"> <div id="welcome"> <h3>Welcome to Somara</h3> <p>It is a long established fact that a reader will be distracted by the readable <p>There are many variations of passages of Lorem Ipsum available.</p> </div> </div> <div id="portfolio"> </div> <br><br> <div id="box1"> <div class="pic3"> </div> <h4>WHY CHOOSE US ?</h4> <div class="tagline">Opening doors to future and more. </div> <div class="separator"> </div> <div class="text"> It is a long established fact that a reader will be distracted by the readable co </div> <div class="read_more"> Read More ! </div> </div> <div id="box2"> <div class="pic2"> </div> <h4>WHY CHOOSE US ?</h4> <div class="tagline">Opening doors to future and more. </div> <div class="separator"> </div> <div class="text"> It is a long established fact that a reader will be distracted by the readable co </div> <div class="read_more"> Read More ! </div> </div> <div id="box3"> <div class="pic1"> </div> <h4>WHY CHOOSE US ?</h4> <div class="tagline">Opening doors to future and more. </div> <div class="separator"> </div> <div class="text"> It is a long established fact that a reader will be distracted by the readable co </div> <div class="read_more"> Read More !
12 of 17
2/6/2014 11:28 AM
82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
</div> </div> <br><br> </div> </div> <div id="footer"> <div id="footer_nav"> <center> <ul> <li><a href="#">Home </a></li> <font color="white">|</font> <li><a href="#">Product </a></li> <font color="white">|</font> <li><a href="#">Services </a></li> <font color="white">|</font> <li><a href="#">News </a></li> <font color="white">|</font> <li><a href="#">Contacts</a></li> </ul> </center> <div class="separator2"> </div> <p>Copyright 2009 Somara.com , All rights reserved. Design by Faisal Zahid</p> </div> </div> </div> </center>
and this is how the CSS file will seem like :1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 body { width: 100%; margin: 0; } #contents { width: 950px; margin: 0 auto; } #wrapper { width: 100%; margin: 0; background-color: #39302b; } #header { width: 100%; background-color: #2c2520; min-height: 200px; } #header h3 { color: #cbc3ae; font-family: georgia; font-size: 15px; } #logo { background-image: url(../images/logo.png); min-height: 191px; min-width: 230px; float: left; } #log { min-height: 200px; float: right; color: white; font-family: Tahoma; font-size: 70%; } #header input { background-color: #392f2b; padding: 2px; } #login , #Register { background-color: #483f3c;
?
13 of 17
2/6/2014 11:28 AM
51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
min-width: 80px; max-height: 25px; color: white; background-color: #392f2b; } #navigation{ padding-top: 158px; float: right; margin-right: -200px; z-index: 100; } #navigation li { display : inline; } #navigation a { text-decoration : none; font-family: Tahoma, calibri; font-size: 15px; color: #f8f8f8; } .active , .inactive { min-width: 100px; padding-left: 5px; padding-right: 5px; padding-top: 3px; padding-bottom: 2px; } .active { background-color: #afaba5; color: black; } .inactive { color: white; background-color: #392f2b; } #contents { min-height: 700px; background-color: #392f2b; margin: 0px; } #intro1 { min-width: 30%; max-width: 35%; min-height: 250px; float: left; padding: 10px; padding-right: 50px; padding-left: 50px; color: #cdcdcd; } #portfolio { min-width: 45%; min-height: 250px; background-image: url(../images/portFolio.jpg); background-repeat: no-repeat; float: left; margin-left: 55px; } #welcome h3, p { font-family: Myriad Pro; color: white; text-align: center; font-weight: normal; } #welcome p {
14 of 17
2/6/2014 11:28 AM
129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206
color: #cdcdcd; font-size: 20px; } #box1, #box2, #box3 { background-color: #2c2520; margin: 10px; min-height: 300px; min-width: 260px; max-width: 25%; float: right; border: 1px solid #28201a; } #box1 { margin-right: 9%; } #box1 h4, #box2 h4, #box3 h4{ color: #7b7467; font-family: Georgia; text-align: left; padding-left: 20px; font-size: 12px; } .tagline { font-family: Tahoma; font-size: 11px; color: #d8660d; padding-left: 20px; padding-bottom: 4px; } .separator { width: 80%; margin-left: 23px; text-align: center; min-height: 2px; border-bottom: 2px solid #847f79; } .text { font-family: Tahoma; font-size: 12px; color: #cdcdcd; padding-left: 26px; padding-right: 43px; padding-top: 12px; line-height: 1.4em; text-align: justify; } .pic1, .pic2, .pic3 { background-repeat: no-repeat; float: right; min-width: 50px; min-height: 50px; margin-top: 5px; margin-right: 25px; } .pic1 { background-image: url(../images/man.jpg); } .pic2 { background-image: url(../images/graph.jpg); } .pic3 { background-image: url(../images/ppl.jpg); } .read_more { min-width: 80px; min-height: 20px; background-color: #392f2b; text-align: center;
15 of 17
2/6/2014 11:28 AM
207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249
padding: 5px; float: right; margin-right: 15px; margin-top: 10px; font-family: Tahoma; font-size: 12px; color: #cdcdcd; cursor: pointer; } #footer { width: 100%; text-align: center; background-color: #2c2520; margin: -20px; min-height: 100px; } #footer_nav li { display: inline; } #footer_nav a { color: white; text-decoration: none; padding: 5px; margin-top: 50px; } .separator2 { width: 29%; margin-left: 37%; text-align: center; min-height: 2px; border-bottom: 2px solid #847f79; } #footer p { color: white; text-align: center; font-family: Tahoma; font-size: 13px; }
That's all for now. You can convert any design to working website now. In our next tutorial, we will be talking about making this website dynamic by adding a working login, register, slideshow and navigations. Do post your comments and doubts if any. We will be happy to answer you as soon as possible. Login to comment
Be the rst to comment on this topic
Your comments, ques on, feedback or anything you wish.
Post!
16 of 17
2/6/2014 11:28 AM
Tweet
11
Continue >>>
17 of 17
2/6/2014 11:28 AM

Convert PSD To HTML in Just 15 Steps - Silly Things

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Convert PSD To HTML in Just 15 Steps - Silly Things

Hochgeladen von

Copyright:

Verfügbare Formate

Convert PSD to HTML in just 15 steps | Silly Things

Developing Templates Was Never So Silly.

+ DOM + PHP + Javascript + Ajax + Jquery + Applications