Now, we'll set up the HTML file structure. Set 3 sections (title, content, footer) as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Cutting backgroundOur PSD file contains a lot of texture effects, we want to cut all this out, and then add the code to the page above, so that the effect of the Div page and design to achieve consistent.
<body><div id= "header" > <div id= "container" > </div></div><div id= "Content" > <div id= "container" > </div></div><div id= "Footer" > <div id= "container" > </div></div></body>
Now in Photoshop open the original design, hidden so the layer, in addition to the background layer.
Now take the slice tool, select background, save Web Page format Press (ALT +shift+ctrl + S). Then save the image folder file named Background.jpg.
Setting the background styleOpen the Style.css file, set the basic style, and the background sample and the width of the body part, as follows:
* { margin:0px; padding:0px;} body{ Background:url (images/background.jpg);} #container { margin:auto; width:960px;}
Cutting headBack to Photoshop, hide so the layer, in addition to the head background, and the same way, the head background image cutting saved to the Web format, save file named Head.jpg.
Edit Head Background codeEdit the following code in the Style.css file:
#header {background:url (images/header.jpg); height:124px;}
Cutting Head logoAt this point, cut the logo layer, hide all layers, including the background layer, as on the same method to cut the logo layer saved as logo.png, note: Save as PNG format picture
Add logo on pageNow return to the HTML, in the #header #container内, add the following code <div id= "logo" >....</DIV>.
<div id= "header" > <div id= "container" > <div id= "logo" ><a href= "#" ></a></div> </div></div>
Now, switch to the Style.css file below and write the #logo style.
#logo {margin-top:20px;border:none;}
Edit Navigation CodeHere is the code in the page, header header includes logo and navigation two parts.
<div id= "header" > <div id= "container" > <div id= "logo" ><a href= "#" ></a></div> <ul> <li><a href= "#" >home</ a></li> <li><a href= "#" >About</a></li> <li><a href= "#" >work </a></li> <li><a href= "#" >Blog</a></li> <li><a href= "#" > contact</a></li> </ul> </div></div>
The navigation style is as follows:Now, add the CSS table's navigation style ~,ul, Li, and link A's styles:
#header li{color: #959595; list-style:none;float:left;margin-right:20px;font-family: "Myriad Pro", arial;font-weight : bold;font-size:24px;} #header Li A{color: #959595; text-decoration:none;padding:10px;} #header ul{float:right;margin-top:-40px;} #header Li a:hover{background: #202020; color: #d2d2d2;-moz-border-radius:5px;-khtml-border-radius:5px;- webkit-border-radius:5px;}
Now make the middle partNow we add two div in the middle section of the page, such as:
<div id= "Content" > <div id= "container" > <div id= "featured" > </div> < Div id= "Paragraphs" > </div> </div></div>
Switch to Photoshop's PSD page and cut the middle section, named featured.jpg. For example:
Add the following code to your HTML page, and some text description:
<div id= "Content" > <div id= "container" > <div id= "featured" > <a href= "#" >more projects</a> <p class= "Dummytext" ><span>portfolio project, Jan 5th, 2010</span> has you ever wanted to create clean and nice portfolio design? In this tutorial I'll show you what to design clean Blue portfolio layout. Ever wanted to create clean and nice portfolio design? In this tutorial I'll show you how to design Clean Blue portfolio layout in Adobe photoshop.</p> </div& gt; <div id= "Paragraphs" > </div> </div></div>
In the PSD file, hide the other so layer, leaving only the button layer section, Cut down the button section, save the PNG format, named button.png.
Now we add these images to the page, switch to the CSS file page, add the following code, including the background style, and the style of the button.
#featured {background:url (images/featured.jpg) no-repeat;height:381px;margin-top:30px;margin-left:80px;} #featured A{background:url (images/button.png); height:30px;width:124px;text-indent:-9999px;position:absolute; margin-top:330px;margin-left:180px;} #featured a:hover{background-position:0px 30px;}
Now let's add some dummytext (text) style:
. Dummytext{color: #d2d2d2; width:245px;margin-top:150px;position:absolute;font-family:arial, Helvetica, Sans-serif ; font-size:12px;line-height:180%;margin-left:290px;}. Dummytext span{font-size:16px;color: #191919; font-weight:bold;}
Add a picture below to show the following section of the introductionThe Code section of the page is as follows.
<div id= "Paragraphs" > <p class= "Paragraph" > <span>beautiful</span>webdesignfan is a Design related blog about web design, Photoshop, freebies and tutorials. We Publish useful information dedicated to web designers and developers. Here's the can find free resources like vectors, wordpress themes and a lot of inspiration. </p> <p class= "Paragraph" > <span>effective</span>webdesignfan is a design related bl OG about web design, Photoshop, freebies and tutorials. We Publish useful information dedicated to web designers and developers. Here's the can find free resources like vectors, wordpress themes and a lot of inspiration. </p> <p class= "Paragraph" > <span>functional</span>webdesignfan is a design related B Log about web design, Photoshop, freebies and tutorials. We Publish useful information dedicated to web designers and developerS. Here's can find free resources like vectors, wordpress themes and a lot of inspiration. </p></div>
The contents of our middle section should look like this:
<div id= "Content" > <div id= "container" > <div id= "featured" > <a href= "#" >more PROJECTS&L t;/a> <p class= "Dummytext" ><span>portfolio project, Jan 5th, 2010</span> has you ever wanted To create clean and nice portfolio design? In this tutorial I'll show you what to design clean Blue portfolio layout. Ever wanted to create clean and nice portfolio design? In this tutorial I'll show you how to design clean Blue portfolio layout in Adobe photoshop.</p> </div> ; <div id= "Paragraphs" > <p class= "Paragraph" > <span>beautiful</span>webdesignfan is a Design related blog about web design, Photoshop, freebies and tutorials. We Publish useful information dedicated to web designers and developers. Here's the can find free resources like vectors, wordpress themes and a lot of inspiration. </p> <p class= "paragraph" > <spaN>effective</span>webdesignfan is a design related blog about web design, Photoshop, freebies and Tutoria Ls. We Publish useful information dedicated to web designers and developers. Here's the can find free resources like vectors, wordpress themes and a lot of inspiration. </p> <p class= "Paragraph" > <span>functional</span>webdesignfan is a design related B Log about web design, Photoshop, freebies and tutorials. We Publish useful information dedicated to web designers and developers. Here's the can find free resources like vectors, wordpress themes and a lot of inspiration. </p> </div> </div></div>
Go to your CSS file and add the following code,
#paragraphs span{font-family: "Myriad Pro", Helvetica, sans-serif;font-size:22px;font-weight:600;letter-spacing:- 2px;} #paragraphs {margin-left:80px;font-family:arial, Helvetica, Sans-serif;color: #191919; font-size:12px;margin-top : 15px;}. Paragraph{width:250px;margin-left:15px;float:left;}
This is the effect of our current position:
Below processing the bottom of the websiteNow that we're done with that section, we'll start creating the footer.
First, in your PSD file, hide the layers in addition to the footer and footer texture layer, and then slice the contents of the footer folder and save it as footer.jpg.
Then cut it again and cut off the button and the bird's figure. Named follow.png and bird.jpgrespectively.
Edit Bottom CodeThe bottom footer includes some text and a picture of a bird with a link.
So add the following code to the HTML page.
<div id= "Footer" > <div id= "container" > <p>2010©fictional Design Studio. Design by webdesignfan.</p> <a href= "#" >follow us on twitter</a> </div></div>
Now, edit the code at the bottom footer style, as follows:
#footer {background:url (images/footer.jpg); height:71px;margin-top:191px;} #footer p{font-family:arial, Helvetica, Sans-serif;font-size:12px;color: #959595;p osition:absolute;margin-top:30px ;} #footer A{background:url (images/follow.png); text-indent:-9999px;position:absolute;height:27px;width:124px; margin-left:730px;margin-top:30px;} #footer img{float:right;margin-top:10px;}
We use footer.jpg to do the background of the footer, and then add some text style.
For a link to the bottom of the bird picture, we use the same method as before, using the floating effect to locate.
Final effectFile (0,7 MB)By now it is the end, do not know whether you understand, do not understand the message, what place do not understand, I add the modified under, haha ~.
