1. Microsoft Expression Web 3 Chapter 6 Adding Interactivity

2. Chapter 6: Adding Interactivity 2 Chapter Objectives Create an interactive button Duplicate an interactive button Edit an interactive button Test an interactive button Define how behaviors work Use the Behaviors panel Add a jump menu behavior Add a status message behavior Add a swap image behavior Modify a behavior Test a behavior Create an image map

3. Housekeeping Create a Ch. 6 folder Read the project on page 368 Chapter 6: Adding Interactivity 3

4. Plan Ahead Plan the site navigation – what do you need links to? Determine which elements you can reuse and copy to save time and ensure consistency. Identify behaviors that will improve site visitors’ experiences. Avoid sound and pop-up messages! Assess how you will provide access to site pages that do not have links in the primary navigation area Chapter 6: Adding Interactivity 4

5. Creating interactivity Buttons – is in one of 3 states –Being pressed –Hovering over –Inactive We can use interactivity to recognize these states and do something when necessary. Uses ActiveX (may have to enable it on browsers) Do pages 371 & 373-386 to add buttons, copy them and test them! LET ME SEE it at this point! Chapter 6: Adding Interactivity 5

6. Editing an Interactive Button Chapter 6: Adding Interactivity 6

7. Organizing the Button Images into Folders Chapter 6: Adding Interactivity 7 Do pages 387-389 to organize this crazy mess of files!

8. Defining Behaviors Behaviors – actions triggered by events –Changes in page appearance –Change in font size –Alert messages –Occur as a result of something a visitor to your site has done Look at page 390. Go over the box. Now we are going to create a Jump menu. Follow the instructions on pages 391-396 Chapter 6: Adding Interactivity 8

9. Adding a Status Bar Behavior Deliver a message to visitors by placing information on the status bar. Do pages 397-398 Chapter 6: Adding Interactivity 9

10. Adding a Swap Image Behavior Chapter 6: Adding Interactivity 10 Swap image – a behavior used to display 2 images, one that displays by default and one that replaces it when an event happens. Make sure the images are of the same dimensional size (or close to it) to prevent issues with page layout when they are swapped. Usually a good idea to RESTORE the original image when the event is finished. Do pages 399-405 STOP here and let me see it before you progress any further!

11. Adding an Image Map Image maps- graphics that are divided into sections. Each section is clickable (hotspot) Used most often for geographic maps First insert the largest shape, then use a shape tool to define each area and assign it a link. It’s link should display in the status bar if you position the pointer over it. Chapter 6: Adding Interactivity 11

12. Adding an Image Map Chapter 6: Adding Interactivity 12 Do pages 405-409

13. Now What? Homework Who wants to be a computer genius? www.scsite.com/ew3/learn Lab Make it Right – pg. 414-415 Final exam will be on ch. 6 Chapter 6: Adding Interactivity 13