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 Expression Web 3 - Illustrated 2

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

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 4

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 5

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

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 7

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

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 9

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 10

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 11

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

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 13

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 14

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 15

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 16

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

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

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

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 20

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 21