Chapter 11

Sprucing Up Your Pages

• Show It with Style
• Creating a Style Sheet
• Changing Page Properties
• What Are Extended Attributes?
• Using Horizontal Lines
• Images-To Be or Not to Be?
• Using Images in Your Pages
  • Choosing Between GIF and JPEG Images
  • Importing Images to Your Webs
  • Adding an Image to Your Page
  • Using Line Breaks with Images
  • Changing the Image Properties
  • Using Image Extended Attributes
  • Making an Image Transparent
  • Removing Image Transparency
• Cutting, Copying, and Deleting Images
• Do's and Don'ts
• Workshop Wrap-Up
  • Chapter Summary
  • 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. Being 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 now. 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, there are lots of us out here who enjoy a graphical environment. Give us flash, 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 and when not to use images in your pages. You'll soon be building pages like a pro.

Show It with Style

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 accomplish this is to create a style sheet. Any page can be used as a style sheet for another page, but the easiest way is to use a page that is easily identifiable as a style sheet. On this style sheet, 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 changing hues a little bit to complement your background and text colors. For example, if your background is a light tan color, you can use dark brown for your text color. Then you can create a nice teal blue for a link color, a deep purple for a visited link color, and a tomato red for an active link color. Those colors are a bit more earthy-looking and would blend in well with the light tan background.

Creating a Style Sheet

You'll find it helpful to keep a record of the color combinations and backgrounds you use. As you develop your graphics (especially graphics that blend with your background and text colors), you'll need to remember the color formulas you've used. It's helpful to put the formulas right on the style sheet.

Here's a great way to create a style sheet:

1. Open a blank page and type a heading or two in it. Then type in the following lines using normal text. Underline the last three lines of text to simulate links:
   For a background, I used:
   For normal text color, I used:
   For link color, I used:
   For visited link color, I used:
   For active link color, I used:
2. Choose the File | Page Properties command to apply a background color or image to your page as described later in the task "Changing Page Properties." This step lets you test your text and link colors while you design them.
3. If you have any finished header graphics, insert one of them into your page for reference as you select your colors.
4. Check the box beside Use Custom Text Color. Then, click the Text Color's Choose button to open the Color dialog box. (See Figure 11.1.)
   Figure 11.1 : Create custom colors in the Color dialog box.
5. Click the Define Custom Colors button to expand the Colors dialog box. As you create your colors, write down the HSV or RGB values of the colors so that you can type them on your page later. I tend to note the RGB values because most shareware and commercial software programs support RGB color formulas.
6. Apply the colors to the appropriate text that appears on the page. Also add the colors to the Custom Colors slots at the left side of the Colors dialog box. This step allows you to select the same colors when you apply them to the page properties.
7. After you create your background, text, and link colors, enter the color formulas on the style sheet, as shown in Figure 11.2.
   Figure 11.2 : After you make your selections, apply the colors to your sample text and enter the color formulas on your style sheet.
8. Use the File | Page Properties command to apply the text and link colors to your page.
9. Save the page to your web, titling the page "Web Colors" or something similarly descriptive. You now have a record that you can easily refer to.

Changing Page Properties

When you create a style sheet, or any other page for that matter, you can change the properties of the page to use the page's own custom colors, or you can base the page's style on another page. You learned about assigning some of these properties when you created a web with the Corporate Presence Web in Chapter 4 "If You Mean Business." Now it's time to assign page properties yourself.

To assign colors and other properties to your page, follow six steps:

1. Choose File | Page Properties. The Page Properties dialog box, shown in Figure 11.3, appears.
   Figure 11.3 : The Page Properties dialog box allows you to define the colors used in a page.
2. Enter a title for your page in the Title field. You can't edit the URL field in this dialog box.
3. In the Customize appearance section, you have a few choices:
   Get Background and Colors from Page. Check this option if you want to use the colors from another page in your web (such as your Web Colors style sheet). If you know the name of the page, you can type it in the field. Click the Browse button to choose the page by name or URL from your currently opened web. When you choose this option, all other Custom appearance selections are disabled.
   Background Image. If you want to use a tiled image for your background, choose this option. Click the Browse button to select an image.
   Use Custom Background Color. Check this option if you would rather use a solid color background. Click the Choose button to select a custom color from the Color dialog box.

   NOTE

   The Background Image option takes precedence over the Custom Background Color. The solid background color displays while the background image is loading. If you want to use only a solid background color, be sure that Background Image is unchecked.

   
   Use Custom Link Color, Use Custom Text Color, Use Custom Active Link Color, and Use Custom Visited Link Color. Choose any of these checkboxes if you want to specify custom colors for any of these elements on your page. Click the Choose button to select a custom color from the Color dialog box.

4. To apply extended attributes to your page, click the Extended button. The procedures for adding an extended attribute are similar to those covered ahead for images. Attributes you can add are shown in Table 11.1.
5. To apply Meta information to your pages, click the Meta button. Enter System or User Meta variables in the Meta Information dialog box. An example of values you can add is shown in Table 11.2.
6. Click OK to exit the Page Properties dialog box.

Meta tags are used to describe information about a Web page. For example, Web robots and searches use Meta information to display information about pages on the Web. The following Web page provides information and good links to pages that describe how to use Meta variables with your Web pages:

http://www.stars.com/Search/Meta.html

Table 11.2 shows an example of how Meta variables are entered in FrontPage.

What Are Extended Attributes?

You've seen the term extended attribute in other parts of this book, but I've put the explanation in this chapter because it's the most likely place you'll use extended attributes.

If you've never touched HTML code, you might need some background information first: In simplistic terms, there are several varieties of HTML tags that perform a specific function. For example, the IMG tag indicates an image. Each tag has a subset of attribute names that apply to different types of functions the tag can perform. Each of these attribute names can (but not always) have a value. For an analogy, compare a car to an HTML tag, color to an attribute name, and the color blue to the attribute value.

Why do you need extended attributes? Doesn't FrontPage have a lot of built-in attributes? First, there are some attributes that aren't yet supported by FrontPage. For the most part, those that aren't covered are either seldom-used, under development or discussion, or browser-specific. For the majority of them, you can use extended attributes to cover the bases, but remember that when you use an extended attribute, the feature you're adding might not be viewable by all browsers. Second, because HTML standards are constantly being developed, extended attributes allow for future growth. It's a well-thought-out plan.

For properties dialog boxes that allows you to add extended attributes, this book contains a table of HTML tags that you can add and explains what they do. If you don't find a table for a dialog box that allows you to enter attributes, it means that FrontPage covers all the attributes for those tags.

Using Horizontal Lines

You use horizontal lines (traditionally known as horizontal rules) to distinguish the beginning or end of sections on your pages. For example, if you have a page that describes the main sections on your site, you would use horizontal lines at the end of each section's description.

To insert a horizontal line into your page, follow five steps:

1. Position the insertion point on the line before which you want to insert the horizontal line.
2. Choose Insert | Horizontal Line. You'll get either a default line (2 pixels wide, 100 percent of window width, center-aligned with shading) or the same type of line you used in your page the last time.
3. To change the appearance of the horizontal line, position the insertion point at the beginning of the line on which the horizontal line appears. Choose Edit | Properties or right-click and choose Properties from the pop-up menu. The Horizontal Line Properties dialog box, shown in Figure 11.4, appears.
   Figure 11.4 : Specify settings for horizontal lines in the Horizontal Line Properties dialog box.
4. Choose any of the following options:
   Percent of window. Choose this option to specify a line that spans across a percentage of the screen. Enter the percent value in the Width field. For example, for a line that spans 90 percent of the screen, you would enter 90 in the Width field.
   Pixels. Choose this option to specify a line that spans across a certain number of pixels. Enter the number of pixels in the Width field. If you choose this setting, be sure to keep in mind that some people use 640´480 resolution to browse the Web. Make sure your horizontal line isn't too wide.
   Align. Choose an alignment for the horizontal line. Available choices are Left, which aligns the line with the left edge of your page; Center, which centers it; and Right, which aligns it with the right side of your page.
   Height. Specify the height of the horizontal line in pixels.
   Solid line (no shading). Choose this checkbox if you want to create a horizontal line that is the same color as your text.
5. If you want to add extended attributes to the horizontal line, click the Extended button. These attributes allow you to specify a horizontal line of a different color, which Internet Explorer 3.0 supports. They are shown in Table 11.3.

Figure 11.5 shows several examples of horizontal lines. The top example shows the horizontal line that is created using the default settings. Its width is 100 percent of the screen, and it is 2 pixels high. Beneath it are several other examples with different width, height, and shading settings. You can also align the horizontal lines to the left, center, or right of the browser window.

Figure 11.5 : Examples of horizontal lines with different widths, heights, and shading.

Images-To Be or Not to Be?

As mentioned at the beginning of this chapter, 80 percent of the people who use the Internet are using graphical browsers. This percentage should increase even more 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 might not 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 would take a long time to download a header graphic of that size on a slower modem.

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

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 sizes (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 normally 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:

GIF. CompuServe GIF format. 256-colors. Viewable in all graphical browsers.

JPG. JPEG format. Compressed hi-color or true-color images. Currently not supported in all browsers, but support is increasing.

BMP. Windows or OS/2 bitmaps.

EPS. Encapsulated PostScript files.

MAC. MAC format.

MSP. Microsoft Paint format.

pcD. Photo CD format.

pcX. Z-Soft Paintbrush format.

RAS. Sun Raster Image format.

TIFF. Tagged Image File Format.

WPG. WordPerfect raster image file format.

WMF. Windows Metafile format (available only when the image is embedded within an RTF file).

Choosing Between GIF and JPEG Images

Pardon the pun, but choosy Web developers choose GIF. They choose GIF because most browsers support this format. GIF images have some advantages over JPEG, and vice versa:

• 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. You insert an animated GIF file the same way you would an ordinary GIF; however, at this time you can view these animated files only in Netscape 2.0.
• GIF images are best used for gray-scale 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 down to 256 colors, you don't get quite the same effect. Banding, loss of subtlety and detail, and objectionable dithering can occur.

With JPG images, you have a fighting chance. By using various compression schemes, JPG images can reduce the size of a true-color image substantially. In most cases, a true-color JPG 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 go below Good. Too much deterioration occurs when compression ratios are set too low.

Importing Images to Your Webs

Now that you know the basics about different kinds of images, how to use them, where to put them, and so on, you need to learn how to import them into your web. You can import graphics files to your web from a drive on your local computer or from a network drive. FrontPage allows you to import several graphics types. Importing graphics into your web before you place the images on your pages allows you to import multiple files at once and to change the URLs to point to another existing directory in your web. It also allows easier selection of images later.

To import images to your web, follow nine steps:

1. From the FrontPage Explorer, choose File | Import. The Import File to Web dialog box, shown in Figure 11.6, appears.
   Figure 11.6 : Import graphics, Web pages, and other Web files using the Import File to Web dialog box.
2. Click the Add File button. The Add File to Import List dialog box, shown in Figure 11.7, appears.
   Figure 11.7 : Use the Add File to Import List dialog box to select the images and files you want to import from your local computer into your web.
3. Use the Look in field in the Add File to Import List dialog box to locate the folder in which your images are stored.
4. After you find the directory that holds your images, select one or more images to import into your web. Multiple selections can be made by using the Shift key to select contiguous files and the Ctrl key to select items manually.
5. Click Open. You'll return to the Import File to Web dialog box, where your files appear in the Import List.
6. To change the URL of the images, choose the Edit URL button. The Edit URL dialog box, shown in Figure 11.8, appears. Enter the URL for the file if it's destined for another directory. For example, say you store your GIF and JPG images in separate directories named /images/gif and /images/jpg. Use the Edit URL button on each image and edit the URL to save the files to your custom directories rather than to the default /images directory. Click OK after each change.
   Figure 11.8 : Use the Edit URL dialog box to save your files intodirectories other than the FrontPage default directories.
7. To import the graphics into your web, highlight the file or files you want to import from the Import File to Web dialog box. Multiple selections are allowed.
8. Click Import Now. The file or files are added to the web and can be viewed in Summary View.
9. Click Close to exit the Import File to Web dialog box after all files are imported.

Adding an Image to Your Page

You can insert graphics files into your pages from a drive on your local computer, from a network drive, from a location on the World Wide Web, or from your currently opened web. FrontPage allows you to insert several graphics types.

To insert an image into your page, follow three steps:

1. Move the insertion point to the place where you want to insert the image.
2. Choose Insert | Image. The Insert Image dialog box, shown in Figure 11.9, appears.
   Figure 11.9 : Use the Insert Image command to insert an image into your page.
3. Choose one of the following options:
   To insert an image from the current web, select the image you want to insert. You can select by image title or URL. Click OK, and the image appears on your page.
   To insert an image from a local or network drive, click the From File button. Use the Look In box to choose a folder and file from which to insert the image. Select the file you want to insert and click Open.
   To insert an image from the World Wide Web, click the From URL button. The Open Location dialog box appears. Enter the Absolute URL of the image you want to insert and click OK.

When you save your page to the Web, you are asked if you want to save the images you inserted on your pages to the Web.

The Save Image to Web dialog box appears as FrontPage attempts to save each image to the Web. To save your images, follow three steps:

1. In the Save as URL field, enter a page URL for the image. You have the opportunity to specify custom directories in which to save your images.
2. If an image with that filename exists on your web, you are prompted to enter a new URL. To overwrite the current version, leave the filename as is.
3. Click Yes to save the image to the Web.

Using Line Breaks with Images

Line breaks can help you to lay out images and text in your pages. They force text to appear after images in a few ways. To insert line breaks, follow two steps:

1. Choose Insert | Line Break.
2. Choose one of three options:
   Clear Left Margin. The next line of text moves to the next clear line after an image that appears in the left margin.
   Clear Right Margin. The next line of text moves to the next clear line after an image that appears in the right margin.
   Clear Both Margins. If an image is in either or both margins, the next line of text moves until both margins are clear.

Changing the Image Properties

You can change several of the image properties with the Image Properties dialog box, shown in Figure 11.10. You can open this dialog box using a few methods:

Figure 11.10: Edit the properties of the image with the Image Properties dialog box.

• Click the image you want to change, and choose Edit | 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 Properties from the pop-up menu.

The Image Properties dialog box appears. To set your image properties, follow eight steps:

1. To convert from GIF to JPEG, or vice versa, click the radio button beside the image type in the Type field. If you want to interlace the GIF file, check the Interlaced checkbox. You cannot interlace a JPEG file.
2. In the Layout Alignment field, choose one of the following options:
   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 would like a border to be. This draws a solid border around the image.
4. Select values for horizontal 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. To specify Alternative Representations, choose from two options:
   Low-Res. This setting allows you to choose an image of lower resolution to display while the larger version is being downloaded.
   Text. This field lets you specify text that is displayed in the image's boundaries while the image is being downloaded. The text is displayed even if users have graphics turned off in their browsers.
6. To complete Default Link information, choose one or both of the following options:
   URL. Click the Browse button to choose the file you want to link to with this image.
   Target Frame. See Chapter 14 for information on this field.
7. To specify extended attributes, click the Extended button. Follow the procedure outlined below in "Using Image Extended Attributes."
8. Click OK to exit the Image Properties dialog box. The image changes to the position you specify.

Using Image Extended Attributes

Some extended attributes can be applied to images. The HTML specification includes two attributes-HEIGHT and WIDTH-which allow you to resize an image. Your image is stretched or reduced to fit the dimensions that you specify with these settings. When you attempt to add either of these two extended attributes to an image, however, a message informs you that FrontPage recognizes and handles the attribute directory. You are instructed to change the values in the appropriate dialog box. In this case, the settings for image height and width appear in the Size section of the Image Properties dialog box. However, the dialog box does not allow you to edit these fields.

There is a good reason why you are not allowed to resize an image through these attributes: When you resize images in this manner, you might get objectionable results. Graphics programs know how to resize an image and maintain a good appearance while doing so-Web browsers don't; that's not what they were made for. Rather than resize your pages using these attributes, resize the image properly with your graphics software and put it on your page in its actual size. You'll be glad you did.

You can use the attributes shown in Table 11.4 to add inline animations (AVI) files to your pages. These animations can be viewed only in Internet Explorer 2.0 at this time. Beta versions of Internet Explorer 3.0 and Netscape 3.0 also display inline animations. It's fun to see an animation on a page every now and then. To place an animation on a page, you need to add more than one attribute. You start with the DYNSRC attribute and go from there.

Say you want to add a small AVI file on your page. The animation is going to go on your guest book, and it's an animation of pages turning in a book. You want the animation to play as soon as the page is loaded, and you want it to play as long as the user is on the page. Here's how you would add the animation and its attributes:

1. Import the AVI file into your web as outlined previously in "Importing Images to Your Webs."
2. Create a GIF or JPG file for the first frame (or the best frame) of the animation and import that into your web also. This single image displays in place of the animation in browsers that don't support inline AVI files.
3. Insert the single image on your page where you want the animation to be located.
4. Select the image and choose Edit | Properties, or right-click and choose Image Properties from the pop-up menu. The Image Properties dialog box appears.
5. Click the Extended button to open the Extended Attributes dialog box shown in Figure 11.11.
   Figure 11.11: An example of attributes entered for an AVI file.
6. To attach the animation to your image, click the Add button. Enter the following for name and attribute:
   Name: DYNSRC
   Value: pageturn.avi (or your filename)
7. To start the animation as soon as the page opens, click the Add button and add the following:
   Name: START
   Value: FILEOPEN
8. To loop the animation as long as the page is displayed in the browser, click the Add button and enter the following:
   Name: LOOP
   Value: INFINITE (entering a value of -1 also works)
   When you're done entering these values, the entries in the Extended Attributes dialog box should appear as shown in Figure 11.11.

Making an Image Transparent

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 clicked on 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 nontransparent. A description of each method follows.

To make a color in an image nontransparent 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 nontransparent 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 Image Properties dialog box, uncheck the Transparent field.
4. Click OK to exit the Image Properties dialog box. The transparent color returns to its original color.

Cutting, Copying, and Deleting Images

You can select images to cut or copy to the Clipboard by using the following procedure:

1. To select the image, do one of the following:
   • Move the pointer to the selection bar at the left side of the page. The cursor changes from a standard pointer (facing left) to a selection pointer (facing right). Click the left mouse button to select the image.
   • Move the pointer to the right side of the image, and then click the left mouse button and drag the pointer over the image.
2. When the image is selected, it appears in inverse video, a negative representation of the image. You can cut or copy the image to the Clipboard when the image is selected in this manner.

Use the Copy command to copy an image to the Clipboard:

1. Select the image you want to copy.
2. Choose Edit | Copy or click the Copy button. The image is copied to the Clipboard.

To remove an image from your page, follow these steps:

1. Select the image you want to cut or delete.
2. Choose one of the following methods to remove the image from your page:
   • To remove an image and place it into the Clipboard, choose Edit | Cut or click the Cut button.
   • To remove an image without placing it into the Clipboard, choose Edit | Clear or click the Delete button.
   • To delete an image without selecting it, position the insertion point before the image and press Delete; or position the insertion point after the image and press Backspace.

To paste an image that you cut or copied from your page, perform one step:

1. Choose Edit | Paste or click the Paste button.

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

Chapter Summary

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 nonenthusiasts 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, see Chapter 13, "Your Tables Are Ready."
• To learn how to use images in frames, see Chapter 14, "Frames-Pages with Split Personalities."
• To learn how to use images in forms, read Chapter 19, "Fields-The Building Blocks of Forms."
• To learn how to add other multimedia elements into your page, such as sound, Java applets, Shockwave features, and more, see Chapter 21, "Using Your Own HTML Code."

Q&A