NVU Web Authoring System http://www.nvu.com/index.php
Table of Contents Using Nvu as Your Web Page Authoring System: Getting Started Opening a page, saving, and previewing your work...3 Formatting the background...4 Setting color of page text and links...5 Editing and Adding graphics...6-7 Working with Text..8 Working with Links... 9 Working with Anchors..10 Using Tables to Place Text and Graphics 11-12 Saving..13 Working with an Imported Template 14 How to Edit a Published Page...15 2
Using NVU as Your Web Page Authoring System: Getting Started 1. Atomic Learning has some tutorials for NVU that can be viewed at http://www.atomiclearning.com/nvu_intro. 2. Open up the NVU program by double-clicking on the NVU shortcut icon on your desktop. 3. When you open the program, a new page is already created for you. To create additional new pages, go to File > New or click on the New icon on the Composition Toolbar. OR (To open an existing page, on the Menu Bar, click File > Open File. Or click on the Open icon. Then navigate to the folder which has the page you want to open.) 4. Saving a page: (see page 13) 5. Previewing a page: To see how your page will look in your default browser, on the Composition toolbar click Browse. It will then launch a browser (like Internet Explorer or Firefox) to view your page. You can either close or minimize the browser page and return to NVU to continue working. Note: Each time you preview, it will prompt you to save if you haven t already. 6. Quick Saves: Save OFTEN! After you have saved the first time and given your page a name, then you can do quick saves by clicking on the Save icon. (Note: If you have already saved all the changes you ve made, you will know this because this icon will be greyed out.) 3
4. For creating a page without a background graphic: Formatting the background: Go to Format > Page Colors and Background 5. This is where you can select the colors for the text on the page, the color of the hyperlinks you create, the color the viewer sees once the hyperlink has been visited, and the background color of the page. Click in the colored (or white) box by the word Background. Select a color from the color palette that pops up. You will now see the color you chose in the large window of this dialogue box. Notice the colors of the text on the background color. You can make changes to any of the colors of text by clicking in the colored boxes and selecting new colors from the palette. When you preview the page, if you don t like the colors you selected, you can come back to this dialogue box and make changes. IMPORTANT NOTE: If you use any graphics in your webpage, the graphics and the html files for your webpage need to be in the same folder. Otherwise the path from the page to the graphic will be broken, and all you will see are red X s when you view the page. For information on using a graphic as a background on a webpage in NVU, see the following page. 4
6. To use a graphic for a background: FORMAT > Page Colors and Background Click on Choose File. (For a variety of background tiles, try http://www.grsites.com/textures/. This site is easy to search, to try out different colors of text on the background, resize backgrounds, create logos, buttons, navigation bars, etc. to match.) 7. Choosing your background graphic: Navigate to the folder where you saved the graphic you want to use for a background. Click on the graphic. Click OPEN. 8. You will now see the background in the little window. The default colors of the text and links on top of this background. Adjust the colors of any of the links to coordinate with your web background. 5
Editing and Adding Graphics in NVU 1. To delete an existing graphic, click on the graphic until you see the little squares in the corner. (This means the graphic is highlighted.) Next, hit the Delete button. 2. To insert a graphic, first click in the area where you want to add the graphic. Then click on the icon for a graphic in the toolbar. 3. Then click on Choose File. 4. Navigate to the folder that has the graphic you want to use. (Note: If you are using a webpage template that has graphics, you should first save all of those graphics into the same folder where you will be saving your webpage. You can have a separate folder inside that folder for images IF you plan to have MANY pages with MANY graphics.) 5. When you click on the icon, it will bring up a dialogue box: Name of the graphic If you want the viewers to see some text a tooltip when they click on the graphic, type it in here. Alternate text shows up when a page is loading, if the path to the graphic somehow gets broken or unlinked, AND it is there for accessibility for disabled persons (i.e. a vision-impaired person might have a text-to-speech computer which reads everything aloud when the mouse is passed over the page or a page is highlighted. It will read the alternate text for the graphic. For more on Section 508 and the ADA (Americans with Disabilities Act, visit http://websitetips.com/accessibility/ section508/) This is the actual size of the graphic, NOT what you might have resized it to by dragging the corners in. (See more about this in the next step.) (Directions for working with graphics is continued on the next page.) 6
6. Dimensions - To change the size of your graphic, click on the Dimensions tab. Click on Custom Size. Change the dimensions of the photo or graphic. (It s best to keep the box next to Constrain checked. This will resize the height and width proportionally so you don t end up with a graphic that s either too tall, short, skinny, or fat.) 7. Appearance To change the spacing around a graphic (how the text wraps around the graphic), click on the Appearance tab. You can choose how you want the text to align with the image by using the drop down menu. You need to play with this to get the idea of the different choices. If you want to put a border around the graphic, start with a pixel size of 3 and adjust up or down. You can add more spacing around a graphic by adding pixels in the boxes provided. You just need to play with these sizes. Finally, if you would like to make your image a hyperlink so that when you click on it, it opens up another webpage or email program, click on the LINK tab and provide the complete URL (web address) or the email address you wish to connect to or if it is to another page, select the page from the list of pages in your folder. 7
Working With Text in NVU 1. Highlight text. 2. Select one of the tools from the toolbar to format. 8
1. On the web page, type in the name of the website you want to link to. (You should always provide a short description of the site, as well.) Working With Links in NVU 2. Highlight the words by clicking and dragging your mouse over the words. 3. With the words highlighted, click on the Link icon on the toolbar. 4. In the dialogue box that pops up, type in the URL (Uniform Resource Locator, otherwise known as the web address ) for the site you are linking to, then click OK. You now have a hyperlink a clickable link that will take the web viewer to the site you want them to visit. For directions on using Anchors, see next page. 9
Working With Anchors in NVU When all you want is one page that scrolls down, you should use Anchors. Anchors will allow the viewer to click on parts of the page to get back up to the top without having to scroll. 1. Highlight some words at the top of the page. 2. Click on the Anchor icon. Change the default name of the anchor to top. Click OK. 3. You will now see an Anchor by the words you highlighted. 4. After every main section on your page, you may want to put a link for the view to quickly get back up to the top of the page. Type the word (top). Highlight the word. Click on the Link icon at the top. 5. When the link properties box opens, click on the drop down menu and select the name of the anchor you established: top. (The # sign must remain there.) Click okay and you will then notice that the word (top) on the page is underlined and changed color. That s because it is now linked to the anchor. 10
1. To more accurately place text and graphics on a webpage, you can use tables. Click on the Table icon. Using Tables to Place Text and Graphics 2. Drag your mouse over the cells to select how many rows and columns you want your table to have. Click OK. I would start with 4 or 6 columns for a bordered background, and 3 or 5 columns for a background with no border. That s my preference. 3. To work with the table, right click anywhere inside the table. Select Table Cell Properties. Select the Table Tab. This is one place you can change the number of rows and columns in your table easily. You can set the size of your table by changing Height and Width. (It s a good idea to stay with the default webpage size in NVU. For tables, you can set them to a certain % of your page, such as 80-90% UNLESS you have a border on your background. For a bordered background, adjust the first column on the left to cover the whole border so no text covers the border. 4. Borders: If you don t want the lines in your table to show on the final webpage, set the Border to 0 (zero). Spacing and Padding Play with these numbers.they add exact spacing in the cells so the text/graphic doesn t run right up to the edge of the cell. 11
5. Resizing cells: One way is to click the arrows as shown at the right. Another way is to right click in a cell and change the size in the properties box (shown in Step 5.) 6. To join cells: Sometimes you have text/graphics that need to span across several columns. To do this click in the first cell you want to join, then drag across (or up and down) to the last cell you want to join. Then right click in the cells and select Join Selected Cells. (You can also go to Table > Join Selected Cells.) Cell 1 Cell 2 Cell 3 12
Saving Your NVU Site 1. Go to File >Save As. 2. Give your page a title. This is the title that will be seen in the webpage window, search engines, and bookmarks. Therefore it should be descriptive. Ex. Mrs. Berry s Fifth Grade Class at Apple Elementary School. Click OK. 3. The first thing you do on the next dialogue box is change the long title to a FILE name. Your homepage should be called index. For file names, try to make them short, but descriptive, and leave out spaces if you have more than one word. Use an underscore character instead. ( _ ) 4. Next, navigate to your teacher web folder on the web server which publishes the pages OR to a local folder (flash drive, computer, etc.) which you will later copy into your teacher web folder. OR 5. 4. Click OK and you will save your page in this folder. 6. Whenever you want to edit your page(s), just go to the mapped drive and open your page in NVU and edit it. Then click Save. (Remember you must open NVU, then click on OPEN, navigate to your site, and then the page will open so you can edit it. If you just click on the icon you see in Step 5, you won t be able to edit the page. This is what your teacher web folder will look like when the drive has been mapped. This is the URL for your page. 13
1. Download an NVU template from http://techtraining.brevard.k12.fl.us/hooverj/websites.ht m Using an NVU Template 2. Unzip the file. Usually you click on it and a program will launch for you to unzip. Click on OPEN. 3. Copy all the files, graphics, etc. into your teacher web folder. 4. Highlight all the files in the folder and copy into your teacher folder. 5. Now, open up the NVU web editor program. 6. Open up the downloaded page templates by going to File > Open or clicking on the OPEN icon. 7. Locate this file in your teacher folder. 8. Double click the page you want to open. Now you can begin personalizing the template OR you can start from scratch using directions found on the following pages. 14
1. Open NVU. Start > Programs > NVU > NVU. How to Edit a Published Page OR OR Click on the NVU icon on the desktop. 2. Choose File > Open File. (Or click the OPEN icon.) 3. Open the index.html file located in your NVU folder. Your NVU folder should be on your local machine or on your network drive. 4. Make necessary changes. Be sure to change the date you updated your page. 5. Click the Save icon. 6. Close NVU. 7. Open your NVU folder located on your desktop (or on your network drive). 8. Copy all new and modified files (including images) to your Live_Web folder. 9. Test your Web page using an Internet browser such as Internet Explorer to see your changes. 15