Multicolumn Layouts and Web Grids:

Jorge Blanco
Webmaster

Other articles written by this author

Related Articles

+ Build your own website from scratch
+ Building a template file

Related Links

Little Boxes
W3Schools HTML
W3Schools CSS

Multicolumn Layouts and Web Grids.
By Jorge Blanco

7. The frame approach.

Frames are the last method we will be discussing in this tutorial series. There is one unique thing about frames that make them a whole different topic. Frames have the ability to completely separate a webpage into different modules, completely independent from each other. When referring to web grids, frames also have the ability to develop into very complex layouts, however, unlike other methods, their complexity is exponential, meaning that one or two levels of nesting frames may not be too tough to handle, but when talking about 4 or 5, it becomes one of the toughest sites to handle, specially when debugging dynamic scripting.

Frames are made out of two elements, the <frameset>...</frameset> tags and the <frame /> tags. The first one is used to set the properties of the frames' layout while the other is used to give the path to the file where the real data is located. Let's have a quick example on how to use frames.

The above code presents some important points; first, as you can see, the frames are first defined by the property rows, which content is the measures of each row separated by commas. The use of an asterisk(*) allows the frame to expand automatically to fill the remaining space. The other properties are set that way so that there is no border or division between frames, this helps hiding the real nature of the page and makes it look better.

Each frame requires having a data source, usually a separate webpage. They need to have a name as well, since otherwise there is no way to reference to them. When using links on one frame to affect the other you use that name in the target property. For example, in the header there is a link to the contact page that is written in this fashion: <a href="contact.html" target="body">Contact Us</a>. When the user clicks that link the body frame shows the contact page.

Finally there is a part that wasn't discussed earlier but it is very important. The <noframes>...</noframes> tags are displayed when the browser is unable to render the frames code. Since some browsers still don't support frames it is vital to include a descriptive text that helps the viewers understand that they need to upgrade their browsers in order to view that page. Above is an example on how to do so. You can have a link to a non-frame version of your site as well, though it requires you to work double.

Now let's build again the layout that we tried with the other two methods, it should prove to be as easy as any of the other ones.

That's it? Yes. Quite simple, but the coding doesn't stop there. You should now build the pages called in the frames code; header.html, left.html, body.html, right.html and footer.html. There is only one thing to be noticed here. You might have already noticed that there is a nested frameset inside the main one. This works just like a regular frame tag, but it defines three (or as many as you like) new frames. This time I used the cols property instead of the rows one because I needed columns instead of rows, but the syntax remains the same. Some extra coding was added as well, like the noresize property and the scrolling one; these are used to prevent the user from modifying the layout on the fly. It gives more control to the web publisher on how the page will be displayed.

So if it is that simple, why isn't everybody using it? The answer is simple as well, there just isn't enough support on the technological side; frames are difficult to handle and are a pain to browse though automatically, meaning that the search engine spiders and any text-only browser can never really see a framed site, if possible they browse through them independently, but usually it's not good enough to see all the content. If you add to that the fact that you have to treat each frame as a separate window when you use JavaScript and that you can't have single CSS file that affects all frames you will find out that it is very difficult to manage a framed site.

But don't be discouraged, there are still some other concepts to grasp and if you continue reading you will find out what they are.

<Previous Index Next>