We've already talked about the basics of separating the logic of your application from its presentation, and we've put in place the building blocks of how your code will load its components as needed. Before we talk about creating the Controller classes which will handle incoming requests and determine their output, I want to talk a bit about creating the HTML templates that will make up that output.

Fixed vs. Fluid Layouts

There are two main methods to laying out a website - fixed layouts and fluid ones. There are also methods which combine these two, but they're beyond the scope of this discussion.

In a fixed layout, the site is structured not to exceed a certain width. These sites tend to be contained within a single <div> container element, which has been set to be exactly a certain pixel width. From there, the site can be designed largely as if it were on a piece of paper. If you have an image that you know is 200x200 pixels, and you know that your site will always be shown with a width of 1000 pixels, you know that your picture will take up one-fifth of the horizontal space on the page. Because of this ability to create pixel-perfect designs up front, fixed width designs are much easier to create than fluid designs.

Fluid designs, on the other hand, have no concept of a hard site width. Instead, element widths are specified as percentages of the total horizontal screen real estate available. As a result, content can easily stretch to use all available horizontal space in the users browser, eliminating dead, unused space.

To better visualize the difference between these two layouts, I have created two very simple pages to illustrate each layout:

• Fixed Layout
• Fluid Layout

Sizing Your Wrapper

Largely because I'm new to web design in general, I'm going to use a fixed-width layout for my site. I figure it's best to start with the easy stuff before moving on to more involved techniques.

The first thing I need to do is decide what size I want my site to be. The two leading sizes are 760 pixels and 960 pixels, which roughly correspond to the 800x600 and 1024x768 screen resolutions, respectively. These numbers were decided by taking the horizontal width of the screen (800 and 1024 pixels, respectively) and shaving off a bit to accommodate things like scroll bars and other browser chrome.

Since 800x600 resolutions are pretty rare these days, most people opt to design using the larger 960 pixel option. Those with lower resolutions will see a horizontal scroll bar at the bottom of their screen when using your site. A good tip would be to use the right-most 20% of your design for less important, or non-essential information, as it is this portion of your design that would be "hidden" by default for users with an 800x600 resolution. 20% of a 960 pixel design is 192 pixels, roughly the difference between the 760 and 960 pixel options.

Creating the Wrapper

Creating the wrapper for your fixed-width layout is dead simple: just place a <div> around your content, styled with the following CSS:

#wrapper {
  width:  960px;
  margin: 0 auto;
}

This CSS breaks down as follows:

• The #wrapper identifier just says that the following styles only apply to the element called 'wrapper'. There are lots of ways we could have specified this, like using a class rather than an id, but since we're planning on wrapping everything inside this element, it makes sense to use the id since there will only be one of them.

• The width property has already been discussed at length, so we don't need to go over that again here.

• The margin property is a bit interesting. The two values given are just shorthand, which says "remove margins from the top and bottom of this element, and automatically set its left and right margins." Setting the left and right margins to margin the element the same way on both sides, effectively centering the element on the screen.

One Container, or Many?

One thing I find a bit odd about a lot of the sites I've peeked at the markup for is that they all use a single massive container to hold all of their content. I'd like to propose that we can separate this massive container into smaller ones.

Instead of this:

#container {
  width:  960px;
  margin: 0 auto;
}

<div id="container">
  <!-- stuff... -->

</div>

We could instead have this:

.frame {
  width:  960px;
  margin: 0 auto;
}

<div id="header"  class="frame"> <!--header  stuff--> </div>
<div id="content" class="frame"> <!--content stuff--> </div>
<div id="footer"  class="frame"> <!--footer  stuff--> </div>

I think it gives a little added flexibility, and modularizes your page, at little extra cost. Just a thought.

Conclusion

Hopefully this has shed a bit of light on how different layouts work, and can get you started with building your first one.