4-Section / 2 Column Layout
This type of design layout has one section more than a three-section page.The complete page is divided into four sections as shown in the figure.
- The top section.
- The side section.
- The middle section.
- The bottom section.
The top section
The top section, called a "header", in this layout is almost same as the top section in the three-section page. It has a logo and the name of the website.It may have a welcome message as well, but it may not have a menu.
If this section happens to contain a menu, then there are two possibilities,either it is not the main navigation menu or it is a parent menu to be followed by a child menu in the side section.
At the time when i am writing this article, hewlett-packard's website www.hp.com has a style close to this style. You can see their website for example.
The side Section
This section is a vertical section and is commonly called "navigation". It sits right below the top section and can be on any side of the page, although most people prefer the left side. This section contains the main navigational menu or the child menu of the parent menu in the top section. Some times this section is also called Side Bar.
The middle section
This section is a rectangular section and it sits adjacent to the side section and contains the main content of the webpage.
The bottom section
This section, called "footer", sits at the bottom of the page. It generally contains a copyright notice and links like sitemap, contact us, disclaimer etc.
TIP : You can use this layout if you cannot group all your pages into a few categories. Although you can still use it if you can categorize them.
Next :
Related:
3-Section / 1 Column Layout
CSS Layouts
Link to this page :
Copy and paste the following code in an html document to link to this page,