alexhansford + 906_grid 1
Converting Dezign Folio From PSD to HTML [Very Detailed]
february 2011 by alexhansford
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:
Dezign Folio: Create A Detailed Portfolio Homepage Design In Photoshop
960 Grid System
jQuery Scrollable
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 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:
The layout has these sections: header, slide show, services, information and a footer.
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.
Both information and footer sections have the same horizontally repeating background image.
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 -5[…]
Coding
HTML_&_CSS
Tutorials
906_Grid
html
tutorial
from google
Now, let’s get started with this tutorial.
Links you will need to complete this tutorial:
Dezign Folio: Create A Detailed Portfolio Homepage Design In Photoshop
960 Grid System
jQuery Scrollable
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 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:
The layout has these sections: header, slide show, services, information and a footer.
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.
Both information and footer sections have the same horizontally repeating background image.
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 -5[…]
february 2011 by alexhansford