1. Microsoft Expression Web-Illustrated Unit K: Working with Behaviors

2. Objectives Understand behaviors Add a popup message Add a status message Add a jump menu Add an image swap Open a browser window Modify a behavior Microsoft Expression Web - Illustrated

3. Understanding Behaviors To use behaviors effectively, it is important to understand The components of a behavior Event Action The Behaviors task pane in Expression Web The right time to use a behavior Microsoft Expression Web - Illustrated

4. Understanding Behaviors Microsoft Expression Web - Illustrated

5. Adding a Popup Message Launch Expression Web, open the site you have been working on, then open the home page Click Task Panes on the menu bar, click Behaviors, then if necessary click the Maximize button on the Behaviors task pane Click anywhere in the selection of beads link in the last paragraph, then click Insert on the Behaviors task pane Microsoft Expression Web - Illustrated

6. Adding a Popup Message Click Popup Message Click in the Message box if necessary, type your message, then click OK Microsoft Expression Web - Illustrated

7. Adding a Popup Message Save your changes, then preview the home page in a browser If necessary, click the yellow bar containing the security message, click Allow Blocked Content, then click Yes Click OK, then leave the browser window open Microsoft Expression Web - Illustrated

8. Adding a Popup Message Microsoft Expression Web - Illustrated Example of a popup message

9. Adding a Status Message With the page open in the browser window, click the home page button, then notice the status bar as shown here Microsoft Expression Web - Illustrated

10. Adding a Status Message Close the browser window, return to Expression Web, then select on the quick tag selector Microsoft Expression Web - Illustrated

11. Adding a Status Message Click Insert on the Behaviors task pane, point to Set Text, then click Set Text of Status Bar Type Welcome! In the Message box, then click OK Save your changes, preview the home page in a browser, if necessary click the yellow bar containing the security message, click Allow Blocked Content, click Yes, then compare your screen to the figure on the following slide Close the browser window, then return to Expression Web Microsoft Expression Web - Illustrated

12. Adding a Status Message Microsoft Expression Web - Illustrated

13. Adding a Jump Menu Microsoft Expression Web - Illustrated A jump menu is a drop-down menu that lists a selection of navigation links. When they click they are taken to a corresponding page Jump menu

14. Adding a Jump Menu Open the store page, click after the last text in the last paragraph, press [Enter], type the title of the jump menu, then press [Shift][Enter] Click Insert on the Behaviors task pane, then click Jump Menu Click Add Type Select one in the Choice text box, compare your screen to the figure on the following slide, then click OK Microsoft Expression Web - Illustrated

15. Adding a Jump Menu Click Add, type a choice in the Choice text box, click Browse, click the file for the page you want to add, click OK Click OK, save your changes, preview the page in a browser, if necessary click the yellow bar containing the security message, click Allow Blocked Content, then click Yes and compare your work to the figure on the following slide Microsoft Expression Web - Illustrated

16. Adding a Jump Menu Microsoft Expression Web - Illustrated

17. Adding an Image Swap Make the store page the active page, click just before one of the headings, click Insert on the menu bar, point to Picture, then click From File Navigate to the location where you store your Data Files, click the image you would like to use, click Insert, type the name of the text box in the Alternate text box, then click OK Microsoft Expression Web - Illustrated

18. Adding an Image Swap Microsoft Expression Web - Illustrated

19. Adding an Image Swap Click the image to select it, click Insert on the Behaviors task pane, then click Swap Image Click Browse, navigate, to the location where you store your Data Files, click a different image, then click OK Click the Restore on mouseout event check box, compare your screen to the figure on the following slide, then click OK Microsoft Expression Web - Illustrated

20. Adding an Image Swap Microsoft Expression Web - Illustrated

21. Opening a Browser Window Open the reservations page, select the text youd like to link, right-click the selected text, then click Hyperlink on the shortcut menu Click in the Address text box if necessary, type javascripts:;, then click OK In the Behaviors task pane, click Insert, then click Open Browser Window Microsoft Expression Web - Illustrated

22. Opening a Browser Window Microsoft Expression Web - Illustrated

23. Opening a Browser Window Click Browse, click the file for the page you want it to open too, then click OK Type the name in the Window name text box, click the Window width text box, delete the text 200, type 800, click the Window height text box, delete the text 200, then type 600 In the Attributes section, click the Scrollbars as needed check box to add a check mark, click the Resize handles check box to add a check mark, then click OK Microsoft Expression Web - Illustrated

24. Modifying a Behavior Once youve added a behavior, its easy to modify In the Behaviors task pane, double-click the Open Browser Window action Click the Window height text box, delete the text 600, then type 400 Microsoft Expression Web - Illustrated

25. Modifying a Behavior Microsoft Expression Web - Illustrated

26. Modifying a Behavior Microsoft Expression Web - Illustrated