E-mail this pageBuilding a Course Menu
Having a consistent layout and navigational structure on your course web site(s) is not only aesthetically pleasing, but it also significantly helps your students negotiate their way through your course materials. Your students should always know they're at a Plattsburgh State web site, that they're in your web site, viewing materials for a particular class. They should always be able to find some way of responding to the information that's been posted.
For these reasons, it's a good idea to develop a basic navigational structure that you can use consistently across the course web site. This shouldn't preclude links from appearing elsewhere in your web materials, but it will provide your students with a practical way of getting to all of the major course areas from any page on your course site.
Because FrontPage allows you to re-use page elements (through a mechanism called Include Page ), you can create a single course menu on one page and then re-use it on many pages. This means that the effort of creating a course menu is well-rewarded: you'll have to make only one for all of the pages for any given course.
In the sections that follow, you'll be led through some steps in creating a course menu: the first of the examples will use a simple, accessible table format, and the second will create the menu without a table.
Creating a Basic Course Menu Using a Table
In this section, you'll be led, step-by-step, through the process of creating a simple course menu that includes a range of useful/necessary options. The end result should look like this if you've chosen to use graphical buttons:
|
My Course
SPRING 2000 - DR. IMIN CHARGE |
|
|
If you've decided to use text for the hyperlinks, your result should look like this:
|
|
My Course
SPRING 2000 - DR. IMIN CHARGE |
| Syllabus | Announcements | Assignments | Readings | Discussion | E-mail | |
Begin by creating a new web page in Page view.
With the new page open in Page View, select File|Properties to open the page properties dialog: there, give the file a title of "Header Menu." Once you've done so, click the OK button to dismiss the dialog.
This much done by way of preliminary page setup, you can now insert the basic table structure required for this exercise: you want a table with two rows and two columns. To create this table, click on the table tool, and then drag down and to the right until you've selected a 2 X 2 grid as illustrated below.
When you've selected the 2 X 2 grid, release the left mouse button. Your table will be dropped into place at the top of your page.
In the upper left-hand table cell, you should insert the college logo: there's a copy of it in a common images area on the faculty web server: select Insert|Picture|From File , and in the URL field, type http://faculty.plattsburgh.edu/common/images/home-med.gif . Then click OK . This will grab the Plattsburgh State Logo from its location on web server and inserted the image into the upper left cell. Right-click on the image, select Picture Properties , and type Plattsburgh State University logo . Close the Picture Properties dialog.
Click once on the image to select it and to bring the Image Toolbar
into view. From this toolbar, select the Set Transparent Color
tool (
) and use it to click once on one of the white
portions of the image. This will set the white area to be transparent--though you may not notice a change if you are working with a page that has no background color set.
Your next step is to position the cursor in the upper right cell and type the name of your course, the course year, and your own name. Adjust the size of the fonts, if you want to: since the menu you're building here will only need to be created once, you're not looking at a huge editing effort by not using a style sheet. (The illustration above uses an Arial font for the year and instructor information. The text was subsequently colored maroon by selecting it and picking the color from the Font Color
list 
)
After you've typed the requisite information in the upper right cell, right-click once in that cell to introduce the following menu:
Select "Cell Properties" to introduce the following dialog:
You'll want to make changes as indicated above. Set the Horizontal Alignment field to right and set the Vertical Alignment field to top . If there's a checkmark in the "Minimum Size" field(s), remove it. You'll want to put a checkmark into the box marked No wrap . All other options can remain in their default position, but it doesn't hurt to have a quick look at what's available to you in this menu. Click the OK button to close the Cell Properties dialog window.
At this point, you should already be getting a sense of how tables work to help arrange elements on the HTML page: your image is positioned tidily in the default position in its cell to the left, and your course information and name sit snugly on the right.
The next step involves merging the lower two cells to create one long cell: position the mouse cursor over the lower left cell, and then drag across the lower right cell until both lower cells are highlighted. Right click over them and select Merge Cells from the popup menu.
The basic structure of your page-top menu is almost complete. What remains is to populate that menu with hyperlinks. Since you're building a menu which will be consistent across a variety of pages, the hardest part of the exercise will be determining what you'd like to see there. The example that appears toward the top of this page provides a fairly common set of navigation options for course web sites, but there's no compelling reason to limit yourself to these.
You can insert the hyperlinks into that lower cell either as text (with items commonly being separated from one another by a space and the pipe symbol (|)--it's above the Enter key), or as images. If you use images of buttons for your hyperlinks, ensure that each of the images has its ALT tag set: right click on the image, select properties, and type a textual representation (like, for instance, "Link to the Syllabus."
You'll find a set of buttons that you can use amongst the common images on the faculty web server . Once you've finished adding and linking your buttons/text, you should save your file: save the page as header.htm .
This next section of this page will show you how to build a similar header page without the use of a table.
Creating a Basic Course Menu Without a Table
An alternative to using a table is presented by the prospect of carefully lining up text and graphic elements and using the option to set the picture alignment. Here's what you'll get if you use pictures for your course site links:
My Course
SPRING 2000 - DR. IMIN CHARGE
And here's what you'll get if you use text-links:
My Course
SPRING 2000 - DR. IMIN CHARGE
Syllabus | Announcements | Assignments | Readings | Discussion | E-mail
To produce these layouts, you'd begin exactly as before: create a new web page in Page view.
With the new page open in Page View, select File|Properties to open the page properties dialog: there, give the file a title of "Header Menu (No Tables)." Once you've done so, click the OK button to dismiss the dialog.
Your next step will be to get the logo image: select Insert|Picture...From File and, in the URL field, type http://faculty.plattsburgh.edu/common/images/home-med.gif . Then click OK . As in the previous example, this will grab the Plattsburgh State Logo from its location on web server and inserted the image into the upper left cell. Right-click on the image, select Picture Properties , and type Plattsburgh State University logo . Then click on the Appearance tab in the Picture Properties dialog. Set the Alignment field to Right . Then close the dialog box.
Text will now wrap around the left side of the image. By experimenting with font sizes, you should be able to select a combination of fonts that will produce more or less satisfactory results (we don't demand perfection in these things).
Tip: It's possible to insert a line break instead of a paragraph by holding the SHIFT key while you press ENTER.
Another Tip: In order to keep the line from breaking where you don't want it to break, you can use a non-breaking space: to produce a non-breaking space, hold down the SHIFT + CTRL keys and then press the space bar.
From this point, most of the instructions mirror those given in the previous example. Add your common course hyperlinks as images or text links. And then save your file as header2.htm
The next logical step is figuring out how to incorporate this header file into other pages on your website. To investigate this, see the section on Using "Include" Pages .
Comments or questions? Please contact Dr. Peter Friesen , Instructional Technology Coordinator, Plattsburgh State University.