Navigation and Navigation Bars
Module 20

SITE NAVIGATION:

When you create a web page, it usually is part of a larger project.  Often, a collection of related web pages is called a web site.  A web site is a relative term, as sites can be part of larger sites.  The main page in a web site might be called that site's home page.  It is common and useful to name the first page in a site with the name  index.html for several reasons. First, the name identifies the main page or the home page in that site.  In addition, the index.html page is often the default page for a site.  This means that  if you do not name the page in the folder that you want to go to, then the index page is opened.  Here is an example.
 

www.bigcompany.com/index.html
and
www.bigcompany.html

generally produce the same web page.  When someone gives you their web address, you simply type it in, and the browser opens the default page for the site, which is the index.html page.

This works for folders inside folders.  If you have been told to go to the following address:
 

www.onr.com/user/edpalmer

then you will be going to a computer web site called www.onr.com.  Then you will be going to a folder on that computer called user.  Within that folder, you could find many other folders, but one is called edpalmer.   Inside that folder, you will be viewing the index.html file found there.  Even though it is not named, if you do not specify a file to open, the default file will be displayed.

Be aware that some servers use a different default page, although index.html is very common.  You may want to check with the person managing your web server to be certain. Please notice that index.html and Index.html refer to two different files and Index.html is not the default page.

As mentioned earlier, it is very important that once you create a web page, that you not move or rename it.  This is because all pictures on that page or pages you link to from that page are located by their position in the web site relative to the page you are looking at.  If you move or rename an item, your page will not know where to find the other page or image.
 

Consider the structure of the site you are looking at when you are working through these modules (below):
 

This image shows that the main page in the site is the index.html page found in the ComposerModules folder.  This index page links to the other modules pages that are located within the same folder.  For example, the index page links to Module  17.html, which is found in the same folder as index.html.  In order for Module 6.html to use the graphics it needs, it looks in the Web_Resources folder and finds 6f.GIF and displays it where it is told to.  If you move or rename any of these items, the pages that link to them would not know where to find the needed information and you would get an error.  These types of link relationships are called relative links.

You might refer to another page by its complete path on the Internet (as you would when you link to an outside page). This is called an absolute link.  If your web page refers to the Microsoft web site and you create a link and in the link box, you enter:

http://www.microsoft.com

At this point, you may wish to skip to the next part of this module by clicking here.  Or, you may continue with more information about relative links below before going on.  The information that follows is not absolutely necessary to create successful web pages, but may be of use at some time in the future.
 
 

Other ways to Understand Relative Links:

When you link from within a page, you name where a picture or other page is, relative to the current page.  For example, in this page, a few lines above this one, a picture was inserted.  That picture's name is   20a.GIF  and it is located in a folder called Web_Resources.  When we linked the picture, Communicator converted the link location into a location, relative to the page you are viewing.  Here is what Composer placed in the LINK box.
 

The location shows that the file named 20a.GIF will be found in a folder named Web_Resources and that this folder is found within the current folder.

 

If the file to link to were found in the same folder, then that path would simply be 20a.GIF.  For example, at the bottom of this page, you will find a "Navigation Bar" that allows you to go to the next module or back to the main Composer Module page.  To go to the next module, here is what you would find for a link:
 

since Module 20.html and 21.html are in the same folder

If the file to link to is one "level" above the current file, then ../   is used to refer to a file up a level (in other words, in a folder that the current page is inside of).  Here his how the link to the index page that is above the index page for the Composer Module site would look:
 

This is the index page above the Composer Modules Folder.  If needed, you could go up more that one level by using   ../  for each level to go up.  For example, a link might look like: ../../../Images/stuff.GIF This would send the page up three levels and then into a folder called Images.  In there, it refers to a file called stuff.GIF

If you let Composer do the linking for you, you should never need to worry about how to type the link locations.  However, it is helpful sometimes to understand what is happening behind the scenes.

Should you want more information on using relative links, you may download a practice file (with answers) that will help you understand this way of naming files.  To download the file, Mac users should click and hold the mouse button here and then pull down to "Save This Image as..."   and PC users should Right-Click here and select "Save Image as...".Then try out the questions and see the answers at the bottom of the page.
 
 
 
 

NAVIGATION BARS:

Most web pages that are part of a larger site have ways to move around from one part of the site to another.  For example, these modules are part of a site of all the modules, but they may also be part of an even larger site.  For that reason, the same module links have appeared at the bottom of each page.  Below the horizontal rule, you always know that you will be able to return to the home page of the Navigator modules, to the DSISD Home page, or can move on to the next module.

There is no hard and fast rule for what should be in a Navigation Bar or how it looks.  A simple one would appear at the end of every page (or beginning) and would send you back to the site home page and maybe to other significant pages within the site or the parent site.  Here, we chose the Composer Module Home and the DSISD home page.  If you go to the DSISD home page, a graphical Navigaton Bar appears at the side of most pages, and a similar text bar appeas at the bottom of all pages.

Creating a navigation bar is relatively simple.  First, after looking at the overall structure of your web site, determine the most common path your users would take.  Remember that all locations in your website that are relative must remain relative and all absolute paths must be written out completely.

To create a text Navigation Bar, go to a typical page in your site.  Type in the information you want in your Navigation Bar and create the links to those pages.  Then select the Navigation bar, COPY it, and then open all pages that have the same relative location as this first page and PASTE it on those pages, in the same location.  If you move to a page deeper in the structure of the site, you may need to modify and reCOPY the bar for those pages  (if they contain relative locations).

If you were to create a "template" file that contained a sample title, formatting, and navigation bar, and all new webpages were created from that template, you would save considerable effort.

Programs more specialized than Composer can create graphic Navigation bars and can create Navigation bars automatically or update them if you need to move or rename files.