How to Work With Images in Nvu

Nvu is an open source WYSIWYG HTML editor that is used to create web pages. It is available for free from nvudev.com (see link below) and works on Windows, Mac and Linux. This article will show you how to work with images in Nvu.

Instructions

Difficulty: Moderately Easy

Things You’ll Need:

• Nvu software

1. I assume you already have Nvu downloaded and installed. Refer to my article on how to use Nvu if you do not (see link in Resources below).
2. Open one of your site's HTML page open in the Nvu editor.
3. Place the cursor where you want to insert the image. Position the cursor at the point where you want to insert the image.
4. Click the image icon. Click the image icon in the tool bar at the top.
5. Set the options for images. Browse to find the image. Add alt text. (There is an option to have no alt text. Be sure you know about good alt text choices if you select this option. See link to my article in Resources below). You also have tabs that would allow you to change the image dimensions. (I don't recommend doing this.) You can set up some Appearance options which use deprecated HTML, so again, I don't recommend this—use CSS instead. And you can make the image a link.
6. The advanced options for images If you click the Advanced Edit button in the image dialog window, you can add additional HTML attributes, inline styles (it's better to stick with an external style sheet) and JavaScript events.
7. The image on the page When you finish with the image dialog, click OK (or Save). The image will appear on the document in the position you selected.
8. A summary of the style rules for image If you have any CSS rules for images in your stylesheet, such as the border rules summarized in the CSS editor, they will be reflected on the page. Of course, you could add other CSS rules to the img element.
9. You can add CSS rules to the image. For example, you could apply a class to the image to make it float to the right. I have a class called .floatright in my stylesheet all ready to go. To assign it, I select the image in the document window, then I choose the class from the CSS drop down menu at the upper left.
10. The rule is reflected in the image placement. The image will move to the right margin after the class is applied. Any text or other elements you add after the image will wrap around the image on the left.
    
    This class rule could be applied to other elements besides images. And you could write many other CSS rules that would enhance the appearance of the image on your web page.

Tips & Warnings

• Check eHow for my other articles on Nvu. This is one of a series.