Chapter 10

Sprucing Up Your Pages

• Setting Page Properties
• Setting General Page Properties
• Setting Background Properties
• Setting Page Margins
• Setting Custom Page Properties
• Creating a Style Sheet
• Images-To Be or Not To Be?
• Using Images in Your Pages
• Choosing Between GIF and JPEG Images
• Inserting an Image on Your Page
• Setting Image Properties
• Setting General Image Properties
• Inserting Videos and Setting Video Properties
• Setting Image Appearance Properties
• Adding Extended Attributes to Images
• Using Transparent Images
• Removing Image Transparency
• Adding Images and Animation to Pages
• Using Background Sounds
• Adding a Background Sound
• Linking to Large Multimedia Files
• Adding a Marquee to Your Pages
• Inserting the Marquee
• Setting Marquee Properties
• Configuring an Image Editor
• Do's and Don'ts
• Workshop Wrap-Up
  • Next Steps
  • Q&A

It's estimated that more than 80 percent of the people who browse the Internet are using graphical browsers. When I first started browsing the Internet, the Web didn't offer too much in the way of graphics. As a person who enjoys the visual side of electronic media and communications, I quickly lost interest and didn't get back on the Web for quite a while.

Graphics are running rampant on the Web now, and people are taking notice. We're able to design past that standard WWW-gray background color. We can use tiled background images, specify custom colors, use images for links, and even place animations in the pages. The Web is becoming the way I like it! Obviously, a lot of us out here enjoy a graphical environment. Give us flash and give us style, but do it in a manner that doesn't tie up our modems too long or distract us, okay?

Some people have the knack for using images effectively, and others don't. This chapter gives you some tips on color combinations and when to use images in your pages. You'll soon be building pages like a pro.

Setting Page Properties

It's always a good idea to maintain some consistency on your site. If you use different color combinations on your pages, users might think that they have landed in a different site on the Web. Even if you don't use images on your pages, you can use custom background colors or images and custom text and link colors to give your pages a unique and consistent appearance. The easiest way to maintain this consistency is to create a style sheet.

Any page can be used as a style sheet for another page, but it is best to use a page that is easily identifiable as a style sheet. On this page, you specify the color combinations you want to use in all the pages in your web or in a section of your web.

Keep in mind that people expect certain colors to represent certain things. The standards are blue for links, purple for visited links, and red for active links. It's a good idea to stay within these color guidelines, but there's nothing wrong with using colors that complement your background and text colors.

Setting General Page Properties

You use the General tab in the Page Properties dialog box to specify a title for your Web page. In addition, you can assign a base URL to the page, designate a default target frame, assign a background sound, and specify HTML encoding for the page.

The Base Location, which is optional, is used to convert any relative URLs that appear on the page into absolute URLs. You can enter the absolute URL of the page, using the server name on which it resides (such as http://yourserver.com/current-page.htm), or you can enter the name of the server on which it resides, followed by a trailing slash (such as http://yourserver.com/).

In the HTML Encoding section, you specify the HTML characters that your page will use. You have two choices in the Page Properties dialog box: US/Western European and Multilingual (UTF-8).

To complete the options in the General tab of the Page Properties dialog box, do the following:

1. With your page open in the FrontPage Editor, choose File | Page Properties. The Page Properties dialog box appears open to the General tab, as shown in Figure 10.1.
   Figure 10.1 : Use the General tab in the Page Properties dialog box to assign a page title, base location URL, default target frame, background sound, and HTML encoding.

2. To change the title of your page, enter the new title in the Title field.
3. To specify a base location for your page, enter the URL in the Base Location field.
4. To specify the default target frame for a frameset, enter the frame name in the Default Target Frame field.
5. To select a background sound for the page, see "Adding a Background Sound," later in this chapter.
6. To specify HTML encoding, choose between US/Western European or Multilingual (UTF-8) in the "For displaying this page" field and the "For saving this page" field.
7. To add extended attributes to the page, click the Extended button. Extended attributes apply to the <BODY> tag.
8. Click OK to exit the Page Properties dialog box or click another tab to set more page properties.

Setting Background Properties

You use the Background tab in the Page Properties dialog box to specify the background and text colors that you want to use in your page. Background images can be selected from the current FrontPage web, from a file on your local or network hard drive, from a page or file on the World Wide Web, or from the FrontPage clip art folder. If you want to use something other than the default background, text, and link colors, you can choose one of 16 predefined colors or create your own.

To specify the background properties for your page, follow these steps:

1. From the Page Properties dialog box, click the Background tab, shown in Figure 10.2.
   Figure 10.2 : Use the Background tab in the Page Properties dialog box to choose your background images and colors and your text and link colors.

2. The Specify Background and Colors radio button is selected by default. If you want your pages to use the settings from another page, select the Get Background and Colors from Page radio button and skip to step 9.
3. To specify a background image for your page, check the Background Image checkbox. Click the Browse button to locate a background image. The Select Background Image dialog box appears.
   To choose a background image from your current web, use the Current FrontPage Web tab (default). Locate the image in your current web and click OK. You return to the Page Properties dialog box.
   To choose an image from your local or network hard drive, click the Other Location tab. Select the From File radio button. Click the Browse button. The Select Background Image dialog box appears. Locate the image on your local or network hard drive and click Open. You return to the Page Properties dialog box.
   To insert an image from the World Wide Web, click the Other Location tab. Select the From Location radio button. Enter the URL of the graphic you want to insert and choose OK. You return to the Page Properties dialog box.
   To insert a background image from your clip art folder, select the Clip Art tab. Choose a Category for your clip art (choices are Animations, Backgrounds, Bullets, Buttons, Icons, Lines, and Logos). Select the image from the Contents display and choose OK. You return to the Page Properties dialog box.
4. To make the background image a watermark (stationery background), check the Watermark checkbox.
5. To specify a background color other than white, choose a background color from the Background drop-down menu. Choose Default to use the default WWW gray background. You can also choose one of 16 predefined colors or select Custom to create a background color using a color formula.
6. To choose a text color other than black (default), choose or create a new color from the Text drop-down menu.
7. To choose a link color other than blue (default), choose or create a new color from the Hyperlink drop-down menu.
8. To choose a visited link color other than dark purple (default), choose or create a new color from the Visited Hyperlink drop-down menu.
9. To choose an active link color other than red (default), choose or create a new color from the Active Hyperlink drop-down menu.
10. To use the background and colors settings from another page, select the Get Background and Colors from Page radio button. Use the Browse button to select an image from your current web. Click OK to return to the Page Properties dialog box.
11. Click OK to exit the Page Properties dialog box, or select another tab to set more page properties.

Setting Page Margins

By default, the default top margin is located at 16 pixels, and the default left margin is located at 12 pixels. Sometimes, you want to change this. For example, if you create navigation buttons that are located in a narrow frame within a frameset, you probably don't want much wasted space. In that case, you can set the top and left margins at 0, which places the graphics at the extreme upper-left corner of the page. In other cases, where you want to create more white space on a page, you can increase the values of the top and left margin settings. These settings are adjusted by using the Margins tab in the Page Properties dialog box, which is shown in Figure 10.3.

Figure 10.3 : Use the Margins tab to adjust the top and left margins of the page.

To specify the page margins, follow these steps:

1. To specify a top margin, check the Specify Top Margin checkbox. Enter the top coordinate in the Pixels field.
2. To specify a left margin, check the Specify Left Margin checkbox. Enter the left coordinate in the Pixels field.
3. Choose OK to return to the Page Properties dialog box or select another tab to set more page properties.

Setting Custom Page Properties

You use the Custom tab, shown in Figure 10.4, to enter system and user META variables to your pages. META variables describe information about the document.

Figure 10.4 : Use the Custom tab to assign system and user META variables to your page.

There are two attributes for the META tag. System variables use the HTTP-EQUIV tag and generate special headers that are sent by the server to activate features in the client. You can use this tag to tell when a document expires or how often a document should reload when using client-pull to animate a document. User variables use the NAME attribute. You can use these variables to designate the author of a page or search key terms for Web spiders and robots. For more information about the META tag, refer to the Meta-Meta Page at the Web Developer's Virtual Library. You can find it at the following URL:

http://www.stars.com/Location/Meta/

To set Custom page properties, follow these steps:

1. To add system variables to your page (HTTP-EQUIV tag), use the System Variables (HTTP-EQUIV) section. The default content type is text/html; charset=ISO-8859-1.
   To add a system variable, click the Add button. The System Meta Variable (HTTP-EQUIV) dialog box appears. Add the META variable name in the Name field and its value (if applicable) in the Value field. Click OK to return to the Page Properties dialog box.
   To modify an existing system variable, click the Modify button. The System Meta Variable (HTTP-EQUIV) dialog box appears with the current settings displayed. Edit the settings and click OK to return to the Page Properties dialog box.
   To remove a system variable, highlight the item you want to remove and click the Remove button.
2. To specify user variables, use the User Variables section. There is one default user variable in the list, which defines Microsoft FrontPage 2.0 as your content generator.
   To add a user variable, click the Add button. The User Meta Variable dialog box appears. Add the user META variable name in the Name field and its value (if applicable) in the Value field. Click OK to return to the Page Properties dialog box.
   To modify an existing user variable, click the Modify button. (You cannot modify the default entry that designates Microsoft FrontPage 2.0 as your content generator.) The User Meta Variable dialog box appears with the current settings displayed. Edit the settings and click OK to return to the Page Properties dialog box.
   To remove a user variable, highlight the item you want to remove and click the Remove button.
3. Click OK to exit the Page Properties dialog box, or select another tab to specify more page properties.

Creating a Style Sheet

Now you'll combine a little bit of what you've learned so far to create a style sheet. Use some of the basic settings to create this style sheet. Here are the steps:

1. From the FrontPage Explorer, use the File | New FrontPage Web command to create an empty web in which you can practice. Then choose Tools | Show FrontPage Editor or use the Show FrontPage Editor button to open the FrontPage Editor.
2. From the FrontPage Editor, choose the New button on the Standard toolbar to create a new page based on the Normal page template. The page opens in the FrontPage Editor.
3. Choose File | Page Properties. The Page Properties dialog box appears, open to the General tab.
4. To change the title of your page, enter Web Style Sheet in the Title field.
5. Click the Background tab.
6. To specify a background image for your page, check the Background Image checkbox. Click the Browse button. The Select Background Image dialog box appears.
7. To insert a background image from your clip art folder, select the Clip Art tab. Choose the Backgrounds category. Select the Light Grey Brick.gif image from the Contents display and choose OK. You return to the Page Properties dialog box.
8. To make the background image a watermark (stationery background), check the Watermark checkbox.
9. To choose a text color other than black (default), choose or create a new color from the Text drop-down menu.
10. Click OK to exit the Page Properties dialog box. The background image appears on your page.
11. Choose File | Save. You already entered the page title in step 2. Based on that page title, the page is assigned a URL of webstyle.htm. Choose OK to save the page to your web. It is saved to the home directory in the web.
12. When FrontPage asks if you want to save the image to your web, choose Yes.
13. From the FrontPage Explorer, move the web style sheet from the home directory into the _private directory. Move the image into your images directory.

Images-To Be or Not To Be?

As mentioned at the beginning of this chapter, 80 percent of the people who use the Internet use graphical browsers. This percentage should increase in the near future; however, that doesn't necessarily mean that all the people who use graphical browsers actually view the graphics. Some people don't like the added download time and turn the feature off if they can.

How do you keep these people happy? One way is to keep your graphics small. It doesn't take a person with a 28.8 modem very long to download that 300KB header graphic you have, but think about the user who is using a 2400 or 9600 bps modem. It takes a long time to download a header graphic of that size on a slower modem.

Keep the file size down, either in dimension or through JPEG compression. You can also decrease the file size by reducing the number of colors in an image. Even though GIF files can contain as many as 256 colors, you can create good artwork with as few as 16 colors. Ulead makes a great utility called the PhotoImpact GIF/JPEG Smart Saver, which is shown in Figure 10.5. It lets you view the original image beside a preview while you adjust palettes for GIFs or compression for JPEGs. This allows you to get the best quality image at the smallest file size possible. Check out this utility at Ulead's Web site:

http://www.ulead.com

Figure 10.5 : Ulead's PhotoImpact GIF/JPEG Smart Saver allows you to preview your Web images while you adjust settings to achieve the smallest file size possible.

Whether you use GIF or JPEG images (you'll learn about the differences between them in "Choosing Between GIF and JPEG Images," later in this chapter), try to limit the total page size (including the images) to 50KB or less. If your images exceed that size, make small thumbnail versions of the images to use as previews. The user can click the thumbnails to view or download the images, if desired. Be sure to note the larger graphics' file size (in kilobytes) somewhere near the link so that the user can decide whether the download time is too long.

Using Images in Your Pages

Web pages usually use two types of images: GIF and JPEG. FrontPage can also import several other types of common image formats. If any of these other file types are imported into your web and placed on your pages, they are automatically converted to either GIF or JPEG format. When FrontPage sees an image that uses 256 or fewer colors, it converts the file to GIF format. Images that use more than 256 colors are converted to JPEG.

FrontPage can convert several image formats:

Choosing Between GIF and JPEG Images

Most browsers support GIF format, and an increasing number support JPEG format as well. GIF images offer some advantages over JPEG, which is one of the reasons that they are more popular. For example, here are some of the things you can do with GIF images:

• GIF images can be interlaced-rendered on your screen in progressive steps. The image appears blocky at first, but at least something appears on the page fairly quickly. As the image is downloaded to a local computer, the blockiness gives way to a clear image.
• You can designate transparent areas in a GIF image, giving the appearance that the image is floating on the background of your page.
• GIF images can be animated. After creating a series of images that differ slightly, as shown in Figure 10.6, you can assemble them into one file with a GIF animation utility. You insert an animated GIF file the same way you do an ordinary GIF. Only browsers that support animated GIFs can display the animation. Browsers that don't support animated GIFs display the first frame of the animation.
  Figure 10.6 : You can create several frames that differ slightly and assemble them with a GIF animation utility to create an animated GIF file.

• GIF images are best used for grayscale photographs, cartoon-type images, small icons, buttons, bars, dividers and bullets, and small- to medium-sized header graphics, providing that the file size doesn't get too large.

If GIF images can do all that great stuff, why do you need JPEG images? Consider how many colors can exist in a photograph. The human eye can see approximately 11 or 12 million colors, and a computer can display even more-up to 16 million different colors. Photographs can contain millions of colors as well. When you reduce this monstrous amount of colors to 256 colors, you don't get quite the same effect. Banding, loss of subtlety and detail, and objectionable dithering can occur.

With JPEG images, the many colors have a fighting chance. By using various compression schemes, JPEG images can reduce the size of a true-color image substantially. In most cases, a true-color JPEG image that uses good- to high-quality compression is smaller than a 256-color image of the same dimension, yet it contains more colors. Colors can be reduced by applying image compression, but you won't see a lot of difference if you use compression ratios wisely. When allowed to specify compression levels in percentages, I usually use 60 to 85 percent quality (depending on the richness of the image), with 100 percent quality being best. When given a range of choices, such as low, good, and high, I never choose less than good. Too much deterioration occurs when compression ratios are set too low.

Inserting an Image on Your Page

You can insert graphics files into your pages from your currently open web, from a drive on your local computer, from a network drive, from a location on the World Wide Web, or from the FrontPage clip art folder.

To insert an image on your page, perform the following steps:

1. Move the insertion point to the place where you want to insert the image.
2. Choose Insert | Image. The Image dialog box appears, open to the Current FrontPage Web tab, shown in Figure 10.7, or the last tab you used to insert an image.
   Figure 10.7 : Use the Image dialog box to insert an image on your page.

   
   To insert an image from the current web, select the Current FrontPage Web tab. Locate the image in your current web and click OK. The image appears on your page.
   To insert an image from a location on your local or network hard drive, click the Other Location tab and select the From File radio button. Click the Browse button to locate the directory and filename that you want to insert and click Open. The image appears on your page.
   To insert an image from the World Wide Web, select the Other Location tab and choose the From Location radio button. Enter the absolute URL of the image you want to insert and click OK.
   To insert an image from the clip art folder, select the Clip Art tab. Select the image Category (default choices are Animations, Backgrounds, Bullets, Buttons, Icons, Lines, and Logos), and choose an image from the Contents folder. Click OK. The image appears on your page.

Setting Image Properties

After you insert an image on your page, you can specify several different properties for the image. You use the Image Properties dialog box to change the image type, specify alternative representations, assign video properties, and change the appearance of the image.

Open the Image Properties dialog box, using one of the following methods:

• Click the image you want to change and choose Edit | Image Properties.
• Click the image you want to change and press Alt+Enter.
• Left-click the image you want to change. Then, right-click the mouse and choose Image Properties from the pop-up menu.

Setting General Image Properties

The General tab in the Image Properties dialog box is shown in Figure 10.8. It is used to change the image type, specify alternative low-resolution and text representations for the image, and specify a default link or target frame when the image is used as a navigation button.

Figure 10.8 : Use the General tab in the Image Properties dialog box to alter the image type, specify alternative representations, and designate a link or target frame.

To set general image properties, follow these steps:

1. From the Image Properties dialog box, select the General tab (default).
2. To change the image from what is currently on the page, enter the new image name in the Image Source field or use the Browse button to select another image from the Current FrontPage Web, Other Location, or Clip Art. After you select your image, choose OK to return to the Image Properties dialog box.
3. To edit the current image, click the Edit button. Your image editor opens with the current image displayed.
4. By default, the settings for the current image are displayed in the Image Properties dialog box.
   To convert the image from JPEG to GIF, select the GIF radio button. If you want the GIF image to be interlaced (progressively rendered on the page while the user downloads it), select the Interlaced button. To add transparency to the image, see "Using Transparent Images," later in this chapter.
   To convert the image from GIF to JPEG, select the JPEG radio button. Set the compression quality in the Quality field.
5. To specify an alternative low-resolution image for the current image, enter the relative URL in the Low-Res field or use the Low-Res Browse button to choose an image from the Current FrontPage Web, Other Location, or Clip Art. Click OK to return to the Image Properties dialog box.
6. To specify an alternative text representation, enter the text you want to display in the Text field. This text displays in place of the image when users have graphics turned off in their browsers.
7. If you are using the image as a navigation button, enter the relative URL of the page in your current web or the absolute URL of a page on the World Wide Web in the Location field of the Default Hyperlink section, or use the Default Hyperlink Browse button to create a link to Open Pages, Current FrontPage Web, World Wide Web, or a New Page. For more information on this, see Chapter 7 "Getting from Here to There."
8. To specify a target frame for the image link, enter the name of the frame in the Target Frame field. For more information, see Chapter 13, "Frames-Pages with Split Personalities."
9. To add extended attributes to the image, click the Extended button. Refer to "Adding Extended Attributes to Images," later in this chapter.
10. Click OK to exit the Image Properties dialog box, or choose another tab to add more image properties.

Inserting Videos and Setting Video Properties

You insert videos with the Insert | Video command. After you insert the video on your page, set its properties through the Image Properties dialog box. The CD-ROM furnished with this book includes an AVI file for you to practice with.

To insert a video on your page, follow these steps:

1. Position the insertion point on your page where you want to insert the video.
2. From the FrontPage Editor, choose Insert | Video. The Video dialog box, shown in Figure 10.9, appears. It opens to the Current FrontPage Web tab or the tab that you last used to insert a video.
   Figure 10.9 : Use the Video dialog box to choose a video file to insert in your page.

3. To insert a video from your current web, select the Current FrontPage Web tab. Locate the video file (.avi extension) that you want to insert on your page and click OK. The video appears on your page.
   To insert a video from a local or network drive, click the Other Location tab and select the From File radio button. Use the Browse button to locate the twirl.avi file on the CD-ROM accompanying this book. Select the file and choose Open. The video appears on your page.
   To insert a video from the World Wide Web, click the Other Location tab and select the From Location radio button. Enter the URL of the video you want to insert and choose OK. The video appears on your page.

By default, the video plays once as soon as the video is downloaded to the user's computer. You can adjust the settings of the video from the Image Properties dialog box. To set video properties, follow these steps:

1. From the Image Properties dialog box, select the Video tab, shown in Figure 10.10.
   Figure 10.10 : Set the video properties with the Video tab in the Image Properties dialog box.

2. If you prefer, you can also insert a video from the Image Properties dialog box. In the Video Source field, enter the relative URL of the video file in your web, or use the Browse button to insert a video file from your Current FrontPage Web or Other Location. Click OK to return to the Image Properties dialog box.
3. To display the video controls beneath the video on your page, check the Show Controls in Browser button. This allows the user to start and stop the video when he or she chooses.
4. Use the Repeat section to specify how many times you want the video file to play.
   To play the video once (default), enter 1 in the Loop field.
   To play the video more than once, enter the number of times you want the video to play in the Loop field. Check the Forever checkbox if you want the video to play indefinitely.
5. By default, there is no delay between each successive play of the video. If you want to add a delay between each time the video plays, enter the number of milliseconds for the delay in the Loop Delay field. You do not need an entry here if you play the video once.
6. Choose how you want the video to start. If you want the video to start as soon as the page opens, check On File Open. If you want the video to start when the user clicks the mouse, choose On Mouse Over.
7. Click OK to exit the Image Properties dialog box or choose another tab to set more image properties.

Setting Image Appearance Properties

You use the Appearance tab in the Image Properties dialog box (shown in Figure 10.11) to specify image alignment, border thickness, horizontal and vertical spacing, and image size.

Figure 10.11 : Use the Appearance tab to set image alignment, border thickness, horizontal and vertical spacing, and alternate display size.

To change video appearance, perform the following steps:

1. From the Image Properties dialog box, select the Appearance tab.
2. From the Alignment drop-down menu in the Layout section, choose one of the following options. Examples of alignment types are shown in Figure 10.12:
   Figure 10.12 : Examples of image alignment types.
   • Bottom. Aligns the bottom of the image with the text.
   • Middle. Aligns the middle of the image with the text.
   • Top. Aligns the top of the image with the text.
   • Absbottom. Aligns the bottom of the image with the bottom of the current line.
   • Absmiddle. Aligns the middle of the image to the middle point of the top and bottom text in the line.
   • Texttop. Aligns the top of the image with the top of the tallest text in the line.
   • Baseline. Aligns the bottom of the image with the baseline of the current text line.
   • Left. Aligns the image to the left of the text. Good for wrapping text around an image.
   • Right. Aligns the image to the right of the text. Another choice for wrapping text around an image.
3. In the Border Thickness field, enter a value, in number of pixels, for how wide you want a border to be. This draws a solid border around the image.
4. Select values for Horizontal Spacing and Vertical Spacing. These are Netscape enhancements that set the amount of spacing between the nearest text or image on the line above or below the current line. Enter the value, in pixels, in either or both of the Horizontal Spacing or Vertical Spacing fields.
5. By default, the image displays in the exact size of the image. You can stretch the image to fit a larger or smaller area, if you desire. To do so, check the Specify Size checkbox. Enter the width in the Width field, and choose whether the entry represents a width in pixels or percent of screen. Enter the height in the Height field, and choose whether the entry represents a height in pixels or percent of screen.
6. Choose OK to exit the Image Properties dialog box, or select another tab to set more image properties.

Adding Extended Attributes to Images

As with other tags, FrontPage offers the capability to add extended attributes to the IMG tag through the General tab in the Image Properties dialog box.

To add extended attributes to an image, follow these steps:

1. From the Image Properties dialog box, choose the General tab.
2. Click the Extended button. The Extended Attributes dialog box appears.
3. To add an extended attribute, click the Add button. The Name/Value Pair dialog box appears. Enter the attribute name in the Name field and its value (if applicable) in the Value field. Choose OK to exit the Name/Value Pair dialog box. To add another attribute, click the Add button again.
4. To modify an extended attribute, highlight the attribute you want to change and click the Modify button. The Name/Value Pair dialog box appears. Enter the new attribute name in the Name field and its value (if applicable) in the Value field. Click OK to apply the new settings and return to the Extended Attributes dialog box.
5. To remove an extended attribute, highlight the attribute you want to remove and click the Remove button. The attribute is removed from the list.
6. Click OK to exit the Extended Attributes and Image Properties dialog boxes.

Using Transparent Images

When you use GIF images, you have the opportunity to make one of the colors in the image transparent. The term transparent is a bit deceiving because the color you pick doesn't really go away-it's just hidden so that the page background can show through. This option makes the GIF image look like it's floating on the page.

Only one color in the image can be transparent. If you select a new color, the previous transparent color returns to its opaque value. You can choose a transparent color with four steps:

1. Select the image that you want to change.
2. Click the Make Transparent button on the Image toolbar.
3. Place the pointer inside the image. It becomes a Make Transparent pointer. Position the pointer over the color you want to make transparent.
4. Click the left mouse button. The color you click turns transparent.

Removing Image Transparency

As mentioned, when you choose a new transparent color, the previous one becomes opaque again and returns to its original color. However, you might want to return a transparent color to its original color and not have any transparent area in your image.

You use either the Make Transparent Pointer or the Image Properties dialog box to make a color non-transparent. A description of each method follows.

To make a color in an image non-transparent using the Make Transparent Pointer, follow these four steps:

1. Select the image that you want to change.
2. Click the Make Transparent button.
3. Place the pointer inside the image. Position it over a transparent area.
4. Click the left mouse button. The transparent color returns to its original color.

To make a color in an image non-transparent using the Image Properties dialog box, follow these four steps:

1. Select the image that you want to change.
2. Open the Image Properties dialog box.
3. In the GIF section of the Image Properties dialog box, uncheck the Transparent checkbox.
4. Click OK to exit the Image Properties dialog box. The transparent color returns to its original color.

Adding Images and Animation to Pages

Now it's time for some fun. You will take some of what you have learned and place some images and animations on your pages. Earlier in this chapter, you created a style sheet that used a grey brick background. You use that style sheet to create this page. Additional images and animations are added to the page.

1. From the FrontPage Editor, choose File | New. Create a new page based on the Normal template.
2. Choose File | Page Properties. The Page Properties dialog box appears.
3. Click the Background tab. Select the Get Background and Colors from Page radio button.
4. Click the Browse button. The Current Web dialog box appears. Locate the webstyle.htm page in your _private directory. Highlight the file and choose OK, or double-click the filename.
5. Choose OK again to exit the Page Properties dialog box and return to the FrontPage Editor. The background appears on your page.
6. Choose Insert | Image. The Image dialog box appears.
7. Select the Other Location tab, and choose the From File radio button.
8. Click the Browse button and locate brikwall.gif on the CD-ROM accompanying this book. Highlight the file and choose Open. The image appears on your page, as shown in Figure 10.13. Center the image with the Center button on the Format toolbar.
   Figure 10.13 : A home page graphic is inserted in your page.

9. Click to select the image. From the Image toolbar, select the Make Transparent pointer. Click the white background in the image to make it transparent. The image now appears to be floating on your page.
10. Position the insertion point at the right side of the home page graphic. Choose Insert | Video. The Video dialog box appears.
11. Choose the Other Location tab and select the From File radio button. Use the Browse button to locate twirl.avi on the CD-ROM accompanying this book and click Open. The AVI file appears on your page.
12. Right-click the video and choose Image Properties (Alt+Enter) from the pop-up menu. The Image Properties dialog box appears, opened to the Video tab. In the Repeat field, check Forever. Then, choose OK to exit the Image Properties dialog box.
13. Press Enter. The insertion point moves to the center of the next line.
14. Choose Insert | Image. The Image dialog box appears. Use the From File option in the Other Location tab to select spy.gif from the CD-ROM accompanying this book. Highlight the file and choose Open. The image appears on your page. This is an animated GIF that already has transparency added to it. It looks as though eyes are peeking at you through a hole in the brick wall. At this point, your page should look like Figure 10.14.
    Figure 10.14 : A transparent GIF, AVI file, and animated GIF are added to your page.

15. Choose File | Save (Ctrl+S) or click the Save button on the Standard toolbar. The Save As dialog box appears.
16. Assign the page a title of The Brick Wall Home Page. Save the file as index.htm. Choose OK to save the page.
17. When FrontPage asks if you want to save the images to your web, answer Yes or Yes to All.
18. Choose File | Preview in Browser. View the page in a browser that supports animated GIFs, AVI files, or both. You'll see your page in action!

Using Background Sounds

FrontPage makes it very easy to attach a background sound to your pages so that a sound file plays when the page opens. You can do this by using the Insert | Background Sound command or from the General tab of the Page Properties dialog box. FrontPage supports WAV sounds (.wav extension), MIDI files (.mid extension), AIFF sounds (.aif, .aifc, and .aiff extensions), and AU sounds (.au and .snd extensions). The most widely used sound formats are .WAV and MIDI.

MIDI files, which contain note and instrument data for MIDI-compatible instruments and sound cards, are generally much smaller that WAV files. The disadvantage to using MIDI files is that they can sound quite different, depending on the instrument or sound card that the user has.

WAV files are digital recordings of sound or music. The advantage to using them is that the file sounds the same from system to system. However, file sizes can become quite large. Many sound editing programs offer ways to compress WAV files without too much loss in quality.

Adding a Background Sound

The Brick Wall Home Page needs some spicing up. A MIDI file called jazzy.mid on the CD-ROM accompanying this book contains a jazzy tune. Insert this sound file on the page.

To add a background sound to your page, follow these steps:

1. From the FrontPage Editor, choose Insert | Background Sound. The Background Sound dialog box, shown in Figure 10.15, appears.
   Figure 10.15 : Use the Background Sound dialog box to insert a background sound into your page.

2. You can insert a background sound in several ways. Select the method to insert a background sound from a local or network hard drive for this example.
   To insert a background sound from your current web, select the Current FrontPage Web tab. Locate the sound in your current web and click OK.
   To insert a background sound from a folder in your local or network hard drive, select the Other Location tab. Select the From File radio button. Enter the path to the sound file in the From File field or use the Browse button to locate the sound file on your local or network hard drive. For your Brick Wall Home Page, select jazzy.mid from the CD-ROM. After you select the file, click Open.
   To insert a background sound from the World Wide Web, select the From Location radio button. Enter the absolute URL of the background sound on the World Wide Web and click OK.
3. By default, the background sound plays once. This is probably sufficient for this MIDI file, because it is quite long. If you want to change the settings, refer to "Setting General Page Properties," discussed earlier in this chapter.
4. Save the page to your web again, using the File | Save command. When FrontPage asks if you want to save the sound file to your web, answer Yes. Preview it in a browser using the File | Preview in Browser command.

Linking to Large Multimedia Files

As you can see from the file size of the AVI file you inserted on your page, animations and other multimedia files can get quite large. What if you have a large animation or long WAV file that you want people to see or hear? The answer is to provide a link for them to download the animation or sound file. The following example discusses how to create a link to an AVI file, but the procedures are similar for any other type of multimedia file.

To create a link to a multimedia file, follow these steps:

1. When you create your animation, also save a single image from it to place on your page. Generally, this is the first frame or one of the best frames in the animation. This allows the user to get an idea of what the video looks like before he or she downloads it.
2. Insert the representative image on your page, using the Insert | Image command.
3. From the FrontPage Explorer, import the animation file into your web, using the File | Import command. Move it to a multimedia directory if desired.
4. Select the image on your page and choose the Create or Edit Hyperlink button on the Standard toolbar. The Create Hyperlink dialog box appears.
5. Choose the Current FrontPage Web tab. Click the Browse button to locate the directory in which the animation appears.
6. Highlight the animation file and choose OK to return to the Current FrontPage Web tab. Choose OK again to exit the Create Hyperlink dialog box. When the user clicks on the image, he or she has the opportunity to download and view the animation.

Adding a Marquee to Your Pages

Marquees are an Internet Explorer invention. They scroll text across your pages in a number of ways. At the present time, marquees are not widely supported. You can view them in Internet Explorer 2.0 and 3.0. For this task, you insert a marquee on the Brick Wall Home Page.

Inserting the Marquee

You use the Insert | Marquee command to place a marquee on your page. To create a marquee for the Brick Wall Home Page, follow these steps:

1. Position the insertion point on the line beneath the hole in the wall. Enter the following text:
   You have reached The Brick Wall. Click the hole in the wall to enter at your own risk.
2. Position your mouse to the left of the text you just entered. Click to select it. The text appears in inverse video.
3. Select a font for the text from the Font drop-down menu in the Format toolbar. In the example shown in Figure 10.16, I used the Comic Sans font. If you don't have this font, choose Arial. Center the text with the Center button on the Format toolbar.
   Figure 10.16 : Enter and format your text for your marquee on the page, and use the Marquee Properties dialog box to configure the marquee.

4. Click the Text Color button on the Format toolbar. The Color dialog box appears. Select the first color in the second row (red) and choose OK. The font changes to red.
5. With the text highlighted, choose Insert | Marquee. The Marquee Properties dialog box, shown in Figure 10.16, appears.

Setting Marquee Properties

To set the properties of the marquee you entered on your page, use the Marquee Properties dialog box. To complete the dialog box, follow these steps:

1. The text you highlighted from your page when you created the marquee appears in the Text field. You can edit this text from the dialog box if desired.
2. From the Direction field, select the direction that you want the marquee to scroll. The default is Left, which scrolls the marquee from the right to the left of your screen. To make the marquee scroll from left to right, select Right.
3. Choose your movement speed settings:
   • Delay specifies the number of milliseconds after which the marquee begins to move. The default setting is 90 milliseconds. Increase the setting if the marquee scrolls too soon when your page is loaded.
   • Amount specifies the number of pixels by which the marquee moves each time it is drawn on the page. The default value is 6. For faster marquees, increase the number. For slower marquees, decrease the number.
4. Choose how you want the marquee to behave from the Behavior section.
   • Scroll. If you select this option, the marquee begins on one side of the page, scrolls toward the other side, and moves completely off the page again. This is similar to a stock ticker.
   • Slide. Choose this option to create a marquee that slides in from one side of the screen and stops once it reaches the opposite marquee window border.
   • Alternate. Choose this option to create a marquee that alternates back and forth between the marquee window borders. The text of the marquee remains on the screen at all times. Make sure that your marquee window is wide enough to contain all the marquee text.
5. From the Align with Text field, choose how you want the text in the marquee to align with other text on the same line (if any). Top aligns the marquee to the top of normal text. Middle aligns the marquee with
   the middle of the text, and Bottom aligns the marquee with the bottom
   of the text.
6. By default, the size of the text in the marquee determines its size. You can alter the size of the marquee in the Size field.
   To specify a different width for the marquee, check the Specify Width checkbox. Enter a value in the number field, and choose In Pixels (for a width in pixels) or In Percent (for a width in percentage of browser window). To specify a different height for the marquee, check the Specify Height checkbox and enter values. For the Brick Wall Home Page marquee, set the width to 80 percent. Leave the height at the default setting.
7. By default, the marquee repeats continuously. To change this setting, uncheck the Continuously checkbox located in the Repeat field, and enter the number of times you want the marquee to repeat in the Times field. Leave this at the default setting for the Brick Wall Home Page marquee.
8. By default, the background color of the marquee is the same as that used on your page. To specify a different background color, select it from the Background Color drop-down menu. For the Brick Wall Home Page marquee, create a custom color of Red 228, Green 228, and Blue 228 (a light gray color).
9. Choose OK to apply the settings to the marquee. The marquee appears on your page as shown in Figure 10.17. Use the File | Preview in Browser command to view the marquee.
   Figure 10.17 : The marquee appears on your page in the FrontPage Editor. You can view its animation by choosing the File | Preview in Browser command.

Configuring an Image Editor

You can configure FrontPage to use an image editor so that when you select an image from the FrontPage Explorer or choose to edit an image from the Image Properties dialog box, the associated editor opens with your image ready to go.

There are so many graphics programs to choose from that it's difficult to know which one to use. No one graphics program does it all, and sometimes you need multiple programs to create your Web graphics. Microsoft Image Composer, furnished with the FrontPage Bonus Pack, is a heavy-duty graphics development package with many nice features. It has an added bonus of being able to send an image directly to FrontPage with its File | Send to FrontPage command. Adobe Photoshop is the graphics program of choice for many Web developers. Fractal Design Painter is one of my personal favorites, because it offers tools that make art look hand drawn by traditional media. There are also programs available that specifically provide tools and effects most likely to be used in Web page development. Ulead PhotoImpact offers a great suite of utilities that allow you to create buttons, banners, animated GIFs, and more-but another nice feature allows you to preview your GIF and JPEG images while trying different color palettes and compression. This allows you to create the smallest graphics file possible while maintaining good quality.

When you install FrontPage, a command to configure your image editor appears in the Tools menu of the FrontPage Explorer. To configure the editor, choose Tools | Configure Image Editor. Locate the drive and directory in which your image editor appears and choose OK. FrontPage configures the editor such that when you click any graphics image in your web, the image editor opens and displays the graphic you want to edit. If you want to change the image editor afterwards, choose Tools | Options. The Options dialog box, shown in Figure 10.18, appears. Select the Configure Editors command and change the editor for each graphic file extension that appears in the list.

Figure 10.18 : Use the Configure Editors command to change the image editor after you initially configure it with the Tools | Configure Editors command in the FrontPage Explorer.

Do's and Don'ts

This chapter has given you lots of tips regarding graphics. Let's review some do's and don'ts about adding graphics to your pages:

• Do design graphics that blend well with your background and text choices.
• Do add text alternatives for graphics you use as links, in case users have graphics turned off.
• Do try to keep the file size of your images small. Provide the option to download large graphics and animations at the user's discretion.
• Do add images where they are most effective. Sometimes an image can describe a process more efficiently than words.
• Do use images and other effects that keep the same tone of the other content on your page. If you're discussing a serious topic, cartoon images might be inappropriate. Conversely, if the tone of your page is light and humorous, a serious picture might break the mood.
• Do try to keep background tiles simple. Use light backgrounds with dark text and dark backgrounds with light text. Try to stay away from medium-toned backgrounds, because they make it difficult to choose text and link colors. Busy backgrounds can interfere with the content of your page. If you have a hard time reading your text, other users will, too.
• Do avoid using pure colors. Back off a bit on that brightness.
• Don't put images on your pages just because you can.
• Don't clutter your pages with images. Use white space to separate images from text. Use books, magazines, or other Web pages you like for layout ideas.
• Don't overuse animated GIFs or video files-too many on a single page makes the page overwhelming. The user won't know where to look first and might be distracted from reading the text on your page. Save animated GIFs and video files for emphasis.
• Don't use colors that clash-they make users' eyes tire quickly.

Workshop Wrap-Up

Graphics, when used effectively, can really make a page. On the other hand, when graphics aren't used properly, they can break a page. The best way to learn how to use graphics effectively is to carefully examine pages that catch your eye. You'll find lots of "picks of the week" on the Web-check them out for various ideas. How were colors used on the page? What was it about the page that caused you to explore it? Try to apply the same principles to your own pages.

In this chapter, you learned how to combine colors for text, links, and backgrounds with images. You learned how to insert files into your webs in a variety of ways. You even learned how to add animated GIFs and animations to your pages using extended attributes. The groundwork is set-the rest is up to your imagination.

Next Steps

In the next chapter, you'll learn how to combine everything you've learned so far to create Web pages of your own. You'll design a style sheet, a home page, and some favorite links pages from the ground up and make a navigation bar that will satisfy graphics enthusiasts and non-enthusiasts alike. For topics related to what you've learned in this chapter, see these chapters:

• To learn how to use tables to enhance page and graphics layout, refer to Chapter 11, "Your Tables Are Ready."
• For more information on using images in frames, see Chapter 13, "Frames-Pages with Split Personalities."
• Chapter 21, "Fields-The Building Blocks of Forms," discusses using images in forms.
• Chapter 23, "Java and Plug-Ins," and Chapter 24, "ActiveX and VBScript," describe adding other multimedia elements into your page, such as sound, Java applets, Shockwave features, and more.

Q&A