In part 2 of this tutorial, I will show you how to effectively slice our Photoshop website mock up into valid and standard xhtml/css. If you want to learn how we created this layout, then please read part 1 of this tutorial. This tutorial will be split into three separate sections. The first section will show you how to slice the images from the layout, the second section will be on the html code structure, and the third section will be laying down the css.

Section 1 – Image Slicing

Whenever I slice up a layout from Photoshop, I go from top to bottom. The most important thing here is to realize what needs to be its own individual image, what can be a sprite (I’ll talk more about this later), and what we can repeat with css. So to start off the first thing I notice is that the navigation here is something we can pull off purely with css, with the exception of the little arrow to declare the active page. Go ahead and take your crop tool and crop a small little square around the arrow, keeping the #202020 background underneath and save it as a .jpeg file titled something along the lines of “active”.

From here I notice that the main header area is just one massive linear gradient. Because of this we can significantly improve load time on the user by making this a 1 pixel wide slice of the header. Notice in the image to the right how I crop out the full 250 pixel tall height of the header, but keep it to a 1 pixel width. This is because I know that with css I can simply repeat this 1 slice to form the header. For the purpose of saving yourself time later on you may want to do as I did and include the stage in your slice of the gradient.

Now we can take a look at slicing the logo. There are multiple ways we can do this. But because of how close the logo is to the top of the header, I am just going to crop it out starting from the top and save it as a flat .jpg preserving the gradient underneath it. This will be very easy to line up with the css and will not look out of place at all. The tricky part here is to get the slogan to look natural underneath the logo. To do this we will need to mark with a guide exactly where our crop ended above the slogan. We will be cropping the slogan to preserve the font style on it rather than embedding it with css. Click here to see an image of the cropped slogan.

*It is important to note that you may want to flatten the canvas before cropping out the header because of the linear gradient layer properties of it. If it is not flattened then when it is cropped, the linear gradient will resize to the new cropped dimensions.

You are going to have to be very careful about how you crop the second part of slogan, which includes the monitor and the glowing background. Before you do anything, you need to add a layer mask to the glow and shadow layers. On the layer mask you will take a soft black brush and mask away the layers on the left and right edges of the section you are cropping. This will ensure that the glow looks natural and there are no visible edges to it. Once you have this done you can go ahead and crop out this section from the top of the gradient to the bottom of the stage. This will be our largest slice of the layout.

Now we can continue to cropping out our social media icons. Because of their identical dimensions, we can save the user even more load time by making these icons part of a sprite. A sprite is when you put a set of images inside one file, and use css to define which image is which. So noticing that each icon is 42 pixels wide and 43 pixels tall, I will create a new document in Photoshop with a width of 42 pixels, and a height of the combined total of the icons height which is 129 pixels tall (43 * 3). In order to preserve the transparency of the space made by the rounded edges, we are going to have to save this icon sprite as a .png file. It needs to be noted that some primitive browsers don’t support .png transparency, but given that we’re now in 2011 this shouldn’t be to big of a deal.

With the header done, the majority of the rest of the layout can be achieved with some simple css. However we still need to crop out the Signup button and the icons for the right service advertisement section. This is very simple, all we will need to do is remove the text from the button, and remove the background as we will be saving it as another transparent .png file.So simply crop it out over a transparent background and save it as “button.png” and you now have your web 2.0 button cropped. However we may want a rollover effect for the button. To achieve this, take the total size of the cropped canvas of the button, and multiply it by two. For mine, I took a 54 pixel tall canvas and made it a 108 tall canvas. This is so that we can duplicate the button as a sprite with the hover effect underneath the button. For my hover effect, I simply put a 10% opacity white overlay onto the button to make it slightly brighter than the regular state.

The last step is to crop out the two icons in the right side area. This is very easy to do, and when you do it you can just go ahead and keep the #F3F3F3 flat colored background and save the images as .jpeg’s. With these two icons cropped, our slicing is complete and we can now continue onto writing the html markup for our website.

Section 2 – XHTML

Welcome to the XHTML portion of this tutorial, here we will semantically lay down the markup for our website. To start, you are going to need to create an index.html file in the folder you are working in. Along with this you are going to want to create an assets folder, with an images and css folder inside. The images folder will contain all of our image slices that we just did in the first part of this tutorial, and the css folder will contain our style sheet.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>End 2 End | home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="End 2 End - We make websites, and we do a damn good job." />
<meta name="keywords" content="keywords will go here. Don't forget to separate keywords with a comma." />

<link type="text/css" href="assets/css/screen.css" rel="stylesheet" media="screen" />
</head>
<body>



</body>
</html>

The code above is the basic starting template for our index.html document. The head of the document is setup with the basic format needed to render as xhtml, with calling in the style sheet which we will be calling screen.css. I will not go into any detail explaining the code thus far as it is simply the skeleton of what we will be creating. From here, where I have the comment tag that says Content will go here, I will begin to develop the html structure for our website.

<a name="top" id="backtotop"></a>
<div id="nav">
    <div class="wrapper">
        <ul>
            <li class="active">home</li>
            <li>about</li>
            <li>services</li>
            <li>downloads</li>
            <li>contact</li>
        </ul>
    </div>
</div>

The code above will render our navigation. We define the area as the navigation by giving the parent level div tag an id of “nav”, and we center the links within our content area with the nested “wrapper” div tag. We then use an unordered list to render the actual links in the navigation. The home page is declared as the current page by putting the class “active” on the list item that surrounds the link. This will allow us to render the arrow underneath the home link in the css.

<div id="header">
    <div class="wrapper">
        <h1 id="logo">End 2 End</h1>
        <div id="slogan1">We make websites and we do</div>
        <div id="slogan2">A Damn Good Job</div>
        <div id="stage">
            <ul>
                <li class="twitter">Follow us on Twitter</li>
                <li class="facebook">Friend us on Facebook</li>
                <li class="linkedin">Find us on Linkedin</li>
                <li class="rss">Subscribe to our Feed</li>
            </ul>
        </div>
    </div>
</div>

Alright so this header part is a little more complicated than the navigation. This is because of the stage that we also have to fit the monitor and slogan on top of. We are going to have to pull off some css magic to get this to render correctly, and our markup here will allow us to float the monitor slogan on the right side of the header. Inside the actual stage div tag is where we will put the social media links. Now remember that the image for the stage is actually part of the header, and will be rendered header div. The stage div tag will only hold the size of the stage for purposes of keeping things organized, but will not hold the actual stage image. You will also notice that I wrapped our logo inside of an h1 tag, along with putting the actual “End 2 End” text inside of it. This is a failsafe for primitive browsers to render the site naturally without css. For example if somebody is viewing our site on their mobile phone without css, we still want them to see the “End 2 End” at the top even if our actual logo can’t be seen.

<div class="wrapper">
    
    <div id="content">
        
        <h1>Welcome to End 2 End Web Design and Development</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
        Learn more about us...</p>
        
        <p>&nbsp;</p>
        <hr />
        <p>&nbsp;</p>
        
        <h1>Subscribe to our Newsletter</h1>
        <form method="post" action="#">
            <div class="form-left">
                <p>Name*<br />
                <input type="text" size="20" id="name" name="name" /></p>
                <p>Email*<br />
                <input type="text" size="20" id="email" name="email" /></p>
                <p><img src="assets/images/captcha.jpg" width="200" height="59" alt="captcha" title="captcha" /></p>
            </div>
            <div class="form-right">
                <p>Business<br />
                <input type="text" size="20" id="business" name="business" /></p>
                <p>Email Confirmation*<br />
                <input type="text" size="20" id="email2" name="email2" /></p>
                <p>Security Code*<br />
                <input type="text" size="20" id="security" name="security" /></p>
                <p><input type="submit" value="submit" id="submit" name="submit" class="floatright" /></p>
            </div>
        </form>
        
    </div>
    
    <div id="sidebar">
        
        <div class="widget widget-1">
            <h2>Need a Website?</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
            Continue</p>
        </div> 
        
        <div class="widget widget-2">
            <h2>Need Hosting?</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
            Continue</p>
        </div> 
    </div> 
</div> 

Now I know you may be thinking that this is alot to take in at once if you havn’t seen a whole lot of html before. But trust me, if you break this all down it’s much simpler than it at first appears. To start we have the wrapper class which will ensure that our content is centered with the rest of our layout. Within the wrapper div tag we have both a content and a sidebar div tag. The content div tag contains all of the markup for the main content on the left side, and the sidebar contains the markup for the two side widgets. The introductory paragraph is extremely simple, so I won’t talk on that. The newsletter signup is a little more complex. For starters this form will not do anything, if you look the attribute action only has a # which means it’s blank. Inside of our form we have two sides, “form-left” and “form-right”. I did this in order to easily re-create the layout of the form which is in our mock up. We want there to be fields floating next to each other with text above the fields. This was the easiest way for me to pull this off.

Going onto the sidebar you will notice that I used the class “widget” for both the need a website and need hosting areas. This allows me to write only one class in the css that defines the look of the widget, as they are almost identical. I have also not included the icons as images here. This is because along with the widget class, I have added a “widget-1″ and “widget-2″ class which I can use to define the icons as a background of the h2 tags within them. This is an important note to make, you can use as many classes as you want per element.

<div class="clear"></div>
<div id="footer">
    <div class="wrapper">
        <a href="#top" id="toTop">Top</a>
        <div id="copyright">
            <h2>Copyright & Usage</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="floatright">
            <p>Valid xhtml | Valid css | Copyright End 2 End 2010</p>
        </div>
    </div>
</div>

The footer is nothing special, it starts with a parent div with an id of “footer” and the wrapper class nested inside so that we can once again have our content centered inside a 100% width background area. Inside of the wrapper we start with the to top link, which as expected when clicked will bring the user back to the top of the page. It should be noted that it is expected that this element will be positioned absolutely with css, as to not interfere with the other elements within the footer. Moving on we have a div for the copyright information, floated to the left of the actual copyright links.

Section 3 – CSS

Alright, before we do anything with a style sheet, I like to throw down some standard generic styles that I tend to use with every website that I make. These styles just make things easier with my markup. For example if I need to clear a floating element I can just throw down the “clear” class at any time.

* {margin: 0;padding: 0;}
body {background: #fff;font-size: 12px;font-family: "Arial",Verdana,Serif;color: #202020;}
/*Generic Styles*/
a {color: #1e5287;text-decoration: underline;}
a:hover {color: #202020;}
a:visited {color: #334553;}
#content p, #content ul, #content ol, #content dd, #content hr {margin-bottom:22px;clear: both;}
ul {list-style-type: none;}
hr {background-color:#d0d0d0;border:0;color:#ccc;height:1px;}
input, textarea {padding: 5px;}
input[type=submit], button, .button {width: 133px;height: 54px;padding: 0 0 8px 0;text-align: center;color: #fff;font-size: 14px;font-weight: bold;text-decoration: none;border: none;outline: none;background: url("../images/button.png") no-repeat;}
input[type=submit]:hover, button:hover, .button:hover {color: #fff;background: url("../images/button.png") no-repeat 0 -54px;cursor: pointer;}
.button {line-height: 46px;padding: 0;}
.wrapper {width: 960px;margin: 0 auto;}
.clear {clear: both;}
.floatleft {float: left;}
img.floatleft {margin: 0 10px 0 0;}
.floatright {float: right;}
img.floatright {margin: 0 0 0 10px;}
.txtleft {text-align: left;}
.txtright {text-align: right;}
.txtcenter {text-align: center;}
h1, h2, h3, h4, h5, h6 {font-weight: bold;}
h1 {font-size: 30px;}
h2 {font-size: 26px;}
h3 {font-size: 20px;}
h4 {font-size: 18px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}

Within these generic styles I do everything from defining the submit button for multiple uses to defining the sizes of the heading tags. Structuring your style sheets in this way is a very good habit to get into. It forces you to define a set of rules for the basic elements at the top of your style sheet that will help you with consistency as you develop the site. Another thing to take note of is the first line with the *. This symbol stands for all elements, so by using it in the way that I did, all elements on the page default to 0 margin and 0 padding. Lastly take a look at our wrapper class. This class is used multiple times throughout our markup, and what it does is center a 960 pixel block element for consistency.

/*Layout Styles*/
.backtotop {position: fixed;display: none;}
#nav {height: 30px;background: #202020;}
#nav li {float: left;margin: 0 20px 0 0;}
#nav li a {display: block;height: 30px;line-height: 30px;font-size: 14px;color: #626c77;text-decoration: none;}
#nav li a:hover, #nav li.active a {color: #c0c0c0;background: url("../images/active.jpg") no-repeat center bottom;}
#header {height: 330px;background: url("../images/header.jpg") repeat-x;}
#header #logo a, #header #slogan1, #header #slogan2 {text-indent: -9999px;}
#header #logo a {display: block;width: 245px;height: 103px;background: url("../images/logo.jpg") no-repeat;}
#header #slogan1 {width: 389px;height: 31px;background: url("../images/slogan-1.jpg") no-repeat;}
#header #slogan2 {position: absolute;width: 576px;height: 330px;margin: -134px 0 0 314px;;background: url("../images/slogan-2.jpg") no-repeat;}
#header #stage {height: 80px;margin: 116px 0 0 0;}
#header #stage li {float: left;margin: 20px 15px 0 0;}
#header #stage li a {display: block;width: 42px;height: 43px;text-indent: -9999px;}
#header #stage li.twitter a {background: url("../images/social-icons.png") no-repeat left 0;}
#header #stage li.facebook a {background: url("../images/social-icons.png") no-repeat left -43px;}
#header #stage li.linkedin a {background: url("../images/social-icons.png") no-repeat left -86px;}
#header #stage li.rss a {background: url("../images/social-icons.png") no-repeat left -129px;}

Starting with our navigation, you can see that we have our list items floating to the left of one another with a margin of 20 pixels in between for spacing purposes. Underneath there we define the actual link within the list item as a block level element. This is to ensure that the link takes up the full 30 pixels of height in the navigation bar so that the arrow that goes along with the active class sits on the bottom of the navigation div. Notice how I define the hover state and active class on the same line, this can be achieved by including a simple comma in between identifiers.

Within our header, you will immediately notice that I grouped our logo, and two slogan divs together to add the text-indent rule to. This is so that the actual text inside these areas do not show on the page, and we can clearly see the image backgrounds instead. However on a browser that does not read css, they will still see the website name, and the slogan on the page. The biggest thing to take note of in the header is how I absolutely positioned the slogan2 div. I calculated the total amount of pixels it was displaced from the other two divs in front of it and used those numbers to set the margin so that it lined up perfectly with the right side of our wrapper. I used the same tactic, though with relative positioning on the stage id to push it down to its proper place. Remember when an element is absolutely positioned, it has no placement effect on any other elements nested around it. It’s also noteworthy that I changed up the layout a little bit with the social icons. I decided to throw an rss icon in there to add some diversity and color, but it would not fit on the stage so I removed the text with another text-indent rule.

#content {width: 560px;float: left;margin: 25px 20px 25px 0;}
#content h1 {margin: 0 0 15px 0;color: #1e5287;}
.form-left, .form-right {width: 270px;float: left;margin: 0 5px 0 0;}
#sidebar {width: 380px;float: left;margin: 25px 0 25px 0;}
.widget {margin: 0 0 10px 0;padding: 20px 20px 70px 20px;background: #f3f3f3;border: 1px solid #d0d0d0;-moz-border-radius: 15px;border-radius: 15px;}
.widget-1 h2, .widget-2 h2 {height: 50px;line-height: 50px;margin: 0 0 10px 0;padding: 0 0 0 60px;}
.widget-1 h2 {background: url("../images/ff-icon.jpg") no-repeat left 0;}
.widget-2 h2 {background: url("../images/hosting-icon.jpg") no-repeat left 0;}

Believe it or not, the content part of our css is the easiest part to do. This is because I’m only writing the css for the homepage, if we were planning on this being a fully blown multi-page website then we would spend alot more time analyzing what elements would be used and what styles they would need. But because of the simplicity of the content section of our homepage, its only a matter or floating the sidebar with the content, and adding some style to our widget class. Oh and don’t forget about how we structured our form for the newsletter signup. We have two sections floated next to each other, form-left and form-right. Once again I can achieve this all on one line by separating the two classes with a comma and applying the same rules to them.

#footer {height: 120px;background: #202020;color: #e0e0e0;}
#footer #toTop {position: absolute;display: block;width: 42px;height: 31px;margin: -31px 0 0 918px;background: url("../images/top-button.jpg") no-repeat;text-indent: -9999px;}
#footer #copyright {width: 620px;float: left;margin: 10px 40px 0 0;}
#footer div.floatright {margin: 70px 0 0 0;}
#footer a {color: #fff;}

I gave the footer div a height of 120 pixels, and a background of #202020 to be consistent with the color of our navigation bar at the top. Now something to take note of in the footer is how I positioned the toTop button. I gave it absolute positioning, which allowed me to then subtract it’s height in the margin to bring it above the footer, and then to subtract it’s width from our 960 pixel wide content area to get it to float on the right of the wrapper class. This is a very important technique for when you want to move around elements without them affecting any other elements around them, I.E relatively positioned elements. And with that I conclude this tutorial, if you had the patience to follow along with this then you deserve to give yourself a pat on the back (or as I prefer treat yourself to a nice Steak).

Conclusion

View Demo Download

About the Author