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:
For more information about transparency, see Chapter 16, "Enlivening Documents with Drawings and AutoShapes."
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:
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."
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:
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:
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.
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:
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.
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:
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."
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:
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.