Tutorial: Spanable Content Box (Slicing & Coding) i

[Jeff]

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

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.

Spanable Content Box (Slicing & Coding) i

[hazeaccord]

Really nice job jeff! I been waiting to see how to do this. Cant wait to see the rest of this tutorial. This first part helped me out a lot even tho i do know how to code and slice. Every bit of new knowledge helps. Thanks Again!

[Murdernickle]

Good job mate, I've known how to do this but it is a hard subject to explain so awesome job doing just that!

[Jeff]

Hey guys, thanks. You are very right, it is extremely difficult to try and cram years and years of trial and error with HTML into a short 10 - 15 step tutorial. In any event, l think it's a decent ice breaker tutorial. I hope to do future renditions with much in-depth explanations, and perhaps jump from tables to css.