Creating my Navigation Bar and hyperlinking it.

Today, I decided to add a CSS Style to my links, which is my navigation bar, to the other pages on my website. (The links in at the top, such as News, Reviews etc..). I used w3schools website to help me learn how to do the html coding for it to work. The effect I wanted to acheive is when the user moves the mouse over the link, the background behind it changes colour. For it to work, I made the frame background black, then coded it so when the mouse hovers over 'Home' for example, then the background behind that word changes to light blue. This gives the website a very friendly and interactive addition.

However, I would also like to have it so my buttons have backgrounds to them, like a colour gradient to them. This would make each button look more attractive to start with, as well as giving them live. (MTV have buttons which don't change colour).

In order to even comtemplate this, I first needed to create my navigation bar. Whilst learning how to make a website using youtube videos, I found a good way of creating a navigation bar, by inserting a SpryMenuBar. This customizable navigation can be created in Adobe Dreamweaver, by going to Insert, Spry, then SpryMenuBar. I chose horizontal when prompted, and then a basic navigation bar appears. This widget is very handy, and can be coded to have a background changing colour when a mouse hovers over it (this is done by going into the Spry Assests folder where your work is saved, then going to the css. folder marked menubar horizontal. There, there is some coding under 'Menubaritemhover' , where the colour can be changed, so when you hover over a button, the colour will change. ) I have coded the spry so when a mouse does hover over a button, the mouse pointer changes, indicating a hotspot/hyperlinked image.

Here is my navigation bar, with the six pages which I am going to have:

The six pages are Home, News, Reviews, Listings, Reviews, Music Player and Competitions. Each button is hyperlinked to the appropiate page, making it easier for teenagers to get around the website, additionally instantly informing them what the options the website has to offer.

In order to successfully hyperlink these buttons, you need to click on each box (in the text), then go down to the properties tab at the bottom. Then, set the target to 'Mainframe' (this appears in the drop-down when the frameset coding has been modified, so the middle frame is labeled as Mainframe'), so the change of content will appear in the middle frame. Then, go to the drop-down where it says 'link', and select which page you want the button linked to. I have set up five more empty html files, so the home button should link to the Home.html file, etc..