How to Build a Website Using Nvu

If you don't have Nvu, you'll need to install it. Go to http://nvudev.com/download.php and download the software from one of these links:

nvu-1.0-win32-installer-full.exe - Windows full installer
nvu-1.0-win32-full.zip - Zip version of the above file for those behind restrictive firewalls. For this tutorial, we're going to make a simple 2-column, 1-page website with 3 sections.

Open Nvu. You should see a box that gives you a Nvu tip. Just click on the red X to close the box. Now you'll have a big white box with a tab that says Untitled on it. Our website is going to have 3-sections. The first page will be the Home section. The second section will be Events and the third section will be Contact Us.

First, we're going to set the background and text colors. Select Format from the menu at the top of your screen and select Page Colors and Background. In the box that pops up you will have the option of keeping the default colors or selecting your own. Select Use custom colors. Select the colors you want by clicking on the color next to each option and selecting it from the color palette that pops up. After each selection click OK. When you're finished selecting your colors, click on OK in the Page Colors and Background dialogue box. If you change your mind later about the colors you've selected, just go back to this step and it will automatically change the color of the background and any text you've already entered.

Now click on the Table icon. The box that pops up will allow you to drag the cursor to select the number of cells you want up to 6x6. The table size we want is 7x2. There are three tabs near the top of the box. They say Quickly, Precisely and Cell. Click on the tab that says Precisely. Type 7 in the box next to Rows, 2 in the box next to Columns, 860 in the box next to Width and 0 in the box next to Border. Click OK. A red table will now be shown on your screen.

Click in the top left-hand cell of your table and drag your cursor across the other top cell so that the cells are highlighted with light gray boxes inside them. From the menu at the top of your screen select Table and then Join selected cells from the drop-down menu.

For this next step, we're going to use Paint to create a header image and insert it in our website. If you have the software, you can use a different program to create a high quality image, but for the purpose of showing you what size your image needs to be and how to insert it, we're going to use Paint. Open Paint and select Image from the top menu and then select Attributes from the drop-down menu. Type in 860 in the box for Width and 200 in the box for Height. Make sure that Pixels is selected under Units. If you want your image to be in color, you'll need to make sure color is selected. Click OK. This image is going to go all the way across the top of your website and will most likely be the first thing the reader of your website will see. While creating your image header, add any text you may want. If you're creating a website for business use, you'll probably want to include your company name and logo in the image. Save your image. You can either close Paint or minimize it and go back to the Nvu screen.

The top cell in your table should be highlighted with a light gray box inside it. if it's not, just click on the cell. Next, click on the Image icon in the toolbar menu and then click Choose File. A box will pop up for you to select the image file you want. Select your image and then click Open. You should see a small picture of the image you selected in the bottom left-hand corner of the box. Above that are options for alternate text. The default is alternate text and if you want, you can type in a description of the image in the white box, otherwise, click in the circle beside Don't use alternate text. Click OK.

For future reference, when you're working with inserting images that haven't been customized to the size you want and your image is rather large, you can adjust the size. This can be done by clicking once on the picture and then moving your cursor to the little white box on the right-hand bottom corner of the image so that it turns into a diagonal line with arrows on each end. Click and drag your cursor to adjust the image size. If the original image is too small, adjusting it will distort the image so it's best to start with a large image and adjust it to a smaller size.

Now you should see your header image in the top cell of your table. Click in the cell on the left-hand side under your header image. Here you want to type in Home. Click in the cell underneath the cell you just typed Home in and type in Events. Underneath that cell type in Contact Us. As you typed, you may have noticed that the right side of your cells moved to the right. Above your header image there is a bar that should say 785px and 67px. In between there are gray bars that you can move your cursor over until it turns into a horizontal line with arrows on each end. Click on the gray bar to the right of 785px and drag it to the left until the number has changed to 130px.

Click in the cell that says Home. Select Table from the top menu and select Table or Cell Background Color. This will change the color of the cell creating the effect of a clickable button. Repeat the same process for the cells that say Events and Contact Us.

The next step will be inserting the information you want in the Home section of your page. Click in the cell on the right-hand side under your header image and drag your cursor down to highlight the three cells on the right-hand side of your table. You should still have 3 rows underneath the cells that you've highlighted. Select Table from the top menu and select Join Selected Cells from the drop-down menu. Now enter the text that you want in your home section by clicking in the cell. To format your text, highlight the text you want to change, select Format from the top menu and then select the options you want to change from the drop-down menu.

Depending on how much information you enter and how you format your text, the height of your "buttons" (Home, Events, Contact Us) may have changed. If you want to change the height of your buttons, click on the cell that you entered the information for your home section and drag down to highlight two of the three cells underneath. Select Table from the top menu and then select Join Selected Cells from the drop-down menu. If you're still not happy with the height, click in the bottom cell on the right-hand side and then push the Tab button on your keyboard. This will add an additional row to your table. Continue adding rows and joining cells until you're pleased with the result. You can also add more rows by selecting Table from the top menu, Insert from the drop-down menu and Row Below from the slide-out menu.

For the Events section of our website, we're going to select Edit from the top menu and Select All from the drop-down menu. Select Edit again and then Copy from the drop-down menu. At the bottom of your screen you will see tabs that say Normal, HTML Tags, Source, and Preview. Click on the tab that says Source. This will show you the HTML code for everything that you have done so far. Scroll to the very bottom of the page. The last few lines of code will be < /table >, < /body > and < /html >. You want to type in the code < br > a few times in between < /table > and < /body >. It should look like this:

< /table >

< br >< br >
< /body >

Now click on the tab that says Normal and click just below the table so that your cursor is flashing on the left-hand side of the page underneath the red table outline. Push Enter a few times on your keyboard to add space between the Home Section and the new section you are creating. Select Edit from the top menu and Paste from the drop-down menu. Scroll down to the section that you've pasted. Here you can either use the same header image from the Home section of the website or you can create a different header image using the same process you used to create the header image for the Home section. If you want to use a different image, click on the header image and then click the Image icon. Select the new image file and click OK. Next, click in the cell where you typed in your information for the Home section. From the top menu select Table, Select from the drop-down menu, and Cell from the slide-out menu. This will highlight the cell with a light gray box. Push delete on your keyboard. You don't want to select cut because you want to save what is on your clipboard for pasting the information for your Contact Us section. For the information in our Events section, we're going to select Table from the top menu, Insert from the drop-down menu and Table from the slide-out menu. Select the Precisely tab and enter 4 rows, 2 columns and for the width you need to enter 100 and change the box that says pixels to % of cell. Enter the information for your Events section. As you type you'll notice that the cell size will change. It's best to finish entering the information and then adjust the cell size if you need to by dragging the gray bar like we did when we entered the information on the left-hand side of the website.

To add the last section of the website, click just below the red outline of your table and push Enter a few times on your keyboard. Select Edit from the top menu and then Paste from the drop-down menu. Scroll down to the section that you've pasted and click in the cell where you typed in your information for the Home section. From the top menu select Table, Select from the drop-down menu, and Cell from the slide-out menu. This will highlight the cell with a light gray box. Push delete on your keyboard. Now we'll enter the information about where you can be contacted. After you've entered your contact information, making sure you've added your email address, highlight your email address and select the Link icon from the toolbar menu. In the Link Properties dialogue box you'll enter your email address, i.e, chris_annette@yahoo.com, check mark the box The above is an email address, and then click OK. Another option is to type in Email Us or something similar, highlight the text and click the Link icon. In the Link Properties dialogue box enter your email address, i.e, chris_annette@yahoo.com, check mark the box The above is an email address, and then click OK.

Now scroll to the top of the website and click on the header image from the Home section. Click on the Anchor icon in your toolbar menu. In the Named Anchor Properties dialogue box type in home under Anchor Name: and click OK. Scroll down to the Events section of the website and click the header image. Click on the Anchor icon in your toolbar menu. In the Named Anchor Properties dialogue box type in events under Anchor Name: and click OK. Scroll down to the Contact Us section of the website and click the header image. Click on the Anchor icon in your toolbar menu. In the Named Anchor Properties dialogue box type in contact under Anchor Name: and click OK.

Scroll back to the top of the website and highlight the text that says Home on the left-hand side of the table under the header image. Click the Link icon from the toolbar menu. In the Link Properties dialogue box, click on the arrow to the right of the white box to show a drop-down list. Select #home from the list and click OK. Highlight the text that says Events on the left-hand side of the table. Click the Link icon from the toolbar menu. In the Link Properties dialogue box, click on the arrow to the right of the white box to show a drop-down list. Select #events from the list and click OK. Highlight the text that says Contact Us on the left-hand side of the table. Click the Link icon from the toolbar menu. In the Link Properties dialogue box, click on the arrow to the right of the white box to show a drop-down list. Select #contact from the list and click OK. Repeat this same process for the Events section and the Contact Us section.

Select the Save icon from the toolbar menu, enter the title you want for the website. This is what will be seen in the top bar of the browser when viewing the website. Click OK and another box will come up asking you for the filename you want to use to save your website. Save the website as index and it will be ready to upload to the internet. You can test your website out by opening the file from your browser.