The first thing that I wanted to improve upon was the navigation bar. Instead of simply using a text link, I wanted to be able to implement a menu bar. This turns out to be a lot more complicated than you would think. It involves first designing an image to represent the different states of the buttons. i.e  mouse-over, on-click, visited, etc. In order to create an image, you need a utility like photoshop. However, since I do not own photoshop nor do I wish to buy it, I looked to freeware alternatives.


GIMP was my choice. Creating an image for a menu bar is difficult in itself. Having no prior experience in graphic design, I found myself constantly browsing through menus not knowing what they were for. With the help of online tutorials I was able to create a simple rounded menu bar. It was a solid bar with different layers of text representing the different buttons. In the end, I couldn’t figure out how to map different sections of an image to different links, so I gave up and the image became the base for my page headers.


Creating a menu bar using a repeating image is a lot easier to do, and since it is already cut into individualized sections, mapping them to the proper locations is much easier.
One thing that I found in the example websites given, was that I really liked having a dark background. I felt like it helped to make your text and images really pop out at your reader and focus their attention. I used a gray header with white text to create distinction between the foreground and background. I also removed table borders to let the text and pictures create a departmentalized feel by themselves.

http://www.blogdesignlab.com/ - navigation bar examples
http://sixrevisions.com/css/30-exceptional-css-navigation-techniques/

http://www.gimp.org/ - photoshop-like utility

http://www.lovelypages.net/ - make your text and images pop out at the reader.

http://www.aljanscholtens.nl/20091120/before-you-start-slicing/ - HTML and CSS design tips.