and FREE! Nvu · A wide variety of related applications and development tools. Nvu was based off...

nvu-2011.doc Created by dannf of 14

Web Pages Made Easy

( and FREE! )

With

Nvu

Part 1: Introduction

Dann Foster Information Technology Department Oakton Community College Fall 2011


Creating Web Pages with Nvu

Introduction Nvu (pronounced ―N-view‖) is a free, open source, WYSIWYG web authoring program that grew out of the Mozilla Project, an initiative that began with Netscape and expanded to include such related applications as

Thunderbird email program

Firefox browser

Camino browser (Mac)

Seamonkey (application suite like Netscape; replaces Mozilla All-in-one suite)

A wide variety of related applications and development tools. Nvu was based off the original Netscape Composer, morphed into a standalone program and for awhile was hoped to be re-folded into the Mozilla/SeaMonkey suite as the ‗nextgen‘ web authoring component. This proved to be unworkable and it remains as a standalone. It is alternately known as Komposer, which is a semi-official release intended to address some known bugs while Nvu development is on hold. Nvu is available on Windows, Mac and Linux. As a standalone program it can be installed on campus without interfering with current Thunderbird email settings. Nvu is not as sophisticated a program as Dreamweaver and some others but it can be used to edit most HTML pages created in other programs. If you‘ve been using Dreamweaver on campus and would prefer not to invest in a home copy for remotely updating and uploading your web pages, Nvu may be the tool for you. See the appendix for information on downloading and installing Nvu on your home computer.

Goals This guide is intended to introduce the following skills:

Starting a new web page.

Using Nvu to open, maintain, and save existing pages (including those created with other programs)

Related skills:

Inserting graphics and tables

Adding Text

Formatting Text

Creating links

Saving pages to Oakton's server


Quick Lesson 1: Web Pages vs. Text Documents

In the background…

Behind a web page is essentially a simple text, or ASCI, document that happens to have codes inserted within the text. By just adding the following codes… <html><head><title></title></head><body></body></html> …into a text document (plus saving it with the extension .htm) you can make it readable on a web browser. It may be boring and static, but it will be readable. Add a few more codes and you can tell a web browser to display the text in certain ways (bold, centered, etc.), to insert a picture in a certain place, to make selected text act as a hyperlink, and other actions. When you work with a WYSIWYG editor like Nvu, all those codes that make a text document work like a webpage are happening behind the scenes. Just like when working with a Microsoft Word document, you can drag the mouse to some text, click the italics button, for instance, on the formatting toolbar, and the html document hidden in the background tags the selection like:

<i>word</i>. On the webpage, your word looks like word.

Quick Lesson 2: Use of HTML

Formatting Appearance vs. Structure

Generally speaking, any significant appearance “coding” should be done with stylesheets rather than HTML. HTML is best used for document structuring— declaring doctype, laying out the head and body code, using headings to ( e.g., <H1> ) to delineate the content of a doc, configuring table data, linking, metatags and other elements that provide organization and basic function to a web page. Stylesheets then could be used to set font styles, colors and more complicated elements of appearance. While many appearance aspects can be set with HTML (and, frankly, often are for simple pages without causing a lot of problems), proper markup technique adds to the accessibility and usability of a web page and helps it to be renderable in formatsranging from standard browsers to portable media.

Quick Lesson 3: Where Personal Web Pages are Stored

URLs, Page Storage & File Naming

Everyone at Oakton—Faculty, Staff, Students—have personal space on the network for saving files. On campus, this space is split into two areas, each mapped to a different drive letter (a change made in mid-2011). Web pages and other files meant to be shared with the public are saved to the P: drive. Other files meant to be kept private go in the H: drive. Off-campus, both these areas are accessible via the Fileway file transfer program (see Appendix).


All files saved to the P: drive are available to the world. If you create subfolders under P:, those are publicly available as well. NOTE: WEB PAGES NOT READY FOR PUBLIC VIEWING CAN TEMPORARILY BE SAVED TO THE H: DRIVE OR ANY OTHER LOCAL DRIVE. WHEN THEY ARE READY, YOU CAN MOVE THEM TO P:.

URLs, “Index” Pages, and Personal Home Pages

A home page is the ―main page of a Web site. Typically, the home page serves as an index or table of contents to other documents stored at the site.‖ (webopedia.com) Home pages should be named ―index.htm‖ (or -.html). The web server looks for pages with this name in the P: drive or subfolder and displays it as the default page. If the P: drive or a sub-folder contains no file named index, a linkable list of all files in that folder will be dynamically created and displayed. Such a linkable list can be handy in some circumstances but creating a home page with links to desired files is the generally preferred method of managing multiple web pages. Personal home pages are viewable by going to http://www.oakton.edu/~userID.

Example 1: If instructor jsmith saves his home page as index.htm to his P: drive, his students can view it at http://www.oakton.edu/~jsmith Example 2: If instructor jsmith saves his home page as mywonderfulpage.htm to his P: drive, his students can view it at http://www.oakton.edu/~jsmith/mywonderfulpage.htm. Note that by not naming the page ―index‖ jsmith‘s students have to type in the filename of the page even if ―mywonderfulpage.htm‖ is the only file that exists there.

Getting Started On campus, Nvu can be launched from the Windows Start menu:

All Programs > NAL > G. Internet > Web Design > Nvu 1.x

On your home computer you may have an icon on your desktop screen.

Starting a New Web Page

Launching Nvu will start you off with a blank page.

http://www.oakton.edu/~userID

http://www.oakton.edu/~jsmith

http://www.oakton.edu/~jsmith/mywonderfulpage.htm


Opening an Existing Web Page

In all likelihood you will frequently want to open and edit an existing web page. It‘s important to update your web materials regularly so they remain relevant and helpful to those who visit. To open, edit and save an existing page (working on campus),

1. Launch Nvu 2. Click the File menu 3. Choose Open. A file management window will open. 4. Look for your P:\ drive (if opening a publicly available page) 5. Look for your public.www folder (or subfolder) where the file you wish to

edit is stored. 6. Select the name of the file you wish to edit (remember you probably

named your home page ―index‖) 7. Click ―Open‖ at the bottom of the file management dialog window. The file

should open and you can begin to edit. See the main learning exercise of this document for use of the Nvu editing tools.

8. When editing is complete, click the File menu, 9. Choose Save.

Note: If you wish to back up a file before you edit it,

1. Perform steps 1-5 as above 2. Right-click on the desired file name. 3. Choose Copy from the popup menu 4. Right-click in an empty area of the file management window 5. Choose Paste from the popup menu. A copy of the file will be

added to the file list. You can use this file to restore the pre-edited version of your web page.

To open, edit and save an existing page off campus

1. Use Fileway to download the file from your public folder on the network to a local drive.

Note that the Publish function does not work at Oakton nor do standard FTP programs

2. Perform steps 1 – 9 above 3. Use Fileway to upload the file from your local drive back to the public

folder on the network.

Working with multiple open pages

You can have multiple pages open in Nvu. Each page will be represented by a tab just above the composition window.


Screen/Tools Overview

Following are the basic web construction tools found on the Nvu screen. The steps for using these tools (those that are relevant to basic page construction) are covered next in the Learning Exercise. Main sections of the Nvu program screen:

Beginning users should focus on just a few areas but be aware of others. Like with Dreamweaver, Nvu allows the novice web author to start slowly, create some basic but serviceable pages, and add tools and skills as needed. Still, it‘s handy to have an overview of the whole package for a better idea of the potential. Each of these major sections can be hidden or revealed using the View > Show/Hide menu. If there is an area, such as the Site Manager whose ―real estate‖ could be used for some thing else, close it and open it as desired. Top: Menu Bar (locked in place) Contains menus like typical Windows programs- File, Edit, View, etc. Toolbars can be customized by right-clicking and

Second from Top: Composition Toolbar

This is a mixed use toolbar partly similar to the Dreamweaver Insert Objects panel. It contains icons representing very common web page elements, such as


for inserting images, tables and links. It also contains icons for frequently used program functions such as Save or Print (also available via the File menu).

Third row from Top: Format Toolbars (2)

The Format Toolbars are akin to Dreamweaver‘s Properties Panel (default view). Most of the tools found here affect how text is rendered. Here you can

Set font size, style, header tags, color

Indent/outdent, align, justify

Create numbered or bulleted lists Other icons relate to such tools as layers and styles.

Lower Left: The Site Manager

A ―site‖ is a collection of related web pages generally saved in the same directory. This panel lists all the pages and linked files associated as a ―site‖ with the page you‘re currently editing. As with Dreamweaver, it is not necessary to create an entire site before working on a single web page or two.

Bottom: Edit Mode

Four modes are available. Click any one to change to that mode. Normal: WYSIWYG. Invisible elements like table borders show but not code. HTML Tags: WYSIWYG plus icons representing key tags Source: Shows the HTML only Preview: WYSIWYG without the invisible elements like borders. Use the Browse button for a more accurate rendering of the final page.

Learning Exercise In this exercise the learner will construct a personal home page emulating the basic Oakton template. Below is the general layout of an Oakton faculty home page. Administrators and staff can adjust the content as appropriate. The page contains

Banner/Header with logo and universal links

Navigation bar with links of specific interest to this user‘s visitors, particularly to sub-pages for his class materials

A main content area with personal contact information and a Welcome letter/intro to site visitors.

While such a page can be built off a template and be a part of a web site, for this exercise it will be constructed as a standalone page which links to related pages stored (mostly) in the same folder.


Use of Table for layout

A table with invisible borders is used to layout the elements of the page. Content is placed within cells of the table so that changes in browser dimensions will not affect appearance to visitors.

Steps for building the Home Page

1. Insert the table a. Click the Table icon on the Composition Toolbar. The Table dialog

will appear b. Click the ―Precisely‖ tab c. Set the following

values:

Rows: 3

Columns: 3

Width 100 %

Border: 0 d. Click OK


2. Merge the lower two cells of the left column a. Click the mouse in either cell b. Hold down the left

mouse button and drag the mouse from one cell to the next

c. Click the Table menu in the Menu Bar

d. Click Join Selected Cells

3. Merge the center and right cells of the top row

a. Click the mouse in either cell

b. Drag the mouse from one cell to the next



4. Merge the center and right cells of the bottom row

a. Click the mouse in either cell

b. Drag the mouse from one cell to the next



5. Narrow the width of the center cell

a. Click in the center cell b. Place the mouse over the border

marker, as shown. The pointer will change from an arrow to a double-arrow.

c. Drag the marker to the left. You can adjust this again later to snug it up against the edge of your photo.


6. Set the cell background color a. Click in the upper right cell b. Click the Format menu c. Click Table Cell Properties d. Click the rectangular

button next to Background Color. A color palette appears.

(You can also click the lower square on the color icon instead of steps 6b, 6c and 6d.)

e. Choose a subtle, light color (we will use dark colored text and the contrast will maximize readability)

f. Click OK

g. Repeat steps a. – f. for the lower left and upper right cells

7. Save your page a. Click the Save icon on the toolbar b. Input a Page Title, if prompted (page title is not the file

name; the title is what shows up in your bookmarks/favorites) c. Name your page ―index.htm‖ and d. (if working on campus) save it to the P: drive e. (if at home) save it to a local folder to move later

8. Insert Images: Logo a. Place the cursor in the upper left cell by clicking in it b. Click the Image Insert icon on the Composition Toolbar.

The Image Properties dialog window opens.

c. Click the Choose File button to open an image file dialog. Notes on Selecting Images Image files must be stored in your public.www folder along with the html files. Otherwise, they will appear ―broken‖ to people viewing your page.


For this exercise, we assume you have saved the necessary image files (Oakton Logo and a portrait image) to P: drive ahead of time.

d. In the Select Image File window, click on the Oakton Logo e. Click ―Open‖ f. The image will appear as a preview in the Insert Image dialog g. Type ―Alternative Text‖ for the image

i. Alt Text is a word or short phrase that describes the image. In this case, type ―Oakton Logo‖

h. Click OK 9. Insert Images: Portrait

a. Click in the center cell b. Repeat steps 8a through 8h, choosing your portrait file instead of

the logo file c. After inserting the portrait image, you may, if necessary, repeat

step 5c to tighten the cell around the image. 10. Content Alignment

As you enter content into each of the cells you may find that text and images are not defaulting to the top-left of the cells. You may fix this on a cell-by-cell basis via the following steps:

a. Click in the desired cell b. Click the Table menu c. Click Table

Properties d. Click the Cell tab e. Check the box for

Vertical f. Click Top on the drop

menu g. Check the box for

Horizontal h. Click Left on the drop menu (if not already chosen) i. Click OK to close the Table Properties window.

11. Input Text a. Refer to the ―Sample Personal Homepage‖ image before Step 1 to

determine what text content to type into the open cells. 12. Font Style Formatting

After inserting text, you may drag the mouse across it to select it then perform any of the following formatting changes.

a. Text Style: Font (Type Face) i. Choose the desired face from the drop

menu. ii. Always choose a common face like

Times Roman or Arial. For your page to render properly, visitors viewing your


page must have the same font installed on their local computers.

iii. Unlike Dreamweaver, there‘s no way to declare 2nd or 3rd choice faces without hard coding it.

b. Text Style: Bold, italic, underline i. Use icons on the toolbar, or ii. Additional styles, like strikethrough, are available under the

Format menu and Text Style c. Text: Font Size

i. Click the little A or the big A to make selected text relatively larger or smaller.

d. Text Style: (doc structure) Paragraph, Heading. i. Larger and smaller Heading tags are

preferable to use of larger and smaller Text Size even though the visual effect is about the same. See ―Quick Lesson 2‖ on page 3

ii. Choose Heading 1 for the top banner over the main area of text on a page.

iii. Use Headings 2-6 to mark various sub-sections. Structure content in a parallel manner (if there are two main sections, they should both be marked as Heading 2)

iv. e. Font Color

i. Click the upper box to reveal a color palette.

ii. Always choose colors that provide high contrast between text and background

f. Lists i. With the first item of a potential list

selected, click either the numbered list or bulleted list. ii. Pressing Enter on the keyboard at the end of a list item will

produce the next number or bullet point iii. Indents within a list are allowed iv. Additional list formatting is available from the Format menu,

Lists and Numbering g. Alignment and Indent

i. Full paragraphs can be selected at a time to adjust indent/outdent or align the text left-right-center-justified.

ii. Aligning the text in one cell generally does not affect other cells.

13. Links Hyperlinks are the most common elements for making web pages dynamic. They are the main means of navigating between or within pages.


a. Creating Hyperlinks i. Select text or Image to make linkable ii. Click the Link icon on the toolbar. The Link

dialog window will appear iii. Type or right-click-

paste a URL in the Link Location field

iv. If the link is to a local page (likely in the same folder as your home page), click Choose File

1. Click the file name

2. Click Open v. Click OK to finish

setting the link About Relative and Absolute URLs An Absolute URL is one that starts with ―http://www. (etc.)‖ and contains the exact name of the file, unless it‘s the default file in the folder. A Relative URL contains just enough info to point the browser from one file to another. If the link is to a file in the same folder as the starting page, the relative link can consist of just the filename because the server will know then only to look in the current folder.

b. Creating Email Links (aka ―mailto links‖) i. Select the desired text or image to become an

email link ii. Click the Link icon on the toolbar. The Link

dialog window will appear iii. Type or right-click-paste an

email addressin the Link Location field

iv. Click the box for ―The above is an email address.

v. Click OK.


Appendices

1. Getting Nvu for your Home Computer Nvu is a free program available for download and installation on your home computer.

1. Go to http://www.nvudev.org/download.php 2. Look for the version of Nvu for your operating system (Windows, Mac,

etc.) 3. Click the name of the file 4. Save the file to your computer when prompted. Note where you save it. 5. Locate the downloaded file and 2x-click it to install it. Follow the prompts.

2. Fileway and FTP (File Transfer Protocol) As of mid-2011, FTP can no longer be used to access your H: or P: drives from off campus. Instead Oakton offers a program called Fileway. Fileway is file management program for moving data files (any kind) from a local computer to a network storage space for which you have established access rights. Oakton employees and students can use Fileway by going to myOakton and locating the link to it under the employee or student tab. Users will automatically connect between their local computer and the network drive space for which they have permission. Instructions for Fileway are available in myOakton but essentially you will be saving your page locally then use Fileway to move it from the local drive to the network drive FTP client programs like FTPX or WS_FTP and the FTP functions built in to most web browsers and can be used by people wishing to upload or download files between their computer and a non-Oakton server (if for instance you have a non-Oakton web site). More info at: http://www.oakton.edu/resource/it/ftp/ Web Authoring programs like Dreamweaver and Nvu have ―publishing‖ functions built in that can be set to FTP files between the computer you‘re developing pages on and the server that will host the pages. This function can no longer be used to upload files to Oakton servers.

3. References http://en.wikipedia.org/wiki/List_of_Mozilla_Foundation_products http://www.nvudev.org/guide/pdf/nvuug10r1.pdf

http://www.nvudev.org/download.php

and FREE! Nvu · A wide variety of related applications and development tools. Nvu was based off...

Documents

Transcript of and FREE! Nvu · A wide variety of related applications and development tools. Nvu was based off...