Creating a Web Page with Nvu

Creating a Web Page with Nvu

Important Note

Before you begin creating a web site, create a new folder as your working location. Everything that will be a part of your web page should be moved here. All of the pictures that you plan to include, and all subsequent pages will be saved in the one location. This will help the files be relative to each other, and it will make it so that no matter where you move these files from this point forward, they will work as a unit. Always work with the one folder.

Getting started

When you first download open Nvu, you will be faced with the window below. This program is designed to remind you of whatever program you are currently using for word processing. That’s to say, if you are using Microsoft Word, you will feel pretty comfortable using this program as well. There are toolbars running across the top of the screen with each button clearly labeled. The first row of buttons is called the Composition Toolbar and it will have all of the elements that are specific to web creation, such as links, tables and images. There is also a Formatting toolbar. The Formatting toolbar has the basic buttons for changing the size, color and alignment of the font, as well as the font face.

To begin a web page, you will essentially do what you would do to format a document in a word processing application.

Saving the Web Page

To save your work, go to the File menu and select the option to Save. The first window you will see will prompt you for a Page Title. This page title is not the name of the file; this is the title that would appear on the top of the title bar of the browser. Type in a name for the page, and then click the OK button.

The next window that opens will actually be where you get to name the file and generate the web page. Navigate out to the folder that you have created for yourself with all of your files and photos. It is best to keep the name of your web file to one word. At a minimum, you will want to make sure that the file name does not include spaces.

Changing the background

There are two ways to change the background of your web page. The first is to simply add a color; the second will allow you to use a picture.

The easiest way to change the background of your website to a color is to use the toolbar button or the menu. There is a button on the toolbar that looks like two overlapping boxes. The first, top-most box will allow you to change the color of the typed text. The second box will allow you to change the color of your background. When you click on the background color button a window will open allowing you to simply click on the color of your choice.

To add a picture as a background, you will have to use the Format menu. From the Format menu, pick the option called “Page Colors and Background” from the list. This will open the dialog box shown below.

You will notice that the first section of the dialog box will allow you to change any of the colors that are a part of your website. You can pre-determine everything from the normal text to what people see when they have visited one of your links. The second section of the dialog box deals with the background image. To add the image, click the button called “Choose File” and navigate out to the folder where your work will be stored, click on the photo you would like to use. Click the “Open” button which will return you to the dialog box. You will want to make sure that there is a check box that says “URL is relative to page location” is checked. When you are done, it should look as it does here. Click OK.

Text and Images

Working with text in Nvu is not different from working with text in a word processing application. If you would like to make text bold, italics or underlined, those options can be found on the Formatting toolbar. There are also buttons to change the alignment of the text. The familiarity of these buttons and their function should make working with text very straightforward.

Working with images is slightly different. To insert an image, you can either use the button on the Composition Toolbar, or go to the Insert menu and select the Image option. Either choice will open the same dialog box window for you.

There are four tabs that can be used here to edit the image that would be a part of your web page. On the first tab, you have the option to choose the photo that you would like to include. To do so, click on the Choose File button and navigate out to the folder that you have created for yourself with all of your files and photos. When you find the photo you would like, click on it and then click Open. Make sure that there is a check mark in the box next to “URL is relative to page location.” Moving down the window, you will see that you have a choice to use Alternate text or not. If you do not want to use Alternate Text, make sure you choose the option labeled “Don’t use alternate text.” The second tab in will allow you to change the size of the photo. The third allows you to change how the text around the photo will behave. The third tab allows you to use the photo as a link. Remember, links to web sites that you have not created all need to start with the prefix. For example, a link to will look like this:

Linking Two Pages that you have created

If you would like to create more than one page, and link them together, here is how you should begin. First, make two complete pages and save them both in one folder with all of the pictures you plan to use.
Go the document you want to use as the first pageand type "go to page 2" at the bottom of that page. Highlight "go to page 2" and go to the Insert menu and choose Link. When that opens, click the file you want to be page 2 from inside the folder with your work. Make sure there is a check mark next to the "URLis relative" box. Click OPEN and then OK. Save that work.
Next go the document you want to use as the second and type "go to page 1" atthe bottom of that page. Highlight "go to page 1" and go to the insert menu and choose link. When that opens, click the file youwant to be page 2. Make sure there is a check mark next to the "URLis relative" box. Click OPEN and then OK. Save that work.