Adding media and functionality to web pages - Ashbury … Advanced... · Adding media and functionality to web pages ... You’ll also insert the Date and Time component. c Create

4 - 1

L E S S O N 4

Adding media and functionality to web pages

Lesson objectives To learn about several new features of FrontPage, you will:

a Edit a picture, add a background image, and insert a multimedia element. You’ll learn to change a picture’s background transparency and crop it. Then you’ll add a background image and share it with other web pages. Finally, you’ll add a sound file to a web page.

b Add FrontPage components to your web to increase functionality. These built-in elements save you from having to program. You’ll add a Banner Ad Manager to rotate graphical links. You’ll also insert the Date and Time component.

c Create marquee text and hover buttons. These elements don’t add much functionality to your web, but they do make your pages more pleasing to the eye.

d Discuss advanced components and insert an ActiveX control. These non-FrontPage components enable you to add limitless flexibility to your web pages. You’ll insert an ActiveX spreadsheet and test it in a browser.

Suggested teaching time 50-60 minutes

FrontPage 2000: Advanced Ashbury Training

4 - 2

a Working with pictures in FrontPage

The following new software features are discussed in this topic:

• Auto Thumbnail creation. • Object positioning.

Concepts > For the most part, the tools on the Picture toolbar will be your starting point for editing any pictures. FrontPage 2000 comes with several tools that will help you work with pictures in your web pages. The Picture toolbar offers buttons for inserting pictures and text, arrangement tools, picture quality controls, and picture editing tools. FrontPage supports a wide variety of popular file formats, including TIFF (.tif), CompuServe GIF(.gif), Targa (.tga), JPEG (.jpg), Windows bitmaps (.bmp) and metafiles (.wmf), Portable Network Graphics (.png), and Kodak PhotoCD (.pcd). You can even insert scans from a TWAIN-compatible camera or scanner.

To modify a picture using FrontPage’s tools, select the picture to display the Picture toolbar and apply the tool of your choice to the picture. It bears mentioning that the Picture toolbar has a Restore button on it, just in case you want to undo your edits. (You may have to click on the toolbar’s More Buttons button to see the Restore option.)

Figure 4-1: The FrontPage Picture toolbar.

Adding extra tools In addition to its own picture editing capabilities, you can extend FrontPage’s tool set by associating (linking) a separate “editor” program with particular file types. Such editor associations allow you to just double-click on a web element and the associated application will launch with the element opened, ready to be edited. Once the element has been edited, you can save it and FrontPage will automatically apply the changes—no re-importing necessary.

To associate a program with FrontPage, choose Tools, Options, select the Configure Editors tab, and click on Add. In the File Type box, type the file extension (GIF, for instance). In the Editor Name box, enter the name of the application you’ll be using (such as Microsoft PhotoDraw). In the Command box, type the path to the application’s executable file—use the Browse button to help locate the program. Click on OK. The program will be the last one displayed in the Editor list. Click on OK to confirm the association.

Converting pictures Not every picture in the world is a GIF, JPG, or PNG—the Web’s current graphic file format standards. Many people have pictures in different formats. So how do you change your BMPs and TIFFs into a standard picture format? Are you out of luck? Not at all. FrontPage makes converting a picture from one file format to GIF, JPEG, or PNG format very easy.

what’s new

Ashbury Training Lesson 4: Adding media and functionality to web pages

4 - 3

To convert a picture, open the web page that contains the picture you want to convert, such as a BMP file. (The graphic must be on a web page—not in the Folder List.) Right-click on the picture and choose Picture Properties. In the Picture Properties dialog box under Type, select the new file format you want and click on OK. FrontPage creates a copy of the old picture in the new format.

When you save the web page that includes the picture, FrontPage will prompt you to save embedded files. When you click on OK, FrontPage saves the picture to your web with the new file format extension. To confirm the conversion, look in the Folder List and locate the file.

Setting a transparent color in a GIF Often GIFs have an unnecessary background color that doesn’t enhance the picture. In fact, that background color may add to the GIF’s size. How do you get rid of that background? Make it transparent.

To make a picture transparent, use the Set Transparent Color tool from the Picture toolbar to click on the picture’s background. Setting a transparent color applies only to GIFs, so if a picture isn’t a GIF already, FrontPage will prompt you to convert the picture. Note: You need to be careful when setting a transparent color. If you select black to be transparent, every black pixel in that picture will become transparent—not just the background. This may create an undesired effect, such as the loss of outlines or borders. If that happens, don’t forget to use the Restore button to reset the picture to its original condition.

Task A-1: Editing a picture What you do Comments/Prompts

1. Open multimediaweb If FrontPage displays a new_page_1.htm, close it Display catalog.htm in Page view

2. Scroll to the bottom of the page so you can see the text “10-Person Conference Table”

3. In the Folder List, expand the Images folder, if necessary Drag the desk.bmp picture to the blank line below 10-Person Conference Table

(Click on the plus sign next to the folder.)

4. Observe the picture The picture is “matted” on a blue background and “framed” by a black border. It’s also much larger than the other pictures on the page.

Point out to students that the picture is currently a bitmap file.


4 - 4

5. Use one of the corner selection handles to make the picture smaller

Make the picture similar to the monitor picture above it.

6. With the picture still selected, verify that the Picture toolbar is displayed

(If it is not, with the picture selected, choose View, Toolbars, Picture to display the toolbar.)

7. On the Picture toolbar, click on the Set Transparent Color tool Click on OK Observe the mouse pointer

To accept the file conversion from BMP to GIF.

It turns into a pencil eraser with an arrow.

8. Click on the blue area inside the thick black border

Most of the blue has been removed, but some remains around picture’s edges. To get rid of the leftover color, let’s crop the picture.

9. On the Picture toolbar, click on the Crop tool

Observe the picture

To activate the Crop tool.

A selection rectangle appears inside the picture.

10. Using the graphic to the right as a guide, adjust the cropping tool’s selection rectangle to: Omit the outer border Eliminate any remaining background color Reduce the white background within the photo itself Click on the Crop tool again

To crop the picture and to turn off the Crop tool.

11. Observe the picture The picture is cropped, and it expands to fill the area once occupied by the larger original picture.

M Whenever students click on a picture in a web page to select it, they may accidentally double-click on it. If an editor program is associated, the program may launch. Have them close the program and return to FrontPage.


4 - 5

12. Save the page Click on OK

To display the Save Embedded Files dialog box. (Because a copy of the BMP file was converted to a GIF when we set the transparency, you’ll need to save the newly created file.)

13. Observe the Folder List (You may have to press F5 to refresh the screen.) The picture, desk.gif, appears in the web’s Images folder by default.

14. Right-click on the cropped picture in catalog.htm Choose _Picture_Properties…_ On the General tab, observe the Type area Click on OK

The shortcut menu is displayed. To display the Picture Properties dialog box.

The picture desk.gif is a transparent GIF file.

Practice Task

1. Crop the left side of the paper airplane picture in the Bottom Shared Border.

2. Save the page. (Click on OK to save the cropped airplanebar.gif.)

Background colors and pictures Concepts > Backgrounds are the colors or pictures under your web text. If a background

color isn’t defined, most browsers will use medium gray or white as the default background. You can change the default background color to almost any color you want, or you can insert a background picture. You can use background pictures to add texture, color, site identification, and other visual effects to your pages. Just like other graphics within your web, background pictures should support the message, have a purpose, and be of a good quality at low resolution.


4 - 6

If you plan to use a background, you should avoid:

• Dark colors combined with dark text fonts. • Distracting pictures that overshadow the site content. • Large files that require users to wait for the background to download. • Backgrounds that clash with your pictures.

To insert a custom background picture in FrontPage, choose Format, Background. Select Background Picture and click on the Browse button to locate the image you want. Then click on OK to place the new background. If the picture’s too dark, try applying the Picture toolbar’s Wash Out tool to it.

Notes: If the background picture resides outside the web, you’ll have to save the picture to the web. (To do so, click on the Save button, and when prompted, click on Yes to save the picture.) Also, if you have a theme applied to a page, you’ll need to remove it before you set a background picture.

Sharing background information Time saving tip: Once you’re happy with a page’s background settings (the background color, picture, and other page settings), you don’t have to re-create them for each page in the web. You can use that page’s background information as if it were a template.

To share the background information, select the page you want to apply the settings to and display its Page Properties. Select the Background tab. Near the bottom of the dialog box, select Get Background Information From Another Page and browse to locate the web page with the desired settings. Finally, click on OK to apply the shared background information.

Task A-2: Setting a background picture and sharing background information ü Before you begin: Multimediaweb is open.

What you do Comments/Prompts

1. Display the Home Page in Page view Choose _Format_ _Background_

To display the Background tab of the Page Properties dialog box.

2. Under Formatting, select Background Picture Click on Browse

To display the Select Background Picture dialog box.

3. In multimediaweb’s images folder, select graypaper.gif Click on OK twice

(Follow your instructor’s directions to locate the Images folder.)


4 - 7

4. Observe the Home Page’s background Save the page

You can see a grayish, crinkled-paper background. If you don’t save the page first, you won’t be able to share its background with other pages.

5. Display catalog.htm in Page view Observe the page

(Choose Window, catalog.htm.) The page doesn’t have a background yet.

6. Right-click on the page and choose _Page_Properties…_ Select the Background tab

7. Near the bottom of the dialog box, check Get Background Information From Another Page Click on Browse Select the Home Page Click on OK twice

We’ll be borrowing the Home Page’s background information.

8. Observe the background for catalog.htm Save the page

(The table’s background remains white.) Catalog.htm now shares the same grayish, crinkled-paper background with the Home Page.

Practice Task

1. For both accounts.htm and links.htm, borrow the Home Page’s background.

2. Save the pages.

Adding multimedia elements Concepts > Sound, animation, and video clips can be played inside the browser window,

provided that the browser can handle the element. When you’re trying to decide whether to add multimedia material to your web page, ask yourself this question, “Will my readers have the patience or disk space to download a sound or video file?” If the answer is no, don’t include the multimedia file. If the answer is yes, consider inserting a background sound or a video clip as long as it will enhance your visitors’ browsing experience.

M If catalog.htm doesn’t display a background, verify that the Home Page was saved back in step 4.


4 - 8

A background sound is a sound file, ordinarily a wave sound (WAV), that you embed in a web page. When the page is displayed in a browser, the sound file plays and will repeat the number of times you specify. Use background sounds sparingly because they tend to take a while to download. To insert a background sound in a web page, display its Page Properties dialog box. On the General tab, under Background Sound, click on the Browse button, and locate a sound file.

Generally speaking, web animations are animated GIF (a series of GIF pictures played in sequence to simulate motion). Since most animated GIFs aren’t very large, web developers tend to use them to attract a visitor’s attention to new features. For instance, a developer may insert an animated GIF of a spinning arrow to direct visitors to recent site updates. Animated GIFs are added to a web page just like any other picture. Choose Insert, Picture, From File. If you don’t know how to make animated GIFs, don’t worry. You can find huge collections of free animations on the web. Just open your favorite search engine and search for “animated GIF.”

Video clips are usually short video sequences that can be embedded into a web page by using the Insert, Picture, Video command. Video clips are rarely used because of their high download times. As a result, most web developers favor using animated GIFs over video clips.

Optional Task A-3: Adding a sound file to a web page What you do Comments/Prompts

1. What should you consider before inserting a sound or video file onto a web page?

Does it support the message, and is it appropriate? Can users download it quickly? Is the sound or video of good quality? Can most viewers view it? Will they need a plug-in?

2. Why would you want to insert a sound file onto a web page?

Use a sound file to add to the visitor’s experience. Sounds are great to enhance instructions. For example, if you’re trying to describe how a finely tuned car engine would sound—rather than describe it with words, why not provide a sound file instead?

3. Why would you want to insert a video file onto a web page?

Video can be extremely useful to “show” visitors how to perform complicated tasks—great for online training. If your site provides instructions, for instance, on how to assemble a product, use a video clip showing a professional completing the more complicated tasks.

4. Display the Home Page in Page view, if necessary

We’ll add a sound file to the Home Page.

5. Right-click on the page and choose _Page_Properties…_ Select the General tab, if necessary


4 - 9

6. Under Background Sound, click on Browse In multimediaweb’s Sound folder, select chimes.wav


4 - 10

7. Click on OK Uncheck Forever Click on OK Save the page

Generally speaking, it isn’t good practice to loop sounds or music forever, because even the best sounds can become annoying after awhile. Setting Loop to 0 means the sound will play once, but not repeat.

8. Preview the file in the browser Close the browser

(You can also use the Preview tab in Page view.) Chimes.wav plays once when the page is loaded in the browser.

Practice Task

1. In the web’s Sound folder, use taadaa.wav as a background sound for the page of your choice.

Be sure to uncheck Forever so the WAV file doesn’t play continuously.

2. Preview the page in the browser. Close the browser.

Auto Thumbnail Concepts > We already know from experience that large images can take longer to download

than smaller images. To combat this problem, some web developers take large pictures and create smaller versions of them. These smaller versions are generically called thumbnails. Then, rather than insert the larger pictures, developers insert the thumbnail versions into their pages and hyperlink them to the larger pictures. Visitors to the pages can then see the quicker-loading thumbnails and decide whether they want to download the larger files to view. (See Figure 4-2.)

Pages that borrow background information won’t borrow the background sound.


4 - 11

Figure 4-2: Auto Thumbnail takes the original (left) and creates a smaller thumbnail from it (right) and automatically hyperlinks the thumbnail to the original.

To create a thumbnail for every large picture would be very time-consuming. Fortunately, FrontPage can create thumbnails and hyperlinks for you automatically. To do so, select the larger picture, and on the Picture toolbar, click on the Auto Thumbnail button. The larger picture is instantly replaced by a thumbnail version. Additionally, the thumbnail is hyperlinked to the larger picture (which remains intact on your server).

When you save the page with the newly created thumbnail pictures, FrontPage will prompt you to save the new pictures. The program will automatically name the pictures after their “parent” file and add a “_small” suffix to each filename.

Figure 4-3: Use the Position Absolutely button to overlap web elements.


4 - 12

Absolute positioning In the past, the best way to control where web elements (pictures and text) appeared on your page was to put them in tables. However, table creation doesn’t give you too much control. Good news! Absolute positioning allows you to place web page elements exactly where you want them. You can also overlap, or layer, elements by using the Z-order setting. (See Figure 4-3.) Z-order refers to an object’s layer position in relation to the main layer. You can control an element’s Z-order by clicking on the Bring Forward or Send Backward button on the Positioning toolbar.

To create and place a watermark—a picture in the background—start by displaying the Positioning toolbar (choose View, Toolbars, Positioning). Place a picture on the web page and select it. On the Positioning toolbar, click on the Position Absolutely button, and drag the picture to where you want it to appear. If necessary, click on the Bring Forward or Send Backward buttons to place the picture on top of or underneath other web elements.

Be aware that an absolutely positioned element isn’t part of the “text stream.” That is to say, text won’t wrap around it, but instead will scroll right over the top or go behind, depending on the element’s Z-order or layer. Other caveats to keep in mind: Avoid using Dynamic HTML effects with positioning because you might get unexpected results. Also, site visitors’ screen resolution may affect how they see positioned elements, so preview them in your browser at different monitor resolutions.


4 - 13

b FrontPage components Concepts > Have you ever wanted to let visitors search your web pages or show people

rotating graphics, but you just didn’t know how to make it happen? Well with FrontPage components, you don’t have to be a programming guru. FrontPage components are “prefabricated” elements that you can easily add to your web pages without an in-depth knowledge of HTML or programming languages. FrontPage components include Search Forms, Office 2000 Web components, Confirmation Fields, a Banner Ad Manager, and others. Once they’re in your pages, you also have the flexibility to customize the components. To change the properties of a FrontPage component, right-click on it and choose its Properties option.

Components, formerly called WebBots, can be run when an author saves the page or when a visitor activates them. When you place the mouse pointer over some components, the mouse pointer changes to a little finger pointing down at a page. Note: The Hit Counter, Search Form, and Confirmation Field components require you to publish the page that contains them to your server with FrontPage Server Extensions before you can use them.

Banner Ad Manager The advertising you see at the top of web pages is known as a banner ad. FrontPage uses the Banner Ad Manager component to display a series of banner ads or pictures, each for a designated length of time. You can select the pictures, the sequence, the display time, and the transition effect. You can also create a hyperlink on the banner ad so that users can click on the picture and follow the hyperlink.

To use the Banner Ad Manager component in FrontPage, choose Insert, Component, Banner Ad Manager. The Banner Ad Manager Properties dialog box is displayed. (See Figure 4-4.) Use this dialog box to select and sequence pictures, define a hyperlink, select transition effects, and define other properties of the Banner Ad. To preview a Banner Ad, use FrontPage’s Preview tab, or choose File, Preview In Browser.

Figure 4-4: Settings for the Banner Ad Manager.


4 - 14

Task B-1: Adding a banner ad ü Before you begin: Multimediaweb is open.



2. Place the insertion point before the W in Welcome Press R Press t once

The banner belongs at the top of the page; let’s insert a new line for it. To insert a new line for the banner ad. To put the insertion point on the newly created line.

3. Choose _Insert_ _Component_ _Banner_Ad_Manager..._

To display the Banner Ad Manager dialog box. Use this dialog box to select pictures and other effects, such as transitions.

4. Change the Height value to 250

(These measurements are in pixels. Leave the Width setting as is.) Generally, you want the Banner Ad Manager to match the size of your largest picture.

5. Display the Transition Effect drop-down list Select a transition of your choice

You can select how the pictures transition from one to another.

6. In the Show Each Picture For (Seconds) text box, type 3

You want to display each picture long enough for visitors to really see it, but not so long that they lose interest.

7. Under Link To, click on Browse... Select catalog.htm Click on OK

Follow your instructor’s directions to locate the file.

When visitors click on the banner ad, they’ll be taken to the catalog page.

8. Under Pictures To Display, click on Add...

To select a picture. You’ll be adding three pictures total.

9. Follow your instructor’s directions to locate and insert the file monitor.gif

(Located in the multimediaweb’s Images folder.)

10. Add the following files: computer.gif conftable.jpg

Click on OK

(Both files are in the multimediaweb’s Images folder.)


4 - 15

11. Save the page Observe the Folder List

FrontPage adds the Java files fprotate.class and fprotatx.class to the list because they’re necessary to control the Banner Ad Manager component.

Practice Task 1. Preview the page in a

browser.

2. Click on a picture to go to catalog.htm.

3. Close the browser to return to FrontPage.

Hit counter Concepts > A hit counter keeps a running tab of the number of people who have visited the

web site. This information can be useful to both the viewer and the web creator. A viewer might be interested to know how many people who have similar interests have visited the web site. A web creator might want to know how many people visit the web in the average day, week, or month. The hit counter is usually inserted near the bottom of the home page, although you can place it anywhere on any page. When you create a hit counter, you can view only the text version of the counter in FrontPage. To view the graphical element of the hit counter, you’ll have to publish the page to your web server.

To insert the hit counter component, place the insertion point where you want the hit counter to be displayed. Choose Insert, Component, Hit Counter. Select a counter style and whether you want to reset the counter to 0 or fix the number of digits the counter displays. Then click on OK.

Search forms Adding a search form to your web lets visitors search for specific words within your web pages. Visitors to your web can look for information specific to a topic without having to search through the entire web. You can adjust the search form to include extra information about the results by using the Search Form Properties dialog box. To add a search form to a page, Choose Insert, Component, Search Form. Adjust the form properties and search result options and click on OK.

Date And Time The Date And Time component can display the date and time on your web pages. You can display either the date that the page was last edited, or the time that the page was last automatically updated. You can select the formats of your choice. To insert the Date And Time component, choose Insert, Date And Time.


4 - 16

Task B-2: Inserting the Date And Time component What you do Comments/Prompts


2. Scroll to view the bottom of the page

3. If necessary, in the Bottom Shared Border, place the insertion point to the right of the text “This Page Was Last Updated On:” Choose _Insert_ _Date_And_Time…_

4. Select a date format of your choice Click on OK

FrontPage inserts the Date And Time component that will be displayed in the Bottom Shared Border.

5. Save the page


4 - 17

c Component extras Concepts > When creating your web site, you can add little extras that make the site more

user-friendly and interesting. For example, you can add a Marquee componenta moving, repeating text messageto your web to display information in an exciting way.

Marquee Marquee text, or scrolling text, emphasizes your message by moving it in a straight line across the page. When used properly, scrolling text can be a very effective tool to call attention to an important message. However, the Marquee component should be used sparingly because it can clutter a web page. When you add a Marquee component to a web page, the text doesn’t scroll in FrontPage’s Normal view. To view the scrolling text, you’ll need to click on the Preview tab or preview the page in a browser. Choose Insert, Component, Marquee to add a scrolling text box to your web page.

Task C-1: Creating marquee text What you do Comments/Prompts

1. Display catalog.htm in Page view

2. Place the insertion point after the exclamation point in the heading “VOP Weekly Catalog Specials!” Add an extra blank line

To insert a space between the heading and the table.

3. Type Check out the bargains below. A 17” monitor for only $399! Select the text

Now we’ll turn this plain text into a marquee.

4. Choose _Insert_ _Component_ _Marquee…_

To display the Marquee Properties dialog box.

Students can also display the Marquee Properties dialog box first, and then type the text in the Text text box. It’s just a matter of preference.


4 - 18

5. Observe the dialog box Click on OK

The Text text box displays the text you typed and selected. You can adjust the Marquee component properties, such as which direction the text enters from, how fast it enters, and so on. To accept the text and add the Marquee component to the web page.

6. Click on the Preview tab The page continuously displays the scrolling text across the screen.

7. Switch to Normal view

8. Save the page

Practice Task

Edit the Marquee properties so the text slides onto the screen and stays.

(Under Repeat, uncheck Continuously.) The Slide option keeps the message on the screen once the animation is complete.

Hover buttons Concepts > Another component that can add spice to your web pages is the hover button. A

hover button is a button that, when you place the mouse pointer over it, somehow changes—its colors may change, it may have a glowing special effect, and so on. Choose Insert, Component, Hover Button to create a hover button. Label the button, add a link, select its color, background color, text, and size. In the Hover Button dialog box, select a different effect from the Effect drop-down list. You can even add sound and custom shapes by clicking on Custom and adding the necessary information.

Task C-2: Creating a hover button q Objective: To create a hover button that prompts visitors to place an order now. ü Before you begin: Catalog.htm is displayed in Page view with the Normal tab

selected. What you do Comments/Prompts

1. Place the insertion point after the Marquee component Press R

To create a new line for the hover button.

2. Choose _Insert_ _Component_ _Hover_Button…_

To display the Hover Button Properties dialog box.


4 - 19

3. In the Button Text text box, type Order now! Observe the remaining options

You could also change a button’s color (dark blue), its special effect (Glow), and so on. We’ll just accept these settings for now.

4. Next to the Link To text box, click on Browse To the far right of the URL drop-down list box, click on the Create A Page And Link To The New Page button

To display the Select Hover Button Hyperlink dialog box.

To display the New dialog box.

5. Select Normal Page, if necessary Click on OK twice

To accept the changes and to display the newly created page.

6. Type Order Now! Apply the Heading 1 style to the text Save the new page as order.htm

7. Choose _Window_ Observe the file list Choose _catalog.htm_ Save the page

Files that have been changed but not yet saved have an asterisk before the filename. To switch to the catalog page.

8. Preview catalog.htm in a browser

9. Place the mouse pointer over the hover button Click on the hover button

The hover button adds a glowing effect. To go to the Order page.

10. Close the browser

11. Close the web


4 - 20

d Adding advanced components and functions

The following new software features are discussed in this topic:

• Macros. • Visual Basic Editor. • Microsoft Script Editor.

Concepts > HTML, by itself, creates web pages as static as a sheet of paper with text on it. In the Web’s early days, that was acceptable, if not expected. However, current Web users are much more savvy. They expect more from a web page. FrontPage enables you to deliver such an experience by adding pre-programmed components, such as hover buttons and marquee text, to your pages.

But what if that still isn’t enough to attract visitors? No problem. In addition to its own components, sometimes called COMs, FrontPage supports a range of dynamic controls and programming elements that can be added to your webs, such as ActiveX, Java applets, and Plug-ins. Although these elements may seem daunting, don’t let that deter you. With a little investigation and practice, you can leverage these evolving technologies to make your own web site more useful.

ActiveX controls ActiveX controls are interactive objects that you can insert into a web page (or other non-web application) to quickly add specialized functions unavailable in HTML. These functions are fully supported by FrontPage. Over 1,000 ActiveX controls are currently available, covering a wide variety of functions. For example, you can use ActiveX controls to add animation sequences, credit card transactions, and spreadsheet calculations, among others.

To insert an ActiveX control into your page, you must have it stored on your computer. (You can find free and shareware ActiveX controls on the Web. Try http://www.zdnet.com/devhead/filters/activex/.) Then choose Insert, Advanced, ActiveX Control to display the Insert ActiveX Control dialog box. Select an ActiveX Control and click on OK. To adjust the control’s settings, just right-click on the control and select its properties option.

Java applets and plug-ins FrontPage supports Java applets and plug-ins. Java applets and plug-ins are similar to ActiveX controls. They are software components that provide your web pages with dynamic features. A Java applet is a "mini-application" embedded in a web page’s HTML. The applet is run within the context of a larger application, such as a Web browser. Rather than downloading an entire program before running it, the browser interprets and runs the Java applet on the fly. Consider Java applets as flexible “just-in-time” tools. For instance, your browser won’t run Java applet stock-ticker until it loads the page that contains the applet. When you leave that page, the ticker will stop running.

Plug-ins, in contrast, are separate programs that run outside the browser.. Generally speaking, plug-ins are downloaded and installed on your computer before they are ever needed. When you access a page or file that requires the plug-in, it launches automatically. Because plug-ins tend to be larger and less flexible than Java applets, they seem to be falling out of favor.

what’s new

http://www.zdnet.com/devhead/filters/activex/.)


4 - 21

Inserting a Java applet or plug-in is similar to inserting an ActiveX control. To insert a Java applet, choose Insert, Advanced, Java Applet to display the Java Applet Properties dialog box. To insert a plug-in, choose Insert, Advanced, Plug-In to display the Plug-In Properties dialog box.

Authoring: Macros, JScript, VBScript, and Visual Basic Using the Microsoft Script Editor, you can create or add macros, JScript, and VBScript to a web page. JScript is Microsoft’s version of JavaScript, and VBScript (short for Visual Basic Scripting Edition) is a simpler version of Microsoft’s Visual Basic programming language. These advanced languages can provide additional flexibility to your FrontPage site. The only limitation is your knowledge of the programming languages.

To create a macro, choose Tools, Macro, Macros. Name the macro and click on Create to display the Visual Basic Editor. To create a script, choose Tools, Macro, Microsoft Script Editor to display the Microsoft Development Environment. For more information on JScript or VBScript, check out the Microsoft Script Editor’s Help system.

Note: For those of you experienced in Microsoft’s Visual Basic (VB) programming language, FrontPage also provides access to the Visual Basic Editor (choose Tools, Macro, Visual Basic Editor). Here you can edit and write VB programming code.

Task D-1: Discussing ActiveX and other controls What you do Comments/Prompts

1. Why is a web page considered static?

HTML, by itself, doesn’t include any dynamic elements.

2. How can you make a web page dynamic?

By using a dynamic component, such as an ActiveX control, JScript, or FrontPage component.

3. What’s an ActiveX control? A dynamic component that can be inserted in a page to improve functionality. Some examples include animation, a counter, and a calculator.

4. Why would you want to use an ActiveX control in a web page?

To support the message and benefit visitors. For example, a finance company might insert an mortgage interest calculator on their web site.

5. Besides ActiveX controls, what other components could you use to make your web page dynamic?

FrontPage components, Java applets, plug-ins, JScripts, or VBScripts.

6. What knowledge or skills do you need to master before using an ActiveX or other control?

You need to be able to find one of the thousands of components available on the World Wide Web, know how to download a file, and install the component onto your web site.


4 - 22

Task D-2: Inserting and adjusting an ActiveX control q Objective: To insert an ActiveX control for an Office spreadsheet and adjust it.


1. Create a new web page

2. Choose _Insert_ _Advanced_ _ActiveX_Control…_

To display the Insert ActiveX Control dialog box.

3. Observe the available controls Select Microsoft Office Spreadsheet 9.0 Click on OK

These controls were installed with FrontPage and Microsoft Office. The spreadsheet component is embedded in the page. (This same spreadsheet component could be inserted by choosing Insert, Component, Office Spreadsheet. However, you wouldn’t see the other available ActiveX components.)

4. In the new page, select the spreadsheet component

5. Using the selection handles, shrink the spreadsheet so that columns A-E and rows 1-5 are visible

6. Save the page as spread.htm Preview it in the browser

The spreadsheet component is left-aligned.

M If Office Tools weren’t installed, this Microsoft Office Spreadsheet won’t be available.

Suggest that students change the file’s page title to My Spreadsheet while in the Save As dialog box.


4 - 23

7. Observe the toolbar directly above the spreadsheet component Use ScreenTips to identify the buttons

It looks similar to an Excel toolbar.

Leave the browser open.

Using the ActiveX control Concepts > For most ActiveX controls, in addition to any functions on the screen, there’s

usually more to them than meets the eye. Oftentimes, by right-clicking on an ActiveX control, you’ll see options for adjusting its properties.

Task D-3: Using the control’s Property Toolbox in a browser q Objective: To explore the Microsoft Office Spreadsheet control’s properties. ü Before you begin: Spread.htm is displayed in the browser.


1. Select cell A1 Type 456 In cell A2, type 123

2. Select cell A3 Click on the spreadsheet’s AutoSum button Press R

The sum of A1 and A2 (579) is displayed in cell A3.

3. On the component’s toolbar, click on the Property Toolbox button

To display the Spreadsheet Property Toolbox dialog box.


4 - 24

4. If necessary, click on the Format bar to expand the option list Observe the options

The ActiveX control provides you with many Excel-like formatting features, such as adjusting column and row size, and alignment and number formats. You can even hide the component’s toolbar, gridlines, and so on. Click on the dark gray bars to show or hide options.

5. Select cell A3 In the Spreadsheet Property Toolbox, change the Number Format to Currency Observe cell A3

The Currency format has been applied to the total.

Practice Task

1. With Cell A3 still selected, change the Text Format to Bold, and the Font Size to 14.

2. Close the browser.

3. Close the web.

To save the data entered in a web component spreadsheet, students will have to copy the cells they want and paste them into another application.


4 - 25

( Practice Unit for Lesson 4 In this activity, you’ll use multimedia elements and FrontPage components to enhance a web page.

1. Open the practicemedia web and display the Home Page. 2. Insert a Marquee component above the heading “Buy a Brick!” In the

marquee, add the following text: These fine folks have already bought their bricks: Bill Sandler, the Garcia Family, Mrs.

Anthony’s 3rd grade class… 3. Below the last paragraph of text, insert a hover button labeled Click here to

order! Set the button width to 150, and link the button to a new page. 4. On the new page, type Order Your Brick! and apply the Heading 1 style to the

text. Save the page as order.htm 5. Use the picture lightbrick.gif (in the web’s Images folder) as the Home Page’s

background. 6. Use applause.wav as the Home Page’s background sound. (Be sure to

deselect the Forever option next to loop!) 7. Save the page and preview it in a browser. 8. Test the hover button. 9. Close the browser. Close the web.

FrontPage 2000: Advanced

4 - 26

) Wrap-up for Lesson 4

a Why would you want to make a picture’s background transparent? Often GIFs have an unnecessary background color that doesn’t enhance the picture. In fact, that background color may add to the GIF’s file size.

What should you avoid if you decide to use a background image? Possible answers may include: Dark colors combined with dark colored text; distracting pictures that overshadow the site content; large files that require users to wait for the background to download; and backgrounds that clash with your pictures.

b What does the Banner Ad Manager component do? FrontPage’s Banner Ad Manager component can display a series of banner ads or pictures, each for a designated length of time. You can select the pictures, the sequence, the display time, and the transition effect. You can also create a hyperlink on the banner ad so that users can click on the picture and follow the hyperlink.

c When might you want to include a Marquee component on your web pages? Marquee text calls attention to important messages, emphasizing the message by moving it in a straight line across the page. Marquee text should be used sparingly because it can clutter a web page and confuse viewers. When used properly, scrolling text can be a very effective tool to call attention to important text.

d Name some benefits of using advanced components like ActiveX controls, Java applets, and scripts. These interactive features add specialized functions that may be unavailable using plain HTML code. Because these components are generally separate from FrontPage, you have a much wider range of tools to choose from. Additionally, using these components offers you greater flexibility in how visitors can interact with your pages, since you can customize your pages more easily.

Lesson 4: Adding media and functionality to web pages

4 - 27

Documents

Adding media and functionality to web pages - Ashbury … Advanced... · Adding media and functionality to web pages ... You’ll also insert the Date and Time component. c Create