Navigation Bar:
When I first started my navigation bar, I didn't want it to be over-complicated and wasn't confident enough to use the correct navigation format. Instead, I simply created a table in HTML and produced an adequate horizontal navigation bar that linked to each page.
However, after spending a lot of time watching YouTube Tutorials and reading relevant articles on navigation bars, I gained confidence and realised that it was actually quite simple and would look a lot more professional than a table. I created the navigation div id in the HTML and then in CSS I entered the correct instructions for display, font, list, hover etc. I was really pleased that I challenged myself, instead of settling with something that I wasn't happy with. I feel like I am learning more and more every time I open Dreamweaver.
This was my final navigation bar. The link will turn green to match the robots tummy and the 'o' in the logo when the user hovers over it. I also rounded the corners using a border-radius css element to make them look softer and more button like. The 'roundness' also compliments the round text.
Original Navigation Table:
New Navigation Bar with Hover effect:
In addition, when the user clicks on the robot header it will take them back to the homepage. This is a proffessional and interactive technique that the majority of websites have in case the user wants a quick exit of a page. There is also the home button that has the same function.
No comments:
Post a Comment