Using Netscape Composer to Work with Images

by John Dono
updated December 2004

Inserting, aligning and resizing images

Select the Image button (or Insert > Image from menu) and then choose a .gif, .jpg, or .jpeg file to insert. This will insert the URL of the image in the SRC attribute of the IMG tag.
Add alternate text for visually-impaired and others using specialized devices such as PDAs.
Select the Appearance tab. Under Align Text to Image, select Wrap to the right (which really means align image to left - see HTML Source). The result appears below.

Lehman College Logo This is an example of inserting an image (dir_images.html/lclogo.gif), wrapping multiple lines of text to the right and using alternate text. The use of alternate text is required in the latest HTML specifications. Suppress the display of images in your browser to see the alternate text displayed.

You can change the properties including the alternate text and alignment by selecting the image by clicking on it once and then selecting the Image icon in the toolbar. (Note the small black boxes around a selected image.)

Note the size in pixels in the Image Properties dialog.

Be careful what keys you strike with images selected. You may replace the selected image.

We will use horizontal rules to separate examples. See Insert>Horizontal Line. Double click on line to change its properties.

Examples of other types of alignment.

These examples also use the Custom size feature under the Dimensions tab in the Image Properties dialog. Remember, however, that this does not change the size of the image sent from the server and therefore will not change the transmission time very much. The resizing is done locally in the browser. So this feature is not much use in creating "thumbnails" to preview a graphic over slow

Align text to image - at the bottom (default) Text is too close to image - take a look at spacing option in Image Properties Appearance Tab. We also lost the green border on the top and right of the image.

Align text to image - at the bottom (default), spacing set to 20 pixels

Lehman Logo Align text at the top. But watch happens when you continue typing beyond the end of line. But watch what happens when you continue typing beyond the end of the line. The text continues under the image! HTML IMG attribute is "align=top."

Lehman Logo Now text is aligned in the center. What happens when your line wraps or you press Enter?
What happens is that the text continues under the image.

Here we selected wrap to the left under alignment. What happens when we continue to type beyond the end of the line?. If it works like wrap to the right in the first example, we should be able to continue to type to the left of the image. In this case the IMG attribute is align=right since the IMG tag is referring to the position of the image not the text.

Images as Links to another web page

Images, just like text, may be used as a links. Clicking on the image takes you to another page or to another location in the same document.

To make the Lehman logo act as link to the College's website:

Insert the image
Click on the Link tab and enter the URL of the site

A side note: links are not active within Composer. You need to save the page and reopen the file within the browser to get the links to work.

Here are Adobe logos to use with your .pdf files

You can place this image, which acts as a link to the Adobe web site, beside the link to your .pdf files in Blackboard.

If you want to use this image, or most other images from a web page, just right click on it (this brings up what is called a "context menu" in Windows). Then click on "Save image..." or "Save picture..." Or you can just copy the dir_images.html/getacrobat.gif from the sample folder.

You might also want to use a logo like this to identify the type of file attached to you Blackboard class.
But note the effect of alignment. Alignment really refers to the position of the image not the text. We are using
Wrap to the left in Netscape Composer. This sets the ALIGN attribute in the Image tab to "right," that is, the image is
aligned with the right edge of the page. I pressed the Enter key after each line of text to force the line break. You have a lot
more control over the format of your page with Tables.

Using images with tables

The use of tables has become the all-purpose solution to formatting HTML pages. Here is a mix of graphics and text in a 2x2 table.

	zebra
Image that can be used for a HETS course	.

Here is sequence of steps used to create this table.

Select Insert>Table from the menu. Accept the 2 rows and 2 columns, set % of window to 50%. It will look like this.

Double click on the table to bring up the Table Properties settings box. Select the Tables tab. Change the table alignment to Center and the Background color to whatever you like.

Start adding content. Click in the cell (1,1) and Insert>Image. Click in cell (2,2) and Insert>Image. Since cell sizes are dynamically adjusted as you add content, cell (2,2) will be very small after inserting the big image in cell (1,1). Click in the other cells to add text.

	zebra
Those of you teaching HETS-sponsored courses might want to use this logo.

Next you can remove the borders by setting border pixel width to 0 in Table Properties. It can be a little tricky to bring up the correct properties dialog box. For example, if you click on the image in the cell you will get the Image properties instead. Try double clicking in the left margin next to the table if you have problems. Change the alignment of text in cell (1,2) by selecting the Cell tab in the Table Properties dialog.

	zebra
Those of you teaching HETS-sponsored courses might want to use this logo.