Links and Navigation

Slideshow Transcript

1. Slide 1: Links & Navigation <and presentation with css /> Advanced CSS Stephen Ireland
2. Slide 2: Links How the web works - we need to get it right • Conventions should be followed • Links should stand out on a page • Differentiate from body text, preferably with some kind of hover effect • Make something look and act like a button - it becomes easier to understand what it does Advanced CSS Stephen Ireland
3. Slide 3: Anatomy of a Link Relative link within site <a href=”index.html”>Link text goes here</a> <a href=”pages/contact.html”>Contact us</a> <a href=”http://www.google.com”>Google</a> need http:// if linking to an external website Advanced CSS Stephen Ireland
4. Slide 4: States of a Link A link has four states of activity • Unvisited • Hover • Active • Visited Advanced CSS Stephen Ireland
5. Slide 5: States of a Link What the states mean • Unvisited - user has not visited the link location • Hover - user is hovering over the link (mouse or keyboard) • Active - user has clicked down but not released • Visited - user has visited the location the link points to Why do we need to know this? Because we can control the physical appearance of each state using CSS. Advanced CSS Stephen Ireland
6. Slide 6: Referenced in CSS State CSS selector Default appearance • Unvisited a:link blue, underlined • Hover a:hover blue, underlined • Active a:active red, underlined • Visited a:visited purple, underlined The default appearance of an html link is ugly. CSS gives us ultimate control to change the appearance of the link and its various states. Advanced CSS Stephen Ireland
7. Slide 7: Examples of Styled Link Advanced CSS Stephen Ireland
8. Slide 8: Link Styles What we have control over • Text colour (color) • Font family and style • Background colour • Decoration (Underline, strike-through, etc) • And more Links are inline elements, however we can force them to behave like block-level elements using display: block; Advanced CSS Stephen Ireland
9. Slide 9: How Styles are Applied CSS a:link, a:visited { All links visited or text-decoration: underline; unvisited will be green color: #b3ff3d; and underlined. } a:hover { When hovering over the text-decoration: none; link, the underline will color: #000000; disappear and the link } text will appear black. Advanced CSS Stephen Ireland
10. Slide 10: Be More Specific CSS p a:link, p a:visited { All links in a paragraph text-decoration: underline; visited or unvisited color: #b3ff3d; will be green and } underlined. In many cases we need to be more specific with our CSS styles. The CSS rule above will only affect links within paragraph tags. Advanced CSS Stephen Ireland
11. Slide 11: Navigation and Links What’s the difference? • Navigation is really a group of carefully considered links. • Gives structure and consistency to a website. • Helps visitors around the site, and get back to the homepage. Good navigation should allow a visitor to quickly find what they are looking for on your site. Advanced CSS Stephen Ireland
12. Slide 12: HTML Markup for Navigation Example HTML <div id=”navigation”> <ul> <li><a href=”page1.html”>Page 1</a></li> <li><a href=”page2.html”>Page 2</a></li> <li><a href=”page3.html”>Page 3</a></li> <li><a href=”page4.html”>Page 4</a></li> <li><a href=”page5.html”>Page 5</a></li> </ul> </div> Advanced CSS Stephen Ireland
13. Slide 13: Horizontal or Vertical? Example HTML <div id=”navigation”> <ul> <li><a href=”page1.html”>Page 1</a></li> <li><a href=”page2.html”>Page 2</a></li> Use this HTML markup whether you <li><a href=”page3.html”>Page 3</a></li> want your navigation to flow vertically or <li><a href=”page4.html”>Page 4</a></li> horizontally. <li><a href=”page5.html”>Page 5</a></li> </ul> </div> Advanced CSS Stephen Ireland
14. Slide 14: Why? Example HTML <div id=”navigation”> <ul> <li><a href=”page1.html”>Page 1</a></li> Because whether navigation displays <li><a href=”page2.html”>Page 2</a></li> horizontally or vertically, it is a <li><a href=”page3.html”>Page 3</a></li> presentational consideration, therefore <li><a href=”page4.html”>Page 4</a></li> controlled using CSS. <li><a href=”page5.html”>Page 5</a></li> </ul> </div> Advanced CSS Stephen Ireland
15. Slide 15: Applying Styles Unstyled Styled Advanced CSS Stephen Ireland
16. Slide 16: Step One: Ground Rules We apply some basic styles to the navigation div. CSS #navigation { width: 200px; font-family: “Lucida Grande”, “Trebuchet MS”, sans-serif; font-size: 80%; font-weight: bold; } Advanced CSS Stephen Ireland
17. Slide 17: Step Two: Reset Browser Defaults Reset margin and padding on the Unordered List to 0. CSS #navigation ul { margin: 0; padding: 0; } Advanced CSS Stephen Ireland
18. Slide 18: Step Three: Style the <li> Remove the bullet from the list-item and put a coloured border in place. CSS #navigation ul li { list-style: none; border-bottom: 1px solid #b64926; } Advanced CSS Stephen Ireland
19. Slide 19: Step Four: Colour and Block Style the link, display: block; converts the link into a clickable block area. CSS #navigation ul li a:link, #navigation ul li a:visited { display: block; padding: 8px 12px; text-decoration: none; background-color: #8e2800; color: #fff0ab; } Advanced CSS Stephen Ireland
20. Slide 20: Step Five: Hover State Create a roll-over style for the navigation - by changing the background colour of the link. CSS #navigation ul li a:hover { background-color: #468966; } Advanced CSS Stephen Ireland
21. Slide 21: Your Vertical Nav Bar But what if we want it to display horizontally? Advanced CSS Stephen Ireland
22. Slide 22: Horizontal Navigation Remove the contraining width... CSS #navigation { /*width: 200px;*/ font-family: “Lucida Grande”, “Trebuchet MS”, sans-serif; font-size: 80%; font-weight: bold; } Advanced CSS Stephen Ireland
23. Slide 23: Horizontal Navigation Float the list-items left, and change the border to right. CSS #navigation ul li { list-style: none; border-right: 1px solid #b64926; float: left; } Advanced CSS Stephen Ireland
24. Slide 24: Completed Your horizontal navigation Advanced CSS Stephen Ireland