Page Layout

• Sections of your page - Page elements

• Page layout - Tables... everything is in Tables!

• Page length

• Pancake Pages 

• Resolution

• Learn HTML

• Elements on your web page

Sections of your page - Page elements :    

Background

Heading / Banner

Logo

Index / Menu

Links

Text

Images

Elements

E-mail input box

Page layout - Tables... everything is in Tables :    

• Rows, columns

• Basic tables

• Navigation: Top, Bottom, Left, Right

• Main Text: in the Center of the page

www.amazon.com     3 col, 2+ colors
www.yahoo.com       2 col, 2+ colors  

• Layout: Page organisation for INSTANT recognition
  
• Studies show people "expect" to find certain items in specific areas of a web page

Page length :    

• "above the fold"
  The top of your home page is the most vital part of your site

• shorter pages : 

  • more focused, on target

  • keyword specific (referencing...)

  • easier to digest

Shorter!
www.google.com 
www.michelin.com 
www.travelhub.com    

Lengthier!
www.marketingtips.com/tipsltr.html >sound
www.the-whole-truth.com  
       

Pancake Pages :    

Navigation links are visible... very little tucked away

> www.website-basics.com/olddefault.htm 
> www.bonjourlafrance.net  

Resolution :    

Stats on % of size of monitors from  www.statmarket.com

Scroll bars use up space. To avoid horizontal scrolling, table width:

The October 2001 numbers from www.TheCounter.com  which tracked 504,088,908 Website visits during that month tell us that it's nearly time to stop designing for 640x480 monitors.

During October, just 4% of the sessions tracked utilized the 640x480 screen resolution, down 50% from the same period last year. Meanwhile 800x600 ruled with a 54% share of the surfing population. 1024x768 wasn't far behind with 32%.

You can avoid this issue by designing pages by using % width. For more information on using fixed width vs. percentage-based tables for layouts see The Resolution Dilemma

575 x       www.inntopia.com/

640 x       www.the-whole-truth.com  (closer to 600)

800 x       www.cheaptickets.com  

1024 x     www.ifrance.com/cvbc 

Learn HTML :    

http://davesite.com/webstation/html
www.arachnoid.com/lutusp/html_tutor.html   www.hwg.org
www.htmlcompendium.org 
       A reference manual of all HTML tags

HTML Questions & Answers:
http://members.aol.com/htmlguru/qanda/index.html 

************

Elements on your web page :    

• Page Background (Right click mouse > page properties)

  • colour

  • image

    www.free-backgrounds.com Free Backgrounds 
    www.AAABackgrounds.com Free Backgrounds and Textures 
    Sample backgrounds
    
    

• Tables (Menu bar > Tables > insert)
  

  • make a table with cells

  • table background colour (Right click mouse > table properties)
    

    • colour

    • interior margin

    • border
      
      Manipulating Tables

      • dividing / joining cells

      • nesting (table in a table)
        
        

• Index / Menu / Links / Anchors
  

  • Font

  • Size

  • Colour

  • Align

  • Links (Link icon = "world")
    

    • link / active / visited (Right click mouse > page properties > background)

    • to another page

    • to another site

    • e-mail