The basics of Website Layout

Website layout best practice

• Keep your masthead and footer the same on all your pages.
• Keep your navigation in the same place on each page.
• Navigation is usually in the masthead or on the left (under the masthead), or both depending on the amount of content you have.
• Keep blocks of text (paragraphs) small and easy to read.
• Give 5-10 pixels spacing (cellspacing) between main sections of content.
• Ensure your homepage leads logically into the different areas of your site.
• Don't make your pages too long.
• Use common sense - step into your visitor's shoes.

BoxedArt.com has the world's largest collection of original website templates + many other ready-made graphics such as logos, avatars, website buttons, etc...

• limited editions website templates
• full flash website templates
• valid CSS templates
• newsletter templates

How to control the layout on your web pages

A web browser can read a number of types of file, Portable Document Format (.pdf), Text (.txt), Macromedia Flash (.swf) etc... but the most commonly used file type is Hyper Text Markup Language, HTML (.htm, .html).

Assuming that you are building a normal site with HTML, lets look at the 3 ways you can format it.

1. Using Tables
2. Using CSS (Cascading Style Sheets)
3. Using Frames

Using tables is the safest way to ensure your site looks the same in all browsers. However if you can invest the time in setting up CSS correctly, this is a much better option, since you can control the layout and format of all elements on your webpage, on all webpages in your site, from changes in just one file.

Web designers are increasingly using CSS as standard to both format and position elements on a web page however tables are usually used in conjunction with CSS, therefore you should know how to control both.

When designing your site you need to ensure that your navigation is in a consistent place on all pages.

Flash should not be used to create the layout of your webpage, because it is usually not search-engine friendly, however using Flash files within your layout can greatly enhance the visual effectiveness of your pages.

The next few pages (follow links at bottom) show you in more detail how to control the layout on your website. Frames do have a role to play in some situations, and therefore we also show you how to use them, but my advice is to spend a few hours understanding how to use CSS. CSS will give you such good control on the layout of your pages that you will never look back.

If you are new to HTML, it would be a good idea to read the HTML tutorial before learning about CSS. Even if you are not a technical person you should try and understand HTML, as this is the presentation layer that displays your web content to your prospective customers.

HTML controls the presentation of your web pages. Even if your site uses XML, ASP, PHP, CFM or other dynamic code, it will almost certainly use HTML for presentation and layout.

  Using CSS

  Using Tables

  Using Frames