Basic Website Design Layout and Accessibility

Written By: Grant Mc

- 14 Mar 2006 -

Description: This hypothetical project walks you through planning and designing a website with HTML and CSS.

  1. Website Planning and Design
  2. Writing the Style Sheet
  3. Basic HTML

Let the programming commence

So now you have decided on what you want your website to look like lets start to program it. In the following part of this article I will do a step by step guide through creating the index or home page and style sheet for you website.

The very first and basic coding needed. First we will create the style sheet. The style sheet will be called in to every page which means you don’t have to change something on every page to change it; it is done automatically.

a 
        {
        color: #008;
        }

The a is the links in the navigation bar and any other links around the website here I have chosen only to edit the color. Many other things can be done with this but for now I am going to keep it simple with the color.

a:hover, a:active 
        {
        color: #f08;
        }

Here the a (link) has been chosen again but this time we will set the color to when the mouse moves over it, it will change this is just for a sort of different look and feel for the user to interact with your fantastic website.

body
        {
        font-size: 80%;
        color: #008;
        font-weight: ;
        font-family: sans-serif;
        background-color: Lightyellow;
        }

The body part of the css will determine the format of the body script i.e. the style, font, color, size of the writing on the website.

img 
        { 
        border: 3px;
        }

In here this is determining the effect on images I will have on my site here we have kept it simple with just the border settings but things like padding can all be set here.

div.left 
        {
        border-left: 0px black solid;
        border-right: 0px lime solid;
        border-top: 0px lime solid;
        border-bottom: 0px black solid;
        text-align: right;
        top: 108px;
        left: 10px;
        height: 100%;
        width: 250px;
        float: left;
        }

This is the left div (if you remember earlier in the project I will use divs over tables) in the actual website programming I will call I the left div to be the navigation bar. Also you will see the line saying top another saying left this is the aligning of the left div the top is how many pixels (px) it will be in from the top and left from the left this is the same in the following divs.

div.right
 {
        border-left: 1px blue solid;
        border-right: 0px black solid;
        border-top: 0px lime solid;
        border-bottom: 0px black solid;
        left: 280px;
        top: 108px;
        height: ;
        width: 600px;
        float: right;
        }

This is the right div very much like the right div but this is where our main text and photo's etc... will go. Once again you will notice the top and left line again aligning the main body to an exact position on the web page.

div.heading
 {
        background-image: url(pix/header.jpg);
        border-left: 0px black solid;
        border-right: 0px black solid;
        border-top: 0px black solid;
        border-bottom: 0px black solid;
        text-align: center;
        color: #000080;
        font-size: 170%;
        letter-spacing: 18px;
        left: 10px;
        top: 15px;
        height:80px;
        width: 100%;
        padding: 0px;
        }

In here, this is the same as the left and right dive but for the heading where my title will go, I have a line saying background image this is where the you can add in any image to form in your background this can be done in ab=ny div just like most of the other features. Once again you will notice the top and left line again aligning the heading to an exact position on the web page.

div.heading a 
        {
        color: #0000FF;
        }

In here this is a simple setting of the color of the heading div.

div.heading a:hover 
        {
        color: #0000FF;
        }

In here this is a simple setting of the color of the heading div when the mouse scrolls over it. The css should be saved as style "whatever you want.css".

Now that the css (cascading style sheets) done, let’s create the index (home) page of our website.

<< Previous

Next >>