Microsoft Expression Web-Illustrated Unit G: Designing Site Navigation

Objectives Understand effective navigation Create an interactive button Edit an interactive button Create a navigation bar Microsoft Expression Web - Illustrated

Objectives Add a navigation bar to site pages Understand link styles Create link styles Microsoft Expression Web - Illustrated

Understanding Effective Navigation To design effective navigation, it helps to understand  Guidelines for navigation  Types of navigation Global Local Related  Navigation elements Microsoft Expression Web - Illustrated

Understanding Effective Navigation Microsoft Expression Web - Illustrated

Creating an Interactive Button Launch Expression Web, open a site, open the home page, click in the left_col div, click Insert on the menu bar, then click Interactive Button Microsoft Expression Web - Illustrated

Creating an Interactive Button In the Buttons list click Braided Column 4, select the text in the Text field, press [Spacebar], then type Home Click Browse next to the Link field Click default.htm, click OK Microsoft Expression Web - Illustrated

Creating an Interactive Button Microsoft Expression Web - Illustrated

Creating an Interactive Button Click the Font tab Click Arial, Helvetica, sans-serif in the Font list, click Bold in the Font Style list, click 12 in the Size list, click the Horizontal Alignment list arrow, click Left, then compare your screen to the figure on the following slide Microsoft Expression Web - Illustrated

Creating an Interactive Button Microsoft Expression Web - Illustrated

Creating an Interactive Button Click OK, then save your changes Click OK Preview the page in a browser, point to the Home button, click the Home button, close the browser window, then return to Expression Web Microsoft Expression Web - Illustrated

Editing an Interactive Button Double-click the Home button, then click the Font tab Click the Original Font Color list arrow, click More Colors, click in the Value box, select the text, press [Delete], type #E2CC7E, then click OK Microsoft Expression Web - Illustrated

Editing an Interactive Button Click the Hovered Font Color list arrow, click More Colors, delete the text in the Value box, type #C9A62D, then click OK Click the Image tab Microsoft Expression Web - Illustrated

Editing an Interactive Button Select the text in the Width box, press [Delete], then type 120 Click the Make the button a GIF image and use a transparent background. option button Microsoft Expression Web - Illustrated

Editing an Interactive Button Click OK, then save your changes Click OK in the Saved Embedded Files dialog box, preview the page in a browser, point to the Home button, click the Home button, close the browser window, then return to Expression Web Microsoft Expression Web - Illustrated

Creating a Navigation Bar A set of related navigation links is known as a navigation bar Click the list arrow on the quick tag selector bar, click Select Tag Contents, click Edit on the menu bar, then click Copy Click the Home button, press, then press [Shift][Enter] Microsoft Expression Web - Illustrated

Creating a Navigation Bar Click Edit on the menu bar, then press Paste Double-click the bottom Home button, in the Interactive Buttons dialog box select Home in the Text field, type Menu, click Browse, click menu.htm, click OK, then click OK again Microsoft Expression Web - Illustrated

Creating a Navigation Bar Click to the right of the Menu button, click [Shift][Enter], click Edit on the menu bar, click Paste, double-click the bottom Home button, select Home in the Text field, type Store, click Browse, click store.htm, click OK, then click OK again Click to the right of the Store button, click [Shift][Enter], click Edit on the menu bar, click Paste, double-click the bottom Home button, replace the text in the Text field with Music, click Browse, double-click music.htm, then click OK Microsoft Expression Web - Illustrated

Creating a Navigation Bar Click to the right of the Music button, click [Shift][Enter], click Edit on the menu bar, click Paste, double- click the bottom Home button, replace the text i9n the Text field with Reservations, click Browse, double- click reservations.htm, click OK Microsoft Expression Web - Illustrated

Creating a Navigation Bar Microsoft Expression Web - Illustrated

Creating a Navigation Bar Double-click the Reservations button, in the Interactive Buttons dialog box click the Font tab, click 11 in the Font-size list, click OK, then save your changes Click OK, preview the pages in a browser, point to the Store button, click the Store button, close the browser window, then return to Expression Web Microsoft Expression Web - Illustrated

Adding a Navigation Bar to Site Pages Click anywhere in the left_col div, point to on the quick tag selector bar, click the list arrow, then click Select Tag Contents Microsoft Expression Web - Illustrated

Adding a Navigation Bar to Site Pages Click Edit on the menu bar, then click Copy Open the store page, click in the left_col div, click Edit on the menu bar, then click Paste Microsoft Expression Web - Illustrated

Adding a Navigation Bar to Site Pages Open the contact page, then repeat step 3 Open the menu page, then repeat step 3 Open the music page, then repeat step 3 Open the reservations page, then repeat step 3 Microsoft Expression Web - Illustrated

Adding a Navigation Bar to Site Pages Save changes to all files, click OK each time the Save Embedded Files dialog box opens, then preview the reservations page in a browser Compare your screen to the figure on the following slide Use the links in the navigation bar to view all the pages in the site, then leave the browser window open Microsoft Expression Web - Illustrated

Adding a Navigation Bar to Site Pages Microsoft Expression Web - Illustrated

Understanding Link Styles To understand link styles, you should be familiar with the following  Link states Pseudo-class defines properties for a particular state of the element –a:link –a:visited –a:hover –a:active Microsoft Expression Web - Illustrated

Understanding Link Styles Guidelines for creating link styles  Leave links underlined  Differentiate between visited and unvisited links  Experiment with hover styles and colors Microsoft Expression Web - Illustrated

Creating Link Styles Close the browser window, return to Expression Web, make the store page the active page, then click the New Style button on the Manage Styles task pane Click the Selector list arrow, click a:link, click the Define in list arrow, click Existing style sheet, click the URL list arrow, then click twstyles.css In the color box, type #757E34, compare your screen to the figure on the following slide, then click OK Microsoft Expression Web - Illustrated

Creating Link Styles Microsoft Expression Web - Illustrated

Creating Link Styles Click the New Style button on the Manage Styles task pane, click the Selector list arrow, click a:visited, click the Define in list arrow, then click Existing style sheet Click the color box, type #BFC97C, then click OK Click the New Style button on the Manage Styles task pane, click the Selector List arrow, click a:hover, click the Define in list arrow, then click Existing Style Sheet Microsoft Expression Web - Illustrated

Creating Link Styles Click in the Color box, type #B1012A, click the overline check box under text- decoration, click the underline check box under text- decoration, compare your screen to the figure, then click OK Microsoft Expression Web - Illustrated

Creating Link Styles Save changes to all files, preview the store page in the browser as shown in the figure on the following slide, point to the Museum of American Quilter’s Society link, close the browser window, return to Expression Web, close the site, then exit Expression Web Microsoft Expression Web - Illustrated