1stwebdesigner

Posted by ryan | Posted on 17:22

(0) comments

1stwebdesigner

Converting Dezign Folio From PSD to HTML [Very Detailed]

Posted: 18 Feb 2011 02:16 AM PST

In this article you will learn how to convert Dezign Folio 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).

Full Tutorial Demo

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

Step 1 – Preparation

If you read the Photoshop tutorial for creating this layout you probably noticed that 960gs grid system was used for guidelines creation. 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. 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 these sections: header, slide show, services, information and a footer.
  2. You’ll also notice that we can use a single repeating image as the background for the body that covers header, slide show and services.
  3. Both information and footer sections have the same horizontally repeating background image.
  4. Finally, notice that header, slide show, information and footer sections have fixed heights.

Based on these points we create the following HTML layout.

 <!--<span class="hiddenSpellError" pre=""-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     <title>DezignFolio</title>     css" href="styles/reset.css" rel="stylesheet" media="all" />     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" /> </head> <body>     <div class="header container_12">         header content goes here.     </div>  <div class="<span class=">slideshow"></div>         slide show content goes here.     </div>     <div class="services container_12">         services content goes here.     </div>     <div class="information">         <div class="container_12">             information content goes here.         </div>     </div>     <div class="footer">         <div class="container_12">             <div class="grid_12">                 Copyright 2010 1stwebdesigner.com             </div>         </div>     </div> </body> </html>

As you can see in this layout we added links for the CSS files in the header, created five main <div> sections each with a unique class name for styling. I added an extra class “container_12″ to header and services. I also added a <div> with a class “container_12″ inside information and footer sections, this will allow us to style the information and footer sections to take full width of the browser area and to hold the repeating background. Finally, notice that “container_12″ in the footer has a “grid_12″ division, this division will take the whole width of “container_12″ and it is styled in 960.css file. Now let's add the CSS as follows (all CSS should be added in style.css file):

 body {     color: #696969;     background: #fff url(../images/bg.jpg) repeat-x top center;     font-size: 12px;     line-height: 17px;     font-family: Verdana;     padding: 0; }  a {     text-decoration: none; }  .header {     height: 101px;     overflow: hidden; }  .slideshow {     padding: 30px 0 0 0;     height: 475px;     overflow: hidden;     background: url(../images/message_bg.png) no-repeat;     background-position: center 348px; }  .information {     width: 100%;     height: 318px;     display: block;     overflow: hidden;     background: url(../images/information_footer_bg.jpg) repeat-x top center; }  .footer {     width: 100%;     height: 59px;     display: block;     overflow: hidden;     background: url(../images/information_footer_bg.jpg) repeat-x bottom center;     text-align: center;     font-size: 12px;     line-height: 59px;     color: #fff; }

Now notice that the body color is set to #696969 with white as the background color and a horizontally repeating background image bg.jpg font size is set to 12px, line height to 17px, font set to Verdana with zero padding. Then the links text decoration is set to none so that the links aren’t underlined in normal link state. Now the header height is set to 101px with overflow hidden to hide extra content. Now look at the header style and see that it has a top padding of 30px to maintain a space between header and slide show content, height is set to 475px, with overflow set to hidden and a background image message_bg.png aligned horizontally to center and vertically at 348px. You’ll notice that there’s no style for the services section and that’s because it doesn’t have any special styles to be that will be applied. Now let’s look at information style, notice that the width is set to 100% to fill browsers horizontal space, with a fixed height, overflow set to hidden and a horizontally repeating background image.

Finally, the footer section is going to be styled here entirely and that’s because it has only one copyright sentence. The width is set to 100% to fill browsers horizontal space, with 59px height, hidden overflow, a background image with the same settings as we used in the information section the only change is that its aligned to bottom, text is aligned to center, with 12px font size, white font color and 59px line height similar to footer height value so that the text is aligned vertically to center. 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_12">         <div class="grid_4">             <h1>                 <a href="#" title="DesignFolio">DezignFolio</a>             </h1>         </div>         <div class="grid_8">             <a href="#" title="Home" class="home active">Home</a>             <a href="#" title="About Us" class="about">About Us</a>             <a href="#" title="Services" class="services">Services</a>             <a href="#" title="Blog" class="blog">Blog</a>             <a href="#" title="Contact" class="contact">Contact</a>         </div>     </div>

Notice that we added two divisions with a “grid_4″ and “grid_8″ classes, inside the “grid_4″ division I added the logo content and an <h1> with a link inside it. Next I added links for the menu items each with a unique class name which will help us in styling each menu item inside the “grid_8″ division. Now lets add the CSS for the header content.

 .header {     height: 101px;     overflow: hidden; }      .header .grid_4 h1 a {         text-indent: -10000px;         display: block;         width: 234px;         height: 45px;         background: url(../images/logo_menu_bg.png) no-repeat;         background-position: 0 -38px;         margin: 36px 0 0 0;     }      .header .grid_8 a {         text-indent: -10000px;         display: block;         height: 36px;         background: url(../images/logo_menu_bg.png) no-repeat;         margin: 33px 30px 0 0;         float: left;     }          .header .grid_8 a.home {             background-position: -264px -11px;             width: 35px;             margin-left: 250px;         }              .header .grid_8 a.home:hover, .header .grid_8 a.home.active {                 background-position: -264px -56px;             }          .header .grid_8 a.about {             background-position: -329px -11px;             width: 63px;         }              .header .grid_8 a.about:hover, .header .grid_8 a.about.active {                 background-position: -329px -56px;             }          .header .grid_8 a.services {             background-position: -422px -11px;             width: 61px;         }              .header .grid_8 a.services:hover, .header .grid_8 a.services.active {                 background-position: -422px -56px;             }          .header .grid_8 a.blog {             background-position: -513px -11px;             width: 33px;         }              .header .grid_8 a.blog:hover, .header .grid_8 a.blog.active {                 background-position: -513px -56px;             }          .header .grid_8 a.contact {             background-position: -572px -11px;             width: 57px;             margin-right: 0px;         }              .header .grid_8 a.contact:hover, .header .grid_8 a.contact.active {                 background-position: -572px -56px;             }

Now in styling our header content we are going to use a single image that will contain both the logo image and menu items normal state, hover and active state images. We are using a CSS technique called CSS Sprites which allows us to choose what to show from this single image using CSS background position properties, and that’s why we added a unique class name for each menu item. The image used in the CSS Sprites is “logo_menu_bg.jpg”, now I start by styling the logo link by setting text indentation 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, a fixed height and width to match the size of the logo image, a top margin of 35px for a space above the logo, a background image with no repeat and then we set the background image position to 0px horizontally and -38px vertically.

Now we move to style the menu items by setting common styles for all menu item links with a text indentation of -10000px to hide the text, a fixed height,  a top margin to make a space above menu items, a right margin to make the space between menu items, a float to left and finally use the same background image for all menu items with no repeat. After we set the common styles for menu items we take each unique class name and style the normal, hover and active states of the link with background position, fixed width. Finally, you should only notice that the first menu item “.home” with a left margin of 250px to make the distance between the logo and the menu items. The result should be as the image below.

Step 5 – Adding Slide Show Content, Style and Javascript

Now, we are going to use an already implemented solution for the slide show script, the script is jQuery Scrollable. I modified it to match what we need here as for style and layout, unfortunately I can’t walk you through every bit of the process for modifying the script and the styles because I would need a full tutorial for this part alone. I am going to tell you what to include in order to make this work. First, here’s the HTML for the slide show content.

  <div class="<span class=">slideshow"></div>         <!-- root element for everything -->         <div id="scroll">             <!-- <span class="hiddenSpellError" pre="">scrollable</span> items -->  <div style="left: <span class=;">-1920px;" id="tools"></div>                 <div class="tool">                     <div class="details">                         <h2>                             Usce ac nunc eros, ac suscipit mi.                         <p>                             Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula                             nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.                             Cum sociis natoque penatibus                     </div>                     <img src="images/slideshow_image.png" alt="" />                 </div>                 <div class="tool">                     <div class="details">                         <h2>                             Usce ac nunc eros, ac suscipit mi.                         <p>                             Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula                             nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.                             Cum sociis natoque penatibus                     </div>                     <img src="images/slideshow_image.png" alt="" />                 </div>                 <div class="tool">                     <div class="details">                         <h2>                             Usce ac nunc eros, ac suscipit mi.                         <p>                             Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula                             nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.                             Cum sociis natoque penatibus                     </div>                     <img src="images/slideshow_image.png" alt="" />                 </div>                 <div class="tool">                     <div class="details">                         <h2>                             Usce ac nunc eros, ac suscipit mi.                         <p>                             Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula                             nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.                             Cum sociis natoque penatibus                     </div>                     <img src="images/slideshow_image.png" alt="" />                 </div>                 <div class="tool">                     <div class="details">                         <h2>                             Usce ac nunc eros, ac suscipit mi.                         <p>                             Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula                             nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.                             Cum sociis natoque penatibus                     </div>                     <img src="images/slideshow_image.png" alt="" />                 </div>             </div>             <!-- required for IE6/IE7 -->             <br clear="all" />             <!-- thumbnails -->             <div id="thumbs" class="t">                 <a id="<span class=">t0" class="active">Nunc vulputate</a>                     <br />                     tristique nisl quis conse                 <!-- <span class="hiddenSpellError" pre="">scrollable</span> navigator root element -->                 <div class="navi">                     <a style="display: none;"></a><a id="<span class=">t1">Class aptent</a>                         <br />                         Vestibulum tempus orc <a id="<span class=">t2">Lorem ipsum</a>                             <br />                             Curabitur pretium vehicula <a id="t3">Cum sociis nat</a>                                 <br />                                 Aenean nec libero <a id="t4">Maecenas pulvinar dignissim</a>                                     <br />                                     Vestibulum posuere varius magna                 </div>             </div>             <div class="navigation_buttons">                 <a class="prev">Previous</a> <a class="next">Next</a>             </div>         </div>         <div class="message container_12">             <div class="grid_12">                 <div>                     Hi we are Dezign Folio, orbi pulvinar, velit vel pulvinar vehicula, nisl purus iaculis orci, condimentum pharetra ligula libero ac sem.                 </div>             </div>             <div class="clear"></div>         </div>     </div>

You’ll notice a division with an ID parameter “scroll” this will hold all sliding content, inside it is three main divisions a division with ID parameter “tools”, a division with ID parameter “thumbs” and a third division with a class name “navigation_buttons”. The first division holds the slides as divisions with class name “tool” each with the content you want inside it, the thumbs division holds the thumbnails or tabs for the slides and it should equal the number of slides and the last division holds the content for the next and previous buttons or links.

After the slide show slides, I added an extra division which will hold the site welcome message with a class name “message container_12″ with a single division inside it that has the message text. Now let’s add the CSS style for the slide show content and script.

 .slideshow {     padding: 30px 0 0 0;     height: 475px;     overflow: hidden;     background: url(../images/message_bg.png) no-repeat;     background-position: center 348px; }      .slideshow .message {         color: #fff;         font-size: 18px;         line-height: 24px;         text-align: center;         text-shadow: 0px -1px 0 #000;         margin-top: 30px;     }          .slideshow .message .grid_12 div {             padding: 0 78px 0 78px;         }              .slideshow .message .grid_12 div span {                 color: #f3ff00;             }  /*------ SlideShow Script Styles ------*/ #scroll {     position: relative; 	height: 316px; 	overflow: hidden; 	border: 0px none;     width: 960px; 	padding: 0;     margin: 0 auto;     background: url(../images/slideshow_bg.jpg) repeat-x top center; }  #tools { 	width: 9999em; 	position: absolute; 	height: 258px; }  .tool { 	float: left; 	width: 960px; 	height: 258px; 	text-align: left;     overflow: hidden; }      .tool img {         float: right;     }  .details { 	float: left;     color: #252525;     width: 350px;     margin: 33px 0 0 70px }      .details h2 {         font-family: Verdana;         font-size: 24px;         line-height: 28px;         font-weight: normal;         margin: 0 0 40px 0;     }      .details p {         font-family: Verdana;         font-size: 12px;         line-height: 18px;         font-weight: normal;     }  #thumbs { 	height: 60px; 	position: absolute; 	top: 258px; 	width: 960px; 	left: 0px;     overflow: hidden;     background: url(../images/thumbs_bg.jpg) repeat-x top center; }  .navi {     width: 960px;     height: 58px; }  .t { 	padding: 0 !important; }      .t a { 	    display: block; 	    float: left; 	    height: 34px; 	    cursor: pointer;         border-left: 1px solid #b9b9b9;         border-right: 1px solid #fff;         border-top: 1px solid #b9b9b9;         border-bottom: 1px solid #b9b9b9;         font-family: Arial;         font-size: 18px;         line-height: 20px;         padding: 8px 15px 14px 10px;         color: #252525;     }          .t a span {             font-size: 12px;             line-height: 14px;         }      .t a.active { 	    cursor: default !important;         background: url(../images/thumbs_bg_h.jpg) repeat-x top center;         color: #fff;         border-left: 1px solid #2d2d2d;         border-right: 1px solid #2d2d2d;         border-top: 1px solid #2d2d2d;         border-bottom: 1px solid #2d2d2d;     }      t. a:hover {         background: url(../images/thumbs_bg_h.jpg) repeat-x top center;         color: #fff;         border-left: 1px solid #2d2d2d;         border-right: 1px solid #2d2d2d;         border-top: 1px solid #2d2d2d;         border-bottom: 1px solid #2d2d2d;     }  #t0 	{ width: 145px; }  #t1		{ width: 145px; }  #t2		{ width: 145px; }  #t3		{ width: 145px; }  #t4		{ width: 245px; }  .navigation_buttons {     width: 960px;     height: 75px;     position: absolute;     top: 102px; }      .navigation_buttons .prev {         float: left;         background: url(../images/prev.png) no-repeat center center;         height: 75px;         width: 36px;         border: 0px none;         text-indent: -10000px;         cursor: pointer;     }      .navigation_buttons .next {         float: right;         background: url(../images/next.png) no-repeat center center;         height: 75px;         width: 36px;         border: 0px none;         text-indent: -10000px;         cursor: pointer;         margin: 0 -1px 0 0;     } /*------ End of SlideShow Script Styles ------*/

The CSS styles included in the comments is the original styles from the slider script, I did however modify it a bit by changing some values such as width, height, padding, margin and background images to make it match our layout design. The message division style has a white text color, 18px font size, 24px line height, center aligned text, a text shadow and a top margin. The inner division has a left and right padding values with the <span> element having a yellow text color.

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>DezignFolio</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" />     <script type="text/<span class="><!--mce:0--></script> </head>

Finally, we need to add the Javascript code that will allow the slide show 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">         // initialize scrollable and return the programming API         var api = $("#scroll").scrollable({             items: '#tools'              // use the navigator plugin         }).navigator().data("scrollable");          // this callback does the special handling of our "intro page"         api.onBeforeSeek(function (e, i) {              // when on the first item: hide the intro             if (i) {                 $("#intro").fadeOut("slow");                  // dirty hack for IE7-. cannot explain                 if ($.browser.msie && $.browser.version < 8) {                     $("#intro").hide();                 }                  // otherwise show the intro             } else {                 $("#intro").fadeIn(1000);             }              // toggle activity for the intro thumbnail             $("#t0").toggleClass("active", i == 0);         });          // a dedicated click event for the intro thumbnail         $("#t0").click(function () {              // seek to the beginning (the hidden first item)             $("#scroll").scrollable().begin();          });      </script>

Now our layout should look like this.

Step 6 – Adding Services Content

Now let’s add the Services section content. Here’s the HTML content.

     <div class="services container_12">         <div class="grid_4">             <h2>                 <img src="images/service_icon_1.png" alt="" />                 <strong>Vivamus</strong> venenatis?                 <br />                 Cras sed ipsum quis nisi pellentesque             </h2>             <p>                 Nulla facilisi. Vestibulum metus massa, egestas et porttitor et, venenatis sed felis. Donec elit dolor, placerat eget interdum ac, euismod sit amet tellus. Morbi sit amet hendre- rit ante.             </p>         </div>         <div class="grid_4">             <h2>                 <img src="images/service_icon_2.png" alt="" />                 <strong>Phasellus</strong> consectetur?                 <br />                 <span>Maecenas pretium diam venenatis</span>             </h2>             <p>                 Sed consequat, nisi nec tincidunt feugiat, turpis diam dapibus magna, eget pulvinar lorem nulla nec magna. ed fermentum massa quis nisl condimentum.             </p>         </div>         <div class="grid_4">             <h2>                 <img src="images/service_icon_3.png" alt="" />                 <strong>Lorem</strong> ipsum dolor?                 <br />                 <span>Sed fermentum massa quis commodo</span>             </h2>             <p>                 Vestibulum commodo aliquam condimen- tum. In a libero luctus purus ornare laoreet. Etiam libero nulla, sodales quis tempus posuere, dictum in eros. Nulla facilisi. Vivamus lacinia lacinia lacinia. Nullam vel blandit odio.             </p>         </div>         <div class="clear"></div>     </div>

Notice that we have three equal sections which means that we need to use three “grid_4″ divisions. Each division has an <h2> tag that includes an image, a title text and text included in a <span> tag and a paragraph as service description. Finally, there’s a division with “clear” class attribute to clear all floated elements. Now let’s add the CSS style for services section.

     .services h2 {         font-family: Myriad Pro;         font-size: 23px;         font-weight: normal;         line-height: 30px;         color: #0b070b;         margin: 0 0 30px 0;     }      .services h2 img {         float: left;         display: block;         width: 50px;         height: 50px;         overflow: hidden;         margin: 0 12px 0 0;     }      .services h2 span {         font-size: 14px;         line-height: 16px;     }      .services .grid_4 p {         text-align: justify;         text-indent: 38px;         margin: 0 0 56px 0;     }

We styled the header element by setting font family to Myriad Pro, font size to 23px, normal font weight, line height to 30px, font color to #0b070b and a bottom margin to 30px to make a space between the header and the paragraphs. Now we style the image inside the header or the service icon by setting float to left, a fixed height and width to match icon dimensions, overflow to hidden and a right margin of 12px for the space between image and text. Then I styled the <span> element inside the header tag to have a smaller font size and line height. Finally, I styled the paragraph and set text alignment to justify, text indent to 38px to make the first line indentation and a bottom margin of 56px to represent the space under the paragraphs. Now our layout should look like this.

Step 7 – Adding Information Content

Now let’s add the HTML content for the Information section.

     <div class="information">         <div class="container_12">             <div class="grid_4">  <h2>Donec posuere mi eget justo</h2>                 <p>                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id auctor mauris. Pellentesque at quam non massa lobortis sagittis. Donec nisl sapien, eleifend ut bibendum nec, tristique sit amet tortor.                 </p>                 <p>                     Etiam a quam metus. Fusce luctus adipiscing mauris, id varius metus feugiat quis. Sed mi nisl, euismod eget facilisis id, pulvinar tincidunt lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel faucibus ligula. Etiam                 </p>             </div>             <div class="grid_4">  <h2>Curabitur porttitor volutpat</h2>                 <p>                     Morbi rutrum, risus et iaculis feugiat, urna est mollis nulla, ut ullamcorper lacus mauris et purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mi tortor, consectetur at interdum vel, viverra eget orci. In at elementum eros.                 </p>             </div>             <div class="grid_4">  <h2>Maecenas luctus pharetra</h2>                 <div class="subscribe">                     <input type="text" />                     <input type="submit" />                 </div>                 <p>                     Curabitur adipiscing, velit nec fermentum tempus, lorem sem aliquam ligula, id dignissim metus lectus a magna.                 </p>             </div>             <div class="clear"></div>         </div>     </div>

In the information section we are using three“grid_4″ divisions the same as we used in the services section. Now each division contains a <h2> and paragraphs with the exception of the third and last divisions which includes also division with a “subscribe” class name which includes two input tags with type “text” and “submit”. Now let’s add the CSS styles for Information section.

 .information {     width: 100%;     height: 318px;     display: block;     overflow: hidden;     background: url(../images/information_footer_bg.jpg) repeat-x top center; }      .information .container_12 {         padding: 36px 0 30px 0;     }      .information .grid_4 h2 {         font-family: Myriad Pro;         font-size: 18px;         font-weight: normal;         line-height: 20px;         color: #0b070b;         margin: 0 0 30px 0;     }      .information .grid_4 p {         text-align: justify;         text-indent: 38px;     }      .information .grid_4 .subscribe {         display: block;         height: 37px;         width: 299px;         background: url(../images/subscribe.png) no-repeat top center;         overflow: hidden;         margin: 0 0 15px 0;     }          .information .grid_4 .subscribe input[type=text] {             background: transparent;             border: 0px none;             line-height: 30px;             height: 30px;             width: 210px;             margin: 5px 0 0 5px;             float: left;         }          .information .grid_4 .subscribe input[type=submit] {             background: transparent;             border: 0px none;             text-indent: -10000px;             height: 31px;             width: 60px;             float: right;             cursor: pointer;             padding: 0px;             margin: 0 11px 0 0;         }

First we style “container_12″ to have a fixed top and bottom padding, then we style h2 with Myriad Pro as font family, 18px font size, normal font weight, 20px line height, text color of #0b070b and a bottom margin to make space between h2 and paragraphs under it. Now we style the paragraphs with a justified text alignment  and first line indentation of 38px.

Finally, we move to style the subscribe text field and button. The subscribe division has a fixed height and width, a background image with no repeat which has the image for the text field and the button, overflow set to hidden and a bottom margin of 15px. Now we style the text field by using this “.information .grid_4 .subscribe input[type=text]” and set background to transparent because all text field have a white background by default, no border, a line height equal to height so that text is aligned to center vertically, a fixed width, float to left and a top and left margin. Now we style the button by using “.information .grid_4 .subscribe input[type=submit]” and set background to transparent, no border,  and a text indentation of -10000px to hide button text, a fixed height and width, a float to the right, set cursor to pointer because submit buttons has a normal pointer by default, zero padding and a right margin of 11px.

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

Full Tutorial Demo

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)