Demo project of PSD to HTML
Make a good website is first of SEO . Every body first make a website and then start seo . If you want to advertise your product then first make a good looking website then start your seo task .Know I show how can I make a good website one by one .
Now I show how can I make a good website use PSD to HTML
Step 1 : First I open my PSD file in the adobe photoshop cs 8
Step 2:Then select a layer and then click mouse right-hand site button
Step 3: Then click duplicate layer set
Step 4: Then click new
Step 5: Then click adobe photoshop upper top [ Image ] and then click [ trim ] complete my PSD file image cutting I cut all image one by one use this process
Step 6: When complete my PSD file to all image cutting then I start my HTML coding writing
Step 7: When I start HTML coding writing first I bring HTML I con that’s for first open a new folder and then click mouse right-hand site and keep the mouse pointer [ New ] then click text documents
Step 8 : Then write my html page name and then write .html . when you write your html name obviously write .html if you not write .html your html icon not coming to then front it means [ naturalbeauty.html ]
Step 9: When come to my html icon then I select that and then click mouse right hand site and then click [ Edit with note pad ++ ] . Because I used note pad ++ if you want to use others software open that
Step 10: Then I start my HTML coding writing like that here
<html>
<head>
<title>natural beauty </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
</body>
</html>
Step 11 : When complete my html coding writing then I start [ css ] coding writing . When I start my css coding writing then I first bring my css icon that’s for I go to html same folder then I click mouse write hand site and then click text documents
Step 12: Then write my css file mane I write my css file name [ style.css ] you obviously keep your css file name .css . When comes to my css icon then I select my css file and then click mouse right hand site and click [ Edit with note pad ++ ]
Step 13: Then I write my css coding
body,ul,li,a,h1,h2,h3,h4,h5,h6,input,img ,p{
margin:0px;
padding:0px;
}
/* body start */
body{
background-color:#D6DADB;
font-family: arial;
}
/* body end */
/* section start */
.section-part{
margin-top:20px;
margin-bottom:20px;
background-color:#2d3e50;
}
/* section end */
/* menu-part start */
.menu-part{
height:55px;
margin:0 auto;
width:1170px;
}
Step 14: When complete my all html and css coding writing then I open it in google crome / mozila fire fox or others browser . And then see it preview .
Now complete my psd to html website making
0 comments :
Post a Comment