Web Page Layouts
How to Design a Web Page

Divisions and CSS

The accepted way of building web pages today is with division tags and CSS (cascading style sheets).

This can be a very confusing chore if you try to do it with all the bells and whistles that CSS has to offer.

The easiest way for beginners to get started is to use fixed width and height web pages. As you get more experience and learn more about CSS, you can learn the more complicated methods of designing with CSS.

One of the advantages of designing web pages in this manner is that you can create very basic HTML code, build the site with CSS and then do a complete redesign wthout ever touching the HTML code.

Below you will find 4 designs created by arranging divisions in different ways. A simple diagram of the Divisions is shown beside it. You can get more information on using Division Tag from our HTML tutorial.

layout #5Layout #5

The first layout is very basic and uses 2 main divisions.
Get the code: Click Here

The actual structure of the page is shown in the diagram to right.Web Design Layouts

Division 1
left Column heading and navigational devices
right Column document body
Division 2
contains footer



Layout #6

Layout #6

This web page consists of 4 main divisions.Web Design Layout 2
Get the code: Click Here

Division 1
Left Column company Logo
Right Column Slogan
Division 2
1 Column for navigation
Division 3
Left Column - Body Text
Right Column - image
Division 4
1 Column - footer

See also: How to Create Web Page Headings
How to Create Equal Height Content Adjusting Columns



Layout #7

Layout #7

The web page here is constructed using 3 single column divisions. A fourth could be added for the footer.
Get the code: Click Here


See also: How to Create Web Page Headings
How to Create Equal Height Content Adjusting Columns



Layout #8

Layout #8

This web design layout is also made up of 4 main divisions.
Get the code: Click Here

Division 1
1 Column for navigation
Division 2
Left Column Logo
Right Column Slogan
Division 3
Left Column Sidebar
Center Column Body content
Right Column Sidebar
Division 4
1 Column for footer

See also: How to Create Web Page Headings
How to Create Equal Height Content Adjusting Columns



Design a Web Page With Tables

There is an outdated method of creating web pages using tables. Though not accepted by today's authorities, it is very easy for beginners to learn. For details see the tutorial and example pages.