1 / 21

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

Microsoft Expression Web 3 – Illustrated Unit G: Designing Site Navigation. Objectives. Understand effective navigation Create an interactive button Edit an interactive button Create a navigation bar. Objectives (continued). Add a navigation bar to site pages Understand link styles

vida
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related