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.
look at our layout and see what’s what.
1. The layout
has a constant border on both sides, so we’ll
be able to create a single background image for the
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.
3. Single rows
will be used between the header area and the content
area for the navigation menu and large empty banner
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.
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
image seen in Lesson
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
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.
2.1 - Learn to create a Strategy
Map to plan out your work:
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.
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 ]