1. 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

2. 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

3. 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

4. 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

5. Introducing interactive buttons
Lesson 1
Introducing interactive buttons

6. 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

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

8. 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

9. 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

10. 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

11. 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

12. About the button images
Lesson 2
About the button images

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. How interactive buttons work
Lesson 3
How interactive buttons work

23. 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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

31. 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