The first thing
that I found when I started writing small slicing tutorials
last year was that almost EVERY slicing tutorial shared
a common issue. I know I'm not dreaming, because I see
people floundering with this all the time. That particular
"thing" is how to add your text and images
to your sliced layout without it looking ridiculous.
I can always tell when someone has downloaded a template
and added their own text, because the letters are jammed
right up against borders or other similar errors are
rampant and it just ruins the whole look.
Well fear not
- I won't leave you dangling! This is the ultimate slicing
guide after all, so we might as well cover as much as
we can without getting too redundant. As you can tell,
I like the sound of my own typing, so I have to put
a cap on this at some point! So without further delay,
let's add the finishing touches to our site and call
this tutorial done.
Now before the
CSS folks go nuts on me, bear in mind that you should
be putting all your text stuff into a stylesheet to
cut down on your file size. I won't bother for this
tutorial because you can find how to use CSS stylesheets
quite easily, and it's not the focus of this tutorial.
I want to concentrate on how to pad and setup your text...
I'm just setting colors and sizes so it blends in a
A. Open your layout
and start off by selecting all the empty cells in the
main header nav menu and setting the text parameters
you want. Once you've done that, you can start typing
in the text you want, and later on you can link them
to whatever hyperlinks you want.
13.1 - Highlight all the empty cells in the header mini
13.2 - Set the text parameters you want to apply to
13.3 - Here we can see the text formatting options I've
13.4 - Now click on the first cell and start adding
13.5 - Here we see all our menu text has been inserted
into the cells:
B. Next on our
list is the Ad Banner Box Area! We'll need to create
a table in this area with a specific height to give
some lower and upper padding. Remember this box CAN'T
expand or the background won't tile properly and your
layout will hit Uglyville in a hurry! So start off by
clicking in the middle cell of the Ad Banner Box Area
13.6 - Start by clicking on the middle cell of the Ad
create a new table inside the cell, measuring 100 Percent
in width with 1 row and 1 column..
13.7 - Create a new table with the following settings:
13.8 - Here we see our new table has been created:
should expand the box a bit so that it reaches to the
top of our banner area, but with enough space at the
bottom and top to give some padding on the edges. We
don't want text rammed right up against the top of the
box. Changing the table height to 80 pixels high looks
13.9 - Change the table's height to 80 pixels high:
you can have your text aligned wherever you like, but
I tend to like things lines up at the top. Click inside
the new table and set the cell's Vertical Alignment
13.10 - Set the cell's Vertical Alignment to Top:
that we have our table the way we want it, you can now
add text or images as you require. You can use additional
tables to format your text if your banner is a bit more
complicated. Now that you've almost completed this tutorial,
you should certainly know how!
13.11 - Add your text or images:
C. With your Ad
banner Box out of the way, we can start adding some
goodies to our content boxes! Let's start with the small
content boxes on the left. Click on the empty middle
cell of the first content box.
13.12 - Click on the empty middle cell of the first
left content box:
for another table! Create a new table 180 pixels wide
and we'll only need 1 row and 1 column.
13.13 - Create a new table with the following settings:
13.14 - Our new table has been created:
you can see, our new table is jammed to the left and
not looking too hot. Before we add text, we'll center
this table by adjusting the table alignment. Once the
alignment is set to Center, you'll notice the table
fits a lot better now!
13.15 - Set the table's alignment to Center:
your text formatting options then add your text! See
how your box expands as needed AND your text is nice
and padded and not jammed right to the left and right
ends of the box.
13.16 - Adding the text to the content box:
let's copy this table to the other two content boxes
so we don't have to re-create each table again twice.
We can just copy/paste the table and edit the text or
images inside. Start by clicking the last <Table>
tag to highlight the entire table and hit Ctrl-C to
copy it to your clipboard.
13.17 - Select the table and hit Ctrl-C to copy it to
click on the empty middle cell of the next content box
and hit Ctrl-V to paste a copy of the table into that
cell. Edit the text as needed then do the same thing
for the third content box.
13.18 - Click on the empty middle cell of the second
left content box:
13.19 - Hit Ctrl-V to paste the table and then edit
13.20 - Click inside the empty middle cell of the third
left content box:
13.21 - Hit Ctrl-V to paste the table and then edit
Not exactly rocket science once you know how it's done
D. With the left
column populated with content, we now more or less repeat
the same process for the right side content tables.
We'll fly through this one seeing as it's almost identical
to STEP C.
13.22 - Click inside the empty middle row of the first
main content box:
a new table inside the cell with a width of 510 pixels
with 1 row and 1 column.
13.23 - Create a new table inside the cell:
13.24 - The new table has been created:
13.25 - Set the table alignment to center:
13.26 - Add your text and images:
13.27 - Hit the last <Table> tag and copy the
table to your clipboard by hitting Ctrl-C:
13.28 - Copy the table to the two other main content
boxes and edit the text as needed:
E. Let's finish
things up with the footer... we'll start by adding some
copyright text to the small footer content box. Click
inside the middle cell of the content box and add your
text as required.
13.29 - Click inside the middle cell of the footer content
13.30 - Add your text as needed:
up are the series of menu items that sit on top of the
small content box. We'll need to split the cell above
the content box into two columns so we can put the text
in the right place. Start off by just clicking on the
cell we want to split in half. Then you simply right
click on the cell and select Table > Split Cell and
select 2 columns.
13.31 - Click inside the cell above the footer content
13.32 - Right click on the cell and select Table >
Split Cell and split it into 2 columns:
13.33 - The cell is now split into two columns:
your cell now split into two cells, add your text to
the new right cell and set the text to center align
by clicking on the align text center button.
13.34 - Add your text and align the text to to middle:
OVER!!! Well here we are over 80 hours later and you've
reached the end of the tutorial! I hope you've enjoyed
yourself and learned something from this tutorial. Please
click on the final lesson, Lesson
14 - Final
Notes and Support for
final thoughts from me, and how you can get support
on this tutorial and to leave your comments, etc..
LIVE SAMPLE - You can see
a live sample of what our index.html page looks like
so far HERE!
Feel free to compare your work by viewing my example's
Previous Lesson ]
[ Next Lesson ]