Home Logo
Show Full Menu
Hide Full Menu
 

Using 'correct' methods to layout your website

Created: 17/09/10 Views: 859 myFave Image

In this tutorial we will cover the 'correct' ways to script the layout of your web page.
When you begin to create your web pages, it is very easy to fall into the table habbit. Using tables to layout your web page is definitely an easy way to get the results but when it gets to putting tables inside of tables, there becomes a lot of script, and with a lot of script comes a longer loading time.

There is something that I haven't gone into yet and that is divs. The div tags (<div></div>) are simply designed to divide sections of your page, these divided areas are not no visual until they have been styled which makes them great separators.
As they have no visual elements by default it makes it really easy to style separately and to keep certain pieces together.

Here is an example of a simple set-up for a page layout using <div></div> tags [coding]
  • <div name="header" style="background:#999999; height:30px">
  • This could be the web page header
  • </div>

  • <div name="mainSection" style="background:#666666; height:70px">
  • This could be the web page's main section
  • </div>

  • <div name="footer" style="background:#999999; height:25px">
  • This could be the web page footer
  • </div>

Here is an example of a simple set-up for a page layout using <div></div> tags
    This could be the web page header
    This could be the web page's main section
    This could be the web page footer

Now I know that hardly looks like a web page layout, but on a full scale and with styling it can become very snazzy, all I can suggest is to mess around with the styles and see what you come up with.

But back to the point of 'correct' layouts, using <div></div> tags is definitely more efficient, however if you prefer to set the main in a table then the difference will hardly be recognisable.
The 'correct' way is a matter of opinion, at the end of the day the web page works consistently and it meets the brief then the job is done.


next tutorial: Understanding forms

There are no comments