Microsoft Expression Web 3 – Illustrated Unit G: Designing Site Navigation

1. Microsoft Expression Web 3 – Illustrated Unit G: Designing Site Navigation

2. Objectives • Understand effective navigation • Create an interactive button • Edit an interactive button • Create a navigation bar Expression Web 3 - Illustrated

3. Objectives (continued) • Add a navigation bar to site pages • Understand link styles • Create link styles Expression Web 3 - Illustrated

4. Understanding Effective Navigation • Good navigation: • Is consistent. • Is clearly labeled. • Reflects the needs of the audience. • Information Architects (IAs) – people whose job it is to create structures, navigation, and search systems for Web sites. Expression Web 3 - Illustrated

5. Understanding Effective Navigation (continued) • Global navigation – appears consistently on each page, usually at the top or left side. • Local navigation – appears in a specific section of a site and tends to change from section to section. • Related navigation – appears within the content area and highlights content related to the page. Expression Web 3 - Illustrated

6. Understanding Effective Navigation (continued) Expression Web 3 - Illustrated

7. Creating an Interactive Button • Interactive buttons (aka rollovers) – navigation graphics that change appearance when a visitor interacts with them. • Three states of interactive buttons: • Original state – appears when a visitor is not interacting with the button. • Hover state – appears when a visitor points to or hovers over the button. • Pressed state – appears while a visitor is clicking the button. Expression Web 3 - Illustrated

8. Creating an Interactive Button (continued) Expression Web 3 - Illustrated

9. Editing an Interactive Button • The image tab allows you to change the height and width of an interactive button, and whether it is a hover or pressed image. Expression Web 3 - Illustrated

10. Creating a Navigation Bar • Navigation bar – a set of related navigation links; can be text or images. • Easiest way to create a navigation bar is to create one link and copy and paste the remaining to ensure they are uniform, then change the text and link. Expression Web 3 - Illustrated

11. Adding a Navigation Bar to Site Pages • A global navigation bar should be on each page and should be consistent from page to page. • Create global navigation bar on first page, then copy and paste onto remaining pages. • Since Expression Web creates an image of text on navigation buttons you are not limited to using Web-safe fonts. Expression Web 3 - Illustrated

12. Adding a Navigation Bar to Site Pages (continued) Expression Web 3 - Illustrated

13. Understanding Link Styles • CSS provides control over how links appear. • Link styles should clearly indicate that the link is clickable. • Pseudo-class – defines properties for a particular state of the element. Expression Web 3 - Illustrated

14. Understanding Link Styles (continued) • Four commonly used pseudo-class selectors: • a:link – indicates the normal, unvisited state of a link. • a:visited – indicates that the link has been clicked. • a:hover – indicates that the visitor’s cursor is pointing to the link. • a:active – indicates that the link has been clicked but not released. Expression Web 3 - Illustrated

15. Understanding Link Styles (continued) • Guidelines for creating link styles: • Creating an a:active style is optional. • Leave links underlined (universally understood). • Differentiate between visited and unvisited links (helps visitors keep track of where they have been on your site). • Experiment with hover styles and colors (make sure it is obvious that the link is clickable). Expression Web 3 - Illustrated

16. Understanding Link Styles (continued) • Guidelines for creating link styles (continued) • Create link pseudo-class styles in the correct order. • Pseudo-class styles are applied in the order in which you create them. • LoVe-HA (link, visited, hover, active). • Descendent selectors – defines properties for all instances of an element that occur within a defined container; used when navigation text links need to look different from content text links. Expression Web 3 - Illustrated

17. Understanding Link Styles (continued) Expression Web 3 - Illustrated

18. Creating Link Styles • Styles are created using the New Style button. Expression Web 3 - Illustrated

19. Creating Link Styles (continued) • You can see the order and rearrange styles at the Manage Styles panel. Expression Web 3 - Illustrated

20. Summary • Create a system of links that is clear and logical to ensure that visitors can easily navigate from page to page. • As a site’s complexity and content diversity increase, it becomes more challenging to design navigation that is simple and easy to use. • Interactive buttons or rollovers are navigation graphics that change appearance when a visitor interacts with them. Expression Web 3 - Illustrated

21. Summary (continued) • A navigation bar is a set of related navigation links, can be text or images. • A global navigation bar is navigation that is consistent from page to page. • Link styles clearly indicate to a visitor that a link is clickable. • A pseudo-class defines properties for link states (a:link, a:visited, a:hover, a:active). • CSS provides control over how links appear. Expression Web 3 - Illustrated