January 28, 2021
Hot Topics:

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

  • By Matt Weisfeld
  • Send Email »
  • More Articles »

The Code

Listings 1, 2, and 3 show the HTML code that provides the basis for all of the directories in the notebook structure.

This structure is divided into three separate files:

  • The main entry point to the directory, index.html (Listing 1)
  • The navigation bar for the directory, notebooknav.html (Listing 2)
  • The content frame for the directory, notebook.html (Listing 3)

Each directory of the notebook structure will have these three files with the appropriate edits made to them.

Figure 2 shows the directory structure that was presented in the previous article.

Click here for a larger image.

Figure 2: Engineering Notebook Directory Structure.

Note: You do utilize a simple cascading Style Sheet, navbar.ccs (included in the code download), for current and future standardization of the look-and-feel.

When you implement the web front-end, the result will look something like what is presented in Figure 3.

Click here for a larger image.

Figure 3: Engineering Notebook Directory.

Note that this initial implementation only deals with a single category, in this case a single course (History 101). You start with a single piece of the puzzle because one of the characteristics of this approach that you want to focus on is that it is extensible. you easily can propagate this structure by creating more directories in a horizontal as well as a vertical manner.

The file index.html (Listing 1) breaks the screen up into its component frames, NavBar and Main.


<FRAMESET framespacing="0" cols="150,*">
   <FRAME name="NavBar" target="Main" src="notebooknav.html"
   <FRAME name="Main" src="notebook.html" scrolling="auto">
   <BODY topmargin="0" leftmargin="0">
   <P>Your browser doesn't support frames.</p>
   </ BODY >

Listing 1: index.html

The file, notebooknav.html (Listing 2), creates the navigation bar. Note that you have created links to the component parts of the course, listed below:

  • Assignments
  • Notes
  • Worksheets
  • Vocabulary

There is also a link to the Main Page itself. These links control the content frame to display information.

<LINK HREF="navbar.css" REL="stylesheet" TYPE="text/css">
<base target="Main">
<BODY background="images/border.gif">
<LI><A HREF="notebook.html" TARGET="Main">Main Page</A>
<LI><A HREF="assignments.html" TARGET="Main">Assignments</A>
<LI><A HREF="notes.html" TARGET="Main">Notes</A>
<LI><A HREF="worksheets.html" TARGET="Main">Worksheets</A>
<LI><A HREF="vocabulary.html" TARGET="Main">Vocabulary</A>

Listing 2: Notebooknav.html

Page 2 of 5

This article was originally published on November 13, 2007

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date