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 bit.

STEP A. Open your layout in Dreamweaver 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.

Fig 13.1 - Highlight all the empty cells in the header mini nav menu:

Fig 13.2 - Set the text parameters you want to apply to the cells:

Fig 13.3 - Here we can see the text formatting options I've selected:

Fig 13.4 - Now click on the first cell and start adding your text:

Fig 13.5 - Here we see all our menu text has been inserted into the cells:

STEP 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

Fig 13.6 - Start by clicking on the middle cell of the Ad Banner Box:

Let's create a new table inside the cell, measuring 100 Percent in width with 1 row and 1 column..

Fig 13.7 - Create a new table with the following settings:

Fig 13.8 - Here we see our new table has been created:

We 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 perfect!

Fig 13.9 - Change the table's height to 80 pixels high:

Now 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 to Top.

Fig 13.10 - Set the cell's Vertical Alignment to Top:

Now 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!

Fig 13.11 - Add your text or images:

STEP 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.

Fig 13.12 - Click on the empty middle cell of the first left content box:

Time for another table! Create a new table 180 pixels wide and we'll only need 1 row and 1 column.

Fig 13.13 - Create a new table with the following settings:

Fig 13.14 - Our new table has been created:

As 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!

Fig 13.15 - Set the table's alignment to Center:

Set 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.

Fig 13.16 - Adding the text to the content box:

Now 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.

Fig 13.17 - Select the table and hit Ctrl-C to copy it to clipboard:

Now 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.

Fig 13.18 - Click on the empty middle cell of the second left content box:

Fig 13.19 - Hit Ctrl-V to paste the table and then edit your text:

Fig 13.20 - Click inside the empty middle cell of the third left content box:

Fig 13.21 - Hit Ctrl-V to paste the table and then edit your text:

FINITO! Not exactly rocket science once you know how it's done eh?

STEP 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.

Fig 13.22 - Click inside the empty middle row of the first main content box:

Create a new table inside the cell with a width of 510 pixels with 1 row and 1 column.

Fig 13.23 - Create a new table inside the cell:

Fig 13.24 - The new table has been created:

Fig 13.25 - Set the table alignment to center:

Fig 13.26 - Add your text and images:

Fig 13.27 - Hit the last <Table> tag and copy the table to your clipboard by hitting Ctrl-C:

Fig 13.28 - Copy the table to the two other main content boxes and edit the text as needed:

STEP 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.

Fig 13.29 - Click inside the middle cell of the footer content box:

Fig 13.30 - Add your text as needed:

Last 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.

Fig 13.31 - Click inside the cell above the footer content box:

Fig 13.32 - Right click on the cell and select Table > Split Cell and split it into 2 columns:

Fig 13.33 - The cell is now split into two columns:

With 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.

Fig 13.34 - Add your text and align the text to to middle:

IT'S 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 source code.

[ Previous Lesson ] [ Next Lesson ]