All of our
rows and columns are set, so now we just have a few
finishing touches to add, and then we can FINALLY start
adding some images and get this sucker going! I know
it seems long at this point, but I can honestly say
that if I were doing this without having to record each
step for some long winded tutorial *cough*, I would
have done all this in about 10 minutes. Once you have
practiced a few times, you should be able to slice and
code a complicated layout in about 1 hour. Just to give
you an idea, I sliced and coded the Slicingguide.com
template in about 20 minutes (Granted it took about
60 hours to write this tutorial). Anyhow, moving right
along...
STEP
A. The final step
for this phase is to set the vertical alignment for
our content. Click in the middle of the bottom row and
set the vertical alignment to Bottom
in the properties bar.
Fig
6c.1 - Setting the alignment to Bottom
for the bottom row:
Click in the
middle of the top row and set the vertical alignment
to Top
in the properties bar.
Fig
6c.2 - Setting the alignment to Top
for the top row:
Fig
6c.3 - Final Recap! Your rows should now be aligned
properly:
And
we're done! Now, remember that Strategy
Guide we created way back in Lesson
2? Well now we're going to slice up the site according
to that guide and place it all in the section labeled
as Column 2 - CONTENT
AREA in Fig
6c.3! It's the 747 pixel column we created!
We no longer have to worry about the 22 and 21 pixel
border areas because we squared them away in their own
columns that we won't have to touch again. Starting
to make sense now isn't it? :)
Fig
6c.4 - We're going to slice the site according to the
Strategy Guide
we created in
Lesson 2.
These sliced areas will all be added into the 747 pixels
wide center content row:
Hope
you're following along so far! Time to start the fun
stuff!
[
Previous Lesson ]
[ Next Lesson ]
|
