Netscape Composer Tutorial
Images

This section describes how to use images on your web pages.

Working with Images

There are two ways that images typically are presented. The most common way is as an inline image, where the picture appears as part of the Web page. The less common way is as a separate external link that you need to download apart from Web pages. Images are actually separate image files and do not "live" in the HTML document itself. The images that appear on your Web page can be image files on your local disk, or on a remote computer.

Most of the current Web browsers support either of two image formats; the Composer supports both formats as well:

GIF files lack the higher quality of JPEG files but are usually faster because they're more compact and optimized for electronic downloading.

You can get images by drawing them yourself, scanning them, or buying them as part of a commercial clip art package. You can also find images out on the Net in one of the many image archives available. If you intend to use images on your Web pages, it's wise to create your own, get permission from the owner of an image, or use royalty-free clip art so you don't infringe on a possible copyright.

Composer provides two alternatives to displaying images: alternate text and low-resolution images. Alternate text is displayed in place of images. You should specify alternate text for those readers who use text-only browsers.

Low resolution images are another alternate to normal image display. You simply specify a low-resolution image to display while the normal image is loading.

Tip: If the document you're editing contains an animated GIF file, press Esc to stop it from continually loading so that you can work in the document.

Inserting an Image

Inserting an image in your Web page either copies the image file to the same directory as that of the parent document - the Web page you're editing - or leaves the image file where it is, depending on the settings you've specified in Composer Preferences.

Tip: To quickly insert an image, cut and paste it from the clipboard, or drag and drop it to the location you want on your page.

To insert an image:

1. Place the insertion point where you want the image to appear in your document.
   
   
2. Choose Insert|Image or click the Image button on the Character Properties toolbar. The Image Properties dialog appears, allowing you to specify the source location of the image, its alignment relative to text, and the amount of space you want around it.

    
   
   

3. Type the name and path of the image file you want to insert in your document. If you're not sure of the file name or its location, click Browse to select an image file from the directory list. Important: If you later move an image file from the specified location, it will no longer appear on your Web page.
   
   
4. Type the name of a low-resolution version of the image previously specified. This image loads first while the higher resolution image is loading on top. If you're not sure of the file name or its location, click Browse to select an image file from the directory list. (Optional)
   
   
5. Type the text that you want to have appear in place of the specified image file. You should always specify alternative text for readers who use text-only Web browsers, such as Lynx, or who have graphics turned off. If you don't include this alternative, your readers might see placeholder images instead of informative text. (Optional)
   
   
6. Select the options you want.

Images Properties dialog

About the Image Properties dialog

Lets you insert a new image or modify an existing image's properties. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

Image file name - The name of the image file you want to insert in your document, or whose properties you want to modify. The editor supports .GIF and JPG image file formats. If you're not sure of the file name or its location, click Browse to select an image file from the directory list.

Edit Image - Click this to edit the image using the external editor you specified in the General panel of the Composer Preferences dialog box. If you haven't specified an image editor, you will be prompted to do so.

Leave image at the original location - Normally Composer makes a copy of the image and places it in the same directory (folder) as your page. If you don't want a copy made, click this option.

Important: If you move an image file from the specified location, it will no longer appear on your web page.

Use as background - Click to use the image as a background for your entire page.

Alignment and Wrapping - The position of the selected image relative to text, top, center, or bottom. You can also specify whether to have the image right-align or left-align to the page. To see alignment changes you've made, view your page in the browser.

Dimensions - The height and width of the new or currently selected image as measured in pixels. Click Original Size to undo any changes to the size you've specified.

Space around - The amount of white space (space where no text is allowed) on the right and left, top and bottom of the image. You can also select to have a black border surround the image and specify its width in pixels.

Remove Image Map - Click this to remove all link regions from the image. An image map is a special type of image that contains links to different locations within the same image.

Extra HTML - Displays a dialog box where users familiar with HTML and JavaScript can add tags that manipulate the image.

To preview your settings, click Apply. To accept the changes, click OK.

Alternate Image Properties dialog

You'll see this dialog when you select Alt.Text/LowRes... in the Image Properties dialog.

Alternate text - Enter the text string you want to display in place of the image, for example, a caption or brief description of the image. For example, the Alternate Text for the image above is "Alt-Image Dialog". You can see this by holding your mouse still over the image.

Low resolution image - Enter the name of the lower resolution image you want to display while the main image is loading. Click Choose File to browse for the file location.

Edit Image - Click to edit the image using the external editor you specified in the Composer Preferences General dialog box. If you haven't specified an image editor, you will be prompted to do so.

[ Back ] [ Next ]

[ Overview ] [ Getting Started ] [ Working w/pages ] [ Paragraph Formats ] [ Character Formats ] [ Images ] [ Hyperlinks ] [ Tables ] [ Publishing ] [ Page Properties ] [ Composer Prefs. ] [ HTML and Java ] [ Design Issues ]