October 31, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Fine Tuning the Development Process: Adding a Web Interface to the Electronic Notebook

  • November 13, 2007
  • By Matt Weisfeld
  • Send Email »
  • More Articles »

To include this added directory level in the code, you simply have to copy the code from the history 101 directory and then do some simple text editing. For example, copy the notebooknav.html from the history 101 directory and then edit the file as seen in Listing 2.

<HTML>
<HEAD>
<TITLE>Fall semester 2007</TITLE>
<LINK HREF="navbar.css" REL="stylesheet" TYPE="text/css">
<base target="Main">
</HEAD>
<BODY background="../images/border.gif">
<UL>
>Main Page</A>
<P>
<LI><A HREF="history/index.html" TARGET="_top">History</A>
<LI><A HREF="math/index.html" TARGET="_top">Math</A>
<LI><A HREF="programming/index.html" TARGET="_top">
   Programming</A>
<LI><A HREF="communications/index.html" TARGET="_top">
   Communications</A>
</BODY>
</HTML>

Listing 2: notebooknav.html for the 2007 Fall Semester Directory

The only coding issue that you must note when multiple directory levels are involved is how you navigate among the various index.html files. To display the appropriate navigation bars, you need to be aware of the following code, where the TARGET in the HREF tag is specified as "_top". The "_top" loads the linked document in the topmost frame, thus the new page will fill the entire window, rather than just a single frame.

<LI><A HREF="../index.html" TARGET="_top">Main Page</A>

When this is implemented, you now have the ability to select from several possible courses, as seen in Figure 7.



Click here for a larger image.

Figure 7: Engineering Notebook Directory—multiple classes.

Tying It All Together

Finally, for this example you will expand the scope to include selections for the entire college career. You can design directories that represent entire semesters and then drill down to include the classes for each of these semesters. The directory structure for this is shown in Figure 8.



Click here for a larger image.

Figure 8: Engineering Notebook Directory—Several Years.

Again, the only work to do here is to copy the three infrastructure files from one of the directories and copy them to the new top-level directory.

<HTML>
<HEAD>
<TITLE> Class of 2011</TITLE>
<LINK HREF="navbar.css" REL="stylesheet" TYPE="text/css">
<base target="Main">
</HEAD>
<BODY background="images/border.gif">
<UL>
<LI><A HREF="index.html" TARGET="_top">Main Page</A>
<P>
<LI><A HREF="2007 Fall Semester/index.html" TARGET="_top">
   Fall 07</A>
<LI><A HREF="2008 Spring Semester/index.html" TARGET="_top">
   Spring 08</A>
<LI><A HREF="2008 Fall Semester/index.html" TARGET="_top">
   Fall 08</A>
<LI><A HREF="2009 Spring Semester/index.html" TARGET="_top">
   Spring 09</A>
<LI><A HREF="2009 Fall Semester/index.html" TARGET="_top">
   Fall 09</A>
<LI><A HREF="2010 Spring Semester/index.html" TARGET="_top">
   Spring 10</A>
</BODY>
</HTML>

Listing 3: notebooknav.html for the Class of 2011 Directory





Page 4 of 5



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel