Fine Tuning the Development Process: Adding a Web Interface to the Electronic Notebook, Page 2
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)
Figure 2 shows the directory structure that was presented in the previous article.
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.
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.
<HTLM> <HEAD> <TITLE>Notebook</TITLE> </HEAD> <FRAMESET framespacing="0" cols="150,*"> <FRAME name="NavBar" target="Main" src="notebooknav.html" scrolling="auto"> <FRAME name="Main" src="notebook.html" scrolling="auto"> </FRAMESET > <NOFRAMES> <BODY topmargin="0" leftmargin="0"> <P>Your browser doesn't support frames.</p> </ BODY > </NOFRAMES >
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:
There is also a link to the Main Page itself. These links control the content frame to display information.
<HTML> <HEAD> <TITLE>ITMP2670 TTH</TITLE> <LINK HREF="navbar.css" REL="stylesheet" TYPE="text/css"> <base target="Main"> </HEAD> <BODY background="images/border.gif"> <UL> <LI><A HREF="notebook.html" TARGET="Main">Main Page</A> <P> <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> </BODY> </HTML>
Listing 2: Notebooknav.html
Page 2 of 5