Hrvatski

printer friendly version



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:

Preparation

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.

Table layouts

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.

Three-column 100% wide table layout

You can easily make this a fixed-width table layout, just replace width: 100%; with i.e. width: 770px;. You can make the table centered by replacing table tag (line 14) with <table class="layout" cellspacing="0" align="center">

Two-column 100% wide table layout

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.

Absolutely positioned two-column div layout

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 left with 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 iframe, but looks like it.

frame-like div layout

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.


Share this tutorial with your friends!





Branding & web design by Nela Dunato

Sign up NOW to get a BONUS brush set into your inbox!

You will also get notified when I add new free downloads. I won't spam you, I promise!

Facebook