Website Layout

Getting a good layout is essential to designing a website. Before you spend any real effort creating detailed graphics and images for your website, you have to know how it will be structured. HTML presents some serious hurdles to overcome as far as layout is concerned.

Normal Flow

Unlike traditional page layout, which places objects from left-to-right, HTML places them top-to-bottom. This is known as the normal flow of the page. At first, web designers got around this by using tables, but over time, tables became too limiting and so a new tag was created.

Div Tag

The div tag is essential to modern “tableless” web design. Using CSS and lots of divs, you can get your website to look just how you want. The basic idea is to think of a div as a box. You can place divs inside other divs, in front or behind them, or off to one side or the other. The trick is to learn CSS that will help your divs go where you want them to.

The first step is to get a design on paper that you like. Doesn’t have to be too flashy. Honestly it just has to have the basic layout. Remember the normal flow? Now you have to analyze your design with that in mind. Does the design look like it can be split into rectangles? Make a copy of your design and draw the rectangles around these sections. Now the normal flow will determine what CSS you’ll need to make those rectangles into divs for the final page.

Design Analysis

Lets use an example. Here’s a design I’ve sketched out in Google Drive’s drawing program:

Image

Now there’s a few things to consider with this design according to the normal flow. The top two rectangles (Banner and Nav Links) follow the normal flow. The banner is the first object, so it goes at the top. HTML will place the next object, the Nav Links, below it. Unless you specify a size, a div will try to fill as much space as it can. That means the new few divs need to have a width set, or else they will stretch to fit the whole screen. Because HTML naturally wants each object on its own line, the Main Content and the sidebar will not appear in the same line according to normal flow. CSS has the float option to tell objects on the same line how to act. The footer will need a different be related property called clear that helps with this as well.

Here’s the analyzed design:

Image

Notice there a couple new divs added. This will help get everything set correctly. Divs are your best friend! Unlike most HTML tags, divs make it very easy to group objects together to organize them.

Each div should be given a special name like so:

<div class="my_name"> (content) </div>

Then in your CSS, you can identify that div as

.my_name{ (CSS properties) }

The first big, red div is a container for your website. Some websites stretch to fit the whole screen, but to make life easier, most web designers use a container div to limit the page to a specific width. The width is about 1000px, which is slightly smaller than the average computer screen. This div also has the margins set to “auto”. This means the website will attempt to orient itself right in the middle of the window. (Note: this is not perfect. Like a lot of HTML, certain browsers *cough*internetexplorer*cough* do not display this correctly.)

Because the container is limited to 1000px wide, there’s no need to set the width of the Banner or Nav Link divs. They follow the normal flow and because they are inside the container, they can’t be any wider than 1000px.

The Main Content, has a width set, because it has to share space with the sidebar. It also has the float property set to the left. this means that if other objects are on the same line, the Main Content will scoot to the left to make room for them. How nice of it to do so!

Now notice the sidebar has quite a few divs. There’s a couple different orientations of objects, so we use the divs to organize each part in its own little box and then use CSS to set those boxes in the right places.

The footer uses the clear property. When an object has float, it will always try to move out of the way to let other objects into the same line. To prevent the footer from jumping in the same line with the Main Content and the sidebar, the clear option tells the footer to ignore any float properties from the divs above it and follow the normal flow. Thus, the footer is on a new line all by itself.

HTML and CSS design is very different from the traditional layout design that most people are familiar with. But once the normal flow and CSS properties become a stable part of your toolkit, you can begin to get a really solid design up in no time!

Advertisements

About cerrax

Butcher. Baker. Candlestick Maker. And world-class cheese. http://www.cerrax.com
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s