PSD to HTML. How to design my own website and add it to HTML? Lesson 2

Home

tips

Project Categories

Tips and Tricks:

Follow Twitter

Tuesday, 11 May 2010 12:37

PSD to HTML. How to design my own website and add it to HTML? Lesson 2

In previous lesson We learned how to create simple design in Photoshop. Now i show you how to slice and PSD file and add it to our HTML page.

Download PSD

Download HTML/CSS

View Demo

Step 1. Slicing PSD file:

Select Slice Tool in Photoshop (or just press "K" button on keyboard)
Select backgrounds that we will use in our site (in my PSD file this is: Body and Header background)
On top toolbar click on File -> Save for Web & Devices...
Hold Shift button and click to select each slices then press Save. The files name that i use for Body background is body-bg.jpg and for Header header-bg.jpg

Step 2. Creating HTML code:

First of all create folder with name my_new_project
This folder contain two folders images and css folder.

Open your favorite code editor (for Mac i use Coda and for PC i use DreamViewer) and create new file index.html in my_new_project folder.

I use one main DIV with class wrapper, with width: 950px. So, this is our layout:



<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="PSD to HTML Lesson from sopov.com" />
<meta name="title" content="PSD to HTML Lesson from sopov.com" />
<meta name="author" content="Sopov.com" />
<meta name="description" content="PSD to HTML Lesson from sopov.com" />
<title>PSD to HTML. How to design my own website and add it to HTML</title>
<link rel="stylesheet" href="/css/style.css" type="text/css" />
</head>
<body>
<div class="wrapper">
    <div class="headerLogin">
    </div><!-- End headerLogin -->

    <div class="header">
    </div><!-- End header -->

    <div class="mainNavBar">
    </div><!-- End mainNavBar -->

    <div class="content">

        <div class="mainContent">
        </div><!-- End mainContent -->

        <div class="sideBar">
        </div><!-- End sideBar -->

    </div><!-- End content -->

    <div class="footerLinks">
    </div><!-- End footerLinks -->

    <div class="copyright">
    </div><!-- End copyright -->

</div><!-- End wrapper -->
</body>
</html>

Login area



<div class="headerLogin">
    Welcome, Guest <a href="/" title="Login">Login</a> | <a href="/" title="Sign Up">Sign Up</a>
</div><!-- End headerLogin -->

Header

Here will be our Title and Description, usually i use h1/h2 tags respectively.



<div class="header">
    <h1 class="blogName">My Blog Name</h1>
    <h2 class="blogDescription">My Blog Description</h2>
</div><!-- End header -->

Main Menu



<div class="mainNavBar">
    <a href="/" title="Home">Home</a>
    <a href="/" title="About Us">About Us</a>
    <a href="/" title="Blog">Blog</a>
    <a href="/" title="Contact Us">Contact Us</a>
</div><!-- End mainNavBar -->

Content

Content contains two main DIVs mainContent with your blog text and sideBar with sidebar navigations. Also at the end of our code i used closed DIV with class clr. This class clearing our sidebar floating.



<div class="content">
    <div class="mainContent">
        <div class="blogContent">
            <h3 class="blogTitle">Sandra Bullock will not attend Kids' Choice Awards</h3>
            <div class="autor">By <a href="/" title="Alexis Chiu">Alexis Chiu</a>.</div>
            <div class="date">March 26, 2010 6:30 p.m.</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Bullock, who has remained out of the public eye since the scandal broke over husband Jesse James's alleged infidelities, is nominated as Favorite Movie Actress for her work in The Blind Side and The Proposal. She's vying with Miley Cyrus, Megan Fox and <a href="/" title="Zoe Saldana">Zoe Saldana.</a></p>
            <blockquote>
                Last year, Bullock, 45, teamed up with Hugh Jackman at the 'tween-heavy Kids' Choice Awards, and was all smiles -- even as she and the X-Men star were drenched with gallons of the event's signature green slime.
            </blockquote>
            <div class="tags">Tags: 
                <a href="/" title="drenched">drenched</a>, 
                <a href="/" title="with gallons">with gallons</a>, 
                <a href="/" title="of the events">of the events</a>, 
                <a href="/" title="signature green">signature green</a>, 
                <a href="/" title="slime">slime</a>
            </div><!-- End tags -->
            <div class="postedIn">Posted in:
                <a href="/" title="Tips &amp; FAQs">Tips &amp; FAQs</a> | 
                <a href="/" title="Edit ">Edit</a> | 
                <a href="/" title="Print This Post">Print This Post</a> | 
                <a href="/" title="5 Comments">5 Comments</a>
            </div><!-- End postedIn -->
        </div><!-- End blogContent -->
        <div class="blogContent">
            <h3 class="blogTitle">Dennis Hopper attends Hollywood Walk of Fame ceremony</h3>
            <div class="autor">By <a href="/" title="Alexis Chiu">Alexis Chiu</a>.</div>
            <div class="date">March 26, 2010 6:30 p.m.</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <ul>
                <li>
                    Hopper's doctor called him "extremely weak" and said he weighs barely 100 pounds in a court document filed this week, but he walked on his own during the 45 minutes he was at the ceremony.
                </li>
                <li>
                    With his 6-year-old daughter, Galen, by his side, Hopper waved and bowed to hundreds of fans lining a barricade along Hollywood Boulevard.
                </li>
            </ul>
        </div><!-- End blogContent -->
    </div><!-- End mainContent -->
    <div class="sideBar">
        <h4 class="sidebarTitle">Categories</h4>
        <ul class="sideBarMenu">
            <li><a href="/" title="News &amp; Media">News &amp; Media</a></li>
            <li><a href="/" title="Tips &amp; FAQs">Tips &amp; FAQs</a></li>
            <li><a href="/" title="News &amp; Media">News &amp; Media</a></li>
            <li><a href="/" title="Tips &amp; FAQs">Tips &amp; FAQs</a></li>
        </ul>
        <h4 class="sidebarTitle">Recent Posts</h4>
        <ul class="sideBarMenu">
            <li><a href="/" title="Iraq's Allawi 'open to talks'">Iraq's Allawi 'open to talks'</a></li>
            <li><a href="/" title="At least 42 die in Iraq market blasts">At least 42 die in Iraq market blasts</a></li>
            <li><a href="/" title="Thai military pulls back amid protests">Thai military pulls back amid protests</a></li>
            <li><a href="/" title="Mubarak back in Egypt after surgery">Mubarak back in Egypt after surgery</a></li>
        </ul>
        <h4 class="sidebarTitle">Archives</h4>
        <ul class="sideBarMenu">
            <li><a href="/" title="June 2010">June 2010</a></li>
            <li><a href="/" title="May 2010">May 2010</a></li>
            <li><a href="/" title="April 2010">April 2010</a></li>
            <li><a href="/" title="March 2010">March 2010</a></li>
        </ul>
    </div><!-- End sideBar -->
    <div class="clr"></div>
</div><!-- End content -->

Footer

The Footer contain four floating DIVs (columns) with class names: footerMenu, followUs, links, support. And the same as previous code clearing DIV with class clr.



<div class="footerLinks">
    <div class="footerMenu">
        <h5 class="footerLinksTitle">Menu</h5>
        <ul>
            <li><a href="/" title="Home">Home</a></li>
            <li><a href="/" title="About us">About us</a></li>
            <li><a href="/" title="Blog">Blog</a></li>
            <li><a href="/" title="Contact us">Contact us</a></li>
        </ul>
    </div><!-- End footerMenu -->
    <div class="followUs">
        <h5 class="footerLinksTitle">Follow us</h5>
        <ul>
            <li><a href="/" title="Twitter">Twitter</a></li>
            <li><a href="/" title="Facebook">Facebook</a></li>
            <li><a href="/" title="Email">Email</a></li>
            <li><a href="/" title="RSS Feed">RSS Feed</a></li>
        </ul>        
    </div><!-- End followUs -->
    <div class="links">
        <h5 class="footerLinksTitle">Links</h5>
        <ul>
            <li><a href="/" title="PSD 2 HTML">PSD 2 HTML</a></li>
            <li><a href="/" title="Tips and Tricks for the MacOS X">Tips and Tricks for the MacOS X</a></li>
            <li><a href="/" title="Sopov.com">Sopov.com</a></li>
        </ul>        
    </div><!-- End links -->
    <div class="support">
        <h5 class="footerLinksTitle">Support</h5>
        <ul>
            <li><a href="/" title="Terms of Use">Terms of Use</a></li>
            <li><a href="/" title="Privacy Policy">Privacy Policy</a></li>
            <li><a href="/" title="License Agreement">License Agreement</a></li>
            <li><a href="/" title="Online Support">Online Support</a></li>
        </ul>        
    </div><!-- End support -->
    <div class="clr"></div>
</div><!-- End footerLinks -->

Copyrights area



<div class="copyright">
    &copy; 2010 Your Blog Name All rights reserved.
</div><!-- End copyright -->

Ok, we've finished our HTML mockup lets see, <a href="/" title="view our mockup without CSS styles">what we get</a>. As you can see it isn't what we have in PSD file, but it has all our content laid out in a logical, readable way. So, next step is adding CSS style to our HTML page.

Step 3. Adding CSS to our HTML:

Fist of all we have to create new document in my_new_project/css folder with name style.css and add link to this style to our html code, between head tag:



<head>
...
<link rel="stylesheet" href="/css/style.css" type="text/css" />
...
</head>

Step 4. Reset our HTMLs tags style

In our style.css we’re going to use a simple css reset to get rid of those pesky margins and styles:



body, div, dl, dt, dd, li, pre,form, fieldset, input, textarea, p, blockquote, th, td, button { margin: 0; padding: 0; }h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: 100%; font-weight: normal; }address, caption, cite, code, dfn, em, strong, var { font-style: normal; font-weight: normal; }table { border-collapse: collapse; border-spacing: 0; } caption, th { text-align: left; font-weight: normal; font-style: normal; }acronym, abbr, fieldset, img { border: 0;}:focus { outline: 0; }

Also, we need a special class .clr for clearing our floating DIVs:



.clr {clear:both; height:0; overflow:hidden; margin:-1px 0 0 0;}

Step 5. Tags style

All links in our site will be red color (#ff3300) with no underline, text blockquote has red line from the left side of quote, and the tag P will have margin top and bottom 20px.



a {
text-decoration: none;
color: #ff3300
}

a:hover {
text-decoration: underline
}

blockquote {
margin: 10px 0 10px 30px;
padding: 10px 0 10px 30px;
border-left: 1px solid #ff3300;
}

p {
margin: 20px 0;
}

Step 5. Layout style

As you can see our design has body background, so in CSS file we added next code:



body {
background: url(../images/body-bg.jpg) repeat-x #556666 top left;
text-align: center;
font-family: Arial, Arial, Helvetica, sans-serif;
font-size: 100%;
}

Let's take a look on our background code:

url(../images/body-bg.jpg) - this is path to our background image that we sliced from our PSD mockup.

repeat-x - our background will repeat by X.

#556666 - background color of our page.

top left - this is our background position.



.wrapper {
width: 950px;
margin: 0 auto;
text-align: left;
}

.content {
background: #fff;
}

.mainContent {
width: 653px;
float: left;
margin: 25px 0 25px 25px;
}

.sideBar {
width: 160px;
float: right;
margin: 25px 25px 25px 0;
padding: 20px;
background: #edeeee
}

This is our main layout styles: wrapper, content, mainContent and sideBar:

wrapper - our main DIV:

margin: 0 auto - this is small trick place our DIV on center of browser.

mainContent and sideBar - have parameters float: left and float: right, it giving us, this DIVs, placing next to each other.

Header and Main Menu



.headerLogin {
padding: 5px 0;
text-align: right;
font-size: small;
color: #fff;
}

.headerLogin a {
color: #333;
}

.header {
background: url(../images/header-bg.jpg) repeat-x #ff8e00 bottom left;
min-height: 85px;
padding: 16px 0 0 25px;
}

.blogName {
font-size: xx-large;
color: #fff;
}

.mainNavBar {
background: #000;
padding: 10px;
}

.mainNavBar a {
color: #ccc;
font-size: large;
padding: 0 20px;
}

Content style



.mainContent {
color: #333;
}

.blogContent {
margin-bottom: 30px;
}

.blogTitle {
font-size: x-large;
color: #000;
}

.autor, .date, .tags, .postedIn {
font-size: small;
color: #666;
}

.tags a, .postedIn a {
color: #ccc
}

Sidebar



.sideBar {
font-size: small;
}

.sidebarTitle {
color: #666;
font-size: medium
}

.sideBarMenu {
list-style: none;
margin: 5px 0 20px 10px;
padding: 0;
}

Footer links and Copyright area

Footer has 4 columns. footerMenu, followUs, links with width: 150px (floating left) and support with width: 160px (floating right)



.footerLinks {
background: #b8fafd;
padding: 25px;
}

.footerMenu, .followUs, .links {
width: 150px;
float: left;
}

.support {
width: 160px;
padding: 0 5px 20px 20px;
float: right;
margin-right: 25px;
}

.footerLinksTitle {
color: #333
}

.footerLinks ul {
margin: 5px 0 0 10px;
list-style: none;
padding: 0;
font-size: small;
}

.copyright {
padding: 10px 0 10px 25px;
font-size: small;
background: #000;
color: #ccc;
margin-bottom: 20px;
}

Conclusion

That’s it! Hopefully you’ve learned a thing or two about coding websites. Check it out in any browser, make the text bigger, make it smaller, and our layout adapts just fine. Disable CSS, and it still makes sense! I hope you can see how easy it is to make your websites less fallible! This page was very simple, without many complicated challenges. When your layouts get more complicated, it will be a bit tougher to maintain flexibility.

If you have any questions, drop me a comment, and i'll answer you ASAP.