1. CM143 Web Week 6 Links & Navigation CSS Styling & Mouseovers

2. Navigation Tips By default text links are obvious, change when hovered over and appear differently when they have been previously visited – these are useful attributes! CSS Selectors allow you to style how text links look, but never re-style links to make them unintuitive or more difficult to navigate!

3. Default Link

4. Default Visited Link

5. CSS Selector CSS allows you to style how a link looks in different states: a:link – the default state for a link a:hover – a link being hovered over by the mouse a:visited – a link previously visited a:active – a link in the process of loading Styling these states allows you to modify the aesthetic of your navigation, but should provide you with the scope to keep it intuitive

6. Mouseovers Mouseover images offer a similar visual reinforcement to hover-changing text links This feedback is crucial for good interface design by alerting users through interaction Mouseovers are usually accomplished in Javascript Dreamweaver has built-in tools for creating simple mouseover image links Mouseover image links have no visited state

7. Image based link

8. Image based link - hover