Nvu

From Academic Computing

Contents 1 Nvu (N- View) 1.1 How do I get it? 1.2 Getting Started 1.2.1 Alternate Screen View 1.3 Making Customizations 1.3.1 Font Editing 1.3.1.1 Font Tool Bar 1.3.2 All about color 1.3.2.1 Changing font color: 1.3.2.2 Changing background color: 1.3.2.3 Changing link colors: 1.4 Images 1.4.1 Adding a background image: 1.4.2 Adding Images 1.4.3 Linking an Image 1.5 Adding Links 1.6 Creating Tables 1.7 Saving your webpage 1.8 File Management

[edit] Nvu (N- View)

This is a web authoring program that is similar to dreamweaver and front page. This program is open source, which means that it is free to all users. This program will work on all platforms; including Macintosh, Linux, and Windows.

[edit] How do I get it?

Go to http://www.nvu.com. Then click on downloads. Next you need to select the appropriate operating system.

• I downloaded it, now what?
  • For Mac users: Open the disk image. Then drag the icon into the application folder. This will install the new program
  • DO NOT run Nvu directly from the disk image (the *.dmg file you just opened) or you will experience a never-ending loop. Please copy the Nvu icon in that disk image to your /Applications directory and run Nvu from there.
• What can I do with this program?
  • You can build a webpage! If you have ever used Front Page or Dreamweaver, this program will be very similar and easy to use. If not, don’t worry, it’s really not that hard to use anyways.

[edit] Getting Started

This is the main screen.

[edit] Alternate Screen View

These are changed by clicking on the tabs at the bottom of the screen.

---

You have four views: Normal, HTML Tags, Source, and Preview.

• Normal:

This is where you can do your basic webpage creation. By typing into the window you will add text to your page. Also by using the icons at the top tool bar.

---

• HTML Tags:

In this view you will see all the tags that the program has added for you. You will see “body,” “span,” “big,” and “small,” tags. Other tags that you may see are cascading style sheets (CSS) tags. This type of code is used for personalization of your page, such as color and positioning.

---

• Source:'

This is the actual source code for your page. Looking at the code you will see all the XHTML code and the CSS code that has been created for you using this program. If you are a more advanced user, you can use this view to edit.

---

• Preview:

The preview view lets you see what your page will look like inside a browser, such as when others open it via the world wide web.

[edit] Making Customizations

[edit] Font Editing

To put text into your webpage, simply type into the window in the “normal” view.

• If you would like to make the font bigger, such as for a heading of your page, click on the icon that looks like a big “A.” When holding the mouse over it, it says “Larger font size.”
• If you would like to make your font smaller, click on the “smaller font size” button, this looks like a smaller capital “A.”
• If you would like to change the font type of your text, you can do this by going to “Format” on the menu bar, then to “Font.” In this menu you will have the available fonts to choose from. Simply click on the desired font.
  • Note: Please remember, when using a non-standard font your webpage may not look the same on other computers. If someone loads your page on a computer that does not have your font available, it will substitute a font that it does have.

[edit] Font Tool Bar

This tool bar has everything you need to edit your text. Going from left to right you have:

• Smaller font size
• Larger font size
• Bold
• Italic
• Underline
• Numbered List
• Bulleted List
• Align Left
• Align Center
• Align Right
• Justify
• Indent text
• Outdent text

[edit] All about color

[edit] Changing font color:

• To change the font color click on the “choose font color for text” button. You can either highlight and then select the color to change the color of specific text, or, if you want to change the color of text from one point and then as you type it be the new color, just click on the color you wish to use and start typing.
• Another way of changing the font color, and all the other colors on your page, is by going to Format>Page Colors and Backgrounds.
  • Here you can change the color of your font, link text, active links, visited links, and background color.
  • Simply click on the color box and choose the new color.

[edit] Changing background color:

To change the background color click on the “choose color for background color” button. Here you can click on the color you wish to use. The changes will take affect when you click on "Ok".

• Note: If you have a specific color in mind, you can still put in the 6-digit hex code number into the boxes that are designated R G B. The first two letters of the hex code number are Red, the middle two are Green and the last two are Blue.

[edit] Changing link colors:

To change the colors of links click on Format > Page Colors and Backgrounds. Select the "Use custom colors" and pick the colors you want for each link designation.

[edit] Images

[edit] Adding a background image:

To add a background image click on Format > Page Colors and Backgrounds. Under the Background Image section type in the location of the image that you wish to use. For example, "/images/bg.jpg"

[edit] Adding Images

1. To add an image to your webpage, click on the “add image” button. Here you can search for your image and import it on to your webpage.
   • An important thing to remember is that you need to make sure ALL images that you are using are in the same folder as your webpage. If the pictures are linked from other locations on your computer, and you move an image, or put only the webpage on a disk or cd, you will no longer have those images on your webpage. Our suggestion is that you create a folder on your desktop (or other location) right from the beginning, and put everything you wish to have on your webpage, including the webpage itself, in that one folder.
2. After clicking the “Add Image” button, click “Choose File” to find that picture you are looking for.
3. Once you have chosen your file, decide whether or not you want to have an alternate text. Alternate text is used when a webpage is viewed as a text only document. When a web reader renders the site auditorily for the visually impaired, or without pictures, this gives the picture a definition. If you wish to not have this option, click on the “Do not use alternate text.” If you do wish to have this option, please type a short description or name of the picture.
4. Click Ok.
5. Once the image appears on your screen, you have the option of resizing and positioning.
   Use the alignment tools, like those used for text, to change where the picture is positioned.
   • You could also click on the “appearance” tab, before clicking okay and putting the picture on your webpage. Here you will have options such as forcing the text to wrap around the image.

[edit] Linking an Image

1. To link an image, use the same process as you did to add an image.
2. Before clicking okay, click on the “link” tab.
3. In the text box, type in the URL of the website you wish to use. Make sure you include the HTTP:// in front of the URL.
   • You also have the option to add a border around the linked image, which you can select by clicking on the check box next to that option.

[edit] Adding Links

1. To add a link to your page, click on the “Add Link” button.
2. Type in the link name. This is what will be underlined as the active link.
3. In the next text box, type in the link address. If you want it to go to an external site, remember to use the HTTP:// and then the web address.
4. If you wish to link to another page that you have created, type in the name of your page. For example, if I want to link to page 2 of my webpage, I would type in “page2.html” or whatever the name is of the other page. The rest of the web address (such as: www.mywebsite.com) is not needed so long as the other page exists in the same directory as the one linking to it.

[edit] Creating Tables

To add a table click on the "Table" button. To create a quick table specify the number of rows and columns by moving the mouse to the desired location on the table. Notice the table you specify is highlighted. When you have the desired dimensions click your mouse and a table is inserted in the page.

You can also specify the number of rows and columns by clicking on the "Precisely" Tab. Here you can specify the number of rows and columns. In addition you can also specify the width of each column and the size of the border.

The "Cell" Tab gives you additional table attributes including: Horizontal alignment, vertical alignment, text wrapping, cellspacing (sets a margin around the contents of all the cells in a table), and cell padding (sets a space between the cells of a table).

[edit] Saving your webpage

To save your webpage, click on the "Save" button. The prompt that pops up will ask you to make a name for your webpage. This title will be what will be seen at the top of the browser and also what will be saved as the title of the bookmark. Type in your title.

Next you will have a window that will give you the option to save. Take out the spaces of the document name and then click save. If you will notice, the program has already added the .html file extension for you. Click on save.

[edit] File Management