In this tutorial, we’re going to be taking a PSD webpage template and coding it into XHTML and CSS. Along the way, I’m going to explain how to approach the coding of a webpage, so that hopefully, after reading, you’ll be able to apply what you’ve learned to your own designs. First off, let’s grab that PSD. I’m using a free template available online because I’d like to focus on the coding here, not the design. Go ahead and grab the free template at Bevel and Emboss and open it up in photoshop.
Step 1 – Plan of attack!
We have a pretty simple layout, all the content is contained within one large container, which we’ll call #container. The header and navigation will have their own divs, and the main content section will have one large div and several smaller ones inside. The footer gets its own div too. I find it helpful to plan out your code visually, especially with more complex designs. This is my idea of what we’re doing:
Step 2 – XHTML
Setup
Open up your favourite code editor, and set up a basic xhtml document, and add in our outer divs.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Remote Server 2009</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="container">
<div id="header">
</div><!-- end header -->
<div id="navigation">
</div><!-- end navigation -->
<div id="content">
</div><!-- end content -->
<div id="footer">
</div><!-- end footer -->
</div><!--end container-->
</body>
</html>
Header
For the header, we’re only going to code in the main headline “Remote Server” and the paragraph underneath, without the leading “lorem ipsum.” This is because we’re going to replace the leading text and headline with an image, because the font used isn’t web-safe. I’m leaving out the leading text because I doubt it’s of much importance, however, if the words were essential to the meaning of the site or were keywords you’d want to show up in search engines, you should allways have them hard coded in.
<div id="header"> <h1><a href="#">Remote Server 2009</a></h1> <p>Sollicitudin a dapibus in, iaculis ut nisl. Praesent non diam at dignissim eros. Praesent ornare. </p> </div><!-- end header -->
Navigation
Next, we code up the navigation div, which contains both the navigation links and a search form. The navigation links will be coded as an unordered list, and the form (duh) as a form.
<div id="navigation"> <ul> <li><a href="#">Product Info</a></li> <li><a href="#">New Features</a></li> <li><a id="order" href="#">Order now!</a></li> </ul> <form action="post"> <input type="text" id="searchinput" /> <input type="submit" id="searchsubmit" value="search" /> </form> </div><!-- end navigation -->
We need to add the unique id of “order” to the order link, because it’s going to be a different colour.
Content
Inside the content we have the three boxes of features, which will be wrapped in individual divs with different id tags but each with the same class. The heading of each box will be an h2, and the sub-heading will be an h3. This is where having dummy content can be inconvenient, because the use of heading tags depends on the relevance of the information being displayed, however, I’m assuming the sub-headings here will be keyword-rich descriptions of each feature, therefore, they get an h3 tag.
<div id="content"> <div id="features"> <div id="exchange" class="feature"> <h2>Exchange server</h2> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing</h3> <p>Curabitur neque turpis, sollicitudin a dapibus in, iaculis ut nisl. Praesent non diam at leo luctus scelerisque non in neque. Ut eget nisl</p> </div><!-- end exchange --> <div id="remote" class="feature"> <h2>Remote Desktop</h2> <h3>Praesent non diam at leo luctus non in neque.</h3> <p>Curabitur neque turpis, sollicitudin a dapibus in, iaculis ut nisl. Praesent non diam at leo luctus scelerisque non in neque. Ut</p> </div><!-- end remote --> <div id="training" class="feature"> <h2>Product Training</h2> <h3>Praesent ornare volutpat metus at tristique. </h3> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean </p> </div><!-- end training --> </div><!-- end features --> </div><!-- end content -->
Sidebar
I’m calling the small yellow box under the feature boxes a sidebar because I don’t really know what it is with just dummy content, but it seems reasonable, like before, it gets h2 headings, and the links are wrapped in an unordered list. The section next to the sidebar I’m calling description, and it’s going to be coded like the rest of hte content areas.
</div><!-- end features --> <div id="sidebar"> <h2>Sed dolor enim</h2> <ul> <li><a href="#">Sed solicitudin</a></li> <li><a href="#">Urna et molestie</a></li> <li><a href="#">Pharetra, neque risus</a></li> </ul> </div><!-- end sidebar --> <div id="description"> <h2>Integer vel tortor quis</h2> <p>Sed sollicitudin, urna et molestie pharetra, neque risus vestibulum ligula, et pulvinar eros metus non purus. Donec consectetur, tellus et vestibulum cursus, metus risus sollicitudin tellus, vitae vehicula neque odio vitae lacus.</p> </div><!-- end description --> </div><!-- end content -->
We’re almost done! now we just need to wrap the footer links in an unordered list, and put the copyright info in a paragraph.
<div id="footer"> <ul> <li><a href="#">Homepage</a></li> <li><a href="#">Product info</a></li> <li><a href="#">New Features</a></li> <li><a href="#">Order Now</a></li> </ul> <p>© Copyright 2009, Remote server, Lorem Ipsum</p> </div><!-- end footer -->
And that’s it, we’re done the markup! If you check it out in your browser, it’s all organized logically and makes complete sense (in a lorem-ipsum kindof way) without any styling.
Step 3 – Slicing the PSD
The first thing we need is the large patterned background, so get out the slice tool (C) and slice out the whole patterned part (with content layers hidden!), try to make sure you get all of the patterned part before it fades into a solid pattern. The built-in guides should help here. Save the image as a high-ish quality JPEG.
Next we need the header background. We want to get in the top part of the navigation menu too, where it appears to fold around. To do this, drag guides out just to the edge of the navigation menu, and use these guides to slice the image. Save this image with the same settings as the last.
Okay, that’s the last of our background images, now we need the non-web-safe text images to replace our text with. Try to slice these as close as possible to make it easier to style. Save these as medium quality JPEGs.
Now for those icons – just slice ‘em up and save them as GIFs, don’t forget the bullet points in the sidebar! You may as well grab the search input box while we’re at it, we can save it as a GIF too.
We’re not quite done with the slicing yet, we still need those rounded buttons in the navigation menu. Instead of cutting out each individual button, we’re going to use a technique called “sliding doors” which Douglas Bowman describes in This article at A List Apart. For our purposes, since we’ve already got our anchors wrapped in list items, we don’t need to add span tags. Cut one of the buttons in half, stretch it out longer, and save the left and right slices as GIFs (you’ll have to rasterize the layer first). You can also grab the background of the search submit button, but turn of the text layer first.
Oops there’s one more image we should have gotten at the beginning, the background for the main content part. In case we add more content later, lets free transform it a bit bigger than we need (this also helps when IE renders text a bit bigger). Select both layers and drag them down a bit.
And those are all the images we need! Give them all meaningful names, and place them in the images folder in your site’s directory.
That’s it for today, On to part Two:
Pingback: designfloat.com
Nice tutorials, thanks for sharing
thanx for this tutor, i search every where till found here. i would try it on my exercise blog.
Pingback: Hand-picked PSD to HTML Tutorials that Teach Stuff Right! - Code à la Mode
Hi, thanks for using our free psd template and linking back to us!
Cool tutorial too!
Nice post….this tutorial is really beneficial
thanks for sharing
Exceptional site, where did you come up with the knowledge in this blog post? I’m glad I found it though, ill be checking back soon to see what other articles you have.
Pingback: Hand-picked PSD to HTML Tutorials that Teach Stuff Right! - My Blog
Good tutorial
Tessa Thornton is a first tutor of PSD to HTML in handcoded. Simply and powerful tutorials.
Wow! Very nice. Thanx for sharing it!
much thanks for the kind words!