Create a Website Template

Template Diagram

The template diagram shown here proposes the use of 4 single row tables. Breaking up the table into single rows will help your pages to load faster. More Examples

The alternative is a four row table with column span settings, which will slow the loading process in most browsers. Multi row tables are also harder to maintain.

Note: When using this page building method, try to keep page size to less than 20K or 20,000 bytes. To determine the byte size of your page, right click on the page and choose Properties. For faster websites, build several smaller pages rather than one monster size. Combined byte size of images on page plus the actual byte size of the code should be less than 50k.

The top table will contain our sitename or logo and perhaps a slogan about the content of the website. Place your logo in one cell and a slogan in the other. If your logo will cover the entire width of the table, remove one of the cells.

Tip: (Keyword Optimization) - Place main keywords in the alt tag of the site logo. If possible make your slogan contain main keywords and place them in an h1 header tag.

The second table in this website design template will have 2 cells. The smaller cell is used for your main navigational device which will appear on every page. This cell should be placed on the right side of the page. This gives bots or spiders easier access to the body content of your web page.

The large cell in the second table will contain the document body. The height of the body section will be determined by the number of links in the navigational cell or by the amount of text in the body.

If the body section needs to be extended, add a fifth single row single cell table directly below the second.

The third table is an optional navigational device. It can be used for pages that require scrolling to keep a user from needing to return to the top of the page to advance. It can also be used if you want the pages in your site to be viewed in a specific order.

The table consists of one row with 3 cells. The left and right cells will contains arrow pointers. Use the alignment attribute to force each image to the far right or left in their respective cells. The middle cell is handy for banner placement. (Demonstrated Below)

SPECIAL NOTE: The use of complicated tables in website design structure can slow the performance of your pages. As you gain experience, consider changing the structure to a division oriented design. If you keep pages small and simple the use of tables will not be a factor.

The Footer

The fourth table in the template will contain the footer and possibly a bottom edge text map of the site.

The footer is also an important part of a website template. Not only does it supply information to a user, but it can also contain information for bots, like a valid physical address of your company.

Place contact information in the footer and information about the age of the page for your viewers. When someone enters your site via a page other than the homepage, the footer should provide sufficient information about where they are and how to get to the main page.

Conclusion

In conclusion, there are many different layouts which can be created using the single row table method. Choose one that suits your needs or create your own. Add the tables to a new page and begin filling them in and creating your template.

Get a second opinion. Get other people to look at your final choice of the web page templates you have built. Ask them about their first impressions. If their impressions agree with yours, start cranking out those pages.

Next Stop

Website Navigation