Common layout codes
Note: if you came here through a search engine looking for premade designs to use on your website, proceed to designs. This is a turorial on how to code a layout yourself.
If you're just starting out with HTML, you might wonder how to make div or table layouts. My advice is, don't try to do anything remotely complicated if you're not familiar with the basic codes and more basic codes. I know giving you premade codes and telling you to play with them may not be the right thing to do, but I'm sure that if you listened to my previous advice, you'll probably understand how each layout code works and how to change it.
In this tutorial codes are avilable for the following layout types:
- Three-column 100% wide table layout (easily changes into fixed-width)
- Two-column 100% wide table layout (easily changes into fixed-width)
- Absolutely positioned two-column div layout
- Absolutely positioned frame-like div layout
If you followed my tutorial about designing a layout now you have some pretty header image to use. Or a whole header + footer + background design. What you have to do now is to slice those parts apart and save them separately in JPEG, GIF or PNG format. BMP is not an option because it's not compressed enough! Images should be small (in memory) enough to load quickly when displayed on a web site. You'll probably have to reduce their quality to achieve this.
Header/footer images can be inserted into your website as image tags, but it's better to set them as backgrounds like described in my code samples, because first: this way you're separating the content from visual appearance; second: background images load after the content is loaded, and this is the correct order of loading - you should let your visitors read the introduction and see some content on the index page while they wait for all images to load.
Newbies like them because they're easy to generate through editors like Dreamweaver and FrontPage. Tables are in fact complex elements and should be used for tabular data, not for layouts but a lot of people still do it (even proffessional designers) so no one will blame you for doing so.
Here are two most common table layouts.
Three-column 100% wide table layout
Left and right column are fixed-width, while the width of content area adjusts to window width. Header and footer are as wide as the browser window.
Just copy the code from the textbox, add your content and adjust the colors in the stylesheet. It's not the only way it can be done, but it's one of the best because it uses CSS to define colors and width of elements.
You can easily make this a fixed-width table layout, just replace
width: 770px;. You can make the table centered by replacing
table tag (line 14) with
<table class="layout" cellspacing="0"
Two-column 100% wide table layout
If you make the same adjustments like in the above example, it can become fixed-width centered layout. If you replace the cells to set the content (lines 24-26) above the column (lines 21-23), the column will be set on the right.
That's where we end with table layouts.
Div (layer) layouts
I described the purpose of divs in my tutorial. Div layouts are more accessible than table layouts, when coded properly. I encourage you to choose divs over tables whenever you can.
Absolutely positioned two-column div layout
This is the simplest type. You determine where each layer will be set using percents or pixels, like in a coordinate system.
In this example header is positioned in top left corner, while content and column are a bit moved away from the top and left edge. Body background is repeating vertically, and header background is not repeated. Each element has its z-index which means the third coordinate, depth (x-coordinate: width, y-coordinate: height, z-coordinate: depth). Elements with higher z-index will appear closer to us, thus they will overlap elements with lower z-index.
If you replace
right this layout will become
aligned to the right.
When you absolutely position elements, their order in HTML code is insignifficant - we put the header on the very bottom of HTML, yet it appears on top like we expected. But, header will be the last element to load, so our content will be visible before header image(s) are loaded.
Absolutely positioned frame-like div layout
Small pages that don't require much space can use this frame-like layout,
where the content scrolls inside a small block. It's not using
but looks like it.
If you replace the div content with an iframe, it will become a real frame layout. By replacing the value top with bottom, you can align this layout to the bottom of the window.
That was it, in short. Going into details would take too much time, but if you want a really detailed and advanced tutorial, you should read how to code a two-column fixed-width div layout. I put a lot of effort in that tutorial, and if this all seemed a piece of cake to you, than you're ready for it.