After MANY requests, badgering, offers of undying love and devotion and finally a marriage proposal from Angelina Jolie, I have finally put together my complete guide to slicing an advanced layout properly, and how to code it in Dreamweaver! Ok, so Angelina didn’t propose to me, but I’m sure if she knew I existed she’d want to. Right?

Before I get any further, let’s go over some ground rules or points of the tutorial guide so that way we avoid any future confusion:

POINT 1. I will be slicing this layout completely by hand using Corel Photopaint version 11! Sorry guys, you know me and my love/hate relationship with Photoshop. Now having said that, you should be able to do EVERYTHING I do in this tutorial with Corel in any application that lets you mask off part of an image, then copy paste that section to a new image. As far as I know, you can even do that in MS Paint, so you don’t have many excuses.

POINT 2. I will code this tutorial in Dreamweaver MX using tables. Sorry to the hardcore xhtml validators and other programming nuts, but I’m not much of a coder. So I don’t want to hear anyone yelling about using DIVs and CSS. If you can’t code a layout into tables, you’re certainly in no position to use DIVs and CSS for a layout this complicated.

POINT 3. A HUGE thanks goes to Griffin for letting us use his layout for this tutorial. Please remember that the image is COPYRIGHT to Griffin and this tutorial is COPYRIGHT to Pixel2life Studios. You steal, you will be pursued in a legal manner.

POINT 4. You should know the basics to follow this tutorial. In Corel Photopaint, you should understand the basics of Masking and creating new objects from clipboard items. In Dreamweaver, you should know some basic creation skills and how to create tables, text, and some simple CSS embedded sheets.

POINT 5. This tutorial is advanced. I'll try to explain things as best as I can, but you have to realize that the concept is an advanced form of layout slicing and the layout itself that we are using as an example is quite complicated. Consider yourself warned!

So without further delay, let’s get at it!

Fig 1.1 - Here is the layout we will be dealing with (Click for full view):

Notice the gradient style backgrounds, multiple content boxes and the many other areas that most people run into problems coding. Now you could use Fireworks or some other tool to slice this, but here’s the big difference: When you slice with Fireworks, your content boxes are set to specific sizes and won’t stretch without messing up the rest of the site. Once we’re done slicing, the content boxes will be able to stretch all over the place without anything getting out of alignment.

[ Next Lesson ]