microsoft expression web-illustrated unit k: working with behaviors
DESCRIPTION
Microsoft Expression Web-Illustrated Unit 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. Understanding Behaviors. - PowerPoint PPT PresentationTRANSCRIPT
Microsoft Expression Web-IllustratedMicrosoft Expression Web-Illustrated
Unit K:Unit K:Working with BehaviorsWorking with Behaviors
ObjectivesObjectives
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 BehaviorsUnderstanding 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 BehaviorsUnderstanding Behaviors
Microsoft Expression Web - Illustrated
Adding a Popup MessageAdding 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
Adding a Popup MessageAdding 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 MessageAdding 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 MessageAdding a Popup Message
Microsoft Expression Web - Illustrated
Example of a popup message
Adding a Status MessageAdding 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 MessageAdding 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 MessageAdding 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 MessageAdding a Status Message
Microsoft Expression Web - Illustrated
Adding a Jump MenuAdding 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
Adding a Jump MenuAdding 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 MenuAdding 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
Adding a Jump MenuAdding a Jump Menu
Microsoft Expression Web - Illustrated
Adding an Image SwapAdding 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 SwapAdding an Image Swap
Microsoft Expression Web - Illustrated
Adding an Image SwapAdding 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
Adding an Image SwapAdding an Image Swap
Microsoft Expression Web - Illustrated
Opening a Browser WindowOpening 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 WindowOpening a Browser Window
Microsoft Expression Web - Illustrated
Opening a Browser WindowOpening 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 BehaviorModifying 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 BehaviorModifying a Behavior
Microsoft Expression Web - Illustrated
Modifying a BehaviorModifying a Behavior
Microsoft Expression Web - Illustrated