Www.oakton.edu



Web Pages Made Easy

( and FREE! )

With

Nvu

Part 1: Introduction

Dann Foster

Information Technology Department

Oakton Community College

Fall 2007

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…

…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:

word. 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., ) 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 mapped to the H: drive. Off-campus, this space is accessible via FTP (see Appendix).

Everyone’s H: drive contains a sub-folder named Public. This special folder is where users can place all files they desire to be available via the Web. If a user creates a sub-sub-folder under Public.www, files place there will also be publicly available.

“Index” Pages & 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.” ()

Home pages should be named “index.htm” (or -.html). The web server looks for pages with this name in the public.www folder or subfolder and displays it as the default page. If a folder contains no file named index, a linkable list of all files in that folder will be 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 .

Example 1:

If instructor jsmith saves his home page as index.htm to his h:\public.www\ folder, his students can view it at

Example 2:

If instructor jsmith saves his home page as mywonderfulpage.htm to his h:\public.www\ folder, his students can view it at . 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 in the folder.

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.

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 H:\ drive

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. FTP the file from your public folder on the network to a local drive.

• See FTP in the Appendix for instructions on using an FTP client or the Publish function within Nvu.

2. Perform steps 1 – 9 above

3. FTP the file from your local drive back to the public folder on the network.

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

c. Click the Table menu in the Menu Bar

d. Click Join Selected Cells

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

c. Click the Table menu in the Menu Bar

d. Click Join Selected Cells

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 h:\public.www folder

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 h:\public.www 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 “. (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

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. FTP (File Transfer Protocol)

FTP is an Internet method of moving data files (any kind) from one computer to another. Web Browsers and client programs like FTPX or WS_FTP can be use by people wishing to upload or download files between their computer and a server.

More info at:

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,

3. References





................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download