Formatting Pages

Working With Images

Back to Introduction to Nvu Home | Inserting Images | Changing Image Properties | Creating Image Links | Editing Image Properties

You can insert GIF, JPEG, and PNG (Portable Network Graphics) images into your web page. You can also use them to create links. When you insert an image, Nvu saves a reference to the image in your page.

It is best to first save or publish your page before you insert images into it. This allows Nvu to automatically use relative references to images once you insert them.


To insert an image:

Click to place the insertion point where you want the image to appear.
Click the Image button on the Button Toolbar, or open Insert > Image. You see the Image Properties dialog box.

Type the location and filename of the image file, or click Choose File to search for an image file on your hard drive or network.

Type a simple description of your image as the alternate text that will appear in text-only browsers (as well as other browsers) when an image is loading or when image loading is disabled.

If needed, click other tabs so you can adjust the settings (for example, alignment) in the Image Properties dialog box.

Click the Dimensions tab to edit:

  • Actual Size: Select this option to undo any changes you've made to the dimensions and return the image to its original size.
  • Custom Size: Select this option and specify the new height and width, in pixels or as a percentage. This setting doesn't affect the original image file, just the image inserted in your page.
  • Constrain: If you change the image size, it's a good idea to select this in order to maintain the image's aspect ratio (so that it doesn't appear distorted). If you choose this option, then you only need to change the height or width, but not both.

Click the Appearance Tab to edit:

  • Spacing: Specify the amount of space surrounding the image; between the image and adjoining text. You can also put a solid black border around the image and specify its width in pixels. Specify zero for no border.
  • Align Text to Image: If you've placed your image next to any text, select an alignment icon to indicate how you want text positioned relative to the image.

In the example below, the Appearance options chosen for the Meet Your Instructors image were: Left and Right: 10, Top and Bottom: 10, Align Text to Image: Wrap to the right.



Click the Link tab to edit:

  • Enter a web page location: If you want to define a link for this image, enter the URL of a remote or local page, or select a named anchor or heading from the drop-down list. Click Choose File to search for an image file on your hard drive or network.
  • URL is relative to page location: If checked, Nvu converts the URL to be relative to the page's location. This is especially useful if you plan to publish your pages to a web server so that others can view them. Using relative URLs allows you to keep all your linked files in the same place relative to each other, regardless of their location on your hard disk or a web server.


Editing Image Properties

Once you've inserted an image into your page, you can edit its properties and customize the layout in your page, such as the height, width, spacing, and text alignment. If you are not currently viewing the Image Properties dialog box, follow these steps:

To edit the properties for a selected image: Double-click the image, or select it and click the Image button on the toolbar to display the Image Properties dialog box.

Click the OK button to confirm your changes.