Nvu is a web-authoring tool that looks like most word processors like Microsoft Word. It allows you to create web pages as well as publish them to your TQNYC account. It is free and can be downloaded and installed on as many computers as you wish.

The following lesson can easily be adapted for use in the classroom.

Overview

In this tutorial you will learn how to:

• Save images from the Internet
• Create a webpage
• Modify text
• Insert images into a webpage
• Create hyperlinks
• Insert Tables
• Link a series of pages together
• Publish your site on the Internet

Step 1: Search For & Save Graphics

Creating unique graphics is a great idea. However, lots of royalty free images exist all over the Internet. Here is one great resource: www.pics4learning.com

1. Go to the Website
2. Scroll through thumbnails
3. Click on a graphic to enlarge
4. Right-click on the graphic and select “Save picture as…“
5. Create a new folder in “My Documents” or somewhere you will easily find it. Name it the Team ID of your team. if you do not have a team id call it “tqnyc”. This is your “project folder”.
6. Save the graphic to your project folder.
7. Repeat process and find two more graphics

*Rename your graphics to be descriptive and all lowercase.
No spaces or special characters in name except “_” underscore.

Step 2: Build the Home Page

The “home page” of your website, or the first page you want people to see when they come to your site, is ALWAYS named “index”. This is a convention that has been in place since the early days of the World Wide Web.

Launch the Nvu web editor

Add a header or title to the page. Use the alignment tools and the font sizing tools in the second row of buttons from the top. You can also change the color of the font of the title.

Type a paragraph about your topic, the categories it will cover, and why this topic is interesting to you.

Save page: From the top toolbar select “File -> Save As..” will ask you for a title for the page. This is not the filename, although it will default to what you type here. You should title the page with what you would like to appear when someone bookmarks your page. For example if your site is about animals you might name the home page “Our animal home page” and click “OK”.

Hint! Use all lowercase characters in your file names, especially “index.html”. A capitol “I” in index.html will cause problems.

Saving your pages early on will make everything easier as you add to your site. When graphics are linked into web pages the links are handled automatically if Nvu knows where the page is saved. This is true for links to other pages too. “Save early and often” Is our motto!

Next a “save” dialogue box will appear where you should select your project folder as the “Save in:” location and then type “index” into the File name and click “Save”.

Insert an image: If you have not saved your page yet, do so now. If you do not the link to the image will not be correct. From the top toolbar select “Insert > Image” then click “Choose File..” on the pop-up box Select your image in your project folder. Nvu will ask for “alternate text” which is used by non-visual browsers. This is usually a description of the graphic or the graphics function. You can always select the “Don’t use alternate text” and leave it blank. Once you have inserted the image you can click it and drag the corners to resize it.

If you added an image to a page that has not been saved you will see a long string of characters in the “Image Location” box after you select it like this.

The above link will only work on the local computer. When you upload this page with the graphic it will not appear on the page, it will appear as a broken icon.

A correctly linked image looks like this.

Change background color

From the top toolbar select “Format > Page Colors and Background..“. Select “Use custom colors:” and click the button with the color on it next to the different labels.

Play with colors and see the preview in the small window.

Hint! if you make the text and the background the same color it will not be visible.

When satisfied click “OK” then click “Save”.

Step 3: Build Content Pages

1. Create a new document
2. Create text for your content pages
3. Insert an image
4. Change color of background, text, etc.
5. Save as “content”

Step 4: Repeat as necessary

• For today’s lesson… keep the content simple!
• Create 4 pages in total, index.html, content.html, about.html and bibliography.html

As you create new pages new tabs will appear over the main section of Nvu. This allows you to easily go back and forth between pages. The title you give the page will appear in the tab for easy navigation.

Step 5: Create A Table

Next you will create a table into which you will put the navigation of your website. Tables are handy when you need to display information in columns and rows. Each “Cell” of the table can be customized. Also, whole tables can be copied then pasted onto subsequent pages to make for a uniform navigation throughout the site… not to mention the ease and efficiency!

1. Click on the left most tab above the main section of Nvu. It should have the title you gave your first page.
2. Move your cursor to where you would like your table of links to appear
3. Insert a Table by clicking the table button then select one row and three columns.

Step 6: Format Tables & Cells

1. Adjust the width, color, and alignment of your table’s borders
   1. Place the cursor in the table.
   2. Click “Format > Table Cell Properties…” in the top toolbar.
2. Adjust table color the Background Color of the table will also serve as the border color if you change the cell background colors..
3. Align table by selecting an option from the Alignment drop-down box.
4. Test the Table Properties by clicking Apply.
5. Click “OK” on the Table Properties dialog box.
6. Change Cell Properties: Right click within each cell>Cell Properties and change the Background Color so each cell is a different color.
7. To add text to a table: Place the cursor into the cell you where you want the text and type or paste it.

Once your table is created on the page to edit the properties of it or it’s cells from the top toolbar select “Table > Table Properties“.

Step 7: Link Pages Together

This is where the magic happens. We will turn your table into a functioning menu bar by linking the text in each cell to their appropriate page. Never add a link to a page until you have saved that page.

1. Select the text in your content cell
2. Click on the hyperlink button
3. Click the “Choose File” button.
4. Select the “content.html” file and click “OK”.

If you want to add an external link you would include the ” http://”
URL: http://www.tqnyc.org

Step 8: Test Your Links

Now you can preview your pages in a browser.

Select in the top toolbar “File > Browse page” and the page open in Nvu will be opened in your default browser.

If any of the links do not work, check:

1. To see if link names are spelled correctly, if there are spaces, etc.
2. You have saved all your documents.

Step 9: Adding All The Good Stuff

Now that you have mastered the Basics, let’s talk about enhancing your website. Here are some ideas:

1. Continue to add pages, such as a Links Page
2. Include a “Contact” link to your e-mail address
3. Add the navigation to your sub pages
4. Use graphics for buttons just select the graphic and Hyperlink as in Step 8 *Look at the Photoshop tutorial.
5. Add animated .gifs to your site
6. Create a continuous design by creating a template.
7. And, most important to the ThinkQuest NYC Contest: think about how to add interactivity.

Step 10: Publish

Nvu has an integrated uploading tool - however - it uses FTP for file transfers and this is not supported on the current ThinkQuest NYC server (new for 2009). The current methods available for file transfers are a browser-based utility and WebDAV.
Please see this page for more information.

Step 11: Test your site in a browser

Now that you have uploaded your files, it is important to see them when they are coming from the ThinkQuest server. Instructions (new for 2009) for testing your site can be found here.

If you see “X”’s where pictures should be they were either not uploaded or linked improperly. Click on your hyperlinks and make sure everything works. If not you can edit the pages in Nvu and then publish them again. A lot of web development is trial and error.

Congratulations you have now published your first web site on the World Wide Web for anyone in the world to see.