Here is a few screenshots of my site from start to now:

This is when I decided to change my site:

 Above is the template for the new site, The layout is pretty much the same, just a few minor changes like the footer links and colors.

Website 

Here I will explain some parts of my site and how I achieved the look I wanted.

Header:   The header is styled the same on all pages.  It consists of a logo on the left, dummy facebook and twitter link, and my navigation.  The navigation is a an Unordered List, with the list elements floated left.  There is a border top and bottom when hovered over, and also the same border when the page is active.

Footer:  The footer is also the same on all pages.  There is a link to my blog on the left, which when hovered over changes image, this is also an external link to this blog.  The image change as done using javascript.
Code :
<a href="http://zebone29.blogspot.ie/" onmouseover="document.joelogo.src=joe2.src"             onmouseout="document.joelogo.src=joe.src" target="_blank">
   <img src="file://localhost/Users/newuser/Desktop/website/images/joe.png" name="joelogo" alt="blog link">
        </a>
Then there is a javascript file..javascript/script.js..which is the code for the image swap.


There is also a to top scroll button on the right.
Code:
<!--to top button-->
    $('a[href=#toTop]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });

});


The content of each page is different, not by much, there is some adjustments to height so each page has its own content styling.
Some other features are the table which is highlighted when hovered over.
A google map is on the contact page, this was easy to insert and is handy for future use.
The stats page is made of mostly of 2 images, representing a petrol station fuel price bilboard.

Web Programming

WEEK 11

web project

At the end of last week I decided to start my site again, I wanted it to be cleaner and more modern.  I could not use the original site I had made, I would of spent too long re-arranging the div's, so I started from scratch.  I used the 960 grid for layout and kept it very simple.  My site is now made up of 5 main div's, the main div, set to 960 px wide.  The other 4 div's are horizontal, header, footer and 2 div's in between.  The images and flash are the same as they where, so once I had the page laid out I could start adding content.

I used kuler to get a color template, I used some of the colors but as I went further I used more and more white.  I added orange, which wasn't part of the original kuler but since I had varied from the kuler this didn't matter.

Overall now I am happier with the site and having not been sure what kind of style I like best I think clean is the style I am leaning towards.  It is easy however when doing a clean site to add to much and loose the clean look, even a border the wrong color or size can loose the look.