Common Page Layouts


There are an endless variety of possible layouts for web pages. HTML offers very limited text formatting options. To work around this, tables are used. Tables are rows and columns which can be varied in size. Each cell of a table can have different text formating. Presented here are some basic layouts using tables:

Home Index:
This is the simplest layout. It consists of a home page which contains links to many of the pages in a site. Most of these pages then link back to the home page.

Footer Links:
Many web pages today have footer links. These link directly to major pages of a site eliminating the need to return to a main page.:

Header Index:
Many sites that contain footer links also have a header on each page which identifies the site and has links to the same pages as the footer. While the footer is usually text only, the header is often an image map.

Content Column:
Instead of a header, the contents of a site can be displayed in a column.

Header Index and Content Column:
A site may employ headers and footers for major sections of the site and a content column for subdivisions of sections.

1. Navigate to one of the basic layout types from the list above.
2. Chose File > Save As.... Name the file layout.html and save as type : format.html in your website folder.
3. Open this page in a web authoring program.
4. Click (or double-click) on the table to select it and see its properties. Try varying some of these properties and adding text, images and links into different cells within the table.
5. Preview the changes in a web browser.

Layering Images

Adding text to Images

Image Manipulation | Page Layout | Audio & Video | Animation | Foreign Languages
Web Courses | links | Home

This site is maintained by Alex Chapin