Working with Web Graphics

3 4

As you've seen up to now in the chapter, creating Web pages is much like creating standard Word documents, with a few twists here and there. So you won't be surprised to learn that adding graphics to your Web pages is similar to adding graphics in standard Word documents. The main difference is that Web page graphics have to be stored as one of the following graphic file types so that browsers can display them:

• GIF. GIFs (short for Graphics Interchange Format) are the most widely supported graphics type on the Web (which means that almost all browsers—old, new, and in-between—can display GIF images). GIF images can support up to 256 colors, and they are generally used for simple logos, line art, icons, cartoonlike illustrations, buttons, horizontal rules, bullets, backgrounds, and other graphics elements that require few colors. In addition, GIFs can include transparency and can be used to create simple animations, referred to as animated GIFs. (In a nutshell, an animated GIF can be likened a stack of GIF graphics that the browser flips through, like old movie flip cards, to create the appearance of movement.)

  For more information about transparency, see Chapter 16, "Enlivening Documents with Drawings and AutoShapes."

• JPEG (or JPG). The JPEG image file format was created by and named after the Joint Photographic Experts Group. This image format supports millions of colors (24-bit color), and JPEGs are almost universally supported by browsers. Because JPEGs can contain millions of colors, this file format is usually used to display photographic images on line.
• PNG. PNG (pronounced "ping") stands for Portable Network Graphics. PNG images are similar to GIF images. They're small files that load quickly and are limited to 256 colors. PNG images transmit slightly faster than GIF files, but PNGs are supported only on newer browsers. At this point, if your Web pages are going to be viewed by a diverse audience using a variety of browsers, you should use GIF files instead of PNG files.

If you're creating a Web page in Word and you insert a graphic in your document that's stored as a file type other than these three file types, Word will create copies of the graphic and convert it to a JPG, GIF, or PNG file when you save the Web page document. Word will store copies of all graphics files in the HTML document's supporting files folder by default. This default action is desirable, because when you use graphics files in your Web pages, you must store your files in an orderly manner to ensure that your HTML code works properly. And when you upload your Web pages to a server, you must retain your Web page's HTML and graphics file organization so that the server can properly find all graphics files referred to in your HTML document.

Now that we have some of the Web graphics particulars taken care of, let's look at how you can use graphics in your Web pages. Generally, graphics are used in Web pages to create the following components:

• Photographs and illustrations
• Buttons and logos
• Icons, bullets, and horizontal rules
• Graphical text
• Backgrounds

As mentioned, inserting and adjusting graphics in Web pages is fundamentally the same as inserting and adjusting graphics in standard Word documents. But among Web graphics tasks, a few Web-specific topics stand out. In particular, when you create Web graphics, you'll want to specify alternative text for each graphic, and you'll probably want to know how to insert horizontal rules and graphics bullets. The next few sections briefly address these topics.

For more information about working with graphics, objects, and WordArt, see Part 2, "Adding Value with Graphics and Objects," and for more information about inserting backgrounds, see Chapter 23, "Using Word's Desktop Publishing Features."

Adding Alternative Text

When you use graphics on your Web pages, you should take a moment to think about the people who won't see your graphics, especially if your Web pages will be posted on the Internet. Because the Internet is worldwide, you can't accommodate all the types of Internet connections and browsers that people will be using to view your pages. It's highly likely that at least some of the people viewing your pages might be using text-only browsers or they might turn off the display of graphics in their browsers when they surf the Web so that they can display Web pages more quickly. As a Web page developer, you can specify alternative text (generally referred to as ALT text by Web designers) that will automatically be displayed while a graphic is loading or in a graphics area when a browser doesn't display graphics. Figure 31-16 shows how ALT text appears in a Web page with the graphics display turned off.

ALT text is displayed in place of images under the following conditions:

• When a browser doesn't support graphics
• When a browser's settings are configured to not show graphics
• When a user experiences slow downloads
• When viewers have special needs due to visual impairment

Figure 31-16. ALT text can be used to describe content areas to users who view your Web pages without graphics.

To specify ALT text for Web page graphics in Word, follow these steps:

1. With your Web page document open in Word, double-click the picture or drawing object in your Web page that you want to configure, and then click the Web tab in the Format Picture dialog box. Or click the picture or drawing object, choose Format, Picture (or Format, AutoShape), and click the Web tab.
2. In the Alternative Text box, type the text you want to display in place of the graphic, and click OK.

When you supply ALT text, you can insert as much text as you want, but keep in mind that some browsers might display only a limited number of characters. When you create ALT text, try to keep it concise and descriptive. Remember, ALT text's main purpose is to provide information to viewers who won't be viewing your graphics.

Adding Horizontal Rules

A typical type of graphic included on Web pages is a horizontal rule. Horizontal rules can be created in two main ways: by typing HTML code directly into a Web page's source code or by inserting a graphic divider. To enter HTML code for a horizontal rule (you use the <HR> tag), you need to open the Microsoft Script Editor and add the source code. The Microsoft Script Editor is introduced in the section "Editing Source Code Using the Microsoft Script Editor". This section looks at the other typical way to insert horizontal rules, by inserting a graphic divider.

Word makes inserting horizontal rules in Web pages easy. You can access Word's default horizontal line graphics in two main ways:

• Position the insertion point where you want to insert a divider, display the Insert Clip Art task pane, type Web Dividers in the Search For box, and press Enter.
• Position the insertion point where you want to insert a divider, choose Format, Borders And Shading, click the Borders tab, and click the Horizontal Line button.

As you can see in Figure 31-17, both approaches result in a similar display of available horizontal rules. To select a rule from either the Horizontal Line dialog box or the Insert Clip Art task pane, double-click the line you want to include in your Web page.

Figure 31-17. You can insert horizontal rules by displaying Word's default graphic lines and double-clicking the line you want to insert in your Web page.

After you insert a horizontal rule, you can modify its properties. If you inserted a rule using the Horizontal Line dialog box, you can right-click the line and choose Format Horizontal Line on the shortcut menu (or click the line, and choose Format, Horiz-ontal Line) to display the Format Horizontal Line dialog box, shown in Figure 31-18. If you inserted the rule using the Insert Clip Art task pane, you can right-click the line and choose Format Horizontal Line on the shortcut menu (or click the line, and choose Format, Picture) to display the Format Picture dialog box. (The Format Picture dialog box is discussed in Chapter 14, "Adding Visual Impact with Pictures.") Notice that you can control a line's width, height, color, and alignment using the Format Horizontal Line dialog box.

Figure 31-18. The Format Horizontal Line dialog box enables you to control the appearance of horizontal lines used in your Web pages.

Adding Picture Bullets

You can (and often should) use bulleted lists in your Web pages to help present information clearly and concisely. But being clear and concise doesn't have to be synonymous with boring. Instead of showing standard black dots every time you want to display a list, you might want to liven up your Web pages with graphics bullets. Word makes displaying a bulleted list with graphics a simple task, as described here:

1. Select the bulleted list you want to reformat with graphics bullets.
2. Choose Format, Bullets And Numbering, and click the Bulleted tab.
3. Choose a bulleted list display box, and then click the Customize button. The Customize Bulleted List dialog box appears, as shown in Figure 31-19.
4. In the Customize Bulleted List dialog box, click the Picture button to open the Picture Bullet dialog box.
5. Double-click the bullet you want to use. Notice that some bullet options have a star in the lower right corner. This star indicates that the bullet is displayed as an animated bullet when it is viewed in a browser.
6. Click OK in the Customize Bulleted List dialog box to reformat the bulleted list.

Figure 31-19. You can modify the layout of a bulleted list by configuring the Customize Bulleted List dialog box.

For more information about creating and modifying bulleted lists, see Chapter 8, "Enumerating with Lists, Lists, and More Lists."

---

Using Custom Graphics as Bullets

If you have a graphic that you want to use for a bulleted list, you can do so by importing a picture using the Bullets And Number dialog box (as described in Chapter 8 "Enumerating with Lists, Lists, and More Lists"), or you can follow these steps:

1. Create at least a couple of entries for your bulleted list using the Bullets button on the Formatting toolbar.
2. Right-click the bulleted list, and choose Bullets And Numbering on the shortcut menu.
3. On the Bulleted tab of the Bullets And Numbering dialog box, click the None box, and then click OK.
4. Click Insert, Picture, file name to insert the graphic in your document. Resize the graphic if necessary, and then select the graphic and press Ctrl+X to cut it.
5. Click at the beginning of the first bulleted list item, and press Ctrl+V to paste the graphic. Continue to paste the graphic in front of each list item.
6. If you need to add list items, click at the end of the last bulleted list item and press Enter. The graphic will be included in the next list entry automatically.

When you add custom bullets, the Bullets And Numbering dialog box formats one of the bullet style boxes on the Bulleted tab with the bulleted list that uses your custom graphic. If you want to format other bulleted lists with the same custom graphic, you can select the bulleted list, choose Format, Bullets And Numbering, and then click the style box containing the custom graphic on the Bulleted tab in the Bullets And Numbering dialog box.

---