Coding a CSS Template in Dreamweaver

This is a complete guiding to coding a template in valid XHTML and CSS using Dreamweaver. The tutorial will also teach you how to slice you psd for coding and all the steps needed to complete your website design. This is my biggest css tutorial to date. Please enjoy the tutorial and hopefully you can learn something from it. Below is a content list for the tutorial. Its best if you follow the tutorial in order without skipping steps out.

The tutorial will be using css techniques such as image replacement technique and using clearing divs. You can also pick up some good tips for structuring and coding the XHTML of your website. That includes the correct use of heading tags.

Anything missed out or could be done better? Leave a comment here if so. You can see the template used in the css tutorial below:

Preview of image

Preview of coded template

So are you ready to get started? If so go on to Part 1 – Setting up.

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.


Related CSS Tutorials

  • CSS Template Tutorials – Coding the Basics

    July 20, 2008 / 8 Comments

    The part of the tutorial will code the very basic things. It will use CSS to define the main holding div and style the text and links for the template

  • CSS Template Tutorial – Finishing Off

    September 16, 2007 / 34 Comments

    I will show you in this part how to finish the template off with a footer and just make our coding a little neater.

  • CSS Template Tutorial – Right column links

    September 16, 2007 / 3 Comments

    The tutorial is almost over and the template is almost finished. In this part I will show you how to create the simple navigation which is on the right column in the design preview.



  1. These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.

Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books