Download

First you need to set up the start_page variable somewhere at the bottom of your page. Or anywhere.

</pre>
<div id="hidden_navinfo"><!-- this is necessary for ajax pagination --><span class="startpage">{CurrentPage}</span><span class="totalpages">{TotalPages}</span></div>
<pre>

This is the script that makes it go:

$(document).ready(function() {
   var totalPages = $("#hidden_navinfo .totalpages").text();
   for ( var i = 1, len = totalPages; i < len; i++) {
		var count = i+1;
		var new_posts = "";
		$.get("/page/" + count, function(data) {
		 	$("#posts").append($('.page', $(data)));
		});

	}
});

This assumes that your posts are wrapped in one div with the class of “page” and another with the id of “posts”. The extra “page” div isn’t ideal, but it prevents nesting problems. Here’s an example of the very stripped down theme code I have:

  {Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">// <![CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
	$(document).ready(function() {
   var totalPages = $("#hidden_navinfo .totalpages").text();
   for ( var i = 1, len = totalPages; i < len; i++) {
		var count = i+1;
		var new_posts = "";
		$.get("/page/" + count, function(data) {
		 	$("#posts").append($('.page', $(data)));
		});

	}
});

// ]]></script>

</pre>
<div id="content">
<h1><a href="/">{Title}</a></h1>
<h2>{Description}</h2>
<div id="posts">
<div class="page">{block:Posts}

 {block:Photo}
<div class="box"><img src="{PhotoURL-250}" alt="{PhotoAlt}" />
 {block:Tags}
 <a class="tag" href="{TagURL}">{URLSafeTag}</a>
 {/block:Tags}</div>
<!-- post -->
 {/block:Photo}

 {block:Video}
<div class="box">{Video-250}
 {block:Tags}
 <a class="tag" href="{TagURL}">{URLSafeTag}</a>
 {/block:Tags}</div>
<!-- post -->
 {/block:Video}

 {/block:Posts}</div>
<!-- page --></div>
<!-- posts -->
<div id="hidden_navinfo"><!-- this is necessary for ajax pagination -->
 <span class="startpage">{CurrentPage}</span><span class="totalpages">{TotalPages}</span></div>
</div>
<pre>

Please let me know of any ideas for improvement!

UPDATE: Sorry guys, I really don’t have the answers to any of your questions, I’m not much of a Javascript pro, and was more just doing this to see if it sparked any ideas in others. I am, however, planning to revisit this eventually when I have time to learn some more javascript. Thanks!

Many of the tutorials I came across while doing research were not necessarily wrong, but their approaches weren’t the best for teaching newcomers to the field, for one thing, many of them focused too heavily on CSS too early on in the process, which isn’t wrong, but I believe you should always focus on a solid markup structure before worrying about styling. Disagree? Let me know! Enjoy!

From PSD to HTML, Building a Set of Website Designs Step by Step by Collis Ta’eed

This is a massive, thorough tutorial over at Nettuts that I highly recomend. Collis started PSDtuts ages ago and is certainly a reputable web developer and designer, and his tutorials always follow best practices. You can trust pretty much anything he writes.

Encoding a Photoshop Mockup into XHTML & CSS by Chris Spooner

Chris Spooner is your go-to guy for all things CSS, and his tutorials never disappoint, they’re clear, and concise, but with thoughful and helpful commentary throughout, and you know that you’re learning how to do things the right way.

How to Convert a Photoshop Mockup to XHTML/CSS by Chris Spooner

Another one by Chris Spooner, this is one of the first tutorials that I ever actually completed when I was first starting out, and one of the only ones that really helped me! I kept referring back to it time and time again in early days with HTML and CSS to see if he might have already answered my questions.

Creating a CSS layout from scratch

This is a really fantastic tutorial that takes you through the process step by step, from slicing to CSS coding, and everything in between, and clearly explains concepts along the way. This one was also essential for me when I was first starting out.

How to Design and Code a Flexible Website by Myself!

And now for a bit of self-promotion, check out this tutorial I wrote over at Nettuts. I spent a good amount of time being very thorough and making sure I was teaching only best practices. This tutorial focuses on making a web page accesible and flexible to all viewers, “unbreakable” as it were. I got a lot of positive feedback on this tutorial and wound up in the “Best of Tuts Network” roundup in October.

How to Convert a PSD to XHTML by Jeffrey Way

Another authority on HTML coding (and really all things internet…) Jeffrey Way is the editor over at Nettuts, and he routinely posts screencasts that are always massively helpful, he uses the Firefox plugn Web Developer so that you can see the changes he makes to the css in real time. I’m personally not much of a screencast fan (too impatient) but if you have the patience (and the bandwidth) all his screencasts are worth watching.

Bonus: More shameless Self-promotion!

Slicing and Coding a PSD into XHTML

Check out my brand new two-part tutorial for coding a free PSD template into XHTML and CSS! Complete with lots of pictures for your viewing pleasure.

Conclusion

I hope you found some valuable resources here! What do you think? What do you look for in a good tutorial? What are your impressions on the current stock of tutorials out there?

Step 1 – Setup and Reset

Once you’ve linked to your external style sheet, we’re going to use a CSS reset, which gets rid of all the various default styles that browsers add, which can be inconsistent and cause all sorts of problems. I use a simplified version of  Eric Meyer’s CSS Reset. We can also set some basic styles for the body of the document, including background colour and font-family.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	background: #f7f4d5;
	font-family: "Trebuchet MS", Verdana, sans-serif;
}

Looks good, now we need to set the width of the document’s outer container, which is the width of our main background image, 1000px. To center it, we need to set the left and right margins to auto. Let’s add in the background image while we’re at it. To get the space between the top of the page and the background image, measure it using the ruler tool (I). It looks like about 28px.

#container {
	background: url('images/main_bg.jpg') no-repeat top;
	margin: 28px auto 0 auto;
	width: 1000px;
}

I’m specifying the margin values using css shorthand, which starts at top and goes clockwise around, so this shorthand means we have a top margin of 28px, left and right margins set to auto, and no bottom margin. We need to push the header down a bit, so on your PSD measure the distance from the top of the header image to the top of the main background image. Measure carefully and zoom in if you have to, because we need all those boxes to line up perfectly. I measured 67px.

padding-top: 67px

Step 2 – The Header

Let’s add in the header background image first, then we can figure out how to position it properly. The header image is 859px wide, and also centered, so let’s set that too.

#header {
	width: 859px;
	margin: 0 auto;
	background: url('images/header_bg.jpg') no-repeat top;
}

Now we need to position the content within the header. First, however, we need to replace the header text with image so we know how much space we’re working with. I’m using an image replacement technique where I set the image as the background, and set the text-indent property to something ridiculous like -9999px, so the original text doesn’t appear on the screen, but remains in the markup. When we replace text with images, we need to define the height and width of the image so that they expand properly.

#header h1 {
	background:url('images/logo.jpg') no-repeat;
	text-indent: -9999px;
	height: 60px;
	width: 366px;
}

Now we need to position it, measure the distance from the top of the logo to the top of the header, and the side of the logo to the side of the header, I measured 67px and 45px repsectively. We’re going to add the 67px to the top padding of the containing element, and give the h1 a left margin of 45px.

#header {
	width: 859px;
	margin: 0 auto;
	background: url('images/header_bg.jpg') no-repeat top;
	padding-top:67px;
}

#header h1 {
	background:url('images/logo.jpg') no-repeat;
	text-indent: -9999px;
	height: 60px;
	width: 366px;
	margin-left: 45px;
}

Our logo should now be nicely lined up. On to the paragraph underneath, we just need to add the same left margin of 45px, make the text smaller and a different colour, and set a width so that the line breaks happen in the right places (generally the width of the text box)

#header p {
	font-size: 13px;
	color: #6b3603;
	margin-left: 49px;
	width: 365px;
	line-height: 15px;
	padding-top: 4px;
}

I also added a line-height of 15px, and a tiny bit of padding at the top. Now all that’s left to do is add some space at the bottom of the header and we’re done. We find this value by measuring from the bottom of the paragraph to the top of the navigation bar, and add it as bottom padding on the header div.

#header {
	width: 859px;
	margin: 0 auto;
	background: url('images/header_bg.jpg') no-repeat top;
	padding: 67px 0 40px 0;
}

Notice that I used the shorthand property again instead of adding padding-bottom under the padding-top. Alright, that’s it for the header, you should have something like this:

Step 3 – Navigation

This part is a bit trickier, so pay close attention! First off, lets add the background colour to the entire containing div, as well as giving it a width and centering it (same width as the header: 859px).

#navigation {
	width: 859px;
	margin: 0 auto;
	background: #e4a805;
}

We want the navigation links to be on the left side of the bar, and we want the search form on the right, so to do this we’re going to use opposing floats, the links floating left and the form floating right.

#navigation ul {
	list-style: none;
	float: left;
}

#navigation form {
	float: right;
}

You’ll now notice that our background has gone away. This is because floating elements takes them out of the normal “flow” of the document, and so the rest of elements around them stop behaving well. To restore order, we add overflow: hidden to the parent element.

#navigation {
	width: 859px;
	margin: 0 auto;
	background: #e4a805;
	overflow: hidden;
}

Which leaves us with something like this:

Next, we need to add some space at the top and sides of the navigation bar, because the list and form aren’t aligned with the sides of the bar. Measure the distances from the top of the navigation bar to the top of the search form, from the right side of the “search” button to the right edge of the nav bar, and then repeat for the bottom and left. Add these values as padding to the navigation div, and check it in your browser. The navigation bar has now extended to the left and right! This is because block-level elements add padding, margins and borders to the width of the element, making them wider. To correct this problem, we need to subtract the left and right margin values from the width.

#navigation {
	width: 806px;
	margin: 0 auto;
	background: #e4a805;
	overflow: hidden;
	padding: 13px 25px 10px 28px;
}

So we get this:

Getting our links in a line

To get our link items to display horizontally, we need to float them like we did earlier

#navigation ul li {
	float:left;
}

This float didn’t cause us any problems because if you float an element that’s inside a floated element, all your problems go away! (for the most part). Next lets style the text, and add right margins to the list items. Measure the distance between the brown buttons in the navigation bar. The text styles have to apply to the anchor elements to change the colours and the underline, and the margins have to apply to the list items.

#navigation ul li {
	float:left;
	margin-right: 17px;
}

#navigation ul li a {
	color: #ffffd6;
	text-decoration: none;
}

And our navigation is starting to look a lot better!

Now for the tricky part: the background images. If you haven’t already, I suggest you read an article about the concept of sliding doors, either the original on A List Apart, or just Google it, there are a lot of great tutorials out there. To start, we’re going to apply the left side image to our list items and position them on the left.

#navigation ul li {
	background: url('images/nav_left.gif') no-repeat left;
	float:left;
	margin-right: 17px;
}

Next we add padding to the list items so that the background expands, so measure the distances around the text within the buttons. This part can be a bit fiddly, so just keep checkin in your browser until it looks right.

#navigation ul li {
	background: url('images/nav_left.gif') no-repeat left;
	float:left;
	margin-right: 17px;
	padding: 8px 0px 8px 20px;
}

Next, we add the right half of the button image to the anchor tags, and add padding to the anchor tags so they expand fully. Again, you may need to mess around with these values a bit. Remember to position the background image to the right

#navigation ul li {
	background: url('images/nav_left.gif') no-repeat left;
	float:left;
	margin-right: 17px;
	padding: 8px 0px 8px 20px;
}

#navigation ul li a {
	background: url('images/nav_right.gif') no-repeat right;
	color: #ffffd6;
	text-decoration: none;
	padding: 8px 20px 8px 8px;
}

And finally our navigation menu is finished!

Fixing up the search form

This part is pretty easy, we’re mostly just replacing default backgrounds with our own. Replace the input element with our searchfield image, and the submit button with our own brown search button. Input fields have borders by default, so we have to get rid of those too. Next, we need to add heights and some padding, again, this part can be tricky, especially the input field because there’s no text to measure around. We may as well do the text styling on the search button here too.

#navigation form input#searchinput {
	background: url('images/input.gif') no-repeat;
	border: none;
	height: 32px;
	padding: 0 15px;
}

#navigation form input#searchsubmit {
	background: url('images/search_button.gif') no-repeat;
	border: none;
	height: 28px;
	width: 69px;
	font-size: 16px;
	color: #ffffd6;
	cursor: pointer;
}

And that’s it! we’re done with the navigation bar! Take a look: It’s a thing of beaty.

Step 4 – Main Content

Alright, let’s get started with the main content. First off, we need to set the width and center it, and add in our background image.

#content {
	background: url('images/content_bg.jpg') no-repeat bottom;
	margin: 0 auto;
	width: 859px;
	padding-top:16px;
}

Notice that we positioned the image at the bottom so that no matter how much or little content we have, we always see the bottom border. We’ve also added some padding at the top, which is the distance from the bottom of the nav bar to the top of the pinkish background in the features modules. Next we need to work on the modules themselves. To get them to display horizontally, you guessed it, we need to float them. To prevent things from getting messy, we need to add the overflow:hidden rule to the containing element, which we called #features. The boxes won’t display beside eachother unless their combined widths are less than the width of the container, so we need to set a width for each box too.

#features {
	overflow:hidden;
}

.feature {
	background: #f7f5e2;
	float: left;
	width: 245px;
}

Next we need to space our boxes out one by one, starting with the leftmost one, #exchange. The distance from the edge of the pinkish background to the edge of the content background will be the margin value, and then measure the distances between the boxes.

#exchange {
	margin-left: 35px;
}

#remote {
	margin-left: 30px;
}

#training {
	margin-left: 23px;
}

Looks pretty good so far:

Next we need to style all the text in the boxes, including the h2 headers, which need to be replaced with images, using the same technique we used on the logo. Next, we measure the distances between all the elements in the boxes, and add padding and margin values

.feature h2 {
	text-indent: -9999px;
	height: 21px;
	width: 145px;
	margin: 27px 0 10px 13px;
}

.feature h3 {
	font-size: 13px;
	color: #444439;
	margin-left: 13px;
	padding-left: 39px;
}

.feature p {
	color: #444439;
	font-size: 13px;
	line-height: 16px;
	padding-top: 10px;
	margin-left: 13px;
}

#exchange h2 {
	background: url('images/exchange_server.jpg') no-repeat;
}

#remote h2 {
	background: url('images/remote_desktop.jpg') no-repeat;
}

#training h2 {
	background: url('images/product_training.jpg') no-repeat;
}

The reason we need so much padding on the left of the h3 elements is because we need to add in the icons beside each heading:

#exchange h3 {
	background: url('images/graph.jpg') no-repeat left;
}

#remote h3 {
	background: url('images/tool.jpg') no-repeat left;
}

#training h3 {
	background: url('images/page.jpg') no-repeat left;
}

To get all the boxes the same height, we have to add more padding to the bottom of the last box than the others, something like this:

#exchange {
	margin-left: 35px;
	padding-bottom: 31px
}

#remote {
	margin-left: 30px;
	padding-bottom: 31px;
}

#training {
	margin-left: 23px;
	padding-bottom: 47px;
}

And that’s it, we’re done with those boxes!

Second group of boxes

To get our “sidebar” and “description” boxes beside eachother, we need to float them, too, which means we need to set a width value. Find the padding and margin values the same way we did with the other boxes, and set the background colours of the sidebar

#sidebar {
	background: #f6f1ba;
	float: left;
	padding: 9px 0 18px 13px;
	margin: 18px 0 0 35px;
	width: 232px;
}

#description {
	float: left;
	margin: 18px 0 0 30px;
	width: 463px;
}

To prevent the footer from wrapping around the side, we set overflow:hidden on the parent element, which is the #content div.

#content {overflow: hidden;}

Now we just need to style the text in the boxes, including the h2 image replacements.

#sidebar h2 {
	background: url('images/sed_dolor.jpg') no-repeat;
	text-indent: -9999px;
	height: 17px;
	width: 134px;
	padding-bottom: 8px;
}

#sidebar ul {
	list-style: none;
}

#sidebar ul li {
	background: url('images/bullet.gif') no-repeat left;
	padding-left: 13px;
}

#sidebar ul li a {
	color: #444439;
	font-size: 13px;
}

#description h2 {
	background: url('images/integer_vel.jpg') no-repeat;
	text-indent: -9999px;
	width: 247px;
	height: 27px;
	padding-bottom: 12px;
}

#description p {
	font-size: 13px;
	color: #444439;
	line-height: 16px;
}

Let’s just add some padding to the bottom of the content div, and there, we’re basically done with the main content!

#content {
	background: url('images/content_bg.jpg') no-repeat bottom;
	margin: 0 auto;
	overflow: hidden;
	width: 859px;
	padding: 16px 0 35px 0;
}

Internet Explorer 6 double-margin bug

If we look at our page in IE6, some of the margins are doubled up! This is because of an IE6 bug which causes margins on floated elements to double on the side of the float, such that if you float an element to the left, the margin-left will be doubled, and the reverse for elements floated to the right. Fortuneatly, the fix for this bug is really simple, we just need to apply display:inline to the floated element!

.feature {
	background: #f7f5e2;
	float: left;
	width: 245px;
	display: inline;
}
#sidebar {
	background: #f6f1ba;
	float: left;
	padding: 9px 0 18px 13px;
	margin: 18px 0 0 35px;
	width: 232px;
	display: inline;
}

There we go, all fixed!

Step 6 – Footer

All that’s left to do is style the footer, which should be pretty simple, so see if you can figure it out yourself, here’s what we need to do:

1. Declare the width and make the footer centered
2. Change the text styles
3. Float the unordered list of navigation links to the left, and the copyright text to the right
4. Get the list items displaying in a row
5. Fix the double-margin but on the ul

Can you figure it out?

Okay, here’s the answer:

#footer {
	margin: 0 auto;
	overflow: hidden;
	padding: 18px 0 60px 0;
	width: 859px;
}

#footer ul {
	list-style: none;
	float: left;
	margin-left: 67px;
	display: inline;
}

#footer ul li {
	float: left;
	padding-right: 16px;
}

#footer ul li a {
	color: #6b3603;
	font-size: 13px;
}

#footer p {
	color: #6b3603;
	float: right;
	font-size: 13px;
	display: inline;
	margin-right: 114px;
}

And that’s it! we’re done! We’ve successfully coded up a fairly complex PSD template into valid, semantic XHTML and CSS!

Note: One generally shouldn’t size text in absolute units like pixels, because it can’t be resized in earlier versions of Internet Explorer, so you should be using ems, I just didn’t really want to get into it here, because I already mentioned it in this Nettuts tutorial. You have to scroll down a bit to around step 11

View Demo

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>&copy; 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:

Slicing and Coding a PSD into XHTML – Part Two

We’re going to be using the “Sliding Doors” technique to make our tabs flexible, if you’ve never heard of the technique, check out the Douglas Bowman’s original article Sliding Doors of CSS over at A List Apart.

Step 1 – Photoshop

Alright, fire up Photoshop, let’s get started! Let’s start making some tabs: I’m not going to go through the step-by-step process of making the tabs in photoshop, because Collis Ta’eed describes the process in This tutorial over at PSDTuts (scroll down to step 34). If you’re feeling lazy, you can download the custom shape here.
To make the active tab, bring one of the tab layers to the top and change the colour.

Now we’re going to have to make a mess of things so we can slice it up properly. As you know, the sliding doors technique requires one small image from one side of the tab, and an extra-long image from the other side. We’re going to do this slightly differently, because we need our tabs to overlap.

We’re going to isolate two tabs and extend one of them to be larger than we need. Next, select the Slice Tool (C) and make one slice of the area where the two tabs overlap, and another of the remainder of the left tab, excluding the edge detail. Then just turn off the background and save for the web as transparent PNGs.

Next, we do the same thing with the active tab and one inactive tab, but this time we need the whole of the active tab, including the edge detail, and the overlap with the tab to its left. Make sure that the right slice is the same size as the smaller slice we made in the previous step. It may be easier to do both steps at once.

Next, hide the background and save the right-hand slice as a transparent PNG, then show the background, and save the left-hand slice as a JPEG.

Next we need some images of non-overlapping tabs to use for the first and last tabs in our navigation menu. We need these for both the active and inactive states. Save these all as transparent PNGs.

So we should have the following images, give them all descriptive names.

Step 2 – XHTML

Start with just a simple unordered list within a containing div.

<!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>Overlapping tabs</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<div class="container">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
</body>
</html>

Step 3 – CSS

In the css file, add a simple reset to simplify things, add a background colour to the body, and a width to the containing div. We’re also going to get rid of the list-style, and add a margin at the top so we can better see what We’re doing.

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote {
    margin:0px; padding:0px; border:0px;
}

body {background: #333333;}

.container {width: 960px; margin: 0 auto;}

ul {margin-top: 50px; list-style: none;}

Next, float the list items into a horizontal line.

ul li {float: left;}

Now we can add in our background images. It’s going to look really bad at first, but bear with me, we’ll fix it right away. Lets also add some font styling while we’re at it.

ul li {
	float: left;
	background: url(images/inactive_right.png) no-repeat right;
}

ul li a {
	background: url(images/inactive_left.png) no-repeat left;
	font-size: 20px;
	color: #716c62;
	font-family: "Lucida Grande", helvetica, sans-serif;
	text-decoration: none;
}

And we’ll have something like this:

Now, we’re going to add some padding to fix up our tabs. Lets start with the list-items. I’m going to add 12px of padding to the top and bottom, but add however much you need to get the full height of your tabs. Next, add some padding to the right. The amount should be about the width of the inactive_right image.

ul li {
	float: left;
	background: url(images/inactive_right.png) no-repeat right;
	padding: 12px 59px 12px 0;
}

Next, add the same bottom and top padding to the anchor tag items.

ul li a {
	background: url(images/inactive_left.png) no-repeat left;
	font-size: 20px;
	color: #716c62;
	font-family: "Lucida Grande", helvetica, sans-serif;
	text-decoration: none;
	padding: 12px 0 12px 0;
}

There, that looks much better:

Depending on the design of your tabs, you may want to add a bit of padding to the left and right to make things look right.

The next step is to add the alternative images to the first and last links. I’d like to be able to use the first- and last-child pseudo-classes, but our favourite 12% of web users (IE6 users) wouldn’t see them. So, lets just add classes to the first and last items in our markup.

<ul>
	<li class="first"><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Blog</a></li>
	<li class="last"><a href="#">Contact</a></li>
</ul>

And add our alternate background images. We’re also going to have to adjust the padding on the first-item tab.

ul li.first a {background:url(images/first_inactive_left.png) no-repeat left; padding-left: 50px; }

ul li.last {background: url(images/last_inactive_right.png) no-repeat right;}

Next we need to add the active states. Since we’re working with a static web page, and our links don’t go anywhere, we’re going to have our active tabs display on hover. Obviously, if you’re using this for your website, you would instead add the active styles to the active tab of each page.

ul li:hover {background:url(images/active_right.png) no-repeat right; }

ul li:hover a {background:url(images/active_left.png) no-repeat left; }

To create the effect that the active tab is above the inactive tabs, we need to add a negative margin to the left-hand image so that it overlaps the tab to its left, and then add back the same amount in padding. This part is a bit fiddly, you may have to experiment with the size of the margin. In my case, the margin is 3px wider than the 59px images that make up the right sides of the tabs.

ul li:hover a {background:url(images/active_left.png) no-repeat left; margin-left: -62px; padding-left: 62px; }

Next we just need to add the appropriate background images for the active states of the first and last tabs. We also need to get rid of the negative margin on the first tab.

ul li.last:hover {background:url(images/last_active_right.png) no-repeat right; }

ul li.first:hover a {background: url(images/first_active_left.png) no-repeat left; margin-left: 0;}

And there we have it, some overlapping, interactive tabs!