Microsoft® Office FrontPage® 2003 Training [Your company name] presents: Microsoft® Office FrontPage® 2003 Training [Note to trainer: For detailed help in customizing this template, see the very last slide. Also, look for additional lesson text in the notes pane of some slides.] Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons Course contents Overview: Interactive buttons Lesson 1: Introducing interactive buttons Lesson 2: About the button images Lesson 3: How interactive buttons work Each lesson includes a list of suggested tasks and a set of test questions. Liven up Web pages with interactive buttons

Overview: Interactive buttons People appreciate good-looking Web pages. But they appreciate them even more when they can interact with them in some way. FrontPage interactive buttons can help liven things up. Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons Course goals Understand what interactive buttons are. Be able to insert and edit an interactive button. Know what JavaScript is and how it works behind the scenes. Liven up Web pages with interactive buttons

Introducing interactive buttons Lesson 1 Introducing interactive buttons

Introducing interactive buttons FrontPage interactive buttons are colorful, professional-looking buttons. They change appearance when you hover over them and when you press them. Liven up Web pages with interactive buttons

Why use interactive buttons? Interactive buttons are a graphical, interactive alternative for a hyperlink. You could make these buttons in a graphics program. But if you don't have speedy access to one, interactive buttons are your new best friend. Liven up Web pages with interactive buttons

One button, three images At first glance, an interactive button looks like a single image. But each for each button, FrontPage creates three slightly different images. The original image. The hover image. The pressed image. Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons Insert a button First you click a place on the page where you want the button to be. Then you click the Insert menu, and then click Interactive Button. After that, you format the text, specify image settings, and save the page. Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons Test 1, question 1 Interactive buttons are: (Pick one answer.) Buttons that change appearance when you hover over them and press them. Dynamic buttons that you have to code yourself using JavaScript. Special buttons that blink when your Web site is popular. Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons Test 1, question 2 An interactive button consists of: (Pick one answer.) One image that transforms itself each time someone hovers over or presses the button. Several images, about one image per second. Three images that appear depending on what someone does with the pointer. Liven up Web pages with interactive buttons

About the button images Lesson 2 About the button images

About the button images As we mentioned earlier, FrontPage creates three images for each interactive button. But getting these images to look right can be a little tricky. Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons The Image tab In the Interactive Buttons dialog box, the Image tab is an important tab to explain. This area is the only place where you can change the size of the image. Which of these two options should you choose? It depends. The next few screens will explain. Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons The JPEG option JPEG advantage: ability to display millions of colors. JPEG disadvantage: they always have a solid background. These buttons look smooth and rounded, because of the many colors available. When they're against a special background, they may not float on top of the page background very gracefully. Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons The GIF option GIF advantage: It can provide a transparent background. GIF disadvantage: it can only display 256 colors. Sometimes, 256 colors are not enough to simulate a smooth, rounded look. Liven up Web pages with interactive buttons

Saving the three images for the button Each time you insert a button and save the page, the Save Embedded Files dialog box will appear. FrontPage will automatically provide file names for you. We recommend renaming the file names so that they make sense. Note: If you delete a button, FrontPage does not delete the three associated images for you; you have to delete them yourself. Liven up Web pages with interactive buttons

Overwrite original images check box When you need to edit an interactive button, simply double- click it. When you do this, the Overwrite original images check box will be selected by default. This ensures that the three original images for the button will get updated with any changes you make. However, there will probably be a time when you need to copy an interactive button, paste it somewhere else on the Web page, and then just change the text of the button. In this situation, this check box will be cleared by default. This ensures that the three new pasted versions won't change the originals. Liven up Web pages with interactive buttons

Suggestions for practice Insert a button, rename the images, and save the images. Look at another file format option Copy and paste an interactive button. Find and delete any unused button images. Online practice (requires FrontPage 2003) [Note to trainer: With FrontPage 2003 installed on your computer, you can click the link in the slide to go to an online practice. In the practice, you can work through each of these tasks in FrontPage, with instructions to guide you. Important: If you don’t have FrontPage 2003, you won’t be able to access the practice instructions.] Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons Test 2, question 1 When you choose the JPEG file format for an interactive button, which of the following is true? (Pick one answer.) Three JPEG images will be created, and each will have a transparent background. Three JPEG images will be created, and each image will have millions of colors. Three JPEG images will be created, and the button can only have a transparent background. Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons Test 2, question 2 When will FrontPage ask you to save the three image files associated with an interactive button? (Pick one answer.) Immediately after you insert the button. After you insert a button and save the page. As soon as you insert a second button. Liven up Web pages with interactive buttons

How interactive buttons work Lesson 3 How interactive buttons work

How interactive buttons work At this point you might be wondering how these buttons actually work. The magic behind these buttons is JavaScript. Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons Quick review: HTML Before jumping into JavaScript, let's back up and review what HTML is. HTML stands for Hypertext Markup Language. The key word here is "markup." The result of all of this is that HTML can make great looking pages. But what about interactive effects? In this illustration, some text has been marked up with <b> tags, so it will be displayed as bold. Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons JavaScript JavaScript is a scripting language that allows you to add interactive effects to your HTML. When inserted into HTML, it provides interactive effects that HTML alone cannot provide. For example, JavaScript can tell a browser to display an image when someone hovers the pointer over another image. (Sound familiar?) It’s also possible for JavaScript to trigger an alert message, display the date and time, or even provide a loan calculator for people to use. Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons JavaScript functions When you insert an interactive button, FrontPage inserts the related JavaScript code into the head section of the document. FrontPage inserts three JavaScript functions. Functions are tasks that will be performed by the browser: <html> <head> <script language="JavaScript"> <!— function FP_preloadImgs( ) ... function FP_swapImg( ) ... function FP_getObjectByID( ) ... --> </script> </head> <body> ... </body> </html> The most important function for interactive buttons is the Swap Image function (FP_swapImg). This is the function that tells the browser to swap images when someone hovers over, presses, releases, or moves the pointer away from the button. FP_preloadImgs FP_swapIMG FP_getObjectByID Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons Image tag In addition to the <script> tag that defines the JavaScript functions, FrontPage also inserts the <img> tag. Notice that the <img> tag has the following events. <img src="button1.jpg“ onmouseover="FP_swapImg ( ...'button2.jpg')" onmouseout="FP_swapImg ( ... 'button1.jpg')" onmousedown="FP_swapImg ( ...'button3.jpg')" onmouseup="FP_swapImg ( ... 'button2.jpg')"> onmouseover onmouseout onmousedown onmouseup onmouseover This is the event that occurs when someone hovers the pointer over the button. onmouseout This is the event that occurs when someone moves the pointer away from the button. onmousedown This is the event that occurs when someone presses, or clicks, the button. onmouseup This is the event that occurs when someone presses—then releases—while hovering over the button. When each event occurs, the FP_swapImg function is used to swap one image for another. For example, in the code here, the onnmouseover event uses the FP_swapImg function to swap button1.jpg for another image: button2.jpg. Liven up Web pages with interactive buttons

Browser compatibility As you can see, JavaScript is a great way to liven up Web pages. But it's important to know that the JavaScript code for interactive buttons is only compatible with certain browsers. Microsoft Internet Explorer 3.0 and later Netscape 3.0 and later Opera 3.0 and later Liven up Web pages with interactive buttons

Suggestions for practice On the Tools menu, click Page Options. Click the Authoring tab. At the bottom, under Schema version, make sure that Internet Explorer 5.0 is selected. Insert an Interactive Button. Look at the code for an interactive button. Look at the JavaScript functions. Look at the Behaviors task pane. [Note to trainer: With FrontPage 2003 installed on your computer, you can click the link in the slide to go to an online practice. In the practice, you can work through each of these tasks in FrontPage, with instructions to guide you. Important: If you don’t have FrontPage 2003, you won’t be able to access the practice instructions.] Online practice (requires FrontPage 2003) Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons Test 3, question 1 What is JavaScript? (Pick one answer.) JavaScript is the longer, unabbreviated name for Java. JavaScript is a language that marks up content for interesting display purposes. JavaScript is a scripting language that can make HTML pages more interactive. Liven up Web pages with interactive buttons

Liven up Web pages with interactive buttons Test 3, question 2 What is a JavaScript function? (Pick one answer.) It is a task that a Web browser can execute. It is an event that can occur when someone interacts with a Web page. It is a special tag you can use to add interactive elements to your pages. Liven up Web pages with interactive buttons