Creating CSS Layouts: The Best Tutorials on Converting PSD to XHTML
Jul 21, 2008 by Mohsen
First of all, I should thank delicious, StumbleUpon, Dzone, Design float and other major social bookmarking websites’ users for featuring my previous posts. I received a lot of traffic after a few days after starting this blog.
In this post, I’m going to show you the most practical tutorials on coding a template using CSS and XHTML. Making a template has two steps. The first step is Designing the template components and the second step is Coding them into a valid XHTML page.
For learning designing a template from scratch in Photoshop, I suggest checking this post by dzineblog. But how to convert the designed PSD file to an XHTML document is the reason I wrote this post.
Before start reading this post, don’t forget to subscribe to our RSS feed to not miss any post!
The best Tutorials on Converting PSD to XHTML
1- CSS Template Tutorials - Setting Up - This is the part one of the complete tutorials. These series of tutorials will teach you how to design a template in Photoshop, slice it and convert it to a CSS layout.
Other Parts:
1-1- Step 2- Coding the basics
1-2- Step 3- Slicing and Coding the Header
1-3- Step 4- CSS Horizontal Navigation
1-4- Step 5- Floating the columns
1-5- Step 6- Coding the content
1-6- Step 7- Right Column Navigation
1-7- Step 8- Finishing Off
2- From PSD to CSS/HTML in Easy Steps - Part 1 - a 4 part series tutorial on how to take a PSD file and convert it into a fully CSS based html file. The part 2 is available at the moment.
2-1- From PSD to CSS/HTML in Easy Steps - Part 2
2-2- From PSD to CSS/HTML in Easy Steps - Part 3 [NEW!]
3- Site in an hour - Making Simple Work of Complex CSS Layouts: In this tutorial, you will be creating:
- A flexible layout, one which is happy to contort to the requirements of its contents and surroundings
- Decent browser support (…or support for decent browsers, at least!)
- Graceful degradation in legacy browsers
- Something that will make the bosses and marketing types happy while still allowing even access to all customers — current and potential
4- Slice and code a layout tutorial - “In this css / xhtml tutorial I’ll show you how to slice a design in Photoshop, and how to code it from scratch in CSS and xHTML.”
5- Advanced CSS Layouts: Step by Step - a step by step tutorial on Creating
a 3 column CSS layout.
6- Slice a Template and Code it Using CSS - A very well written tutorial on slicing a PSD file and converting it into a CSS layout
7- Converting Photoshop Web Template File To HTML/XHTML/CSS Web Page File Video Tutorial
“In these videos tutorial, you will learn how to convert photoshop web template file in .PSD to HTML file and Css file”
8- CSS Template Layout - part 1 of 3 - A three-part article on creating a pure CSS web page
8-1- CSS Template Layout - part 2 of 3
8-2- CSS Template Layout - part 3 of 3
9- Designing a CSS based template
“This is the start of a step-by-step based tutorial about how to create a CSS based template page. This will be a tutorial consisting of several parts: part 1 covers the creation of the navigation buttons in Photoshop CS*, the 2nd part will be the creation of the background, next on the list is the header and layout of the page and finally the implementation in CSS and XHTML.”
9-1- Designing a CSS based template - part II
9-2- Designing a CSS based template - part III
10- Creating CSS Layouts In Dreamweaver, Part 1 - 3-part video series tutorial
10-1- Creating CSS Layouts In Dreamweaver, Part 2
10-3- Creating CSS Layouts In Dreamweaver, Part 3
11- From PSD to HTML, Building a Set of Website Designs Step by Step
“Today I’m going to take you through my entire process of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It’s a massive tutorial, so if you’re going to follow through to the end, make sure you have a few hours to spare!”
12- Creating a CSS layout from scratch - This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout
13- Coding Your 1st PSD Tutorial - Learn how to code a car sales web layout into a working website
14- Breaking Out of the Box With CSS Layouts - A grate article by sitepoint on creating beautiful grid based CSS layouts
15- Page Layout from HtmlDog - a beginner guide to float and absolute positioning CSS Layouts
16- 3 Column All CSS Layout With Fluid Center and Two Columns - This tutorial teaches you how to create a 3 column layout with a fluid center and two fixed width sidebars.
17- Liquid CSS Layouts - Design Alternative to Table Based Websites - How to transform fixed table layouts to liquid CSS based layouts
18- Rock-solid CSS Layouts - This chapter is excerpted from SitePoint’s HTML Utopia: Designing Without Tables Using CSS, Second Edition, which provides a complete introduction to CSS and shows you how to build rock-solid CSS-based web sites from scratch
19- Building a page template in CSS - A quick step-by-step demonstration of how the Web Essentials template was built using CSS
20- Two column layout using CSS and divider image - This tutorial explains how to design two column CSS layout with a line dividing left column from the right going through the whole length of the page, regardless of the length of the columns. See it in action: Demo
Popularity: 21% [?]
9:38 pm on July 21st, 2008
wow…great summary. thanks for posting!
3:02 pm on July 22nd, 2008
good resource, thanks
4:16 pm on July 22nd, 2008
thanks for the tuts!!!!
2:00 am on July 23rd, 2008
good collection worth bookmarking, thx
4:40 am on July 23rd, 2008
Great !! thanks !
5:46 am on July 23rd, 2008
thanks for a very informative set of tutorials! very helpful for beginners like me. keep up the good work!
9:59 am on July 23rd, 2008
great collection of tutorials. thanks a lot
12:39 pm on July 23rd, 2008
Hey, Thanks for the great list. I was just googling for something like this last night!
1:38 pm on July 24th, 2008
Good site I \”Stumbledupon\” it today and gave it a stumble for you.. looking forward to seeing what else you have..later
10:40 am on July 25th, 2008
tutorials on how to convert PSDs to XHTML
3:51 pm on July 28th, 2008
cool list dude, keep shared!
4:18 pm on July 29th, 2008
good article.
7:44 pm on July 30th, 2008
Just to let you know Part 3 of From PSD to CSS/HTML in Easy Steps is now available
http://csshowto.com/layout/from-psd-to-css-xhtml-in-easy-steps-part-3/
thanks for featuring me!
12:50 pm on August 5th, 2008
Super list! This is a great resource. Will definitely refer to this often.
3:55 am on August 18th, 2008
wow…very interesting !
3:29 am on August 20th, 2008
I’ve been searching google for a couple of hours now, looking for such tutorials and I must say this is the best list i’ve come upon.
The new theme rocks by the way.
Keep up the nice work !