eHow launches Android app: Get the best of eHow on the go.

How To

How to Work With Images in Nvu

Contributor
By Virginia DeBolt
eHow Contributing Writer
(1 Ratings)
Nvu is an Open Source WYWIWYG HTML Editor
Nvu is an Open Source WYWIWYG HTML Editor

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.

From Quick Guide: Graphics Software
Difficulty: Moderately Easy
Instructions

Things You'll Need:

  • Nvu software
  1. Step 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. Step 2

    Open one of your site's HTML page open in the Nvu editor.

  3. Step 3
    Place the cursor where you want to insert the image.
    Place the cursor where you want to insert the image.

    Position the cursor at the point where you want to insert the image.

  4. Step 4
    Click the image icon.
    Click the image icon.

    Click the image icon in the tool bar at the top.

  5. Step 5
    Set the options for images.
    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. Step 6
    The advanced options for images
    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. Step 7
    The image on the page
    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. Step 8
    A summary of the style rules for image
    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. Step 9
    You can add CSS rules to the image.
    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. Step 10
    The rule is reflected in the image placement.
    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.
Subscribe

Post a Comment

Post a Comment

Related Ads

  • Have you done this? Click here to let us know.
I Did This
Tags
Get Free Internet Newsletters

Copyright © 1999-2009 eHow, Inc. Use of this web site constitutes acceptance of the eHow Terms of Use and Privacy Policy.   en-US Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.

Demand Media
eHow_eHow Technology and Electronics