by William Robert Stanek
By adding graphics, you can create visually stunning pages that entice readers to visit your page time after time. This chapter is filled with insider tips and techniques for incorporating images and image maps into your publications. Image maps are
graphical menus that contain hotspots. Each hotspot is an area the user can click to go to an associated page. Image maps are as simple or complex as you make them. A single image map could be a menu for 5 or 25 Web pages. The choice is
yours.
Images are the key to unleashing the power of your Web publications. Everywhere you look on the Web, you find images. Web publishers use images to enhance their pages and get the reader's attention. You can use thumbnail icons to create highlights and
navigation mechanisms. You can use computer-designed images as logos, page titles, illustrations, and maps to the hot features at your site. You can use digitized photos to convey your message in a way that is more powerful than text alone. These photos
can help sell your products and services and can even show the rest of the world what your part of the world looks like.
Adding images to your Web pages is easy and can be accomplished using either external images or inline images. Readers access external images by activating a hypertext link to the image, such as a link that says 67
Chevy fire-engine red.
When a reader clicks the link, the image downloads to his computer. If an image viewer is available and configured for use in the reader's browser, the image displays. If an image viewer is not available, the image is stored on the reader's hard disk
for later viewing.
Although adding external images to your Web publications is as easy as providing a link to the image, it does require forethought and a fundamental understanding of image formats and related concepts. Browsers know which image viewer to launch based on
the file type extension (.jpeg, .gif, and so forth) of the external image referenced in your document. When a reader accesses a link to a GIF image, the browser checks a configuration table to see
which application should display the image, which is why your Web files should always be named with the appropriate extension. If the file is in GIF format, name it with a .gif extension. If the file is in JPEG format, name it
with a .jpeg or .jpg extension.
Unlike external images that are not displayed directly, inline images can be viewed directly. When a reader with a graphics-capable browser accesses your page, the images can automatically load with the text on the page. When you add an image to a
page, you specify the location of the image by using a URL. The URL can be a relative path such as 67chevy.gif or it can be a full path such as http://tvp.com/usr/images/gifs/67chevy.gif.
All image files are in a specific format. The two most popular image formats on the Web are GIF and JPEG. All graphics-capable browsers support both the GIF and JPEG formats. Beyond support for GIF and JPEG, FrontPage supports images in the following
formats: BMP (Windows and OS/2), EPS, MAC, MSP, PCD, PCX, RAS, TIFF, WMF, and WPG. These additional formats are popular formats for graphic design tools, image packages, and shareware image libraries.
Whenever you use any of these additional image formats, FrontPage converts the image to either the GIF or JPEG format depending on the number of colors in the image. FrontPage converts images with 256 or fewer colors to GIF and images with more than
256 colors to JPEG. Image formats are discussed in more detail later in this chapter.
When you specify an image, you can also specify alternate text to display in place of the image. Readers with a text-only browser see the alternate text instead of the image. If you do not specify alternate text, readers with a text-only browser see a
note that marks the location of the image on the page, such as [IMAGE].
Browsers handle inline images in many different ways. Some browsers load all text and associated images before displaying any part of your document. Some browsers display text and graphics as they read in your document. Other browsers load and display
the textual portions of the page, leaving placeholders where the images go, and then retrieve the images one by one. A few advanced browsers let the reader select options for displaying the components of the page.
Individual browsers handle inline images in many different ways, but all graphics-capable browsers provide readers with a mechanism for turning off the automatic image-loading feature of the browser. This nice feature for readers means more work for
Web publishers.
Before you add inline images, there are many concepts you should consider. The most important matters you should think about are when and how to use images in your publications.
FrontPage provides terrific control over images and enables you to see all the images your page contains as you edit it. You can use images in two key ways: insert them directly into a page or import them into your Web for future use. All images come
from one of three sources: the current web, an external source such as the World Wide Web, or a local file.
Using the FrontPage Editor, you can easily insert images from the current web. The first step is to move the insertion point where you want the image inserted and then choose Image from the Insert menu or click the Insert Image button located in the
Standard toolbar. This opens the dialog box shown in Figure 10.1. When you open the Image dialog box, the Current FrontPage Web tab is selected. This tab shows a list of all images imported to the current web. To insert one of these images, all you have to
do is select the image you want to insert by image title or filename and then click the OK button.
Figure 10.1. The Image dialog box.
Although Figure 10.1 shows the default view for files in the current web, you can change the view for files using the two buttons in the upper-right side of the dialog box. The Folder View lists images by file name without titles.
The Look In field of the Current FrontPage Web tab is somewhat deceptive. You cannot use it to search your file system. Instead, this field lists folders within the current web that you've visited, and using this field, you can quickly re-visit a
folder within the current web.
To the right of the Look In field is a button that allows you to go up one level in the folder hierarchy. You can only use this button when you previously moved down the folder hierarchy by double-clicking folders within the current web.
Inserting an image from a file involves a little more work. To start, move the insertion point where you want the image inserted and then chose Image from the Insert menu, which opens the Image dialog box. You can also click the Insert Image button
located on the Standard toolbar.
Next, select the Other Location tab. Using this tab, you can insert images located anywhere on a remote or local file system (see Figure 10.2). If the From File radio button is not selected, select it. Then either fill in the file path to the image you
want to insert or click the Browse button.
Figure 10.2. Using the Other Location tab.
When you click the Browse button, the FrontPage Editor displays the dialog box shown in Figure 10.3. As you can see, this dialog box is the standard Windows dialog box for opening files. Using the Look In drop-down list, you can select the folder you
want to browse. FrontPage displays a list of files that match the current file type selected in the Files of Type field.
Figure 10.3. Inserting images from a file.
If you know the name of the image you want to insert, you can enter the name in the File Name field. If you do not know the name of the image, you can browse folders until you find the image you want. When you find the image, you can insert it into
your page by double-clicking the filename, selecting the filename and then clicking the Open button, or typing the filename and then clicking the Open button.
NOTE
When you insert an image from a file, you can import it to your web when you save the page. Because FrontPage tracks all images you've imported or changed and gives you the option of saving each new or changed image before closing or saving the page, you don't have to worry about tracking the images yourself.
When you insert an image from the World Wide Web, FrontPage displays the image but does not allow you to import it to your web. The primary reason for this is that you are referencing an external image source and specifying the full URL path to the
image, which eliminates the necessity of having the image file physically located on your Web site.
TIP
If you want to access the image remotely, inserting an image from the Web is the way to do it. However, if you want the image to be located on your Web server and accessed from your Web server, you should import the image to your web and then insert it from the current web.
To insert an image from a site on the World Wide Web, move the insertion point where you want the image inserted and then chose Image from the Insert menu or click the Insert Image button, which opens the Image dialog box.
Next, select the Other Location tab and click the From Location radio button. Enter the full URL path to the image you want to insert. Like the sample URL shown in Figure 10.4, the URL path should use the Hypertext Transfer Protocol.
Figure 10.4. Inserting images from the Web.
Using the Clip Art tab of the Image dialog box, you can access over 100 Web-ready graphics installed for use with the FrontPage Editor. As you see in Figure 10.5, this tab has a pull-down list called Category and a large viewing area called Contents.
The Category pull-down provides you with access to great clip art categories like:
AnimationsReady-made GIF animation for your pages
BackgroundsClip art used as backgrounds for pages
BulletsClip art used as bullets to highlight text phrases
ButtonsClip art used as push buttons
Iconssmall images you can use as highlights
LinesClip art used in place or horizontal lines
LogosClip art used as headers and logos
Figure 10.5. Using FrontPage clip art.
When you access any of the clip art categories, the viewing area shows you the related images. A scroll bar on the right side of the dialog box lets you view additional images. When you find an image you want to use, simply double-click it. The image
is automatically inserted into the page.
Adding Your Own Clip Art
You can add your own images to the list of clip art recognized by the FrontPage Editor. Your images should be in GIF or JPEG format. Keep in mind that every time you add files to a category, you increase the time necessary to read in the graphic files. Adding images is a two-step process:
- Determine the category of the image you want to add.
- Move the image to the appropriate directory for that category on your file system. If you installed FrontPage to the default directory, you find directories corresponding to the clip art categories:
C:\Program Files\Microsoft FrontPage\clipart\If you want to add a line image to the clip art category Lines, you move the file to the following directory:
C:\Program Files\Microsoft FrontPage\clipart\LinesTo increase performance, you can create additional folders. Follow these guidelines to create additional folders:
- Only create folders in the following directory:
C:\Program Files\Microsoft FrontPage\clipart\- The folder name should be distinctive so that you or anyone else using your version of FrontPage can understand what category of clip art the folder references.
Sometimes when you are creating pages, you have the perfect image in mind for a particular area of the page. The only problem is that you have to create the image before you can use it. To solve this problem, you can insert a placeholder image. Your
placeholder can be a specific image you designate for this purpose or an existing image from the current Web. In the example shown in Figure 10.6, I am using a placeholder image named temp.gif.
Figure 10.6. Inserting placeholders for new images.
Using the FrontPage Explorer, you import images for future use. When you insert an image that is not in the GIF or JPEG format, FrontPage converts the image to either GIF or JPEG format. Because FrontPage stores all files by Web on your file system,
you generally should not edit the original image file. However, if you do edit the file in its original location, you must import the image again so FrontPage can store the updated image.
In the FrontPage Explorer, choose Import from the File menu. This opens the Import File to Web dialog box, which is shown in Figure 10.7. Before you specify files to import, only three options are available in this dialog box: Add File, Add Folder, and
Close.
Figure 10.7. Importing files.
When importing images, you generally do not want to use the Add Folder button. Instead, you use the Add File button. Clicking this button opens the Add File to Import List dialog box, which is shown in Figure 10.8. Using the Look In pull-down list, you
can select the folder you want to browse. FrontPage displays a list of files that match the current file type selected in the Files of Type field.
Figure 10.8. Adding files to the import list.
If you know the name of the image you want to import, you can enter the name in the File Name field. If you do not know the name of the image, you can browse folders until you find the image you are looking for. When you find the image, you can add it
to the list of files to import by double-clicking the filename, selecting the filename and then clicking the Open button, or typing the filename and then clicking the Open button.
TIP
FrontPage enables you to select multiple files for importing. By holding down the Ctrl key and clicking the left mouse button on a filename, you can add files to your import list. Using the Shift key and the mouse, you can select a group of files listed consecutively. To do this, click the left mouse button on the first file you want to select, move the mouse pointer to the last file you want to select, and hold down the Shift key as you press the left mouse button.
When there are files in the import list, the FrontPage Explorer displays them in the Import File to FrontPage Web dialog box as shown in Figure 10.9. FrontPage adds the filenames and their locations to a file for safekeeping. This enables you to close
the dialog box and import some or all of the files at a later date. To remove a file that you added to the import list by mistake or otherwise do not want to import, select the image's filename from the import list and click the Remove button.
Figure 10.9. A list of files to import.
You should note that all the buttons in the dialog box are active when there are files to import. By default, the Explorer selects all the files for importing. By clicking the OK button with all the files selected, you can import all the files at once.
Using the techniques for selecting multiple files, you can select a group of files to import. When you start importing files, the OK button changes to a Stop button. The Stop button enables you to stop importing files to the current web at any time.
If a conflict occurs when you are importing files, FrontPage displays a warning, such as the one shown in Figure 10.10. To continue importing files, you must make a selection. In this case, you select Yes to replace the existing file with the one you
are importing and No to keep the existing file.
Figure 10.10. FrontPage displays warnings when conflicts occur.
In the Import File to FrontPage Web dialog box, clicking the Edit URL button opens the dialog box shown in Figure 10.11. By default, the FrontPage Explorer imports all images to a subdirectory called images within the
current web's main directory. To change this default, you need to edit the image's URL path using the Edit URL dialog box. Unfortunately, you have to set a new path individually for each image you are importing. Any links or WebBots in documents within the
current web are updated to use the new path to the image.
Figure 10.11. Changing an image's URL before importing it.
When you edit your documents in the FrontPage Editor, you often want to manipulate images just as you would text, which FrontPage enables you to do using the familiar cut, copy, and paste mechanisms you find in most word processors. Before you can cut,
copy, or paste an image, you need to select it.
You can select an image by doing any of the following:
TIP
If you press the Delete key when the image is selected, the Editor removes it from the page, and the only way to get the image back is to use the Undo function. When you delete an image in this way, the image is removed from the page but is not copied to the Clipboard. You can delete an image without selecting it first. One way to delete an image without selecting it first is to move the insertion point after the image and press the Backspace key.
When the image is selected, you can use the cut, copy, or paste buttons on the Standard toolbar or access these functions from the Edit menu. When you cut an image, it is removed from the page and copied to the Clipboard. When you copy an image, it is
copied to the Clipboard but is not removed from the page.
When an image is on the Clipboard, you can insert it using the Paste button or by selecting Paste from the Edit menu. Because Windows shares the Clipboard between programs, you can cut an image from your favorite paint program and paste it directly
into your document. If the image is not in the GIF or JPEG format, the FrontPage Editor automatically converts the image to either GIF or JPEG format. Images with 256 or fewer colors are converted to GIF. Images with more than 256 colors are converted to
JPEG. When these formats are discussed in detail later in the chapter, you understand why FrontPage handles images in this way.
FrontPage tracks all changes to images for you. Any images you've inserted into your document from a file, pasted from the Clipboard, or altered in the current document can be imported to the current web when you save the document. However, the
FrontPage Editor does not automatically import the images. The Save Image to Web dialog box is displayed for each image that was inserted or updated since the page was last saved to the web.
When you are saving a new image to the web, the Editor displays the dialog box shown in Figure 10.12. By default, the Editor saves all images to a subdirectory called images within the current web's main directory. To
change this default, you need to edit the image's URL path in the Save as URL field.
Figure 10.12. Saving a new image.
The dialog box gives you four options. You can save the image to the current web by pressing the Yes button. If you have added or updated several images and you want to save them all without further prompts, you can click the Yes to All button. If you
don't want to save the image to the current web, click the No button. If you want to cancel all further actions, click the Cancel button.
When you save an updated image to the web, the Editor displays the dialog box shown in Figure 10.13. You can overwrite the existing image file using the Replace button. If you have added or updated several images and you want to save them all without
further prompts, you can click the Yes to All button. If you don't want to save the updated image, click the Use Existing button. If you want to cancel all further actions, press the Cancel button.
Figure 10.13. Updating an existing image.
CAUTION
Think carefully before overwriting an image that might be used in other documents. Overwriting existing images with a new or updated image affects all other pages in your web that use the image.
Page backgrounds are a graphic designer's dream come true. To add a background image, all you have to do is specify an image to be used as the background for the page. The image is tiled or repeated to fill the background area. You can use tiling to
create design effects using small images. The best image formats to use for background images are GIF and JPEG, which are fully supported by leading browsers such as Netscape Navigator and Internet Explorer.
To add a background image, open the Page Properties dialog box and click the Background tab. Select the Background Image checkbox, and you can enter a relative or absolute URL to the image in the text input field provided (see Figure 10.14).
Figure 10.14. Inserting a background image.
The key to using backgrounds in your pages is to ensure the background does not interfere with the readability of the page. Figure 10.15 shows how background images can add pizzazz to your Web pages without interfering with the readability of the page.
The background image is a grouping of five animals: an eagle, a seal, an ape, a wolf, and a polar bear. Because the original image did not fill the browser's window, it is tiled.
Figure 10.15. Add pizzazz to your pages with backgrounds.
A popular technique to use when adding backgrounds is to create the illusion that the image runs along the margin (see Figure 10.16). With your cool graphic in the margin, you can be sure that it won't interfere with the readability of the page. The
trick to the illusion is a spacing technique that makes it seem as if the background image is only in the left margin when in fact it extends across the full width of the browser's window.
Figure 10.16. A popular technique for backgrounds.
To ensure the background image is only tiled vertically, the image should be at least 800 pixels wide. 600×800 is the most popular high-end screen resolution. Following this advice, you put dark graphics in the left margin that are 100 to 200
pixels wide and combine them with a light (usually white) graphic 600 to 700 pixels wide that completes the effect. You could also reverse this and put light graphics in the left margin that are 100 to 200 pixels wide and combine them with a dark graphic
600 to 700 pixels wide.
As you learned in an earlier section, FrontPage includes clip arts that you can use for backgrounds. To access these background images, open the Page Properties dialog box, select the Background tab, and then click the Browse button. This opens the
Select Background Image dialog box, which is identical to the Image dialog box covered extensively in previous sections.
Because you want to use clip art backgrounds, click the Clip Art tab. Usually, the default category selected is Backgrounds. If Backgrounds is not the default category, click the Category pull-down list and select Backgrounds. When you find a
background image you want to use, double-click it. This closes the Select Background Image dialog box and inserts the full path to your chosen background image in the Background Image text input field.
Later when you save the page, FrontPage displays a prompt that asks you to confirm that you want to save the image to a file (see Figure 10.17). Generally, you want to click the Yes button, which ensures the background image file is copied to the
current web.
Figure 10.17. Be sure to save the background image when prompted.
As you've seen, adding images to your publications is easy, yet this ease of use makes for easy abuse as well. Your inline images should supplement text and enhance the document but rarely replace text on the page. One of the most important choices you
as the Web publisher have to make is determining when and how to use images. You can use images in your publications in dozens of ways. Before you add an image to the publication, however, you should ask yourself three questions:
Creating images, even simple images, for use in Web documents is an art form that is largely misunderstood even by professionals. You will find many Web documents with images that are horribly designed and actually lessen the impact of the documents
they are in. Many more Web documents have images designed by the skilled hands of graphic designers that fail to create the desired impact because they are over-designed. A common and mistaken philosophy for many of these poorly designed documents is that
bigger and more is better. Bigger and more is not better.
When you create images, use a design and style that fit the purpose of the document. Often simple low-resolution images work just as well as advanced high-resolution images. Nothing gets the reader's attention faster than well-designed and well-placed
images. You should use images in your Web documents when they
Images can highlight the textual portions of the page. Graphic titles and logos can be eye-opening introductions for your publications. Small images can accent key ideas or concepts. Illustrations, figures, and pictures can support key points discussed
in the publication.
Images that serve a specific purpose are the most useful. By putting an image tag inside a hypertext link, you can create images that act as links to other documents. If you use a series of images, you can create a simple menu to key pages at your
site. Sometimes images can even be the only element on the page. If the image contains hot areas that are mapped to specific pages at your site, a single image can act as your site's menu. In this way, the image can act as the doorway to key areas at the
site.
Other questions you should ask yourself when adding images to your page include
These issues have more consequence than you might think. The more features you add to the page, the longer it takes for the page to load into the reader's browser. If you add too many features, the reader might get impatient and choose another site to
visit. Consequently, for large images, you might want to consider using a small image called a thumbnail that links to the large image or even a simple text link to the image. Also, as you will see later in the discussion of color maps, some images
just aren't compatible with each other and cause conflicts that can dramatically affect the way readers see your page.
The best Web publications are user friendly and highly interactive. You can add images to your pages to make them more friendly and more interactive.
Providing ways for readers who cannot or choose not to view images to enjoy your site is a key concept in the design of your documents. Users with text-only browsers and users who turned off the automatic image-loading feature of their browsers cannot
see your images. Consequently, for these users, you want to provide alternate features in addition to your images.
Sometimes you want to include alternate text that the reader can see in place of your images. You do this in the Image Properties dialog box, which is shown in Figure 10.18. To display this dialog box, select the image and then press Alt+Enter or
select Image Properties from the Edit menu. In the Alternative Representations area of the dialog box, enter the text you want the reader to see when the image is not displayed. For the fire-engine red '67 Chevy, you could specify the alternate text of
"Car."
Figure 10.18. Specifying alternate text for an image.
TIP
Double-clicking an image automatically starts the image editor configured for the image type with the image loaded for easy editing. Another way to edit an image directly in your image editor of choice is to click the Edit button of the Image Properties dialog box.
If you specify alternate text, readers see the text instead of the [IMAGE] note telling them an image is on the page. Browsers typically display alternate text for images in brackets. However, telling the reader that a
picture of a car is on the page might not enhance the reader's perception of the page. Again, you should add features to increase the impact of the page. A better way to provide information about images is to use several descriptive words that help readers
see the image in their mind's eye. Here's a better use of alternate text:
My fire-engine red 67 Chevy
If telling the reader what the image contains doesn't enhance the page, you can remove the reference to the image. Usually, you use an empty alternate text assignment to do this. However, FrontPage does not allow this. As a result, you can insert a
space as the text, which effectively replaces [IMAGE] with [ ].
Often, images are essential to the understanding of concepts explored in your documents. Although readers with text-only browsers cannot view your inline images, you might want to make key images available both as inline and external images. For
example, if you are comparing the hot new design of your latest product to a competitor's product, a digitized photo can support your claims and help you sell the product. Although users with text-only browsers cannot display inline images, they probably
can display external images using an image viewer to display the picture.
As you have seen, there are lots of uses for images in your publications, and readers with graphics-capable browsers want to see them all. However, you should not add all the features discussed earlier to a single page. Share the wealth and sprinkle
these features throughout your site. Before you add images to your documents, you should consider four things:
The physical size of your images in terms of bytes is extremely important. Every inline image you include must be loaded when the page is accessed, and a 15K image takes a lot longer to download than a 3K image. However, slow-loading graphics aren't
necessarily large graphics; they are high-resolution graphics or graphics with many colors. A very large four-color image at low resolution downloads faster than a small 256-color image at high resolution.
A good rule to follow when adding images to your Web pages is the 14-second rule. The 14-second rule has the average user in mind. Currently, the average user accessing the Web has a 14,400bps modem. If you analyze this statistically, use the median so
extremes won't have a large effect on the outcome. The current trend is toward 14,400bps, with many Web users accessing at 9600bps and an increasing number accessing at 28,800bps. The philosophy at the heart of the rule is that if it takes longer than 14
seconds under the best of conditions to download all the objects in your document, you might want to restructure your document so it downloads in 14 seconds or less.
Fourteen seconds is really the average (median) value in a frustration window that weighs poor performance and slow access speeds at one end and the top performance and access speeds at the other end. Don't use the rule as an absolute. Use it as a
reality check to help you develop user-friendly pages. This is the basic precept of the rulemake sure your pages are user friendly by valuing the user's time. After you have browsed the Web for a while, you will discover that there is nothing more
frustrating than waiting for thousands of bytes of graphics to load. Undoubtedly, you will wish that more Web publishers followed this rule.
NOTE
To test the 14 seconds rule, make sure that the automatic image-loading feature of your Web browser is turned on and then try loading one of your Web documents. Use a modem speed of 14,400bps. If it takes more than 14 seconds under optimal conditions to fully load all text and graphicsassuming no other time-delaying features are adversely affecting the downloadlook at the document and see what is slowing the load time. Consider modifying the offending element. Note that your Web documents load faster for you because of your proximity to the site. If it takes you 14 seconds to download the document, it will probably take users at disparate sites a lot longer.
One way to avoid putting byte-hogging graphics on a page is to use thumbnail images. Using thumbnail images is a great way to link to large images and other resources. The notion of a thumbnail describes how these resources are included in your
documents. You use a small image to lead to something bigger, such as a large image or another resource. To avoid using an external viewer, you could link the thumbnail image to an HTML document that features the large version of the image.
To make an image clickable, you have to insert the image into a link. You can do this in the FrontPage Editor by selecting the image and then creating a link as discussed in Chapter 9, "Adding Features to the Page." You can verify or update
the link using the General tab of the Image Properties dialog box. The current link is displayed in the Location field of the Default Hyperlink area. At any time, you can specify a new link in the Location field. To browse documents you might want to link
to, you can use the Browse button that is beside the Location field. This button opens the Edit Hyperlink dialog box.
TIP
If you know the URL path to the resource you want to link to, you can enter it directly into the Location field. The Location field is located in the Default Hyperlink area of the Image Properties dialog box. When you close the dialog box, FrontPage automatically creates the link for you without going through the steps discussed in Chapter 9, "Adding Features to the Page."
The way you place objects on the page is as important as the colors and sizes you choose for your images, especially when you are aligning text and images. All images in HTML are placed on the page using a specific alignment. By default, FrontPage
aligns the bottom of the image with the bottom of any text element that might be associated with the image.
In the Appearance tab of the Image Properties dialog box, you can specify a more precise alignment for your images. Figure 10.19 shows the Image Properties dialog box with the Alignment field's drop-down list active. As you can see, you can choose from
nine alignments.
Figure 10.19. Specifying the alignment of images.
These values align text and images in ways contrary to what you might think when you see the values. For example, the MIDDLE value does not align the middle of the image with the middle of the text. The MIDDLE value aligns the middle of the image with the bottom of the text, which produces a slightly off-center effect. The TOP value does not precisely align the top of the image with the tallest elements
in the associated text. The TOP value generally aligns the text and the image along an imaginary line slightly above the text. Similarly, the BOTTOM value does not align the bottom of the image with
the lowest element in the text. The BOTTOM value generally aligns the image and text along a baseline such as the ones used on lined paper. Text elements such as an h are aligned along the baseline, and text elements
such as a g extend below the baseline.
One reason the BOTTOM value is the default alignment is that text does not wrap around images. This means that if you align a long line of text with the top of the image, part of your text is aligned with the top of the
image and the remainder of the text is displayed below the image. Consequently, you should only use the TOP and MIDDLE alignment values to align a single short line of text with an image.
However, using the default value for the ALIGN attribute, you can use this formatting method to your advantage to align an image with a paragraph of text. To do this, the image must appear at the beginning in the paragraph.
In this way, the first line of text is aligned with the bottom of the image, and the next line of text starts on a new line immediately below the image. One way to use this technique is for fancy first letters of a story.
Many of the remaining alignment values were introduced by Netscape to correct the shortcomings of the standard HTML alignments. These alignment values behave exactly as their names imply they should. The value of TEXTTOP
aligns the top of the image with the top of the tallest element in the line of text associated with the image. The value of ABSMIDDLE aligns the center of the image with the center of the line of text associated with the image.
The value of ABSBOTTOM aligns the bottom of the image with the bottom of the line of text associated with the image. The value of BASELINE aligns the base of the image with the baseline of the text
associated with the image, which is exactly how the value of BOTTOM handles text and image alignment.
NOTE
Keep in mind that some browsers might ignore the Netscape-unique alignment values and display your images with the default alignment value of BOTTOM. Consequently, you should use the Netscape alignment values only on pages that will be displayed by the Netscape-capable browser or when the alignment of the image and text is not critical. Netscape-capable browsers include Netscape Navigator 1.0 to 3.0, Aficionado Web Surfer, Enhanced Spyglass Mosaic, IBrowse for the Amiga, Netshark, Netsurfer, Pythia, WebExplorer, and Microsoft Internet Explorer 2.0 to 4.0.
HTML 3 enables you to use two additional alignment values, which can be used to align an image and a paragraph of associated text into columns. The LEFT value puts the image in the left margin and wraps the text around the
right side of the image. The RIGHT value puts the image in the right margin and wraps the text around the left side of the image.
By aligning text and images into columns using these alignments, you can create documents with rich layout and styles that merge the image into the text of the document in ways more powerful than previously possible. To get the text to wrap around only
the left or right side of the image, you make the image the first element in a short paragraph of text.
As you can see in Figure 10.20, the image is in the left column and the paragraph text is in the right column. Keep in mind that any subsequent text is aligned with the image until the left margin is clear.
Figure 10.20. Aligning text and images into columns.
Images and text are aligned with minimal spacing. This spacing sometimes makes the text difficult to read. One way to increase the spacing and make the image more useful is to include the image in a hypertext reference, as shown in Figure 10.21. The
image shown has a border around it that clearly separates it from the associated text, and it is also clickable.
Figure 10.21. Merging the image into the text.
As Figure 10.21 shows, you can get the text to wrap around two or three sides of the image using alignment values of LEFT or RIGHT. To do this, you insert a line of text before the image tag.
Your browser should display complete lines of text before inserting the image. However, if you follow this approach, you want to preview the document using a standard (13-inch) screen size on a Macintosh system or a standard (640×480) video mode on a
DOS/Windows system.
Another useful HTML feature you can use when aligning images and text is the line break. Using the clear attribute of line breaks, you can insert a clean break into the column of text associated with the image. The text before the line break is aligned
with the image in a column. The text after the line break is inserted when the margin is clear. If the image is aligned with the left margin, you should select a value of Clear Left in the Line Break Properties dialog box. If the image is aligned with the
right margin, you should select a value of Clear Right in the Line Break Properties dialog box.
By default, FrontPage inserts HTML markup that tells your browser the width and height of the image. This is useful for advanced browsers that load the text of a document first and leave an appropriately sized space where the images is located when the
document finishes loading. These attributes are also useful for precisely sizing your images to fit the needs of the document.
The ability to shrink or enlarge images on the fly is extremely useful. You can create a menu of images that are consistently sized without creating new files to contain the resized images. You can then reuse the same images later in the document at
their original sizes or sized to suit your needs without loading new image files. This is convenient for you and reduces the download time of your document.
Using the Appearance tab of the Image Properties dialog box, you can adjust the width and height of an image. The first step is to select the Specify Size checkbox. Next, enter a width and height for the image in pixels or as a percentage of the
browser's window. When you are finished, click the OK button and FrontPage updates and resizes the image.
For example, if the original size of the image is 200×190, you can shrink the image by defining a new width and height as shown in Figure 10.22.
Figure 10.22. Resizing images.
Add images to highlight your page and showcase your ideas. Most pages on the Web use images to introduce the page. These images range from simple text on a colorful background to eye-popping 3-D images. Both types of images are fine when used for the
right reasons. The image you use to introduce your documents should fit in with your publishing style, the subject matter you discuss in the document, and the content of related documents. When starting out, simple is usually best.
Although your style of publishing will be different from that of other Web publishers, you should generally follow a unified design within pages of the same publication. One of the key areas you want to focus on is the color scheme for images used in
your documents, which is an area of Web publishing that is all too often overlooked. As you look at the colors you plan to use in your images, key in on the colors used in backgrounds and in text. These are the colors you want to limit.
You could follow a similar color scheme for all the images at your site. In this way, your pages have a familiar look to readers. You could also follow a color scheme for pages associated with a certain publication or key areas at your site. In this
way, each publication at your site has a familiar look to readers, and they have a visual cue when they enter a new area. The key concept here is to look at the colors you plan to use in a particular document's images and ask yourself if they work well
together and if the colors help the reader. Here is an example of colors that don't work well together: a title page that features a logo with a green background and blue text, header titles with a white background and red text, and other images on the
page with gray backgrounds and yellow text.
You might also want to use consistent sizing of key images from page to page. This concept goes back to giving your pages a familiar feel and look. For example, you could make the graphical titles for your pages 150×350 pixels and the graphical
subtitles for your pages 75×350 pixels. In this way, your titles and subtitles are positioned in the same location on the screen. Figure 10.23 shows how the concepts of introducing your document with an image, using a color scheme, and using
consistent sizing could be used in your Web documents.
Figure 10.23. Introducing your documents with images.
Another way to design highlights for the same document is to use the images as a graphical menu. Figure 10.24 shows the graphical menu for the redesigned document. This technique provides quick access to the key areas at your Web site.
Figure 10.24. Designing a graphical menu.
If you use graphic menus in your publications, provide a text-based way for readers to access the menu. You might be surprised to find that text-based alternatives to graphical menus help all the readers who visit your site, especially those who are
impatient and don't want to wait for your images to load. An interesting outcome of placing an image inside a hypertext reference is that whenever the associated alternate text is displayed, it is clickable anchor text. This provides readers using
text-only browsers with a way to access other pages at your site. It also helps readers with graphics-capable browsers who might have switched off automatic image loading, as well as those readers with browsers that display alternative text while the image
is downloading.
Figure 10.25 shows how the alternate text used in the previous example is displayed in a browser. As you can see, the alternate text forms a simple menu that readers can use to access key areas at the site. Without the alternate text, the reader using
this browser is lost.
Figure 10.25. Providing alternate text for your graphical menus.
Graphical menus aren't the only way you can provide readers with navigation mechanisms. Many Web publishers use a standard set of small icons to provide readers with access to pages at their sites. The most common navigation icons are variations of the
left, right, up, and down arrows. The left arrow is generally used to provide quick access to the previous page. The right arrow provides quick access to the next page. The up arrow provides quick access to the home or top-level page. The down arrow
provides quick access to the next level page.
FrontPage supports additional enhancements for images that enable you to specify
These attributes are fully supported by Netscape and Internet Explorer. You can set values for these attributes using the Image Properties dialog box.
Usually, browsers display a border around all images that are linked to another Web resource. Both Web users and publishers alike consider this border to be distracting in most instances. Because of this, FrontPage sets the width of borders around
images to zero, which tells the browser not to display a border at all if possible. In recent months, this has become the favorite setting for most Web publishers.
However, sometimes you want the image to have a distinct border. In the Layout area of the Image Properties dialog box is the Border field. You can use this field to set the pixel size of the border to be drawn around an image.
Also in the Appearance tab of the Image Properties dialog box are the Horizontal spacing field and the Vertical spacing field. You can use the Horizontal spacing field to increase the pixel size of the horizontal margins surrounding the image.
Similarly, you can use the Vertical spacing field to increase the pixel size of the vertical margins surrounding the image. Spacing is used to put white space between multiple images or text. If you use these spacing techniques, you generally do not want
to use a border around the image.
Finally, specifying a low-resolution image is a timesaver that reduces the wait time and makes it possible for other elements on the page to be displayed before a high-resolution image is displayed. On the first pass through the document,
Netscape-capable browsers load the images specified as Low-Res sources. When all other images in the document are loaded, the image specified in the Image Source field is loaded. Browsers that do not support the Low-Res sources load the image specified by
the Image Source field.
In the Image Properties dialog box, click the General tab. You find the Low-Res field in the Alternate Representations area. You can use this field to specify the name of a low-resolution image. The Browse button opens the Insert Image dialog box,
which enables you to specify the name of any image imported to the current web or the absolute path to an external image.
TIP
Try to keep your low-resolution image small in terms of byte size. A 2K low-resolution image loads many times quicker than your 25K high-resolution image. Netscape and Internet Explorer-enhanced browsers fade in the high-resolution image over the low-resolution image. The best low-resolution images act as placeholders and are the same size as the high-resolution image. In this way, the text on the page doesn't shift when the high-resolution image is displayed.
Dozens of image formats are in use. Each computer platform includes its own popular format and usually several other popular formats. Drawing and design applications have their own proprietary formats. Some formats have become de facto standards
because of their tremendous popularity. Other formats are so specialized that only a small group of users benefit from them. Maneuvering through this maze of formats can be a nightmare if you create images for specific groups of users because just when you
think you have the right formats available for the right group of users, another group of users comes along. Fortunately, only two image formats are in wide use on the Web: GIF and JPEG.
The graphics interchange format developed by CompuServe Information Service is the most widely supported and used image format in the world. All graphics-capable browsers support GIF, as do most drawing, design, and image processing programs. As you
might expect, GIF is the favorite format for Web publishers.
Three variations of the GIF format are in use. The original specification, GIF87a, has been around since 1987. Because of its many advantages over other formats, GIF87a quickly became a de facto standard. Creators of drawing programs quickly discovered
how easy it is to write a program that decodes and displays GIF images. GIF images are compressed to 20 to 25 percent of their original size with no loss in image quality, using a compression algorithm called LZW. Smaller images require less disk space to
store, use less network bandwidth, and download faster. Additionally, because the LZW algorithm can be quickly decoded, images display almost immediately after downloading.
The next update to the format was the GIF89a specification. GIF89a added some useful features, including transparent GIFs. Using transparent GIFs, you can create images that seem to float on the page because they have a transparent background. (See the
section on transparent GIFs, "GIFs with Transparent Backgrounds," later in this chapter for more information.)
All browsers support both the GIF87a and GIF89a formats, which is great news for Web publishers. The only drawback is that you can only use 256 colors in a single image. Although this limitation is restricting, it is actually good in most instances.
Most images use only a few colors. This is especially true for icons, bullets, or other small features used to accent the page. Most computer systems can only display 256 colors. If you only use 256 colors, the computer does not have to dither the image to
create the illusion of additional colors. An image with fewer colors that does not have to be dithered is displayed faster, uses less disk space, and also downloads more quickly.
Recently, there has been a lot of controversy over the LZW compression used by GIF images. This compression technology is patented to the Unisys Corporation. In January 1995, Unisys announced that developers using the GIF format in their applications
might have to pay a licensing fee. A licensing fee for GIF images could potentially apply to millions of software applications, including your favorite browser. As you might imagine, software developers around the world were in an uproar for months
following the announcement. Some developers were so outraged that they removed support for GIF images from their applications. Other developers went in search of alternatives.
One alternative software developers looked to is GIF24. GIF24 has wide support from the Internet user community as well as from CompuServe Information Service. Unlike the original GIF specifications that support only 256 colors, GIF24 supports true
24-bit color, which enables you to use more than 16 million colors. One drawback to using 24-bit color is that most computers currently support only 256 colors. Before a 24-bit image can be displayed on an 8-bit screen, it must be dithered, which requires
processing time and might also distort the image.
GIF24 uses a compression technique called PNG, and because there should never be a licensing fee associated with PNG, software developers are gladly turning to GIF24. In the coming months, you should start to see drawing, design, and image processing
programs that support GIF24.
After you insert a JPEG image into a document, you can convert it to GIF format. To do this, select the image you want to convert and then open the Image Properties dialog box. In the Type area of the General tab is a field labeled GIF. When you check
this field and click the OK button, FrontPage automatically converts the image from JPEG to GIF. Keep in mind that the number of colors in the image might be reduced and that the byte size of the image file might become larger.
JPEG is a standard for still image compression that was developed by the Joint Photographic Expert Group. The goal of the JPEG members was to create a standard for storage and transmission of photograph-quality images. JPEG supports true 24-bit color.
True 24-bit color means that each pixel displayed on the screen has 24 bits of information associated with it. There are over 300,000 pixels on an average-size screen, so you can imagine how quickly true-color images can eat up your hard disk space.
Fortunately, JPEG is a compression standard that uses powerful compression algorithms to dramatically reduce the disk space requirements for the image. Some images can be reduced to a twentieth of their original size.
Compressing an image into such a small size has its drawbacks. The first drawback is that JPEG compression is lossy, meaning that some information in the image is lost in the compression. Depending on how the image is compressed, this loss of
information might or might not be perceivable. Another drawback to compressing the image into a small space is that it generally takes longer to decode the image for viewing. However, the actual time period for the decoding depends on the user's system and
the amount of compression.
As you consider using JPEG compression for your images, you should consider carefully the types of images that you will compress. Although JPEG enables you to use brilliant colors and provides quality support for complex images and digitized
photographs, JPEG was not designed to be used for simple images with few colors. JPEG compression might distort simple images, especially if the image has few colors or large areas of the same color. Also, JPEG compression is not as effective as GIF in
reducing the size of simple images. A simple image compressed with JPEG compression is much larger than the same image compressed using GIF.
Because of the drawbacks to JPEG compression, JPEG was not widely supported until recently. One of the issues driving the growth of JPEG use is the controversy surrounding the GIF compression algorithm LZW. The controversy caused many software
developers to take another look at JPEG. Most popular browsers, including NCSA Mosaic, Internet Explorer, and Netscape Navigator, let you use inline JPEG images.
TIP
A great place to learn more about JPEG is the JPEG FAQ. You can find the JPEG FAQ on the Web at the following location:
After you insert a GIF image into a document, you can convert it to JPEG format. To do this, select the image you want to convert and then open the Image Properties dialog box. In the Type area of the General tab is a field labeled JPEG. When you check
this field, an additional field labeled Quality displays. After you select a setting for quality, click the OK button.
Quality settings are often used with compression as a reality check describing the trade-off you want to make between the resulting file size and the image quality. The range for quality settings in FrontPage is from 1 to 99. The higher the quality
setting, the larger the resulting file is and the better the image quality. The default quality setting is 75.
Quality settings can be confusing because a quality setting of 75 does not mean that the resulting file will have 75 percent of the information. Compression ratioswhich FrontPage sets automaticallydescribe how much information to squeeze
out of the file. The quality setting is used to keep the ratio of compression realistic when compared to your need for a usable image. Generally, your goal should be to select the lowest quality setting that meets your needs.
You can create images using drawing, design, and image processing programs. Although commercial drawing tools, such as CorelDRAW! 6, are powerful and fully featured, shareware drawing tools, such as Paint Shop Pro, provide general-purpose image
creation solutions. The FrontPage 97 with Bonus Pack includes a terrific image editor called Image Composer.
Using image tools, you can create a simple graphical title or logo in a few minutes. You can use image tools to alter existing images to meet your publishing needs and to convert these images from other formats to the GIF or JPEG formats for use as
inline images. You can easily create and modify images, but you can dramatically improve the quality and friendliness of your images through
Color maps are one of the biggest problem areas in image design. All images have color palettes associated with them that define a set of colors for the image. Each color displayed on the screen is loaded into a color map that tracks colors displayed
on the screen at any one time. A computer with an 8-bit display uses a color map that can hold 256 color values. A computer with a 24-bit display uses a color map that can hold 16.7 million color values.
Some computer systems reserve a subset of values in the color map for the standard display. Windows systems reserve 20 values in the color map to display standard colors. In addition to reserved colors, any colors currently displayed on the screen are
allocated in the color map. This means if your browser display takes up only part of the screen and other applications are running, the combined set of colors displayed on the screen by all the applications running is allocated in the color map.
Although you can create 24-bit images with 16.7 million colors, most computers display only 8-bit images with 256 colors. This means when you create an image that uses 16 million colors, most computers displaying the image have to dither the image to
create the illusion that there are extra colors in the image when in fact only 256 colors are displayed.
The distortion of the image caused by the dithering is often the least of your problems. Only 256 colors can be displayed at once on an 8-bit color display. This means there is a conflict in the color map if the first image uses all 256 colors and the
next image displayed on the screen at the same time uses additional colors. These additional colors are mapped to the closest color value in the current color map, which can produce strange results. Your brilliant red is mapped to orange, or even green, if
that is the closest color value available in the current color map.
Some browsers try to solve the color mapping problem by limiting the number of colors any single image can use. This enables you to display more inline images on the screen at once. However, the cost of this trade-off is high. If your images use 256
colors and the browser restricts each image to a maximum of 50 colors, the images have to be dithered to 50 colors each. The result is often a large reduction in the quality of your image.
The best way to ensure that your documents have no color map problem is to use a common color map for all images in a particular document. If you are creating original images, most drawing programs let you select a palette of 256 colors to work with.
You can add colors or change color definitions in the palette by removing or altering existing color definitions in the palette. After you are done working with the palette, you should save it, if possible, for future reference and use with your images.
Using a single color palette is easy if you are creating original images, but it is not easy if you are incorporating existing images into your documents. One way to overcome this problem is to use an image processing toolkit that can merge the color
palettes used in multiple images to a common color palette. A useful image processing toolkit is the UNIX toolkit Netpbm. You can find Netpbm at three places:
ftp://ftp.cs.ubc.ca/ftp/archive/netpbm
ftp://ikaros.fysik4.kth.se/pub/netpbm
ftp://wuarchive.wustl.edu/graphics/graphics/
Unfortunately, mapping multiple images to a single color palette is useful only when the images either contain few colors or already use a similar set of colors. This is because the image processing tool merging the color palettes generally merges the
colors using a best-guess algorithm that tries to analyze how multiple colors that are close in value can best be merged into a single color value. Sometimes the tool guesses right and there is no distortion of your images. Other times the tool guesses
wrong and your image is distorted. Ultimately, if your images contain few colors in the first place or use similar maps, there is little reason to merge the color maps. For simple images like these, you might want to preview your document using multiple
browsers and worry about a conflict in the color map only when you find one.
Another way to fix the color mapping problem is to reorganize your document so that images with conflicting color maps cannot be displayed on the screen simultaneously. This solution to a color mapping problem is simple and fast.
Finally, a great way to avoid potential color map problems is to limit your use of colors in the images you create. For example, if you use a particular shade of red in one image, use the same shade of red in other images. In a palette of 16.7 million
colors, there are probably 50 shades of red that are so close in hue that it is difficult to tell them apart. You can also track the values associated with colors in a table. When you are designing additional images for a particular document and want to
use consistent colors, having color values at hand can be invaluable.
An advanced feature you can incorporate into your GIF images is interlacing. Interlaced GIFs are displayed in four stages. As if you were zooming in on something from far away, during each stage, the image gets progressively more detailed until
the image is finished loading. This is accomplished by separating the lines of pixels in the image into four groups of lines that are interlaced and displayed in stages. Your television and possibly your monitor display images in this manner.
Many experienced Web publishers do not understand the value of interlacing images. Interlaced images are timesavers to readers and are especially useful when you use large images in your documents. As the image loads in stages, readers can decide when
they have seen enough of the image. Based on what they've seen, they might continue reading the document, they might make another selection, or they might wait to see the image finish loading. Readers value their time, and if you value their time as well,
your documents will be friendly and well-perceived.
Older versions of browsers might not display GIFs in stages. Whether the image is a noninterlaced GIF or an interlaced GIF, these browsers wait until the entire image is downloaded and then display the GIF. Although not all browsers display interlaced
GIFs in stages, all browsers can display interlaced GIFs.
Creating an interlaced GIF in FrontPage is as easy as selecting Interlaced from the Type area of the Image Properties dialog box. Be sure to save the updated image when you save your page.
Using a GIF with a transparent background, you can create an image that appears to float on the page. This is extremely useful when you want to create a fancy title, logo, icon, or image that does not use a solid colored or rectangular background.
Creating a GIF with a transparent background is easy. The first step is to assign a color to the image's transparency index.
The color value assigned to the transparency index indicates which color from the image's color map should be transparent. When a browser displays an image with a transparent background, it changes all occurrences of the color value in the transparency
index to the color value for the background of the document. The best images to convert to GIF89a format are those with a single background color. This is important because you can only assign one color value to the transparency index, and if your image
has several background colors, only one color will be transparent. Figure 10.26 shows the difference between an image with a normal background and one with a transparent background.
Figure 10.26. Images with transparent backgrounds appear to float on the page.
You should also make sure that your background color appears nowhere else in the image. Any part of your image that uses the color value specified in the transparency index is displayed in the background color for the page. To avoid this problem, you
should be sure that your images have a unique background color. When you are creating new images, this is easy. You simply select a color you do not plan to use in the image.
CAUTION
Although some Web publishers tell you to select an outrageous color for your background, such as hot pink, you should never use a color that you do not want the world to see if for some reason your image is not displayed with a transparent background. Not all browsers can display your image with a transparent background, and if you use an outrageous color, someone somewhere will see your image with that hot pink background. Instead of using an outrageous color, you should use a neutral color such as the gray background used by most browsers. The RGB color value for the background color used by most browsers is 190, 190, 190. Using this color value ensures that your images do not look ridiculous if the transparent background is not displayed and also makes your GIFs appear to have transparent backgrounds on browsers that do not support transparent GIFs.
You can easily create an image with a transparent background in the FrontPage Editor. However, the image must be inserted into the current document. To make a color in the image transparent, use the following steps:
An image can have only one transparent color. You can change the transparent color at any time by repeating the steps listed in the preceding list and simply selecting a new color. If you select a new transparent color, the previous transparent color
is returned to its original color. If you try to set a transparent background on an image that is not in GIF format, the FrontPage Editor prompts you to convert the image to GIF format. Keep in mind that the number of colors in the image might be reduced
and that the byte size of the image file might become larger.
NOTE
If you make a mistake when selecting a transparent color and decide you don't want any color to be transparent, you return the transparent color to its original state simply by selecting it again or by opening the Image Properties dialog box and deselecting the Transparent field.
On the Internet, you can find dozens of image archives. Some of the best sites have hundreds of images you can preview and download if you like. Here's a list of some popular image archives:
NASA's image archive:
Smithsonian's image archive:
Sunet's image archive:
Sunsite's image archive:
University of Arizona's image archive:
Indiana University's image archive:
Washington University's image archives:
Icons come in handy when you need a small image to add a splash of color or to highlight a paragraph of text. You can also find icon archives on the Internet. Here is a list of some popular icon archives:
CERN's icon list:
University of Kansas icon list:
NCSA and UIUC's icon list:
Yahoo's icon list:
Many Web publishers say that the Planet Earth home page maintains the definitive page for image resources. From the Planet Earth image page, you can find links to just about every imaginable type of image, including the following:
Space images
NASA images
Earth images and maps
Travel images
Medical images
Image archives
Icon archives
Flag archives
You can find the Planet Earth home page at
http://www.nosc.mil/planet_earth/images.html
A cool site if you are looking for pictures of animals is the Electronic Zoo. The Electronic Zoo/NetVet image collection contains links to GIF and JPEG images of just about every animal you can think of. You can find the Electronic Zoo at
http://netvet.wustl.edu/pix.htm
To stay current with image concepts and resources, you might want to participate or lurk in the newsgroups related to images. Here are some newsgroups that might interest you:
alt.binaries.pictures alt.binaries.pictures.cartoons alt.binaries.pictures.fractals alt.binaries.pictures.misc alt.binaries.pictures.utilities
If you've browsed the Web, you've probably seen image maps. Image maps are high-power graphical menus. There is no better way to create easy, graphic-based ways for users to browse information at your Web site. Using an image map, you can create a
graphic image with multiple hotspots. Each hotspot is a specific part of an image that the user can click to access other documents and objects.
The wonderful thing about images is that you can pack the equivalent of hundreds of words into tiny symbols within your image map. Image maps are friendly and compulsively usable. Besides being friendly and usable, image maps enable you to pack a lot
into a relatively small amount of space. Some image maps in use on the Web lead to dozens of pages, so almost everything on the image is a doorway to something new.
Don't worry about writing a script to interpret image maps. FrontPage handles everything for you and enables you to use either client-side or server-side image maps. Most server-side image map programs follow either the NCSA or the CERN method for
defining image maps or a derivative of these methods. This is true even with Windows and Macintosh Web servers. FrontPage automatically generates the scripts that allow you to use the NCSA and CERN image-mapping methods.
Under HTML 2.0, gateway scripts process the input from image maps. When a user clicks the image, the x, y coordinates are sent to the gateway script. The gateway script interprets these coordinates and uses a separately defined map file to determine
the action to take. The map file contains a set of coordinates that define the hot areas. The coordinates are the horizontal and vertical locations of hot areas within the image.
The coordinates for image maps are determined in a slightly different way than what you might be used to. The upper-left corner of the image is at coordinate (0,0). As you move outward to the right in a straight line, the x
coordinates grow larger. As you move downward in a straight line, the y coordinates grow larger. Figure 10.27 shows an enlarged view of an image that would make a good image map. Coordinates have been placed on the image to show some of the end points you
might want to use to create this image map.
Figure 10.27. Enlarged view of an image map.
The process of creating an image map with defined hot areas is easier than you think. Hot areas for image maps are defined in terms of three geometric shapes:
Almost any picture can be turned into an image map, but the best images to use for image mapping have sections that include basic geometric patterns. Circular and rectangular areas are the easiest to define within images. When you need to, you can
define complex shapes using polygons. The polygon shape allows for an object with three or more sides. For example, you could define the shape of a house with a garage as a polygon.
TIP
The key to using image maps in your documents is to remember the rules about images that were discussed earlier. The usefulness of images is not determined by their size or use of thousands of colors. The best images are simple and serve a specific purpose. Most image maps in use on the Web are between 20K and 40K in size. Often you will find that if you limit colors and bit depth and use appropriate compression, you can dramatically reduce the file size of your image map. This is especially true if you create a JPEG image and use a low quality setting to determine the amount of compression.
Until recently, many Web publishers who did not have access to CGI scripts could only dream of using image maps. Now, two solutions enable browsers to interpret image maps locally. Locally interpreted image maps are called client-side image
maps. Although HTML 3.0 introduces what will become the standard for client-side image maps, many browsers have implemented Spyglass Corporation's method for handling image maps.
The HTML 3.0 specification introduces client-side handling of image maps and eliminates problems for Web publishers who don't have access to CGI. With client-side handling of image maps, all processing of the user input is handled by the browser. This
means that when a user clicks an image map, the browser interprets the map locally and performs the appropriate action. Not only is client-side handling of image maps several times faster than relying on a server to process the input, but it also makes
sense as the Web makes a transition toward an extremely efficient client/server environment.
Creating a client-side image map is easier than creating a server-side image map, especially because you don't have to worry about server support. You merely define the image map to go along with your figure.
Netscape, Internet Explorer, and Spyglass Mosaic browsers support Spyglass Corporation's extensions for the client-side handling of image maps. With this nonstandard extension, you define a client-side image map using the HTML 2.0 image tag. This
extension uses several new tags to create client-side image maps.
Spyglass extensions for image maps follow an interesting implementation that enables older browsers to continue to support image maps as they have in the past and new browsers to use the client-side image map definition. To do this, you create a
server-side map file and create a client-side map definition.
FrontPage enables you to define client-side image maps, server-side image maps, or both. You specify image map settings in the FrontPage Explorer. The first step is to select Web Settings from the Tool menu. This opens the Web Settings dialog box.
Click the Advanced tab.
Figure 10.28 shows the Advanced section for the Web Settings dialog box. In the Image Maps area, you can define the type of image maps you want to use. The Style field has a pull-down list that lets you specify the type of server-side image maps to
use. The options on the Style field's pull-down menu are as follows:
FrontPage | Use FrontPage extensions to support server-side image maps. |
NCSA | Use NCSA style for server-side image maps. |
CERN | Use CERN style for server-side image maps. |
Netscape | Use Netscape style for server-side image maps. |
None | Do not use server-side image maps. |
Figure 10.28. Setting the image map style.
To use client-side image maps, select the Generate Client-Side Image Maps checkbox. If you want FrontPage to generate both client-side and server-side image maps, select a server-side image map style other than None, and check the Generate client-side
image maps checkbox.
When you select the NCSA, CERN, or Netscape image map style, the Prefix field of the Advanced tab becomes active. Although the Prefix field should display the proper default path to the image map executable on your destination server, you might want to
ask your server administrator to verify the file path.
TIP
FrontPage generates all the code necessary to handle the type of image maps you've selected. The Personal Web Server handles server-side image maps using a WebBot. To use server-side image maps on an NCSA, CERN, or Netscape server, you need to install the FrontPage extensions for your server. After you install these extensions, you can export documents to your Web site and use server-side image maps. For more information about Web servers, using server extensions, and exporting documents, see Part X, "Managing Your Web," which covers everything you need to know to manage Web sites successfully.
The FrontPage Editor integrates the best image map tool I have seen. To use this tool, make sure you select Image toolbar from the View menu. The Image toolbar contains four buttons used to make image maps: Rectangle, Circle, Polygon, and Highlight
Hotspots.
An image map can contain many hotspots. Hotspots can be rectangular, circular, polygonal, or a combination of the three. Generally, hotspots should not overlap. However, if they do overlap, the hotspot you defined last takes precedence.
To create a rectangular hotspot in the FrontPage Editor, start by selecting the image in which you want to place the hotspot and then select the Rectangle button from the Image toolbar. After you decide what portion of the image you want covered by the
rectangular hotspot, position the pointer where you want the first corner of the rectangle to be. Next, click and hold down the left mouse button, drag the rectangle until it encloses the portion of the image you want to be a rectangular hotspot, and then
release the left mouse button.
When you release the mouse button, the Create Hyperlink dialog box displays on the screen. You can link to resources in an open page, the current web, the World Wide Web, or a new page as discussed in Chapter 9, "Adding Features to the Page."
At any time, you can update the link by double-clicking the hotspot, which reopens the Create Hyperlink dialog box. When you finish, click the OK button.
To create a circular hotspot in the FrontPage Editor, start by selecting the image in which you want to place the hotspot and then select the Circle button from the Image toolbar. After you decide what portion of the image you want covered by the
circular hotspot, position the pointer where you want the center point of the circle to be located. Next, click and hold down the left mouse button, drag the rectangle until it encloses the portion of the image you want to be a circular hotspot, and then
release the left mouse button.
When you release the mouse button, the Create Hyperlink dialog box displays on the screen. You can link to resources in an open page, the current web, the World Wide Web, or a new page as discussed in Chapter 9, "Adding Features to the Page."
At any time, you can update the link by double-clicking the hotspot, which reopens the Create Hyperlink dialog box. When you are done, click the OK button.
To create a polygonal hotspot in the FrontPage Editor, start by selecting the image in which you want to place the hotspot and then select the Rectangle button from the Image toolbar. After you decide what portion of the image you want covered by the
polygonal hotspot, position the pointer where you want the first point of the polygon to be located.
Next, click the left mouse button. This creates a pen line that you can move to the next point of the polygon. Move to the next point of the polygon and click the left mouse button. This creates a second end point for the polygon. Keep drawing lines
until you complete the polygon.
When you complete the polygon by fully enclosing the specified area, the Create Hyperlink dialog box opens automatically. You can link to resource in an open page, the current web, the World Wide Web, or a new page as discussed in Chapter 9,
"Adding Features to the Page." At any time, you can update the link by double-clicking the hotspot, which reopens the Create Hyperlink dialog box. When you are done, click the OK button.
TIP
FrontPage can automatically fill in the last end point of the polygon for you. To do this, double-click the left mouse button after you have drawn the next-to-last side of the polygon. FrontPage completes the polygon and displays the Create Hyperlink dialog box.
As you create the image map or after you are done, you can check the accuracy of your image map using the Highlight Hotspots button on the Image toolbar. When you click this button, the FrontPage Editor shows only the outlines of the image map you
created.
In Figure 10.29, the map definitions are highlighted for the sample image map shown earlier. You can select individual map definitions by clicking them. A selected image map definition is shown in black. If you double-click the image map definition,
you can edit the related link information.
Figure 10.29. Viewing map definitions.
Often you want to edit a hotspot, resize it, move it to a new location, or delete it. Before you can edit the hotspot, you must select it by clicking it. You can tell when a hotspot is selected because the resize handles are displayed on each of its
sides and corners. You can delete an unwanted hotspot by pressing the Delete or Backspace key after you've selected it.
TIP
You can move between selected hotspots using the Tab key or Shift+Tab. You can also select multiple hotspots. To do this, hold down the Shift button and click each hotspot.
You can move any hotspot to a new location. To move a hotspot, click it, hold the left mouse button, and then drag the hotspot to its new position. You can also nudge a selected hotspot into place pixel-by-pixel with the arrow keys.
You can resize any hotspot to make it larger or smaller. When you move the mouse point over the side of a selected hotspot, the pointer changes to the resize pointera pointer with arrows on either end. If this pointer is visible, you can resize
the hotspot by clicking and holding down the left mouse button and then moving the pointer to resize the hotspot as appropriate. When you are done resizing the hotspot, release the mouse button.
All image maps can have a default link. The default link is used if the user selects an area of the image that is not defined or has a browser that does not support client-side image maps.
You can set the default link in the Location field of the Image Properties dialog box. To display this dialog box, select the image and then press Alt+Enter or select Image Properties from the Edit menu. If you know the URL to the resource you want to
use as the default reference, you can enter this in the Location field. If you do not know the URL, click the Browse button to open the Edit Hyperlink dialog box.
Everywhere you look on the Web, you find Web publications that use images. You can use images to add highlights, navigation mechanisms, logos, page titles, illustrations, and maps to the hot features at your site. Although there are many image formats,
the primary image formats in use on the Web are JPEG and GIF.
Images are a basic medium for your publications. Image maps serve as graphical menus that users can click to access parts of your Web site. Although there is no better way to create easy, graphic-based ways for users to browse your Web site, you should
design your image maps carefully so they are useful and not byte-hogs.