LayoutWhen trying to convey information to the largest possible audience, it is almost always wise to keep things simple. Keeping that maxim in mind, the next task to is to work on page layout. This aspect of page design is important and should not be an afterthought. Basic ConcernsNumerous people make their livings designing book covers, magazine covers, and the layout for stories in magazines. One of the primary tasks of webdesigners is to work on page layout. How should you organize the material on your page so as to present it in the best manner? If your page is long, consider providing a table of contents at the top, or at least provide a summary of what the page provides. Furthermore, layout is not a secondary concern. Too many pages on the web consist of bits and pieces merely thrown together ... a link here, a paragraph there, a banner here, here another random graphic. Or, you think you've found the perfect background graphic? Maybe you just *have* to use your favorite colors for text and links! Consider the following before doing so. You've created your page so that others can and will view it, and they'll only bother doing so if they can find what they want. For that reason, organize your material reasonably. Second, garish background graphics, while interesting to the page creator, can make pages hard to read for viewers. They are eye-candy and can distract. Maybe you can edit that graphic and just have it run down the left-hand side of the page, providing a little freshness to the page while keeping it easy on your viewers' eyes. Furthermore, be careful before you override the basic text and link colors on a page; people have gotten used to certain colors having a certain meaning on a page, so unless you have a good reason, it is best to not not change the default colors that much. General RulesUse Place related material together on a page, and if you have a lot of content, consider using multiple pages. Remember that if a page is too long, people probably won't bother reading the whole page. Who wants to have to read all the way to the bottom to find one lousy link? Use Images can be placed either to the right or left, or in the center. A template is a bare-bones, pre-made layout. Once you have decided how you want your page to look, keep that in mind and use it for most of your pages. It is useful to create a template page that has "everything but the content" provided. Then, all you have to do is "copy and paste" the content and save the new file. This makes the job of creating new pages a piece of cake. TablesTables are for tabular information, such as data from experiments, verb charts, survey results, etc. However, HTML was never meant as a page layout language, and as a result its capabilities as such are quite weak. For this reason, the use of tables to aid in layout has become common, and if done tastefully, is a suitable way to put your page together. Tables consist of rows and columns. Table cells then occupy one or more rows and columns. A common use for tables in webdesign is to provide a left-hand (or right-hand) column for a navigation menu. A straight two-column layout can simulate a newspaper, and this site uses a table to provide white space around the page text. Hence, one way to use tables to organize your page is to use a single table divided into one or more columns (and/or rows) containing the page content. Additionally, you can use tables within a page to organize information. This is naturally the case for tabular data, but it is also useful to lining up pictures and text, for example. Below are links to two examples of tables used in layout. The first is to the Hugo von Hofmannsthal Resource Center, a site I created as a class project in 1996. Each page in the site is divided into three columns: one containing the menu, one containing the shaded dividing line, and a right one containing the page content. The only graphic on the page is an 825 byte shaded .GIF file; the blue background of the left table cell is provided by way of a My final example comes from a sample Monty Python fan page I created a while back. This page also uses tables, but in a more complex fashion. A variety of table rows and columns were used, and some table cells span more than one row or column. In this way, I was able to place light-colored graphics in the corners to provide a "border" of sorts for my content. Two versions of this page are given; the first is the "normal" version; the second has borders to the table(s) so that you can see how the table is organized.
As you can see, you will usually wish to use border-less tables when using tables in layout. You can changet the background color of a table or of cells, and you can even give them background graphics. For this reason, if you have a complex page design you would like to try out, consider using tables. FramesFrames are evil. Do not use them. Having said that, I will admit that I have designed sites with frames. One was for a job; the others were for fun. Indeed, as I will demonstrate later in this chapter, frames made sense for one site I was working on. However, frames are almost always a bad choice. Furtheremore, almost anything you can do with frames can be done instead with tables. Frames have several drawbacks, one of the most important of which is that they screw up navigation; the page you are viewing is not properly displayed in the location bar of the browser. Furthermore, frames are not properly displayed by some older browsers. As a result, you need to keep a "no-frames" version of the site as well -- why do twice the work? Finally, even on many modern browsers, frames look horrible if the browser window is not set to the "correct" size. This site © copyright 1999, Steve Krause, all rights reserved. |