Designing a Classroom Web Site Using NVU

1. Designing a Classroom Web Site Using NVU Beginning Level

2. Getting Started • Create a new folder on the desktop. • Change the name of that folder the same as your folder on the web server (example: smitha). • Save your web page in this folder. • Open your folder. Create a subfolder called “index_files” or “images”. • In this subfolder, save any images or additional content (other than text) that you will be putting on your web page.

3. Getting Started • Open Nvu Nvu Finally!  A complete Web Authoring System for Linux Desktop users as well as Microsoft Windows and Macintosh users to rival programs like FrontPage and Dreamweaver. Nvu (pronounced N-view, for a "new view") makes managing a web site a snap.  Now anyone can create web pages and manage a website with no technical expertise or knowledge of HTML.

4. Getting Started • Before you do anything more, save your page. Click “File” and select “Save as” from the drop-down menu.

5. Getting Started • Before you can save your page, Nvu will prompt you to give it a Title. This is NOT the filename, but rather is what will appear in the Title Bar of a browser when your page is on the web.

6. Getting Started • After you have given your page a title, Nvu will prompt you to save. • Name your first page (which will be the home page for your site) “index.” • Make sure the “Save as type” box says “HTML Files.”

7. Getting Started • Be sure to choose the location where the file will be saved on your computer, (so you don’t lose it!) and press the Save button.

8. Getting Started NOTE:  All file names should be one word (no spaces).  This includes .html file names and file names for pictures.  We also recommend you not use capital letters in file names and NEVER use punctuation marks.  Always save your work frequently!!!! Nvu does not have an automatic rescue in the event your computer crashes, so save, save, save!

9. Page Colors and Backgrounds Before creating your background you must decide whether you plan to use a solid color background or a background image.  Background images are located on your computer and on the Internet.  It is best to locate the image first and save it in your folder before going to the next step.

10. Page Colors and Backgrounds

11. Page Colors and Backgrounds • On the top menu line click “Format.” Select “Page Colors and Background.” • Select “Use Custom Colors.”  This enables you to choose a solid background color and the appropriate text colors. • You will also need to select the color of your links (active and visited).  Consider the color of your background when you do so. • To use a background image: Click the button that says “Choose File.”Select the location of the background you have found or downloaded from the Internet. • After these decisions have been made, click OK.

12. TEXT Type the text as you would in any word processing program. Text changes are made by first highlighting the passage you desire to change.

13. TEXT You can change font style by clicking the dropdown triangle beside the text “Variable Width.” NOTE: Make sure you use a standard font (Times New Roman or Arial) or the visitor may view your webpage in binary code.

14. TEXT To change the size click the “A” arrow that points up to increase or down to decrease the size.

15. TEXT Font color can be changed by clicking the button that looks like a black box.

16. TEXT Font can be made bold, italicized, and underlined by first highlighting the text and then clicking the appropriate buttons on the tool bar.

17. TEXT There are also four buttons on the tool bar to control text alignment once the text has been highlighted.

18. WORKING WITH IMAGES Before you insert images (pictures, icons or other graphics) you must first save them in your index_files folder on the desktop.  Some images on the Internet are very large and should be edited by cropping or resizing using an image editing program.

19. WORKING WITH IMAGES To insert a graphic, on the top menu line click “Insert” and select “Image” or click the Image Icon on the toolbar. In the Image Properties screen, click Choose File.

20. WORKING WITH IMAGES In the “Image Properties” box, click the button that says “Choose File.” The “Select Image” window will open and allow you to find and select your image.

21. WORKING WITH IMAGES After you have chosen your image, type an explanation of what your image is (for the benefit of those who cannot view graphics) in the “Alternate text” box or click on the button that says “Don’t use alternate text.”

22. WORKING WITH IMAGES Resizing your images is easily managed in Nvu. Simply click and resize using resizing window points as in any Windows program. If you need to make a picture a specific size or a group of pictures all the same size (if you are putting them in a table, for example) that is also easily accomplished.

23. WORKING WITH IMAGES Resizing to make a picture a specific size is accomplished by clicking on the tab titled “Dimensions” and then clicking “Custom size.” You can highlight one number and change it and the other number will change automatically. (See following examples).

24. WORKING WITH IMAGES

25. WORKING WITH IMAGES Images may be hyperlinked by clicking on the “Link” tab and typing (or pasting) the web address in the appropriate box.

26. HYPERLINKS Hyperlink to a new page: 1.  First create and name the new page.  Click the “New button” on the top toolbar.  Complete the previous “Getting Started” steps, but give this new page a different name, such as myclass.htm or homework.htm. 2.  To hyperlink to this new page highlight the text or object you wish to link and click the link button on the top toolbar. 3.  Click Choose File and find the name of your new page and click OK.

27. HYPERLINKS Linking text Filename or address of new page.

28. HYPERLINKS URL Site Hyperlinks 1.  To hyperlink to another website, highlight the text you wish to link, and click the link button on the top toolbar. 2.  Beside link location type http: and the entire address (for example: type http://www.cnn.com to hyper link to CNN Online). An easy way to be sure you do not make a typo is to open a new window in Internet Explorer and go to the website you want to link to. Copy the address from the address bar and paste it in the link location box. 3.  Click OK. The text will now be hyperlinked and will become the color selected earlier for active or visited hyperlinked text.

29. HYPERLINKS Copy THIS To HERE

30. HYPERLINKS Email Hyperlinks 1.  To hyperlink to an email address, highlight the text you wish to link, and click the link button on the top toolbar.  2.  Under hyperlink type type mailto:  and the entire email address (for example:  type mailto:smartsue@k12tn.net) and click OK. NOTE:  Do not use any spaces in this text.)

31. HYPERLINKS

32. TABLES 1.  To insert a table quickly, click Table on the top toolbar. 2.  Choose the number of rows and columns needed for the table using the “Insert Table” window.

33. TABLES 1.  To insert a table with greater control of your options, click Table on the top toolbar. 2.  Click the “Precisely” Tab on the “Insert Table” window. Choose the number of rows and columns needed for the table. You may also choose the table width on this tab. Table width should be in “% of window”. Do not select a height.

34. Tables • To position a table on a web page, select the table and right click. • Choose Table Cell Properties and sure the Table tab is selected. • Table alignment • Right • Left • Center

35. TABLES   To format the cells in a table, click the “Cell” tab on the “Insert Table” window. Here you may control horizontal and vertical alignment, cell padding and cell spacing and even set your table for text wrapping.

36. TABLES NOTE:  Using the number zero in the “border” width section (under the “Precisely” tab) will create a table without visible borders.  This is the Easiest and BEST way to align text or images on a web page.

37. TABLES You can also add color to your table by clicking “Format” and selecting “Background Color” (under either tab) and clicking the rectangular button beside those words.  Then click the desired color.

38. There’s More…But Not Today!!!! You have completed a basic web page! So PRACTICE what you have learned …and come again!!!!