|This lesson explains how to make and use nav bars to provide a standard, consistent navigational interface for your class website.|
- Read the material on this page
- Follow the links and read the relevant Help material
- View other class websites and sample nav bars
- Review the sample website
- Take the practice quiz
- Observe the FTF demonstration
- Do the exercises
Read the Quick Guide for an overview of the subject.
Quick Guide for Nav Bars
A nav bar (short for navigation bar, also known as menu bar, button bar, tool bar, or navigation menu) is a row of small clickable images, with the link for each image leading to a particular part of a class website. Each individual button can provide one link leading to one page. Nav bars are used to provide consistent, standardized navigational interfaces for class websites.
A typical nav bar contains the following images and links:
- Home: section homepage
- Instructor: personal homepage
- Schedule: schedule page
- Message Board: archive page of class Message List
- Chat: class chat room
- In Box: presentation page for uploading electronic documents
- Gradebook: grades
Because nav nar buttons are nothing more than images, you can use any images you want when constructing your nav bar. It's usually easiest to use the buttons made available directly within the Nav Bar module or via the CATE art bazaar.
A single nav bar can be installed on an unlimited number of pages, and should be installed on all the pages of a class website, including section homepage, lecture pages, schedule page, gradebook, etc.
For face-to-face classes, you usually don't need a nav bar unless you choose to utilize multiple Web-based components to enhance your class.
You definitely need a nav bar for an online class.
Three main approaches exist for creating a nav bar.
- Build a nav bar automatically as part of an entire auto-generated class website
- Build a standardized nav bar, faster but with fewer options
- Build a customized nav bar manually, button by button
Unless you use the automated procedure (don't do that until you understand the system), building and installing a nav bar is a bit of a chicken-and-egg situation. Until your class component exists (such as a gradebook), you won't be able to have a functional button (such as a gradebook button) in the nav bar.
Therefore, in many cases it proves optimal to delay building the nav bar until all the other class components exist. For training purposes, however, we need to cover nav bars at this point, even if your other class components aren't in place yet. Thus, the nav bar buttons will be in place, but they won't work until you create the corresponding class components.
In any event, here are the three different approaches to creating a nav bar.
1. Automatically with the "Magic Button"
The first option for creating a nav bar is to do so automatically.
As we learned in the lesson on section homepages, you can use the "magic button" of the Class Components option to build an entire class website.
If you choose to do so, the system will automatically build a suitable nav bar with all appropriate buttons, and the system will also install the nav bar on all pages of your class website.
That's all there is to it.
Of course, you can always edit the nav bar should you choose to do so.
2. Semi-Automatically, for a Standard Nav Bar
For this option, log into your CATE account and go to the Nav Bar module.
Near the top you'll see the "Create Standard Nav Bar Button." Give that button a click.
Now perform the following steps as you gradually work your way down the page.
1. Use the corresponding radio button to choose the color scheme you want for your nav bar buttons.
2. Enter a suitable name for the nav bar. It's usually best to use a name like "Engl 1A". It's usually best NOT to name a nav bar with a section number.
3. For your home button, use the corresponding radio button to select the option you want. If you choose the third option, use the pop-up menu to select the correct section homepage.
4. For your instructor button, use the corresponding radio button to select the option you want.
5. For your schedule button, use the corresponding radio button to select the option you want. If you choose the third option, use the pop-up menu to select the correct schedule page.
6. For your Message Board button, use the corresponding radio button to select the option you want. If you choose a presentation, you must also choose the appropriate page in that presentation via the corresponding pop-up menu.
7. For your chat button, use the corresponding radio button to select the option you want. If you choose the third option, use the pop-up menu to select the correct chat room.
8. For your In Box button, use the corresponding radio button to select the option you want. If you choose a presentation, you must also choose the appropriate page in that presentation via the corresponding pop-up menu.
9. For your gradebook button, use the corresponding radio button to select the option you want. If you choose the third option, use the pop-up menu to select the correct gradebook.
10. After making all your choices, click the "Confirm Standard Navigation Bar" button at the top or bottom of the page.
You can always edit your nav bar at any time.
3. Manually, for a Customized Nav Bar
Creating a nav bar manually gives you the maximum opportunity for customization, but it also involves a little more work.
To create a nav bar manually, log into your CATE account, go to the Nav Bar module, and click the "Add New Nav Bar" button.
Next, click the "Edit Name of Nav Bar" button. Give the nav bar a suitable name. It's usually best to use a name like "Engl 1A". It's usually best NOT to name a nav bar with a section number. Click to confirm the name of the nav bar.
At this point we've created a new nav bar and named it, but the the nav bar has no buttons. Thus, we're going to populate the nav bar with buttons. Each button will have a name, an image, and an associated link. In order to populate the nav bar, we'll loop through the same series of steps for each button we want.
In order to do this efficiently, you'll want to already be familiar with the image-picking interface and the link-picking interface.
Here are the steps.
1. Make sure you're on the page with the heading "View/Edit/Clone/Delete Navigation Bar."
2. Click the button labeled "Add New Button."
3. Click the button labeled "Edit Button Configurations."
4. Unless you want to manually adjust the button sequence, ignore the "sequence number" field.
5. Enter a name for the button, such as "Home" or "Instructor" or "Schedule." This name won't actually appear on the button, but it serves two purposes. It provides a name so you can find and identify the button if you ever need to edit it, and it serves as the ALT tag for the button image for accessibility compliance.
6. Click to confirm editing.
7. Now click the button labeled "Edit Button Image."
8. Use the image-picking interface to select the image you want to use for this particular button.
9. After picking the image file, click the button labeled "Confirm Picking Image."
10. Now click the button labeled "Edit Button Link."
11. Use the link-picking interface to select the page to which your visitor will be taken upon clicking this button in the nav bar.
12. After picking the destination, click the button labeled "Confirm Picking Link."
13. Now click the button labeled "Nav Bar Menu" where you'll be able to see a list of all the buttons currently in this nav bar.
That completes the steps for a button in your nav bar. Now repeat steps one through thirteen for each additional button you want to place in your nav bar.
Remember, you can always edit your nav bar at any time.
Any nav bar, no matter how it was created, can be edited. That means you can change its name, add or delete buttons, change the sequence of buttons, change any image being used for a button, change the destination for any button, etc.
In order to edit a nav bar, log into your CATE account, go to the Nav Bar module, and then go to the appropriate nav bar.
From there you can edit properties of the nav bar itself (such as the name), you can add buttons, and you can also reach any existing button so you can edit the properties (name, image, destination) for that button.
Whenever you edit a nav bar, the changes are immediately reflected within the nav bar on all pages where the nav bar is installed.
If you use the "Magic Button" to automatically create a nav bar while working in the Section Homepage module, the nav bar is automatically installed on all the appropriate pages.
Otherwise, you must install the nav bar yourself.
Of course, you can always install and/or un-install a nav bar as desired, and that also means you can change whatever the "Magic Button" originally did for you, should that become necessary.
To install a nav bar on page -- or un-install a nav bar from a page -- you have two choices.
- You can do the work from within the Nav Bar module. For any nav bar, look for the bold heading "Installing/Removing this Nav Bar." Under that heading you'll find buttons for controlling exactly where the nav bar is installed.
- For any section homepage, schedule page, presentation, or other CATE component supporting nav bars, you can do the work within that particular module. The exact location and procedure varies slightly depending on the module.
Either one of those approaches will work equally well. Choose whatever seems most efficient and convenient to you.
Each individual button in a nav bar can have one and only one destination. For example, for one particular nav bar the "gradebook" button in that nav bar can lead to only one gradebook.
However, a nav bar can be installed on an unlimited number of pages. For example, the same nav bar could in theory be installed on two or three or four or more different gradebook pages.
Is that a good idea?
Well, you want one particular nav bar to be installed on all the pages for one class website. But you do NOT want to install that same nav bar on multiple class websites (except in some very specific and unusual situations). Otherwise, as in the example above, all the students in all those sections will always be sent to the gradebook for one section. That means most student will be trying to access the gradebook for the wrong class. Not a good plan!
So put your nav bar on all the pages for the appropriate section, but make a different nav bar for each section.
If you use the "magic button" to build your class website, this will be handled for you automatically. Otherwise you need to deal with it manually. And don't forget that if you clone a nav bar, the links will still lead to the original destinations, so you'll need to change the destination for each button to reflect the appropriate URL for each page in the new section for which you'll be using the cloned nav bar.
Study the Help module for this topic. Think of this as a chapter in your textbook.
How to...Install a Nav Bar: http://online.santarosa.edu/catedocs/howto_install_nav.html
CATE Library of Buttons: http://online.santarosa.edu/cgi-bin/autocate/upload/graphics.cgi?buttons
Visit CATE class websites built by your colleagues and study their nav bars: http://online.santarosa.edu/course
Look at some customized nav bars: http://online.santarosa.edu/presentation/page/?65234
To see how all the components covered in these lessons fit together, please visit the sample class website.
Sample class website
After studying all the material for this lesson, take the self-assessment quiz.
CATE Online Training Quiz 05: Nav Bars
|To help you better understand the material, to integrate the different modules, and to demonstrate how an entire class can be constructed from various components, in each lesson you'll be creating a portion of a class website, so at the end of the process you'll have a complete model of an entire class. |
To begin with, you should always use a practice course (such as CATE 101, ROCK 101, or BASE 101) for your exercises. After you've mastered the process and created material that's ready for your students, then you can convert your practice class into a real class that you're actually teaching and make it accessible.
Here's the exercise for this lesson:
Create a nav bar using either the semi-automatic or the manual method.
The nav bar should have at least two buttons: one leading to your personal homepage and one leading to your section homepage.
If you have other class components available, you can have additional buttons.
Install the nav bar on all appropriate pages of your class website.
Just for practice, add a button leading to the SRJC homepage.
Then delete the button that leads to the SRJC homepage.
Lab (For face-to-face sessions)
We'll walk around the room and assist individually as you undertake the exercises for this material.
WWII 101 A plain-vanilla sample class website
Rock 101 A fancier sample class website
Please provide us with comments, corrections, and/or suggestion regarding this material. Be sure to identify the lesson and the material to which you're referring.
Thanks for taking the time to help us improve these online training materials.
CATE Online Training Feedback