PSD Web page cut diagram making HTML full course tutorial

Source: Internet
Author: User

Today's tutorial, teach you how to use the PSD page DIV+CSS cut into HTML pages, this kind of tutorial, the site has been very few, mostly speaking of some of the more fragmented things, in the future, we will slowly publish more such tutorials for you to learn, reproduced please famous sources, and station code translation, thank you ....

First look at the effect

The following picture is, after cutting out, may be the head and the bottom will be wide points .....

New Folder

When you start, create a folder on your computer. I named it zmool. Then create a new folder in the folder images, put all the images of the site. Next Open the Code Editor (Dreamweaver) and create an HTML file named index.html in the root directory, which is our home page template. Now create a new CSS file and name it the Style.css file. Such as:

Open the index.html file. At the top of the Head tab, add a link to your style sheet (STYLE.CSS). You can use the following code.

href= "Style.css" rel= "stylesheet" type= "Text/css"/>

The code for the head is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Building HTML Structures

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 background

Our 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 style

Open 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 head

Back 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 code

Edit the following code in the Style.css file:

#header {background:url (images/header.jpg); height:124px;}
Cutting Head logo

At 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 page

Now 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 Code

Here 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 part

Now 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 introduction

The 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&gt     ; <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 website

Now 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 Code

The 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 effect

File (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 ~.

PSD Web page cut diagram making HTML full course tutorial

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.