Task 2 - Header and Footer Designs

Header & Footer - Design 1
http://slab.sunderland.ac.uk/~bf88ir/web1/
I wanted to experiment with adding photographs for the header and footer, this first design took me about 3 hours to complete. Once I had figured out the basics and which code changed which part of the site, it got a lot easier. 
















Header & Footer - Design 2
http://slab.sunderland.ac.uk/~bf88ir/web2/
I wanted to show that I could also add gradient images as a header. I used the save for web devices within Photoshop to save the file with good quality but a small file size so the website will load quicker.


















Header & Footer - Design 3
http://slab.sunderland.ac.uk/~bf88ir/web3/
Again I added a gradient image for the header and footer but I also wanted to show that I can add in a background image. However the website was a bit bigger than I expected so I had to look at the code to fix the problem. In my other experiments I had fixed the width and height.