An open source web page authoring tool.

Web Site Design & Navigation

One of the most important design considerations for a web site is navigation. If it isn't obvious to the user how to get around and find the information they need, they will either leave, get frustrated, or both. Even worse is a link that doesn't work correctly.

Web sites do NOT come with user guides!

Therefore, as you design your site, the organization and navigation must be carefully considered.

Basic organization includes...

1. Home Page - The beginning or "front door" page of your site. This page should give basic introductory information about the site (site's purpose --- who, what, when where, and why) and links to the main topics or areas of the site. Compared to a book; this page acts like the cover, title page, table of contents, and preface/introduction. This page should be named index.htm or index.html.
   
   
2. Main Topic Pages - Top level pages for the primary topics or areas included at the web site. These pages should include a link back to the home page and links to the other main topic pages. Other links will take the user to more specific or detailed related information for that section of the web site.
   
   
3. Subsidiary Pages - Pages that provide additional information or subdivides the information under a main topic. These pages should include links back to the home page, the related main topic page, the other main topics, and other pages as needed.
   

NOTES:

• No page, if possible, should be a dead end (i.e. every page should have a link to go somewhere).
• Be consistent. The entire site should have a common look that ties the pages together with consistent navigation.
• When the user clicks on a link, they should know where they are going.
• Don't "hide" links (called: "Mystery Meat Navigation" ... Where's the beef!).
  

Navigational Tools

Web pages use three basic types of navigational tools:

• Hypertext (words, normally a different color and underlined ----- aka: hot text)
• Graphics (primarily buttons and image maps)
• Frames (a "pane" within the window that keeps the main topic links on the screen at all times while the information changes within another "pane")

General Rule: Whenever you use graphic links, you should also include corresponding hypertext links. Why?

1. The text will normally be displayed before the graphic gets downloaded. A hypertext link will allow the user to move on without waiting for all of the graphics to be displayed.
2. If the user hits STOP before the graphic fully loads, they will be at a dead end (i.e. no where to go).

For this course, we will consider only hypertext links and graphics as links.

Six Types of Links

NOTE: The next 2 paragraphs are VERY important!
If you don't do this, your local links will not work when the site is moved to another computer.

FIRST ... BEFORE creating links, the page that contains the links must be saved in its final location within the site's folder structure.

SECOND ... BEFORE creating a link, the page that will be linked to (i.e. the destination of the link) must be saved in its final location within the site's folder structure. Note: The file must exist and be saved, but it does not need to be complete. Content can be added and/or edited later if necessary.

Why are these two things important? Because links within a site are specified by relative location from the source page containing the link to the destination page within the folder structure of the site. If the source page file and/or the destination page file isn't saved in its proper location within the folder organization of the web site, a local link (i.e. link within the site) cannot be established correctly. Also, if either file is move to a new location, the other file must also be moved to retain their same relative locations to each other. This is why you need to put the entire site in a single folder which can contain other folders. [NOTE: This, of course, does not apply to external links (links to other web sites).]

Links can take the user to at least six different places. This tutorial will discuss the blue options.

• To another page at same site (internal link); the destination file may be in the same, nested, sibling, or parent folder
• To another page at another site (external links)
• To a specific spot on the same page (to an anchor)
• To a specific spot on another page (to an anchor on the same site or external page)
• To non-HTML files (pdf files, documents, spreadsheets, graphics, presentations, etc ... the user's browser will determine how this file will be processed)
• To an email addresses (only works if the user's browser is setup to handle email links)

Before you continue ...

Before continuing with this tutorial, you will need to create and save at least three pages.

If you still have the folder (TrySite) and files (index.html and a graphic file) that you experimented with in the last couple of tutorials, ...

1. Create another page and give it some content. Save this file in the TrySite folder. Name this file Destination.html.
2. Create a folder inside of the TrySite folder. Call it: MoreStuff (note that there are NO spaces ... do not use spaces in file or folder names).
3. Create a third web page and give it some content. Save this file in the MoreStuff folder. Name this file Info.html.

If you do not have the files you experimented with in the previous tutorials, ...

1. Create a folder called TrySite. For convenience and ease of access, place this folder on the desktop or some other easily accessible location. You can always move or copy the folder to some other location later if necessary.
2. Create a simple home page (i.e. a web page with some content) and save it in the TrySite folder. Call this page index.html. Place at least one graphic on this page (remember: first put the graphic file in the TrtSite folder, save index.html in the TrySite folder, then place it on the page, and finally save index.html again).
3. Create another page and give it some content. Save this file in the TrySite folder. Name this file Destination.html.
4. Create a folder inside of the TrySite folder. Call it: MoreStuff (note that there are NO spaces ... do not use spaces in file or folder names).
5. Create a third web page and give it some content. Save this file in the MoreStuff folder. Name this file Info.html.

Creating a Link to Another Page on the Same Site with Nvu

IMPORTANT REMINDER: Before creating a link to another page on the same site, the other page must be created first. The page does not need to be complete, but the file must at least be created and saved in the proper location within the web site folder. Also, don't forget that the source page (i.e. the page containing the link) must also have been saved. After creating the link, don't forget to save the page again before testing the link. Also, to test a link, the page must be opened in a browser.

To create a link to a page on the same web site ...

1. Type the text to be used for the link (design issue: avoid the "click here" link).
2. Select the text.
3. Click on the Link icon/button in the Composition Toolbar.
4. In the dialog box, click on the Choose File button, navigate to the folder containing the destination file, and then double-click on the destination file.
• NOTE: The link location in the text field in the dialog box should only include the relative folder path (if the destination file is not in the same folder as the source file) and the filename of the destination file. If the location begins with file:///, you've done something wrong (most likely, you didn't save the file before creating the link ... this is the most common error students make on the next project).
5. Click the OK button.

Try it! On the home page (index.html) of your practice web site, create links to the Destination.html page and the Info.html page . Save the home page and test the links. How do you test them? You must open the index.html page in your browser. That is, ...

1. Start your web browser.
2. Open the file in your browser:
   • Netscape Navigator or FireFox : From the File menu, choose the Open File... command. Navigate to and select the file.
   • Internet Explorer: From the File menu, choose the Open... command. Click on the Browse button and navigate to and select the file. Click on the OK button.
   • Or just open the site folder and double-click on the index.html file.
3. Click on the link you created. Did it go to the correct page? Use the browser's back button to return to the home page.

Using a Graphic as a Link

Any graphic can also be used as a link. The process is basically the same. The only difference is that instead of selecting text, you select (i.e. click on) the graphic.

Try it! On the home page of your practice web site, select the graphic and make it link to the page Info.html (remember, this file is inside the MoreStuff folder,assuming you followed the instructions above). Note that two links can go to the same page.

Test your link! Save the home page and then open it in your browser. Click on the graphic. Did it got to the correct page?

Creating a Link to Another Page on Another Site (external link) with Nvu

External links allow a web page to reference pages at other web sites. In order to create these links, you must know the full URL (i.e. address) of the destination page. To create an external link with Nvu ...

1. Type the text or place the graphic to be used for the link (design issue: avoid the "click here" link).
2. Select the text or graphic.
3. Click on the Link icon/button in the Composition Toolbar.
4. In the dialog box, enter the complete URL, including http://
   • VERY IMPORTANT: The URL MUST begin with http://
   • This is the most common mistake made with external links.
   • If it does not begin with http://, it will be interpreted as a relative (i.e. same site) link and therefore will not work!
   • Recommendation: Go to your browser and navigate to the desired destination page. In the address/location bar, select and copy the URL to the clipboard. Return to Nvu, select the text or graphic for the link, click on the Link button, and then paste the URL into the link location textbox. This way, you know the URL is correct (avoids typos and includes the http://).
5. Click the OK button.

Try it! On any one of the pages of your practice web site, create a link to the BMCC web site. The URL is http://www.bluecc.edu. Save your page and then open it in your browser and click on the link. Did it work?

Creating a Link to non-HTML Files

A link can also have a non-HTML file as its destination. These links will normally be links to files stored within the folder structure of the web site. These files may be word processing documents, spreadsheets, PowerPoint presentations, pdf files (i.e. Adobe Acrobat files), graphics, or any other file. How the link is processed is dependent on the user's browser and its settings. Typically, one of three things will happen when the user clicks on this type of link.

• The file will be opened within the browser itself (this provides only viewing of the file).
• The file will be downloaded and opened in an application on the user's computer (assuming the user has a compatible application).
• The file will be downloaded and saved on the user's computer.

The process for creating a non-HTML link is exactly the same as creating any other same site/local link.

Try it! First create a simple PowerPoint file (just 2 or 3 simple slides will do) and save it in the MoreStuff folder in your practice web site (or just copy project 12 into the MoreStuff folder). On the home page of your practice site, create a link to the PowerPoint file (note: when you navigate to the file, you will need to change the Files of type option in the dialog box to All Files). Save your page and then test the link in your browser. What did it do? If you have a second browser on your computer, open the same page in your second browser and try the link again. Did it do the same thing?

A Simple Navigation Menu

A simple navigation menu, like the one at the bottom of this page and all pages of this course web site, is very common. It provides simple navigation to the primary pages of a web site in addition to any other navigation used by the pages of the site.

To create this type of navigation menu,

1. Create a new paragraph.
2. (optional) Center the paragraph.
3. Type the text for the links. Between the text for the links, type a space followed by the "pipe" character followed by another space. What is the "pipe" character? Its a vertical line. It is found on your keyboard just above the enter key (the same key as the backslash \ key).
4. Create the links.

Where to go from here...

If you understand the above concepts as well as the concepts from the previous tutorial, you are ready to start working on the next project.

[an error occurred while processing the directive]