Microsoft Expression Web-Illustrated Unit K: Working with Behaviors

Microsoft Expression Web-IllustratedUnit K:Working with Behaviors

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

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

Understanding Behaviors Microsoft Expression Web - Illustrated

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 Maximizebutton 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

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

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

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

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

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

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

Adding a Status Message Microsoft Expression Web - Illustrated

Adding a Jump Menu 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 Microsoft Expression Web - Illustrated

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

Adding a Jump Menu Click Add, type a choicein 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

Adding a Jump Menu Microsoft Expression Web - Illustrated

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

Adding an Image Swap Microsoft Expression Web - Illustrated

Adding an Image Swap Click the imageto 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

Adding an Image Swap Microsoft Expression Web - Illustrated

Opening a Browser Window Open the reservations page, select the text you’d 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

Opening a Browser Window Microsoft Expression Web - Illustrated

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

Modifying a Behavior Once you’ve added a behavior, it’s 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

Modifying a Behavior Microsoft Expression Web - Illustrated

Microsoft Expression Web-Illustrated Unit K: Working with Behaviors