Before I slice any website up, I look it over and work out a battle plan and figure out how I’m going to build this up. When you have a really complicated layout, it’s important that you work out HOW you’re going to slice before you start. If you don’t, you get halfway through the slicing/coding job and realize you went at it completely wrong and need to restart. Since this is such a long process, you obviously want to try to do it right the first time.

So let’s look at our layout and see what’s what.

Strategy notes:

NOTE 1. The layout has a constant border on both sides, so we’ll be able to create a single background image for the entire layout.

NOTE 2. The header area will have to have 2 separate sections. One on the left for the header logo image, and one on the right for the navigation menu.

NOTE 3. Single rows will be used between the header area and the content area for the navigation menu and large empty banner spot.

NOTE 4. Content area will be two columns. Sub info in a smaller column on the left and the main content stays on the right. I’ll be able to recycle footer and head images to save space.

NOTE 5. Footer goes back to a single row.

By the way, notice I’m not using a PSD? You actually don’t need it for your slice job… In fact, using a layered image to do this will probably lead to a lot of headaches. I’m using the exact JPG image seen in Lesson 1.

So after developing my strategy, here’s how I’m visualizing the layout in my head. In Fig 2.1, I have reduced the layout image as shown in Fig 1.1 in Lesson 1 to 600 pixels wide, and I have covered each major area of the layout with a semi-transparent green square and a Box label. So, once I start coding this layout in Dreamweaver, these green Box Areas are the essential tables and cells I will have to create. Think of this as a rough roadmap, or as I like to call it, my Strategy Guide.

Fig 2.1 - Learn to create a Strategy Map to plan out your work:

Now I know what you're saying! (Or did you miss it?) "Why aren't the left and right border columns highlighted in green???" In Fig 2.1 above, I didn't create green box areas over the side borders because I will slice this layout so that once I have created my first few tables, I won't have to worry about those borders again. Initially this may be a bit confusing, but it will make a whole lot of sense once we start coding this layout up.

When I first started slicing layouts, I used to actually draw this little Strategy Map out so I could keep track of what I was doing, but after some practice, you should be able to visualize this in your head without having to draw it out. Work at your own pace and do whatever you're comfortable with. It's the end results that count, so how you get there isn't all that critical.

[ Previous Lesson ] [ Next Lesson ]