Creating web pages using NVU

Read Chapter Three (The Non-Designer's Web Book)

Do all the projects.

Complete all the Quizzes.

Instructional Video: 

Full Screen:  Part1 Part2 Part3 Part4 Part5 Part6

Ipod Version: Part1 Part2 Part3 Part4 Part5 Part6

Creating web pages using NVU

Web pages are special documents that contain graphics and information understood by your web browser. Perhaps the most interesting feature of web pages, at least for the beginning designer, is the fact that the author can insert links that, when clicked with the mouse, can take the viewer to a new page or a completely different site.

We have talked about browser a couple times now. The most popular browsers are Explorer and Netscape. For the most part, they are functional equivalents. But be aware that they DO NOT always handle the same page the same way. What looks great in one browser may not ok at all in the other. For this class, we are going to be using Netscape. The reason: Netscape comes with a web page authoring tool called NVU. NVU is easy to use, much more reliable than FrontPage, and is free. We will be using NVU to create and update our pages.

A couple things we need to know... Each web page is stored in its own file. We will use that file name as part of link creation later. Images are also stored in separate files. They are also linked into our documents, but in a different way than web pages.

Here is an example of a NVU window. Point at the icons for explanantions of their usage.

All of the functions we just looked at in the toolbar and many more are available in the menu bar at the top of the window. Some other functions available in the menu bar include:

• Find an Replace
• More options for setting text decorations
• Additional table controls

The only way to really learn this stuff is to try it. To start NVU, launch Netscape and click the NVU icon in the bottom bar of the window or select the NVU option from the Window menu in the menu bar.

Format the text

There are six headers  Heading 1 is the largest and Heading 6 is the smallest.  In addition to changing the size of the font it also includes a carriage return.

You can select which ever heading is appropriate for you site.

There's more formatting available with the BOLD, ITALIC and UNDERLINE formatting. 

You can format text by pressing the format type before typing and undo when complete or you can type your text and come back and highlight the text and then select the format type.  Below we used the Bold type

To make a piece of text italic simply highlight the text and press the I button.

To underline it simply highlight the text and press u.   I would caution use of this because people might mistake this for a link.

You can also change the size of the font by using the +a or -a tag.  To increase the font size.  Select the text you want to an press on the +a button.

You can continue increase the by reapplying the +a to the same text.  Below I reselect part of the text that we just increased the font of.

Again, You can continue increase the by reapplying the +a to the same text.  Below I reselect part of the text that we just increased the font of.

One of the issues with the +a tag is that it the font increase will affect the text after the text you highlight.

If you would like to remove any text styles you can highlight the text and right mouse click and choose Remove All text Styles.

Now you can see the text is returned to normal size and style

If you would like to decrease the size of the text the -a button will decrease the size of the text.   Again highlight the text you want and click on the -a button.

You can continue decrease the by reapplying the -a to the same text.  Below I reselect part of the text that we just decreased the font of.

Again, You can continue decrease the by reapplying the -a to the same text.  Below I reselect part of the text that we just decreased the font of.

If you don't want the current text style to continue past a certain point you and choose that point in the web page and right mouse click and select Discontinue Text Styles.

Now we can see that after that point the text returns to normal.

To indent or use block quote on text highlight the text you want to indent and click on the Indent text.  You can use the indent multiply times as need to format the layout of the page.

Combining Tags

Most tags can be combined to provide multiple effects to the same piece of text.

Here we start by adding a bold face to the text.

Next we add the italic effect to the already bold,  so we now have bold italic text.

Now we underline our bold italic text.

Here we can see the combination effect.

We can continue by increasing the font size of everything just did.

We can continue by increasing the font size of everything just did.

We can continue by increasing the font size of everything just did.

Now we indented the underlined bold italic plus three sizes font text.

Changing the colors

One of the simplest things to do to make your web site stick out is to change the background from the default color to a more pleasant color.

Select the Page color and Background tag.

This is the default setting.

Now choose the Use custom color radio button.

You have control over 5 different color that effect your background, text, and links.

We'll start by double clicking on the Background button.

Now we select from a variety of different colors. 

After selection a color it will also show you the equivalent HTML Red, Green, Blue (RGB) color string.

To apply the color after selecting it click on the OK button.

Now you should see the new background color applied to the preview menu.

Simply click ok to see it applied to the web page.

Now our background color has been changed.

Next thing to change is the Normal text color.  To edit click on the Normal Text button.

Again we're giving a color palette to choose from.

Choose a color and then click ok.

Next double click on the Link Text color.

The link text color is the color that appears on the web page before someone clicks on that link.

Next double click on the Active Link Text color.

The active link text color is the color that appears on the web page as someone clicks on that link.

Next double click on the Visited Link Text color.

The link text color is the color that appears on the web page after someone clicks on that link.

Now we can see all the changes in our preview screen.

Now we can look it in the editor. 

To really see the all the link colors we need to open the page in a web browser. 

So save your file and then open it in a web browser.

This is the link color.

Now as you click on the link you'll see the color change. 

This is the active link color.

This will then bring us to another page.

Then click on the back button.

Finally the link color is the visited link color.

Now its time to change the background color to a background image.

Below I have provided a background image that you can save for this example.

To save the above image - right mouse click and select save as.

A website with alot of great background images is: Free Seamless Background Tile Image Designs by StarFields

Click on choose file to select a background image. 

Find the texture.jpg that you just saved and select it and click on open.

Now you should see the changes in the preview screen.  Click ok.

Now we need to make adjustments since our link colors are not easily seen with the new background image.

Now we can see the updated colors that work with our new background image.

Click ok to see the changes in the editor.

You can see the updated background and text colors.

Again to truly test all the link colors we need to open it in a web browser.

Active link color shown below.

Visited link color shown below.

Creating Links

Types of Links

• Internal links - jump to other pages in the same web site.  Also called "local" or "relative" links.
• External links - jump to pages outside of a particular web site.
• Email links - open up email forms or email programs
• Anchors - allow you to jump to somewhere else on a web page.  These are helpful for long pages.

You can start with some text that you would like to link to another page.

Now highlight the text and click on the link button.

You can give a external or absolute URL to link to then click ok.

Now the text is hypertext enabled.  You can click on it in a web browsers and it will bring you to that page.

Now we can try it on on a web browser.  Click on the link and go to the fainting goats page.

Now we're at the links address.

We can also provide local links

Next we create a link to a local page in the same directory.  You can also right mouse click after selecting text to create a link.

Click on choose file to find the web page to link to.

Highlight the web page or file you want and click open.

Finally click OK

Now if we run our mouse over the links we can see where they're pointed to.

Here it points to a web page named syllabus.html

Anchor allow you to link directly to a certain location with a web page.  Here we have a very long page.

The page is continued.

Now we're going to create an anchor on long 5, so we can link directly to it.

Highlight long 5 and click on Anchor

Now name the anchor.  By default it will pick the selected text.  Then click ok.

Now you can see the anchor in the editor by not when viewing it in a web browser.

Now create a link from Goto Long5 to the anchor at long 5.  Select the text to link and click on link.

Pull down the menu and select the #long_5 anchor

Now click on ok.

To test it out open the page in a web browser and click on Goto Long5 link.

Then you'll be transported down to the location of the long 5 anchor.

Make an email link

Again start with some text and select what you want to set up an email link to.

Again select the text and right mouse click and select create a link.

Now you need to enter the email address but it must be preceded by mailto:

Now open up a browser and click on the link.

It should bring up your default email program.

Adding a graphic

To add an image click on the image tag.

Now click on choose file

Here we grab the faint.jpg picture.

The image is previewed and we can also add alternate text for browsers that don't display images.

Now we can see the image.  Next we right mouse click to access the image properties.

We can force the appearance of the image to be enlarged or made smaller.  Here we can the appearance to be smaller.

Note this doesn't affect the actual size of the image.  You need to use an image editing tool to do this.

Now we see the image smaller on the screen.  Again right mouse click to edit the image properties more.

Now each image has a border that can range from zero to big.  Here we set the border to 15.

We can see the border of 15.  Again right mouse click to edit the image properties more.

This time we can add a link to the picture.  So when someone click on the image they will be brought to the specified URL.

Notice the border now is our link color.  Again right mouse click to edit the image properties more.

Now we set the border to zero around the image.  They can still click on the image but we don't have a border.

You can see the image with a link and no border.

Making Tables

Tables allow you to put things into columns and rows.  Tables are an excellent way to format you web site.

Go to Table -> Insert -> Table

Select the size of the table

Click on the advanced Edit button to see more options.

Now you can see the table.  You can add images and text inside the table.

Using Table Templates

Table templates allow you to easily section of portion of your web page to give a uniform and professional appearance.

After setting the table border to zero then the template create a seamless appearance.

Here is a sample page layout scheme:

Creating Table Templates

Template 1:

Template 2:

Template 3:

 Use a template from Chapter 7 (Click to view or download)

• Template 1
• Template 2
• Template 3
• Note turn off borders when Done

Creating List (Ordered and UnOrdered)

Examples:

Unordered

• Rebecka
• Autum
• Ambur
• Angelia

Ordered

1. Minnesota
2. North Dakota
3. Iowa
4. South Dakota
5.