Tutorial PSDtoHTMLCSS75 PDF

Convert Burnstudio from PSD to HTML [Very
Detailed]
Posted in Coding, HTML & CSS, Tutorials 3 years ago Written by Ahmad Hania 19 Comments
In this article you will learn how to convert Burnstudio Personal Website 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 youve completed this tutorial youll 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, lets get started with this tutorial.
Links you will need to complete this tutorial:
Burnstudio: Create An Amazing Personal Website From Scratch Using Photoshop
960 Grid System
Slidesjs
Heres what well be creating (Click on image to view a full working demo).
You can also download this tutorials 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 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 dont 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

The 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 youll 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 body has a background image that repeats horizontally and vertically.
2. The layout has a header section which contains the logo, main menu, search box and latest
tweets.
3. The layout has a two sliders one is the content slider which could be used to display featured
items and a portfolio slider which displays portfolio items.
4. Theres a content section which contains about, what I do and client testimonials sections.
5. Finally, we have a footer section which will contain footer links, services, latest posts from the
blog, social icons and copyright text.
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">
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<span class="hiddenSpellError" pre="">BurnStudio</span> Designs
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">
<div class="container_16">
header content goes here.
</div>
</div>
<div class="slider_container">
slider content goes here.
</div>
<div class="container_12 content">
main content goes here.
</div>
<div class="portfolio">
portfolio items slider goes here.
</div>
<div class="footer">
footer content goes here.
</div>
<div class="container_16 copyrights">
copyright text goes here.
</div>
</div>
</body>
</html>
Notice that I added five divisions for the sections we mentioned above each with a unique class name
so we can style it later. The header_container has a division inside it with class container_16
which is already styled in 960.css file (which supports 16 columns) and we added this division inside it
because we want the header section to occupy the full width of the browser and container_16 is
limited to a width of 960px. This is also used in the footer division as well. The content division has an
additional class container_12 (which supports 12 columns) and in this we want the style of
container_12 to be applied to the content container.Now lets add the CSS as follows (all CSS
should be added in style.css file):
body {
color: #5d5d5d;
background: #fff url(../images/bg.jpg) repeat;
font-family: Arial;
font-size: 12px;
}
a, a:link, a:visited {
color: #f36622;
outline: none 0;
}
h2 {
font-family: Segoe UI;

font-size: 18px;
font-weight: normal;
color: #202020;
padding: 0 0 12px 0;
margin: 0 0 12px 0;
border-bottom: 3px solid #000;
}
h2 span.highlight {
color: #f36622;
}
h2 span.sub_title {
font-size: 13px;
color: #5d5d5d;
}
.header_container {
width: 100%;
height: 168px;
background: #000 url(../images/header_bg.jpg) no-repeat top center;
overflow: hidden;
}
.slider_container {
position: relative;
height: 400px;
width: 960px;
margin: 0 auto;
margin-top: 43px;
background: url(../images/slide_bg.jpg) no-repeat bottom center;
overflow: hidden;
}
.content {
margin-top: 46px;
padding: 0 0 30px 0;
}
.portfolio {
height: 286px;
width: 960px;
margin: 0 auto;
margin-top: 30px;
overflow: hidden;
position: relative;
}
.footer {
width: 100%;
height: 287px;
padding: 35px 0 0 0;
background: url(../images/footer_bg.jpg) repeat-x;
overflow: hidden;
text-shadow: 0px 1px 1px #000000;

filter: dropshadow(color=#000000, offx=0, offy=1);
.footer .container_16 {
height: 240px;
overflow: hidden;
background: url(../images/footer_seperator.jpg) repeat-x;
background-position: 0px 30px;
}
.footer .copyrights {
height: 47px;
line-height: 47px;
background: transparent;
color: #b5b5b5;
}
In the above CSS we styled the body with text color, font family and size, and a background image
repeating horizontally and vertically with a white background color. Next, I set links color to #f36622
with no outline. Then I styled h2 with font family, font size, font weight to normal, text color, a bottom
margin and padding of 12px and a bottom border. Now I added the style for header 2 highlight and
subtitle with text color and font size. Next, I styled the header_container with full-page width, a
fixed height, a centered none repeating background image with black background color and hidden
overflow. The slider_container style is set with position relative which will be useful when we go
later and add the slider script, a fixed height and width, margin set to 0 auto which will make the
division center horizontally in the page, a hidden overflow, a top margin for the space between the
slider and the header and a non-repeating background image. Next, I styled the content with top
margin to make space between the content and the slider, a bottom border and a bottom padding. The
portfolio style is set with fixed height and width, a margin set to 0 auto which will make the
division center horizontally in the page, a fixed top margin, a hidden overflow and a relative position
which will be useful when we go later and add the slider script.
Finally, the footer has a style with full-page width, a fixed height, a top padding, a horizontally
repeating background image, hidden overflow and a text shadow which is a CSS3 feature. The
container_16 inside the footer has a fixed height with hidden overflow, a horizontally repeating
background image which will act as a divider between footer headers and content with a vertical
background position of 30px. the copyrights division style is set to a fixed height and an equal value
of line height to align text vertically to center, a transparent background and a text color of #b5b5b5.
The result should be the same as the image below.
Step 4 Adding Content to Header

Now we need to add the logo, menu items, search text box and latest tweets. Heres the HTML for the
header section.
<div class="header_container">
<div class="grid_16 top_header">
<a href="#" title="Subscribe via RSS">Subscribe via RSS</a>
|
<a href="#" title="Follow Me on Twitter">Follow Me on Twitter</a>
|
<a href="#" title="My Deviantart">My Deviantart</a>
</div>
<div class="grid_10 logo">
<h1><a title="BurnStudio Designs" href="#">BurnStudio Designs</a>
</div>
<div class="grid_6 search">
<div class="search_fields">
<input type="text" value="search for something..." />
<input type="submit" value="Search" />
</div>
</div>
<div class="grid_8 main_menu">
<a href="#" title="Home" class="active">Home</a>
<a href="#" title="Services">Services</a>
<a href="#" title="Portfolio">Portfolio</a>
<a href="#" title="Blog">Blog</a>
<a href="#" title="Contact">Contact</a>
</div>
<div class="grid_8 tweets">
<span>Tweet:</span>
Nullam vitae velit erat, id posuere tellus. Suspendisse potenti.
Nullam vitae velit erat, id posuere tellus. Suspendisse potenti.
</div>
</div>
</div>
I added a division with class grid_16 top_header to hold all the links in the top header, then I added
a division with class grid_10 logo for the logo text contained inside an h1 and a link and a division
with class grid_6 search to complete the 16 columns and to hold the search text field and submit
button. Next, I added a division with class grid_8 main_menu to hold the menu items as links with
the home link having a class active. Finally, I added a division with class grid_8 tweets for the
latest tweets. Now lets add the CSS for the header content.
.header_container .top_header {
height: 41px;
text-align: right;
font-size: 11px;
line-height: 41px;
}
.header_container .top_header a {
text-decoration: none;
color: #5d5d5d;
}
.header_container .top_header a:hover {
color: #6f6f6f;
}
.header_container .logo, .header_container .search {
height: 86px;
}
.header_container .logo h1, .header_container .logo h1 a {
display: block;
width: 205px;
height: 40px;
background: url(../images/burnstudio_sprite.png) no-repeat;
background-position: 0px 0px;
text-indent: -10000px;
margin: 24px 0 0 0;
}
.header_container .search .search_fields {
background-position: 0px -80px;
width: 310px;
height: 41px;
margin: 24px 0 0 0;
float: right;
}
.header_container .search .search_fields input[type=text] {
float: left;
width: 200px;
height: 29px;
line-height: 29px;
padding: 6px 9px 6px 16px;
border: 0px none;
font-style: italic;
color: #5d5d5d;
}
.header_container .search .search_fields input[type=submit] {
float: left;
width: 80px;
height: 31px;
padding: 0px;
border: 0px none;
cursor: pointer;
margin: 5px 0 0 0;
}
.header_container .main_menu, .header_container .tweets {
height: 41px;
}
.header_container .main_menu a {
float: left;
height: 29px;
line-height: 29px;
color: #5d5d5d;
font-size: 14px;
padding: 0 11px;
margin: 5px 10px 0 0;
}
{
.header_container .main_menu a:hover, .header_container .main_menu a.active

color: #fff;
-webkit-box-shadow: 0px 1px 0px #060506;
-moz-box-shadow: 0px 1px 0px #060506;
box-shadow: 0px 1px 0px #060506;
background: #E96728; /* old browsers */

background: -moz-linear-gradient(left, #E96728 0%, #FB824A 50%, #E96728
100%); /* firefox */
background: -webkit-gradient(linear, left top, right top, colorstop(0%,#E96728), color-stop(50%,#FB824A), color-stop(100%,#E96728)); /* webkit */
filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#E96728',
endColorstr='#E96728',GradientType=1 ); /* ie */
}
.header_container .tweets {
text-align: right;
line-height: 65px;
font-family: Myriad Pro;
font-size: 13px;
}
.header_container .tweets span {
display: block;
float: left;
color: #2792c3;
font-size: 16px;
margin: 0 0 0 65px;
}
The top header division is styled with a fixed height, text alignment to right, a font family and font
size, a line height equal to height to center text vertically and a text shadow. Then I styled the top
header links both the normal and hover states with text color and no decoration. The logo and search
divisions are styled with fixed height. The logo header and link style is set with block display, a fixed
height and width, a background image for the logo which is included inside the CSS sprites image and I
use background position to show the part I want, a negative text indent of 10000px to make text hidden
when viewed in browsers and a top margin of 24px.
Next, I styled the search_fields division holding the search text box and submit button with a
background image and background position from the CSS sprites image, a fixed height and width, a top
margin, a font family and floating to right. The search text field has a left floating with fixed height
and width, a line height equal to height to center text vertically, a padding, background set to
transparent, no border, a text color and font style set to italic. The search submit button styled with
left floating, a fixed height and width, zero padding, transparent background, no border, a negative text
indent of 10000px to hide text when viewed in browser, cursor set to pointer and a top margin to
position the button correctly. The main menu and tweets division is styled with fixed height.
Now, the main menu links normal state style is set with left floating, a fixed height and an equal line
height, text color, a font family and font size, no text decoration, a left and right padding and no top or
bottom padding and a top and right margin to make space between menu items. The hover and active
state of menu items has a different text color, a box shadow and a gradient background which are both
CSS3 features.
Finally, the tweets division is styled to align text to right with a suitable line height, font family and
size. The span inside the tweets section style is set with left floating, a block display, a suitable text
color, font family and size, and a left margin to position the span correctly. 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 modified the script to make it suit our layout and now heres the HTML for the slider
content.
<div id="slides">
<div class="slides_container">
<div>
<img src="images/slide.jpg" alt="" />
<br />
<span class="description">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec</span>
gravida sem at nisi laoreet placerat.
Aliquam erat volutpat. Vivamus sagittis.
</div>
<div>
</div>
<div>

</div>
<div>
</div>
<div>
</div>
</div>
</div>
The slider_container has two divisions inside it a division with ID slides for the script to use and
a division with class slides_container which will hold all the slides that are represented by a division
with the slide content inside it, in this case an image and text contained inside a span element with class
description. Now lets add the CSS style for the slider content and script.
.slider_container .slides_container {
width: 960px;
display: none;
}
.slider_container .slides_container div {
width: 960px;
height: 400px;
display: block;
overflow: hidden;
}
.slider_container .slides_container div span.description {
color: #fff;
display: block;
width: 555px;
margin: -3px 0 0 10px;
padding: 15px 0 0 0;
overflow: hidden;
}
.slider_container .pagination {
list-style: none;
margin: 0;
padding: 0;
height: 61px;
position: absolute;
top: 339px;
right: 70px;
z-index: 100;
.slider_container .pagination li {
float: left;
height: 26px;
width: 26px;
margin: 18px 5px 0 0;
text-align: center;
}
.slider_container .pagination li a {
display: block;
line-height: 26px;
color: #5d5d5d;
font-size: 16px;
}
.slider_container .pagination .current a, .slider_container .pagination li

a:hover {
color: #fff;
background-position: 0px -50px;
}
.slider_container a.next {
position: absolute;
right: 20px;
top: 357px;
z-index: 100;
display: block;
height: 28px;
width: 28px;
background-position: -35px -50px;
}
.slider_container a.prev {
display: none;
}
The slides container has a fixed width with display set to none. Each slide division style is set with
fixed height and width, a block display and hidden overflow. The description inside each slide is set
with white text color, a fixed width, a negative top margin for correct positioning, a left margin for
spacing, a top padding and overflow content hidden.
Now, the slider pagination style which is auto generated by the JavaScript is set to be positioned
absolutely which will be absolute to the containing relatively positioned element, a top and right values
to correctly position it with a z-index value of 100 which acts as a layer value making the pagination on
top of other default elements that has a default z-index value of auto and works only on positioned
elements. The pagination list element is styled to float to left, fixed height and width and text aligned to
the center.
The style of normal state of the link inside each list element is set to display like a block, a line height
equal to list element height to center text vertically, a custom text color with no text decoration, a fixed
font size and a black text shadow. The hover and current state of the link style is set to have a white
text color with a background image and background position to show the part we want from the CSS
Sprites image.
Finally, the next and previous elements is styled which is also generated by the JavaScript. I hid the
previous link with display none, and styled the next link with a background image with a part from the
sprites image set by background position, an absolute position, a top and right values to position link
correctly, a z-index of 100, a fixed width and height and a negative text indent to hide the text in
browsers.
Now lets 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 (which will
be also used by the portfolio elements slider).
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BurnStudio Designs</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/<span class="></script>
<script type="text/<span class="></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. Heres the JavaScript.
<script type="text/javascript">
$(function () {
$('#slides').slides({
effect: 'fade',
preload: true,
generateNextPrev: true
});
});
</script>
Now our layout should look like this.
Step 6 Adding Main Content and Style

Now lets add the content for About Burnstudio, What I do? and Client Testimonials, heres the
HTML.
<div class="container_12 content">
<div class="grid_4 about">
<h2>About <span class="highlight">Burnstudios</span><br />
<span class="sub_title">Donec gravida sem at nisi</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida
sem at nisi laoreet placerat. Aliquam erat volutpat. Vivamus sagittis, erat eget
ornare rhoncus, magna leo lobortis.
</p>
<a href="#" title="Read More" class="readmore">Read More</a>
</div>
<div class="grid_4 what">
<h2>What <span class="highlight">I Do?</span><br />
<span class="sub_title">Sed vitae libero diam</span></h2>
<p>
Curabitur tristique accumsan urna quis rhoncus. Sed et nisi nec arcu
ultricies porttitor. In vehicula ligula a lectus pulvinar aliquet. Mauris vitae leo
a sapien malesuada sollicitudin.
</p>
<a href="#" title="Read More" class="readmore">Read More</a>
</div>
<div class="grid_4 testimonials">
<h2>Clients <span class="highlight">Testimonials</span><br />
<span class="sub_title">Pellentesque ut accumsan ibero diam</span>
<p>
<img src="images/image.jpg" alt="" />

Proin luctus sem ut augue luctus hendrerit. Quisque velit felis,
gravida feugiat ultrices id, gravida quis enim. Aenean at turpis.
<br />
<span>
Michael,<br />
<a href="#">www.1stwebdesigner.com</a>
</span>
</p>
</div>
<div class="clear"></div>
</div>
Notice that the content section contains three divisions with class grid_4 and another unique class
name for each division. Each division has an <h2> title with two spans inside one for the highlighted
text and one for the sub-title text, a paragraph and a read more link with the exception of the last
division which has an image and a link inside the paragraph. Then we have a division with class
clear and it is used to clear floated elements and make the parent container expand to its content.
Now lets add the CSS style for the content.
.content .about {
margin-left: 0px;
margin-right: 30px;
}
.content .what {
margin-left: 0px;
margin-right: 30px;
}
.content .testimonials {
margin-left: 0px;
margin-right: 0px;
}
.content .grid_4 p {
text-align: justify;
margin: 0 0 10px 0;
line-height: 20px;
}
.content .grid_4 p img {
float: left;
margin: 0 12px 12px 0;
}
.content .grid_4 p span {
float: right;
font-style: italic;
color: #202020;
text-align: right;
}
.content .grid_4 a.readmore {
width: 81px;
height: 24px;
display: block;

background-position: -225px 0px;
}
I started by styling the .about, .what and .testimonials classes with zero left margin and a 30px
right margin with the testimonials set to zero left and right margins. Now, I styled the paragraph inside
each grid_4 division with justified text alignment, a bottom margin and a line height of 20px. The
image inside the paragraph is styled with left floating and a right and bottom margin to make space
between image and text. The span inside the paragraph used in the testimonials text is styled to be
italic, float and text aligned to right with a custom color. Finally, the read more link is styled with a
background image from the CSS sprites image, a fixed height and width, display set to block and a
negative text indent of 10000px to hide text in browsers. Now our layout should look like this.
Step 7 Adding Portfolio Items, Style and Script

Now lets add the portfolio items. Heres the HTML.
<div class="portfolio">
<h2>
My <span class="highlight">Portfolio</span></h2>
<div id="portfolio_slides">
<div class="slides_container">
<div>
<div class="item">
<img src="images/portfolio_1.jpg" alt="" />
<br />
<span>Client: </span>Firstclient.Inc
<br />
<span>URL: </span><a href="#">www.yoursiteurl.com</a>
</div>
<div class="item">
<br />
Client: Anotherclient
<br />
</div>
<div class="item">
<br />
Client: Anotherclient2
<br />
</div>
<div class="item">
<br />
<br />
</div>
</div>
<div>
<div class="item">
<br />
<span>Client: </span>Firstclient.Inc
<br />
</div>
<div class="item">
<br />
Client: Anotherclient
<br />
</div>
<div class="item">
<br />
<br />
</div>
<div class="item">
<br />
<br />
</div>
</div>
</div>
</div>
</div>
The portfolio items slider is the similar in construction as the content slider we used earlier with a few
things changed, the ID used is portfolio_slides which must be a unique identifier so that we can use
in the JavaScript. The division that holds each slide contains four divisions with class item each with
an image some text and links. Now lets add the CSS style for the portfolio items.
.portfolio h2 {
position: absolute;
top: 0px;
left: 0px;
border: 0 none;
padding: 0;
margin: 0;
}
.portfolio .slides_container {
width: 960px;
display: none;
}
.portfolio .slides_container div {
width: 960px;
height: 286px;
display: block;
overflow: hidden;
}
.portfolio .slides_container div.item {
float: left;
width: 210px;
height: 250px;
margin: 0 15px;
margin-top: 36px;
line-height: 20px;
overflow: hidden;
}
.portfolio .slides_container div.item img {
border: 3px solid #352e2c;
margin: 0 0 20px 0;
}
.portfolio .slides_container div.item span {
color: #202020;
}
.portfolio .slides_container div.item a {
font-style: italic;
}
.portfolio a.next {
position: absolute;
right: 15px;
top: 0px;
z-index: 100;
display: block;
height: 17px;
width: 16px;
}
.portfolio a.prev {
position: absolute;
right: 50px;
top: 0px;
z-index: 100;
display: block;
height: 17px;
width: 16px;
}
Notice that the header is styled with absolute position so that we can place it any where we want in its
container which in this case a zero top and left values, zero border, zero padding and margins. the slides
container style is the same as the one in the content slider we implemented above. The division that
represents a slide is styled with a fixed height and width and hidden overflow. Now, we style each
portfolio item with floating to left, fixed height and width, left and right margins of 15px, a top margin
of 36px, a fixed line height and hidden overflow. The image inside each item has a 3px border with a
bottom margin. The span has a different color and the links is set to italic. Finally, I added the style for
the next and previous links with almost similar styles, different only in right position and background
position.
Now we need to make the slider work by adding the JavaScript, we added just after the next script we
added above for the content slider. The script block should be like this.
<script type="text/javascript">
$(function () {
$('#slides').slides({
effect: 'fade',
preload: true,
});
});
$(function () {
$('#portfolio_slides').slides({
});
});
</script>
preload: true,
Now our layout should look like this.
Step 8 Adding Footer Content and Style

Now lets add the content for the footer, heres the HTML for the footer.
<div class="grid_3 explore">
<h3>
Explore</h3>
<ul>
<li class="first-child"><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="Portfolio">Portfolio</a></li>
<li><a href="#" title="Contact">Contact</a></li>
<li><a href="#" title="Faq's">Faq's</a></li>
<li class="last-child"><a title="<span class=" href="#">Privasy

Policy">Privasy Policy</a></li>
</ul>
</div>
<div class="grid_5 services">
<h3>
My Services</h3>
<ul>
<li class="first-child">Lorem ipsum dolor sit amet</li>
<li>Integer vitae purus</li>
<li>Donec sed velit lacus</li>
<li>Sed faucibus eros</li>
<li>Nam hendrerit dui</li>
<li class="last-child">venenatis non libero</li>
</ul>
</div>
<div class="grid_5 blog">
<h3>
Latest From The Blog</h3>
<p class="first-child">
01 JLorem ipsum dolor sit amet, consectetur adipiscing.
</p>
<p>
02 Nullam eleifend malesuada ultrices.
</p>
<p class="last-child">
03 Nullam egestas turpis nec eros
</p>
</div>
<div class="grid_3 social">
<h3>
Stay Connected</h3>
<a href="#" title="Facebook">Facebook</a> <a href="#"
title="Twitter">Twitter</a>
<a href="#" title="Linkedin">Linkedin</a>
</div>
</div>
<div class="container_16 copyrights">
<div class="grid_16">
Copyright 2010-2011 <a href="http://www.1stwebdesigner.com"
title="1stwebdesigner.com">
1stwebdesigner.com</a>. All Rights Reserved.
</div>
</div>
The footer contains four divisions with class names that accumulates to 16 grid each one has an <h3>
tag. The first one has an unordered list with links, notice that the first and the last items has a unique
class name for later styling. The next one has an unordered list with first and last items having a unique
classes. The blog division has paragraphs with the first and last one having a unique classes. The last
division has the social links. Finally, the copyrights division has some copyright text with a link inside
a grid_16 division. Now lets add the CSS style for the footer content.
.footer a {
text-transform: uppercase;
}
.footer h3 {
color: #fff;
font-size: 18px;
font-weight: normal;
line-height: 22px;
}
.footer .first-child {
border-top: 0px none;
}
.footer .last-child {
border-bottom: 0px none;
}
.footer p {
font-size: 13px;
color: #b5b5b5;
height: 42px;
border-top: 1px solid #353535;
margin: 0;
}
.footer p span {
font-size: 24px;
color: #373737;
float: left;
line-height: 42px;
margin: 0 15px 0 0;
}
.footer ul {
margin: 0;
}
.footer ul li {
list-style: none;
margin: 0px;
font-size: 13px;
line-height: 25px;
border-top: 1px solid #353535;
}
.footer ul li a {
color: #b5b4b4;
display: block;
}
.footer ul li a:hover {
color: #d7d5d5;
}
.footer .services ul li {
color: #c3b7a4;
padding: 0 0 0 21px;
}
.footer .social a {
display: block;
color: #b5b5b5;
padding: 0 0 0 50px;
margin: 0 0 18px 0;
height: 30px;
line-height: 30px;
}
.footer .social a:hover {
color: #d7d5d5;
}
.footer .social a[title=Facebook] {
background: url(../images/facebook.png) no-repeat left center;
}
.footer .social a[title=Twitter] {
background: url(../images/twitter.png) no-repeat left center;
}
.footer .social a[title=Linkedin] {
background: url(../images/linkedin.png) no-repeat left center;
}
I started by styling the links with no text decoration and text transform set to uppercase. Then I styled
header 3 with white text color, font family and size, normal font weight and fixed line height. Notice
that I styled the general .first-child class with zero top border and the general .last-child with zero
bottom border, although this can be done with CSS3 but it will not work on Internet Explorer 7 or 8
versions. The paragraph is styled with font family and size, uppercase text, a custom color, a fixed
height, a top and bottom border with different colors and zero margins.
The span inside the paragraphs is has a different font family and size, different color, has no text
shadow, a floating to the left, a line height equal to paragraphs height to center the text vertically and a
right margin. Now the unordered list has zero margins, the list items is styled with no list style, zero
margins, custom font family and size, uppercase text, a fixed line height, and a top and bottom border
with different colors. The links inside list elements has different color and block display, with a hover
different hover state text color. The services list item color is changed to #c3b7a4 with a bottom
padding.
Finally, the social links is styled with block display, custom text color, a bottom padding to make space
for the background image, a bottom margin for space between links and an equal height and line height
values to center text vertically. Now, each social link is styled according to its title text with a
convenient background image as an icon.
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 thats it. In this tutorial you learned how to convert a layout from PSD to a fully working
HTML/CSS website, dont 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 is a part of
this tutorial you didnt understand, or you have a better technique, feel free to share with everyone by
commenting below.

Tutorial PSDtoHTMLCSS75 PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial PSDtoHTMLCSS75 PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Convert Burnstudio from PSD to HTML [Very

You can also download this tutorials source files here.

Step 2 Getting Your Files Ready

Step 3 Simple Starter Layout

Now, Based on these notes we create the following HTML layout.

DOCTYPE html PUBLIC "-//W3C//DTD XHTML

font-family: Segoe UI;

text-shadow: 0px 1px 1px #000000;

Step 4 Adding Content to Header

.header_container .main_menu a:hover, .header_container .main_menu a.active

background: #E96728; /* old browsers */

Step 5 Adding Slider content, Style and Javascript

Aliquam erat volutpat. Vivamus sagittis.

<img src="images/slide.jpg" alt="" />

Aliquam erat volutpat. Vivamus sagittis.

.slider_container .pagination .current a, .slider_container .pagination li

Now our layout should look like this.

Step 6 Adding Main Content and Style

<img src="images/image.jpg" alt="" />

background: url(../images/burnstudio_sprite.png) no-repeat;

Step 7 Adding Portfolio Items, Style and Script

Now our layout should look like this.

Step 8 Adding Footer Content and Style

<li class="last-child"><a title="<span class=" href="#">Privasy

Anda mungkin juga menyukai