UPDATE: Before we start part 7 I want to correct a minor mistake of mine, mea culpa. When adding blocks of text I told you to put this between div tags but that is not semantically correct. It should be between paragraphs instead. This way everything still looks fine when the CSS stylesheet is dissabled. Doing so allows you to use top and bottom margins to adjust the vertical spacing between paragraphs. This way we also don’t need to use linebreak tags anymore.

This is part 6 of our tutorial. (Previous parts: part 1, part 2, part 3, part 4 and of course last week’s part 5). Now we will add the content part of our webpage. Next week we’ll be adding the (favorite) links under our navigation and I’ll also explain how to create a footer.

In our previous part we implemented our very first CSS code. For first time visitors here is: part 1, part 2, part 3 and part 4. In this part of the tutorial we will be implementing our navigation on the left.

Here are the previous parts of this tutorial : part 1, part 2 and part 3. Now that our color paint and pencils are tucked away, we can move on to part 4. In this chapter we will concentrate on slicing our design and determine the DIV containers.

Finally we’re off for the third part of our CSS tutorial. Lesson 1, 2 are still available on my blog for those who haven’t been following from the beginning. This will be our last design part, after this it will be “slice and dice” time and the beginning of the XHTML and CSS conversion. Here are some details of the final result:

Today I will bring you the next step of our tutorial about designing a CSS based template page. This part is about choosing the right color scheme and creating a nice background pattern for our webpage. Here is part 1 for those who missed it and want to catch up.

As you all know, my initial idea was to give you a small tutorial on how to create glassy buttons in an easy way. That’s why it might look a bit odd to you that we will think about color-schemes in the 2nd part of our tutorial. This should actually be our first step, then the creation of the buttons, the background etc.

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.

I’ve been using Photoshop CS for a while now and some of the new features are really cool. For instance the previews of the Artistic, Brush Strokes, Distort, Sketch and Stylize filters are very handy. You get a good idea of what the filter will accomplish after applying it.