Add a Graphic to a Page


In FrontPage, you can add pictures to a Web page with the Insert, Picture, From File command. The image will be displayed in the Page view, enabling you to see how it looks immediately.

Most pictures that are displayed on the World Wide Web are in the GIF or JPEG formats, because they're supported as a built-in feature of Netscape Navigator and Microsoft Internet Explorer. A newer format, an improvement on GIF called PNG, is becoming the third-most popular choice for Web imagery.

One way to work with picture files is to import them into your Web before you add them to any pages. FrontPage automatically creates an images subfolder with every Web template that can be used to store these files.

You also can add an image that isn't a part of your Web. It can be on any folder on your system or any address on the World Wide Web. Use the FrontPage File Open dialog box to both select local files and specify a file by a URL address.

If you've added images from folders on your system, copies of these images will be made when you either save the Web or preview it with a browser. A dialog box will open that lets you determine where these copies should be saved and what names they should be given. This enables you to create folders on your system that contain commonly used graphics. FrontPage will copy these graphics into Webs when they are used, effectively importing them for you.

graphics/lightbulb_icon.gif

Another good reason to work with copies of common images is that FrontPage can make changes to images. As you'll see later, FrontPage can edit images directly to alter their quality and size. By keeping originals outside of any Webs, you prevent them from being modified.


Align a Picture on a Page

After you add a picture to a page, you can determine how it should be displayed in relation to everything else on the page. This is handled in the Picture Properties dialog box, shown in Figure 38.1.

Figure 38.1. The Picture Properties dialog box.

graphics/38fig01.gif

The Appearance tab enables you to set the alignment of the image. Large pictures are generally aligned in one of three ways:

  • The picture appears to the left of the text and other page elements that follow.

  • The picture appears to the right of the text and other page elements that follow.

  • The picture appears above everything that follows .

The easiest of these three to lay out is the third option: placing the picture above the following part of the page. To do this, the picture is added and a new paragraph or line break is inserted right after it. FrontPage places the Page view cursor at the lower-right corner of a picture after it is added to a page.

Figure 38.2 shows two Web pages. They're identical in every way but one: the picture of a city square has been set to a different alignment.

Figure 38.2. Two versions of the same Web page.

graphics/38fig02.jpg

The pictures are set to either right or left alignment on these pages. This alignment controls where the text that follows is laid out.

As you look at the Web page with the text to the left, you may be confused about how it is that the text follows the picture. Anyone using a language that is written from left-to-right , like English, may think the picture follows the text because it appears to the right.

On a Web page, text follows a picture if the picture was inserted in one of two places:

  • A cursor position closer to the top of the page than the text

  • A cursor position to the left of the text on the same line

If you become confused about the cursor position where a picture has been added, the easiest remedy is to move it using cut-and-paste. Press Ctrl+X to delete the picture and add it to the Windows Clipboard, place your cursor in front of the text that should follow the picture, and hit Ctrl+V to paste it back to the page.

The remaining picture alignment options are most useful with small pictures, such as icons and menu buttons . Options such as Top, Middle, Absolute Middle, and Bottom determine how the picture is vertically aligned with the page elements that follow. By default, and when you're using left or right alignment, the top edge of a picture will be lined up with the top edge of whatever follows: text or another picture.

Figure 38.3 shows four "walking man" icons followed by lines of text. A box surrounds each icon to show exactly how big the picture is.

Figure 38.3. Aligning a picture vertically.

graphics/38fig03.jpg

These alignments control layout as follows:

  • Top alignment lines up the picture with the top of the following text.

  • Bottom alignment lines up the bottom of the picture with the bottom of the text.

  • Middle alignment lines up the middle of the picture with the bottom of the text.

  • Absolute Middle alignment lines up the middle of the picture with the middle of the text.

You can use these and other vertical alignment options with text, images, or anything else that is narrow enough to be displayed on a page side-by-side with a picture.

Add Hyperlinks and Descriptions to a Picture

The Picture Properties dialog box can be used to add a hyperlink to a picture and to add alternate text that describes a picture.

Add a Hyperlink

Hyperlinks are added in the same manner that they're associated with elements of a Web page. You can specify the URL of a site on the World Wide Web or pick a file that's on your own system.

You also can associate a hyperlink with a picture in the same manner that you would add a link to any element on a Web page. Select the picture and then either choose Insert, Hyperlink or click the Hyperlink button on the Standard toolbar.

Remember that the linked files on your system should be part of your Web if you're going to publish it.

Add Alternate Text

Providing a text description of each picture is important for making your Webs more usable. When a page is being downloaded, the text description is shown in the area that will be occupied by the picture. If the picture is a menu button or part of a navigation bar, this text enables people to use the picture's function before the picture is downloaded. If you've used a 28.8Kbps or slower Internet connection, you've probably done this many times to get to the page you wanted before the pictures finished loading at glacial speed.

Also, text descriptions are the only way a nonvisual Web browser can make any sense of hyperlinked images. If images are required to navigate your Web, each image should have text that describes its purpose.

Figure 38.4 shows how a Web page looks before the images have been loaded to replace the text descriptions. The text for Interests , Photo Album , and Favorites is shown next to icons with a square, circle, and triangle. These are all part of a navigation bar ”FrontPage automatically creates descriptions for them ”and they have active hyperlinks associated with them.

Figure 38.4. A Web page with picture descriptions.

graphics/38fig04.jpg

graphics/bookpencil_icon.gif

You can make all your Web pages look like Figure 38.4 by telling your browser not to display any images. In Internet Explorer, you can do this by clicking Tools, Internet Options and then clicking the Advanced tab. One of the check boxes on this tab controls whether pictures are displayed.




Sams Teach Yourself Office Productivity All in One
Sams Teach Yourself Office Productivity All in One (Sams Teach Yourself All in One)
ISBN: 0672325349
EAN: 2147483647
Year: 2003
Pages: 474
Authors: Greg Perry

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net