Today's tutorial will teach you how to use div+css to cut the psd page into html pages. This kind of tutorial has been done very little on this site, and most of them are relatively fragmentary. In the future, we will slowly publish and translate more of this kind of tutorials.
First look at the effect
The picture below is the renderings. After cutting it out, the head and bottom may be wider...
Create a new folder
To begin, create a folder in your computer. I named it zmool. Then create new folder images in the folder and place all images of the website. Next, open the code editor (Dreamweaver) and create an HTML file named index.html in the root directory, which is our homepage template. Now create a new CSS file and name it the style.css file. As shown in the figure below:
Open the index.html file. At the top of the head tag, add the link to your stylesheet (style.css). You can use the following code.
<link href=style.css rel=stylesheet type=text/css />
The header code is as follows:
<!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>Modern Design Studio</title><link href=style.css rel=stylesheet type=text/css /></head><body></body></html>
Create HTML structure
Now, we will set up the HTML file structure. Set 3 sections (title, content, footer) like below:
<!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>Untitled Document</title><link rel=stylesheet type=text/css href=style.css /></head><body><div id=header></div><div id=content></div><div id=footer></div></body></html>
Cutting background
Our PSD file contains many texture effects. We need to cut out all of these and then add them to the web page with code to make the div page effect consistent with the design effect.
<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 open the originally designed layer in photoshop, hide it, except for the background layer.
Now take the slicing tool, select the background, save the web page web format (ALT + shift + Ctrl + S). Then the saved image folder file is named background.jpg.
Set background style
Open the style.css file, set the basic style, the background style and the width of the main part, as follows:
* { margin: 0px; padding: 0px;}body{ background:url(images/background.jpg);}#container{ margin: auto; width: 960px;}Cut the head
Return to photoshop, hide the so-called layer, except for the head background, and use the same method to cut the head background image into web format, and save the file name as head.jpg.
Edit the head background code
Edit the following code in the style.css file:
#header{background:url(images/header.jpg);height:124px;}Cut the head logo
At this time, cut the logo layer and hide all layers, including the background layer. Cut the logo layer as the same method as above to save it as logo.png. Note: Save it as png format picture.
Add to add logo on the page
Now return to html and add the following code <div id=logo>….</div> in #header #container.
<div id=header> <div id=container> <div id=logo><a href=#><img src=images/logo.png></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
Below is the code in the page. The header includes two parts: logo and navigation.
<div id=header> <div id=container> <div id=logo><a href=#><img src=images/logo.png></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> </div></div>
The navigation style is as follows:
Now, add the navigation styles in the css table ~, ul, li and link a 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 divs to the middle part of the page content, as shown in the figure below:
<div id=content> <div id=container> <div id=featured> </div> <div id=paragraphs> </div> </div></div>
Switch to the photoshop psd page, cut off the middle part, and name it featured.jpg. The following figure:
Add the following code to your HTML page, and some text introduction:
<div id=content> <div id=container> <div id=featured> <a href=#>MORE PROJECTS</a> <p><span>Portfolio project, Jan 5th, 2010</span> Have you ever wanted to create clean and nice portfolioo design? In this tutorial I will show you how to design clean blue portfolioo layout. Have you ever wanted to create clean and nice portfolioo design? In this tutorial I will show you how to design clean blue portfolio layout in Adobe Photoshop.</p> </div> <div id=paragraphs> </div> </div></div>
In the PSD file, hide other so-called layers, leave only the button layer part, cut the button part, save the png format, and name it button.png.
Now we add these pictures to the page, switch to the css file page, and add the following code, which includes the background style and button style.
#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 styles of dummytext:
.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;}The following is added to add pictures to display the following category introduction section
The code part of the page is as follows.
<div id=paragraphs> <p> <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 you can find free resources like vectors, wordpress themes and a lot of inspiration. </p> <p> <span>EFFECTIVE</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 you can find free resources like vectors, wordpress themes and a lot of inspiration. </p> <p> <span>FUNCTIONAL</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 you can find free resources like vectors, wordpress themes and a lot of inspiration. </p></div>
The content in our middle part should look like this:
<div id=content> <div id=container> <div id=featured> <a href=#>MORE PROJECTS</a> <p><span>Portfolio project, Jan 5th, 2010</span> Have you ever wanted to create clean and nice portfolioo design? In this tutorial I will show you how to design clean blue portfolioo layout. Have you ever wanted to create clean and nice portfolioo design? In this tutorial I will show you how to design clean blue portfolio layout in Adobe Photoshop.</p> </div> <div id=paragraphs> <p> <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 you can find free resources like vectors, wordpress themes and a lot of inspiration. </p> <p> <span>EFFECTIVE</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 you can find free resources like vectors, wordpress themes and a lot of inspiration. </p> <p> <span>FUNCTIONAL</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 you 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 what we have done so far:
The bottom of the website is handled below
Now that we have finished that part of it, we will start creating the footer.
First, in your PSD file, hide other layers except the footer and footer texture layers, and then slice and save the footer folder stuff as footer.jpg.
Then cut it again and cut the button and bird graphics. Name it follow.png and bird.jpg respectively.
Edit the bottom code
The bottom footer includes some text and a picture of the 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> <img src=images/bird.jpg /> </div></div>
Now, edit the footer style code at the bottom 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;position: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 as the background of the footer and then add some text styles.
For the link to the bird picture at the bottom, we used the same method before, using the floating effect to position it.
Final effect
File download (0,7 MB)
Even now it's over. I don't know if you understand it. If you don't understand it, leave a message. If you don't understand it, I'll add and modify it again, haha~