home tutorials forums downloads contact-us
Tool Tip Tutorial Grunge Signature Professional Portfolio Layout Spanable Content Box (Slicing & Coding) i Fresh Tutorials:
Last Update: 2.14.2007
Online: 114 Users
Advetise on For only $50 per month! Tutorials Web Layouts Spanable Content Box (Slicing & Coding) i

Spanable Content Box (Slicing & Coding) i

Introduction to Techniques - spanable Content Box (Slicing & Coding) i

In this tutorial l will cover one technique for creating a 100% spanable content box. This is the first stage in understanding how to create an entire web template or layout that is fluid (ie spanable width/height). This will be part one of a multi-stage tutorial that l hope to continue to refine and distribute to designers looking to get into web development. This tutorial will assume you have a basic understanding of basic HTML and have a concept of design already in use. Now if you are already an accomplished slicer and coder you will want to wait until future issues of this multi-stage tutorial are made available, as this will cover the basic techniques for the new comers. There are literally 1,000's of ways to slice and code a layout. However, whichever way you choose, your main focus must be to keep the file size as low as possible, use as few images as possible to save on bandwidth, and load time.

In this tutorial we will be working with a basic content box, that l feel will work nicely for this example:

If you would like to work along with me on this tutorial using the same content box, please see the download pack for a working PSD, as well as a sliced and coded version of our final result. Otherwise create you own content box and follow along.
Download File Download Spanable Content Box (Slicing & Coding) i Source Package

Go To Page: [ 1 2 ]

Page 2 of 2

Step # 5
We're ready to code out the top portion of our content box now.

We'll be using basic HTML for this. There are really many ways that you can go about doing this, most people use Tables; as they are easy to work with and easy to lay things out with. Others will use CSS, but either way, the ideas behind the methods are the same.

<table cellpadding="0" cellspacing="0" border="0" width="100%" height="25"><tr>

<td width="13" height="25"><img src="images/top_1x1.jpg" width="13" height="25"></td>

<td width="100%" height="25"><img src="images/top_sliver.jpg" width="100%" height="25"></td>

<td width="12" height="25"><img src="images/top_1x3.jpg" width="12" height="25"></td>


Click here to see the result.
You'll notice that if you resize the window, our table will reconfigure itself to the width of the browser.

Moving on...

Step # 6
Next we'll move onto the center portion of our content box. Now this will be a similar to what we had previously did, however this portion will be spanable both width and height wise.

Like the top, this portion of our content box will contain 3 pieces. The right and left sides, and the center.

So here is how mine looks after the first slice:

Now we're going to do another slice on the center piece. We're going to make it only 1 pixel in height, because our box is designed to have a 100% spanable height.

So here's how it looks after I made this slice:

Now to code this portion, we're going to be using the nearly the same techniques as before, just with slightly modified code:

<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"><tr>

<td width="4" height="100%"><img src="images/center_1x1.jpg" width="4" height="100%"></td>

<td bgcolor="#848484" width="100%" height="100%"></td>

<td width="4" height="100%"><img src="images/center_1x3.jpg" width="4" height="100%"></td>
You'll notice l applied another trick here as well. Our central portion didn't have any graphic design to it, it was just a solid color:

That color is #848484 (easily selected by using the eye dropper tool in photoshop)
So instead of tiling an image of this background in the central cell of our table, l simply used the BGCOLOR attribute for the center of our content box. Remember the main idea is to use as few images as possible to save on load time, and bandwidth.

Result: Here's how it looks when added to the code with our top/header. Click here to see top & center pieces together.
If you resize the browser window, you will notice that our content box will fluidly resize itself to the browsers height and width size.

Step # 7
Finally we'll move onto the footer portion of our content box. For this portion we're going to use the same techniques used for the header portion, with a slight adjustment to our slicing (we'll touch on that when we get to it.).

So once again, we're going to have three main pieces, the right and left corners, and the 100% width spanable center piece.

So lets go ahead and slice out the three pieces, here's how mine looked after the slice:

Now we'll want to make one more slice to our central bottom piece. However being that we've got a diagonal grid within this piece we will not be able to use just a 1 pixel wide selection as we've used with the other portions. So you'll want to make a slice as l've done here, which is the smallest possible slice that retains our grid.
Before Slice:

After Slice:

So here are three Pisces now:
Left Side:

Center Sliver:

Right Side:

<table cellpadding="0" border="0" cellspacing="0" width="100%" height="26"><tr>

<td width="48" height="26"><img src="images/bottom_1x1.jpg" width="48" height="26"></td>

<td width="100%" height="26"><img src="images/bottom_sliver.jpg" width="100%" height="26"></td>

<td width="47" height="26"><img src="images/bottom_1x3.jpg" width="47" height="26"></td>

Result: Click here to see the result of all three portions of our content box added together.
If you resize the browser window, you will notice that our content box will fluidly resize itself to the browsers height and width size.

Step # 8
This tutorial has covered the very basics of slicing, 100% width, 100% height, as well as slicing around "patterned" backgrounds.

After practicing along with this tutorial, you should know the basics of slicing and coding. The bottom line is, that you cannot learn this stuff overnight, and you can't start on a huge complex layout and expect to just learn it by luck. The only way you will understand and grasp the concepts of slicing and coding is by starting small, and moving your way up. In the next tutorial we will cover slicing and coding a very basic layout with a header, navigation bar, sidebar and main content area. However, as you'll see the concept will be no different than what you've learned here. The trick is to break everything down into smaller "projects" and work your way through them one at a time. I hope you've learned a few tricks and tips while reading this article, and are ready to test the techniques you've learned on this tutorial out with your own content boxes. Please be sure to check back soon for the follow-up to this multi-stage tutorial on slicing a layout.

Download File Download Spanable Content Box (Slicing & Coding) i Source Package

Author: Webmaster
Discuss this tutorial on the Forums
SourceCrave - Quality Webmaster Resources SENKOURYU.NET
All Affiliates / Your Link Here
© 2007 - 2008 Duplication/Redistribution prohibited. Map
Top of Page