CSS to Lay Out Your WebPages

There are a number of reasons for using CSS to design your webpages. If you are used to using tables, this may be a hard concept to grasp. But, once you see how much easier it is to use area blocks to do your layouts, you won't go back to table-based layouts ever again.

  • Saves typing redundant code
  • Focuses on Content rather than formatting
  • One stylesheet can lay out any number of pages
  • Search Engines love pages designed with CSS
  • Pages load faster, thereby saving bandwidth

How Do I Get Started?

It's very important to plan your page. Draw out your design plan on paper. This gives you a visual idea of what your page layout will look like.

Get out paper and pencil.

  1. Draw a rectangle on your paper. This represents the <body> tag on your page. Write down:
    1. background color
    2. default font-family
    3. default font-color
    4. default font-size
    5. default text-alignment
    6. top and bottom margins (if you want them)
  2. Draw another rectangle which will represent the "content box". Make it almost the same size as the body rectangle, but leaving a space on the left and right for the margins
    1. specify the margin widths (if you want the content box centered or not)
    2. background color
    3. border size and color (if you want them)
    4. width of your content box
    5. the text-alignment
  3. Draw a rectangle inside the box content rectangle at the top which is your header
    1. write down the width and height of your header (this will be the same size as your header graphic image - or you can make your graphic 20px narrower so it has a border around it)
  4. Now it's time to decide what kind of navigation menu you want. A horizontal menu is usually placed next, under the header.
    1. draw a box under the header across the page
    2. divide it into the number of menu items
    3. write in the names of the menu items
  5. Do you want a single column, two column, three column or some other layout design? Draw the rectangles below your header, side by side (if more than one column). Write these dimensions inside your rectangles
    1. width of your main column (if using more than one column)
    2. width of the other column(s)
  6. A vertical menu is placed either in the left or right column. Draw a rectangle to represent the navigational menu
    1. write down the width (remember it must be narrower than the column width)
    2. the height isn't important as it will depend on how many links you have
    3. divide the rectangle into the number of links in the menu
    4. write in the names of the links
  7. Draw a rectangle at the bottom below your column(s) for your footer
    1. write down the dimensions - width and height
    2. background color
    3. color and size of the text
    4. the text alignment

Now you can move on to the templates pages

These templates are for your use to learn from, not just copy. You will have to input your own colors and formatting to make it YOUR page.

Top of Page


Menu

This Website Powered By Kiosk.ws