CTLE Online Tutorials / Technology Tutorials / Creating Student Web Pages

Creating Student Web Pages:
Nvu

Nvu (pronounced "N-view," for a "new view") is a free, open source software program that allows you to build websites and web pages using a simple WYSIWYG editor (what-you-see-is-what-you-get). In this tutorial, you will create two sample pages. A Home Page (default), and an "About Me" page. You will learn how to add and manipulate text, add images, create hyperlinks, and create and manipulate tables. Screen shots of sample web pages that you will create through this tutorial are listed below. To view them in full size, click "large image" below each screen shot.
Nvu is available for free here.

Creating the Home Page (Default page)

Sample Homepage [large image]

1. Open Nvu
2. From the FILE menu choose New. In the popup window, select A Blank Document, then click Create. You are now ready to begin adding content.
3. Enter some text, for example "John's Homepage", in the main editor window.
4. Center the text by highlighting the text and clicking this icon on the toolbar.
5. Modify the Font Type and Size by highlighting the text and then from the Format menu choose Font. Scroll through the list and highlight one to choose it. For example, Bradley Hand ITC. Then click Size to increase or decrease the selected font's size. You can also change the Font Color by clicking Text Color, then selecting a color from the palette. Click OK to close the window once you've made your choice.
6. To change the background and link colors, go to Format and choose Page Colors and Background. Here you can change the background color, as well as your hyperlink colors, and text color for the entire page.
7. Creating a Table – Next you will create a table that has 3 rows, 2 columns. To do this:
   • Go to the Table menu, and choose Insert › Table.
   • Make a table that is 3 rows, and 2 columns.
   • You can also change sizes, alignment, colors, etc. by clicking Table › Table Properties.
8. Join Cells - To have all the cells in the 2nd column of the table appear as one large cell, highlight the 2nd column and from the Table menu choose Join Selected Cells.
9. Go to File › Save As, then enter a Title for your page in the new window and hit OK. Choose a location on your computer, then Save the page as default.html by typing that into the File name field. Your homepage MUST be named this so that it appears when you access your web site.
    
   * Note: You should save your work frequently to prevent losing it.

Sample Homepage 2 [large image]

Now that you have a home page created, there are a number of things that you can do. In this section you will learn how to create hyperlinks and add your e-mail address.

1. In the first cell of the first column in the table, you will make a hyperlink called "Home." Right click in the cell and choose Create Link.
2. In the "Link Text" field, type "Home."
3. In the "Link Location" field, type "default.html." Click OK.
4. In the second cell of the first column in the table, you will create another hyperlink. Right click in the cell and choose Create Link from the drop-down menu.
5. In the "Link Text" field, type "About Me."
6. In the "Link Location" field, type "aboutme.html." Click OK.
7. In the third cell of the first column in the table, you will create a third hyperlink. Right click in the cell and choose Create Link from the drop-down menu.
8. In the "Link Text" field, type "Writing 218."
9. In the "Link Location" field, type "writing218.html." Click OK.
10. SAVE these changes by choosing File › Save from the File menu or click the Save icon on the toolbar.
    • * Note: If you want to create hyperlinks between web pages or add images to pages, be sure that the files (html and graphics) are saved in the same directory, otherwise the address will be incorrect.
11. Next, you will create an E-mail Link on your home page so people can send you email.
12. Place the cursor below the table, leaving one blank line, and type "Email me at: username@scranton.edu". Select your email, then right click and choose Create Link from the drop-down menu.
• * Note: If the cursor will not appear below the table, you may have to click to the right of the table, then press Enter.
13. Under "Link Location:", enter your email address again, then check "The above is an email address."
14. The Link Text field will already contain the text you highlighted, so just click OK.
15. SAVE these changes by choosing File › Save from the File menu or click the Save icon on the toolbar.
16. You can view your page by going to File and choosing Browse Page.

Creating the "About Me" Page

Sample "About Me" Page [large image]

In creating this page, you will learn how to add images and make an unordered (bulleted) list.

1. From the File menu choose New and check "A Blank Document", then click Create.
2. Enter some text and Modify the Font by highlighting it and choosing options from the Format menu. You can center it, choose a font type and size, and change the font color as you previously did when creating your Default page.
3. Format the background color, text color, and hyperlink colors as you previously did.
4. Go to File › Save As... and type About Me as the title. Then enter aboutme.html as the filename to save as.
• *Note: You should save all pages and images in the same folder/directory as your default.html page.
5. Next, you will add a picture to your page from your computer.
• The picture that you want to add (.jpg or .gif) should be placed in the same folder as your web page(s).
• *NOTE: When you add an image to a web page, you must upload the page AS WELL AS the picture.
6. Go to Insert › Image.
7. Click on Choose File, then locate the image you'd like to add and click Open.
8. Make sure the "URL is relative to page location" option is checked.
9. Enter Alternate text for the image. This should be a short (2 or 3 word) description of the image.
10. A preview of your picture will be displayed on the bottom-left side of the window.
11. You can specify the size for your image in the Dimensions tab. You can also modify text wrapping and spacing around your image from the Appearance tab.
12. When you are satisfied, click OK to place the image on your page.
13. To resize the picture, click once on the picture and it will be outlined with small black boxes. By placing your mouse over one of the corner boxes, the icon will change into a double arrow. Click and hold the mouse button down and drag it down to increase it and up to decrease it.  Release the mouse once you have the desired size.
14. If your image appears on the same line as your text, you can place your cursor before the image and press Enter. This will move your image down one line.
15. Next, you will create a bulleted list to highlight some of your interests. Place your cursor after the picture, press enter once or twice, and type the text: "Some of my interests are:", then press Enter.
16. Click on this icon to start a bulleted list. Type text for each bullet. Add a new item by pressing Enter. Click the icon again to end the list.
    
    • *TIP: When creating bulleted lists, it is best to keep them left aligned, so all the bullets line up. If you would like to have a centered list: 1.)Select the entire list, then click the Table icon in Nvu. 2.) Click OK leaving the default options in the popup window. 3.) Select the table, go to Table › Table Properties and align center. You may have to resize the table according to the length of your list items for the table to appear centered.
17. SAVE these changes by choosing File › Save from the File menu or click the Save icon on the toolbar.
    
18. You can view your page by going to File and choosing Preview in Browser.

Creating Additional Pages

1. Additional pages can be created in the same way as the About page. Just be sure to save pages under their respective names.

You have just completed creating two web pages (default.html, aboutme.html). The next step is to upload these web pages to your directory on the Academic server. Click here to view the Upload Your Files Tutorial (FTP) tutorial.

Other things you can try:

• Making a Picture the Background: Go to Format › 'Page Colors and Background' and browse for a picture in the "Background Image" area. Remember: all images and pages should be in the same folder.

Back to: CTLE Tutorials / Technology Tutorials / Creating Student Web Pages