Presentation on theme: "Chapter 08: Adding Adding Interactivity Interactivity With With Behaviors Behaviors By Bill Bennett Associate Professor MSJC CIS MVC."— Presentation transcript:
Chapter 08: Adding Adding Interactivity Interactivity With With Behaviors Behaviors By Bill Bennett Associate Professor MSJC CIS MVC
The Big Picture HTML defines the structure of your Web pages – HTML is a Markup language CSS defines the look of your Web pages Scripting languages define the control logic of your Web pages – Behaviors or functions are added to a Web page by using a scripting language
Scripting Basics Behaviors consist of two components: 1.Events Some activity that occurs on a Web page, like a user moves a mouse over a button or clicks on an image 2.Actions Are triggered by events The activity that needs to occur Changing a property value Performing a mathematical calculation Opening a new Web browser window Etc.
Often Used Event Types onClick onDblClick onMouseDown onMouseUp onMouseOver onMouseOut onFocus onBlur onLoad onUnload
Expression Web Behaviors Call Script Change Property Change Property Restore Go To URL Jump Menu Jump Menu Go Open Browser Window Play Sound Popup Message Preload Images Set Text Swap Image Swap Image Restore Behaviors panel Click on Insert
Adding the Swap Image Behavior Select the image you want to add the behavior to Open the Behaviors panel from the Panels menu Next click the Insert button located in the top left of the Behaviors panel and choose Swap Image The selected tag displays in the Behaviors panel
Swap Images Dialog Box Adds code to restore original image on mouseout event. Selected tag that behavior will be applied to. Choosing this check box adds code to the section and the tag which loads the swap image into a Web browser s memory when the page is loaded; it creates a smoother roll over effect. Location and name of the swap image file. The circle shows the other elements in your document. It helps to add the ID attribute to your tags to make it easier to find the right tag in this list. To do this, select the tag and type a name in the ID field of the Tag Properties panel. This is where you add the behavior to your tag
End of Chapter Exercise 1.Copy each page you created in Chapter07 (Home, About Us, Solutions, Support, and Contact Us) and the styles.css file to your Chapter08 folder. 2.In the Chapter08 folder open the default.htm file 3.In the space where the navigation menu resides, replace each textual hyperlink with the appropriate image file (nav_home1.png, nav_aboutus1.png, nav_oursolutions1.png, nav_support1.png, nav_contactus1.png). 4.Make each nav image a hyperlink by right-clicking on the image, choosing Hyperlink Properties and pointing to the appropriate html file, i.e. the nav_home1.png should have an HREF=default.htm added to its hyperlink. 5.Select each image individually and attach the Swap Image behavior. Set the source of each images Swap Image URL to the second image provided (nav_home2.png, nav_aboutus2.png, nav_oursolutions2.png, nav_support2.png, nav_contactus2.png) 6.Repeat the process for the other pages in the site. 7.Publish your chapter08 folder and me your hyperlink for this assignment.