1stwebdesigner

Posted by ryan | Posted on 18:14

(0) comments

1stwebdesigner

Convert Your Product Landing Page From PSD to HTML [Very Detailed]

Posted: 25 Feb 2011 02:00 AM PST

In this article you will learn how to convert Your Product Landing Page from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout by using a CSS framework, some CSS styles and Javascript. When you've completed this tutorial you'll have a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

Now, let's get started with this tutorial.

Links you will need to complete this tutorial:

Here's what we'll be creating (Click on image to view a full working demo).

You can also download this tutorial's source files here.

Step 1 – Preparation

If you read the Photoshop tutorial for creating this landing page you probably noticed that 960gs grid system was used to create guidelines. Well, in this tutorial we will also need the 960gs CSS framework. Using CSS frameworks makes layout and style creation a lot easier and saves time in web development. Now you should download the 960 Grid system source files for usage in this tutorial.

You will also need a code editor; you can use a plain text editor such as the Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

During this tutorial you should test your layout in different browsers, you don't want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles, but as you might know not all browsers support CSS3 features. The CSS3 styles used in this tutorial have been tested with Firefox version 3.6.

Step 2 – Getting Your Files Ready

First thing you should do is create a directory for your website. I usually create an /images/ directory for images and a /styles/ directory which will hold every style sheet (CSS) file and the slider JavaScript file. The HTML file goes in the root directory.

Now you need to grab the CSS files from the 960gs grid system we downloaded earlier, extract the ZIP file and then copy the CSS files from /code/css/ folder to your /styles/ directory, you should copy 960.css, reset.css and text.css files. You should notice a directory called /uncompressed/ which has the same files but in a bigger and more readable format, I recommend using the compressed CSS files. You also need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory.

In this tutorial we need to export images from Photoshop to use in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source files with this tutorial and you'll find the images I created.

Step 3 – Simple Starter Layout

We need to start by creating a Simple HTML layout as the basis of our site to be. By looking at the Photoshop Layout you should notice a few things:

  1. The layout has a background image for the body that is repeated horizontally.
  2. The layout has a header which contains a logo, slogan and menu items.
  3. The content of the layout is separated into two columns: the left column contains slider and features, while the right column contains a featured section with two buttons, newsletter sign-up form and about us text.
  4. The bottom section of the layout has two sections a footer with latest news, latest tweets and get connected social icons, and a copyright section with copyright text and links.
  5. Finally, all divisions have a background color and no background image.

You can follow the notes above by looking at this image.

Now, Based on these notes we create the following HTML 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"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     <title>3D BOX</title>     <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />     <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />     <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />     <link type="text/css" href="styles/tut_style.css" rel="stylesheet" media="all" /> </head> <body>     <div class="header_container">         <div class="container_12">             header content goes here.         </div>     </div>     <div class="container_12">         <div class="left_column grid_6">             slider and features content goes here.         </div>         <div class="right_column grid_6">             featured, newsletter sign up form and about us content goes here.         </div>         <div class="clear"></div>     </div>     <div class="footer">         <div class="container_12">             footer content goes here.         </div>     </div>     <div class="copyright_links">         <div class="container_12">             copyright and links goes here.         </div>     </div> </body> </html>

Notice in this simple layout that we added four main divisions. A division with class “header_container” containing a division with a class “container_12″ which is already styled in 960.css file and we use it to limit the layout width and center it horizontally in the page. Then a division with class “container_12″ that contains two columns a division with class “left_column grid_6″ and another one with class “right_column grid_6″ and we add the “grid_6″ class name because we want our division to have all the styling required to match the containing division and because both columns has nearly the same width which will be reset in the “left_column” and “right_column” classes to match our required widths. Then we added a division with class “footer” containing a division with class “container_12″. Finally, we added a division with class “copyright_links” containing a division with a class “container_12″. Now let's add the CSS as follows (all CSS should be added in style.css file):

 body {     color: #403f3f;     background: #fff url(../images/bg.jpg) repeat-x;     background-position: center 100px;     font-size: 12px;     font-family: Arial; }  a {     text-decoration: none; }  .header_container {     width: 100%;     background: #191919;     height: 100px;     overflow: hidden;     margin: 0 0 27px 0; }  .container_12 .left_column {     width: 500px;     margin-right: 5px; }  .container_12 .right_column {     width: 404px;     padding: 0 0 0 26px;     margin-left: 5px; }  .footer {     width: 100%;     height: 215px;     background: #282828;     color: #d9d9d9;     padding: 28px 0 0 0; }  .copyright_links {     width: 100%;     height: 32px;     background: #191919;     color: #9e9e9e;     line-height: 32px;     font-size: 11px; }

In the above CSS code we started by styling the body with color set to #403f3f, background color to #fff, background image to “bg.jpg” horizontally repeating, set background vertical position to 100px to start the background just after the header, font size to 12px and font family to Arial. Then we set all links to have no text decoration. Now we set “header_container” style with 100% width to fill all the browser’s visible area, background color to #191919, a fixed height of 100px, overflow to hidden so that all header extra content is hidden and a bottom margin of 27px. Now we need to reset the left and right column widths and margins, we set left column to have 500px width and 5px right margin, and the right column to have 404px width and 5px left margin with an extra left padding of 26px. Now let’s style the footer division with 100% width, a height of 215px, background color to #282828, text color to #d9d9d9 and a top padding of 28px.

Finally, we style the copyright division with 100% width, a fixed height of 32px, background color to #191919, text color to #9e9e9e, line height to the same as height so that the text is aligned to center vertically and font size to 11px. The result should be the same as the image below.

Step 4 – Adding Logo and Menu Items to Header

Now we need to add the logo and menu items, here's the HTML for the header section.

     <div class="header_container">         <div class="container_12">             <div class="grid_5">                 <h1><a href="#" title="3D BOX">3D BOX</a></h1>                 <div class="slogan">The fastest way to create your box</div>             </div>             <div class="grid_7">                 <div class="menu">                     <a href="#" title="HOME" class="active">HOME</a>                     <a href="#" title="PRODUCTS">PRODUCTS</a>                     <a href="#" title="SUPPORT">SUPPORT</a>                     <a href="#" title="ABOUT">ABOUT</a>                     <a href="#" title="CONTACT">CONTACT</a>                 </div>             </div>         </div>     </div>

Now, we added two divisions one for the logo with class “grid_5″ and one for the menu items with class “grid_7″. The logo text is added inside <h1> with the slogan added inside a division with class “slogan”. The menu item links are added inside a division with class “menu”. Now lets add the CSS for the header content.

 .header_container {     width: 100%;     background: #191919;     height: 100px;     overflow: hidden;     margin: 0 0 27px 0; }      .header_container h1 {         display: block;         margin: 20px 0 0 0;         line-height: 55px;         width: 150px;         height: 55px;         float: left;         border-right: 1px solid #414141;     }          .header_container h1 a {             color: #e0cf39;             font-size: 36px;         }      .header_container .slogan {         display: block;         float: left;         color: #fff;         height: 55px;         line-height: 55px;         margin: 20px 0 0 15px;     }      .header_container .menu {         float: right;         display: block;     }      .header_container .menu a {         color: #9e9e9e;         display: block;         float: left;         height: 100px;         line-height: 100px;         padding: 0 18px;         margin: 0 0 0 5px;     }          .header_container .menu a:hover, .header_container .menu a.active {             background: #282828;             color: #fff;             border-top: 4px solid #e0cf39;             height: 96px;             line-height: 92px;         }

I started by styling the <h1> by setting display to block, top margin to 20px, line height to 55px, width to 150px, height to 55px, set floating to left and a right border of 1px with a color of #414141 to represent the vertical separator between the logo and the slogan. Then I styled the logo’s link with the color set to #e0cf39 and font size to 36px. Now we style the slogan by setting display to block, floating to the left, text color to white, a fixed height of 55px,  line height similar to height to center text vertically, top margin of 20px and left margin of 15px.

Let’s style the menu items, we start by styling the menu items container by setting float to right and display to block. Now we style the links normal state for menu items by setting text color to #9e9e9e, display to block, float to left, a fixed height and line height similar to the header height, a left and right padding of 18px and a left margin of 5px. Finally, we style the links hover and active states for the menu items by setting background color to #282828, text color to white, a 4px wide solid top border with a color of #e0cf39, height and line height to 96px to compensate for the 4 pixels taken by the top border. The result should be as the image below.

Step 5 – Adding Slider Content, Style and Javascript

Now, we are going to add the slider and for this I am going to use an already implemented script, which is Slidesjs. I did take the script and modified it to make it suit our layout and now here’s the HTML for the slider content which will be included inside the left column.

         <div class="left_column grid_6">             <div class="slider">                 <div id="slider">                     <div class="slides_container">                         <div>                             <img src="images/image.jpg" alt="" />                         </div>                         <div>                             <img src="images/image.jpg" alt="" />                         </div>                         <div>                             <img src="images/image.jpg" alt="" />                         </div>                         <div>                             <img src="images/image.jpg" alt="" />                         </div>                     </div>                 </div>             </div>         </div>

The script is so easy to use and modify that I only needed to add a division with class “slider” that contains another division with an ID “slider” which will be used by the script to make the slider works. Then the slides is simply a division with an image inside, that I added it 4 times inside the division “slides_container”. Now let's add the CSS style for the slider content and script.

 .container_12 .left_column .slider {     background: url(../images/slider.png) no-repeat bottom center;     width: 470px;     height: 286px;     margin: 0 0 34px 0; }      .slides_container {         width:460px;         height: 239px;         display: none;         border: 5px solid #fff;     }          .slides_container div {             width: 460px;             height: 239px;             display: block;         }      .pagination {         list-style: none;         display: block;         padding: 0;         margin: 26px 0 0 216px;         float: left;         width: 60px;     }      .pagination li {         float: left;         margin: 0;         padding: 0;     }      .pagination li a {         height: 10px;         width: 10px;         float: left;         text-indent: -10000px;         background: url(../images/slider_bullets.png) no-repeat;         background-position: -15px center;         margin: 0 5px 0 0;     }      .pagination li a:hover {         background-position: 0px center;     }      .pagination .current a {         background-position: 0px center;     }

The slider division is styled with a background image to represent the shadow underneath the slider, a fixed height and width and a bottom margin of 34px. Then I styled the slides container with fixed height and width, display set to none and a 5px solid white border. Now we style the divisions holding the images with fixed height and width and display set to block. Now you notice that there’s a style for something called pagination, and this style is for a content added by the script after the slides to represent the paging navigation for the slides. I styled it so that it is now represented by a background circle image for normal, hover and current states.

Now let's add the required jQuery script in the header. You can find the script file in this tutorial source file or from the jQuery Scrollable script page. The HTML head section should be like this.

 <head>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     <title>3D BOX</title>     <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />     <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />     <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />     <link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>     <script type="text/javascript" src="styles/slides.min.jquery.js"></script> </head>

Finally, we need to add the Javascript code that will allow the slider to work on our layout. You should add this script just before the closing tag of the body. Here's the Javascript.

 <script type="text/javascript">     $(function () {         $('#slider').slides({             preload: true         });     }); </script>

Now our layout should look like this.

Step 6 – Adding Features Content and Style

We are still adding content inside the left column and now we need to add the features content right after the slider content, here’s the HTML.

 <div class="features_item">     <h3>         <img src="images/radio.png" alt="" />         Sed accumsan arcu     </h3>     <p>         Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.     </p> </div> <div class="features_item with_margin">     <h3>         <img src="images/disk.png" alt="" />         Fusce eu erat metus     </h3>     <p>         Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.     </p> </div> <div class="clear"></div> <div class="features_item">     <h3>         <img src="images/usb.png" alt="" />         Cras auctor pharetra     </h3>     <p>         Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.     </p> </div> <div class="features_item with_margin">     <h3>         <img src="images/mail.png" alt="" />         Lorem ipsum dolor     </h3>     <p>         Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.     </p> </div> <div class="clear"></div> <div class="features_item">     <h3>         <img src="images/link.png" alt="" />         Nullam pharetra males     </h3>     <p>         Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.     </p> </div> <div class="features_item with_margin">     <h3>         <img src="images/under_const.png" alt="" />         Sed accumsan arcu     </h3>     <p>         Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.     </p> </div>

Now if you take a look at the HTML above you will notice that there’s a pattern of two three divisions repeated three times, a division with class “features_item”, a division with class “features_item with_margin” and a final division with class “clear” for clearing floated elements. Every division has an <h3> tag with the icon image inside it, and then a paragraph. Now let's add the CSS style for the features content.

 .container_12 .left_column .features_item {     width: 240px;     float: left; }      .container_12 .left_column .features_item.with_margin {         margin-left: 20px;     }      .container_12 .left_column .features_item h3 {         font-size: 14px;         margin: 0 0 5px 0;         line-height: 32px;     }          .container_12 .left_column .features_item h3 img {             float: left;             margin: 0 30px 0 0;         }      .container_12 .left_column .features_item p {         line-height: 30px;         text-align: justify;     }

Notice that for the “features_item” class there’s two styles: “.container_12 .left_column .features_item” and “.container_12 .left_column .features_item.with_margin”, the difference between both styles is that one has no margins and the other one has a left margin of 20px. The features item class has a float to left and a fixed width. The header 3 is styled with 14px for font size, 5px bottom margin and line height of 32px. The image inside the header style is set to floating to left and right margin of 30px for the space between the image and the text. Finally, I styled the paragraph with 30px line height and text align is set to justify. Now our layout should look like this.

Step 7 – Adding Featured Content and Style

Now we need to add the featured content with buttons in the right column section. Here’s the HTML for the featured content.

 <h2>3D Box Generator</h2> <p>     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum neque eu justo sodales cursus. In nisl turpis, placerat rutrum facilisis in, lacinia nec velit. Vestibulum fermentum felis ut nunc ele mentum adipiscing. Duis eu lacus vel ligula vulputate convallis eu vitae mi. Fusce ut facilisis massa. </p> <a href="#" title="GET FREE TRIAL" class="free_trial_button">GET FREE TRIAL</a> <a href="#" title="PURCHASE NOW" class="purchase_now_button">PURCHASE NOW</a>

We added a <h2> tag with a title inside it, a paragraph and then two links which will represent “Purchase Now” and “Get Free Trial” buttons. Now we need to style the featured content, here’s the CSS styles.

 .container_12 .right_column h2 {     font-size: 24px;     font-weight: normal;     margin: 0 0 18px 0; }  .container_12 .right_column p {     line-height: 24px;     margin: 0 0 40px 0; }  .container_12 .right_column .free_trial_button {     background: url(../images/buttons_form_bg.png) no-repeat;     background-position: -26px 0px;     height: 56px;     width: 160px;     float: left;     text-indent: -10000px;     margin: 0 20px 0 0; }  .container_12 .right_column .purchase_now_button {     background: url(../images/buttons_form_bg.png) no-repeat;     background-position: -206px 0px;     height: 56px;     width: 160px;     float: left;     text-indent: -10000px; }

The style for header 2 is set to have font size of 24px, normal font weight and a bottom margin of 18px. The paragraph is styled to have 24px for line height and 40px as bottom margin. Now, we’ll style the buttons which have almost the same style, but with the free trial button having a right margin and different background position as we are using a CSS technique called CSS Sprites which allows us to choose what to show from a single image using CSS background position properties. The buttons classes style is set with background image that has no repeat, background position, a fixed height and width, floating to left and a text indent set to -10000px which allows the text to be available in the HTML but it is hidden when viewed in browsers and this has some SEO benefits. The result should be as the image below.

Step 8 – Adding Newsletter Sign Up Form HTML and CSS

Now let’s add the HTML for the Newsletter sign up form.

 <div class="newsletter">     <a href="#" title="Sign Up For FREE!" class="sign_up">Sign Up For FREE!</a>     <div class="clear"></div>     <input type="text" class="name" />     <input type="text" class="email" />     <p>         Nullam fringilla egestas turpis ac viverra. Ut turpis eros, sus- cipit sit amet dapibus eget, interdum eget ante. Duis cursus metus molestie lectus cursus non blandit velit sagittis. Donec posuere mattis leo in interdum. Aliquam sollicitudin, nulla eget ullamcorper iaculis, felis magna posuere tortor, quis euismod enim lectus ac leo.     </p> </div>

I added a division with class “newsletter” which will act as a container for form elements, inside it I added a link for the “Sign Up For FREE” then two text inputs for name and email and finally a paragraph. Now let’s add the CSS style for the newsletter sign up form.

 .container_12 .right_column .newsletter {     background: url(../images/buttons_form_bg.png) no-repeat;     background-position: 0px -63px;     height: 384px;     width: 403px;     padding: 0 0 0 25px;     margin: 0 0 29px -25px;     clear: both; }      .container_12 .right_column .newsletter a {         width: 188px;         height: 40px;         float: right;         text-indent: -10000px;         margin: 26px 15px 10px 0;     }      .container_12 .right_column .newsletter input[type=text] {         width: 305px;         height: 20px;         line-height: 20px;         background: transparent;         border: 0px none;     }          .container_12 .right_column .newsletter input[type=text].name {             margin-bottom: 14px;             margin-left: 82px;         }          .container_12 .right_column .newsletter input[type=text].email {             margin-left: 86px;         }      .container_12 .right_column .newsletter p {         font-family: Georgia;         line-height: 30px;         text-align: justify;         margin: 40px 14px 0 18px;     }

If you look at the full layout image you’ll probably notice that the sign up form’s background image is not aligned with the content and in order to do this we are going to use negative margins which will allow us to expand the sign up form background image as we like. We styled the newsletter division with a background image, background position, a fixed height and width, positive left padding equal to the negative left margin, bottom margin and clear set to both to clear all floated elements. Now we set the “Sign Up For FREE” link style with fixed width and height, floating to right, negative text indentation to hide the text and some top, right and bottom margins. Let’s style the the text input general style with fixed height and width, line height to a value equal to height to center text vertically, background set to transparent and with no border. for the name and email text inputs style I added some margins to place them right where we need. Finally, I styled the paragraph with font family to Georgia, line height to 30px, text align to justify, top margin to 40px, right margin to 14px and left margin to 18px. The result should be as the image below.

Step 9 – Adding About Us Content and Style

Now let’s add the HTML for About Us content.

 <h3>About Us</h3> <p class="about_us">     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan arcu in massa tempor sed pulvinar leo consectetur. Fusce tempor porta cursus. Nullam pharetra malesuada neque eu volutpat. Cras auctor phar- etra ipsum, et ultrices dui dictum a. U erat metus, nibh massa. </p>

I added a <h3> tag then paragraph with some text, now let’s add the CSS style for About Us content.

 .container_12 .right_column h3 {     font-size: 14px;     line-height: 28px;     border-bottom: 1px dotted #666;     margin: 0 0 5px 0; }  .container_12 .right_column p.about_us {     line-height: 30px;     text-align: justify; }

I styled the header 3 with font size set to 14px, line height to 28px, 1px dotted border with color set to #666 and a bottom margin of 5px. Finally, I styled the paragraph with class “about_us” to have 30px for line height and text alignment to justify. The result should be as the image below.

Step 10 – Adding Footer Content and Style

Let’s add the HTML for the footer content.

 <div class="footer">     <div class="container_12">         <div class="grid_4">             <h3>Latest News</h3>             <p>                 Nullam mollis arcu sodales mauris interdum ac rhoncus mi imperdiet.             </p>             <p>                 Donec aliquam scelerisque est, a sagittis odio vehicula Ut facilisis cursus mi.             </p>         </div>         <div class="grid_4">             <h3>Recent Tweets</h3>             <p>                 Nullam mollis arcu sodales mauris interdum ac rhoncus mi imperdiet. <span>12 minutes ago</span>             </p>             <p>                 Donec aliquam scelerisque est, a sagittis odio vehicula Ut facilisis cursus mi. <span>12 minutes ago</span>             </p>         </div>         <div class="grid_4">             <h3>Get Connected</h3>             <p class="connected">                 Nullam mollis arcu sodales mauris interdum ac rhoncus mi imperdiet.             </p>             <a href="#"><img src="images/facebook.png" alt="" /></a>             <a href="#"><img src="images/twitter.png" alt="" /></a>             <a href="#"><img src="images/contact.png" alt="" /></a>         </div>     </div> </div>

I used three divisions with class “grid_4″ which will divide the footer into three equal sections, the first one has an <h3> tag with two paragraphs. The second one is the same as the first with the exception of a span inside the paragraph and the final division with an <h3> tag, a paragraph and the social icons links and images. Now, let’s add the CSS style for the footer content.

 .footer .container_12 h3 {     color: #fff;     font-size: 18px;     font-weight: normal;     margin: 0 0 20px 0; }  .footer .container_12 p {     text-align: justify;     line-height: 18px;     border-bottom: 1px dotted #666;     margin: 0 0 10px 0;     padding: 0 0 10px 0; }  .footer .container_12 p.connected {     border: 0px none; }      .footer .container_12 p span {         color: #e0cf39;         font-size: 10px;     }  .footer .container_12 a {     margin: 0 8px 0 0; }

I styled the header 3 with white font color, font size set to 18px, normal font weight and a bottom margin. I styled the paragraph style with justified text alignment, line height set to 18px, 1px dotted bottom border with color set to #666, a bottom margin and a bottom padding. Then I styled the “connected” paragraph with no border and the span inside the paragraphs with color set to #e0cf39 and font size set to 10px. and then I styled the links to have a right margin. The result should be as the image below.

Step 11 – Adding Copyright Content and Style

Let’s add the HTML content for the Copyright text and links.

 <div class="copyright_links">     <div class="container_12">         <div class="grid_4">             Copyright 2010 3D BOX, All Rights Reserved.         </div>         <div class="grid_8">             <a href="#" title="Home" class="active">Home</a>             <a href="#" title="Privacy Policy">Privacy Policy</a>             <a href="#" title="Terms">Terms</a>             <a href="#" title="Help">Help</a>             <a href="#" title="Contact">Contact</a>         </div>     </div> </div>

I added two divisions with class “grid_4″ for copyright text and “grid_8″ for the links. Now let’s add the CSS style.

 .copyright_links .container_12 .grid_4 {     text-align: left; }  .copyright_links .container_12 .grid_8 {     text-align: right; }  .copyright_links .container_12 .grid_8 a {     color: #9e9e9e;     margin: 0 0 0 15px; }

First I set “grid_4″ text alignment to left and “grid_8″ to right, and then I styled the links with color set to #9e9e9e and a left margin of 15px.

If you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD that looks exactly like this.

Conclusion

So that's it. In this tutorial you learned how to convert a layout from PSD to a fully working HTML/CSS website, don't forget to validate and check for browser compatibility (the layout will not validate because of Javascript & CSS3 styles, remove both to validate properly). If there was a part of this tutorial you didn't understand, or you have a better technique, please be kind and say something in the comments below.

Comments (0)

Post a Comment

Subscribe to: Post Comments (Atom)