the Technology Interface / Winter99

Developing Web-Based Courses in Engineering Technology

PSU Logo

Developing Web-Based Courses in Engineering Technology

James A. Rehg

Penn State Altoona

This project is just like the interstate highway system - construction never ends!

The following table of contents for the paper provides links for the following sections:


The impact of the web on engineering and engineering technology education is difficult to predict, but it is safe to say that instructional delivery will change as a result of Internet technology. This paper describe how a traditional engineering technology course can be converted to web delivery using fourteen prepared html templates. Seven of the templates use standard html scripts and seven use some advanced scripting techniques including dynamic html (dhtml) and cascading style sheets (css). In addition, various techniques used to deliver course content are discussed, and links to many examples of online courses are provided.



John Naisbitt's 1982 best selling book, Megatrends, used a method called content analysis to study the society and identify major new trends entering the market place. This technique, developed during World War II to analyze the conditions in axis countries, uses the frequency that a topic is referenced in the media to identify market place undercurrents that drive change. If that technique were applied today, the Internet and its associated technologies would be identified as a gigatrend. The impact on engineering and engineering technology education is hard to predict, but it is safe to say that the delivery of instruction will change as a result of the world wide web (www). This paper describes a minimum html scripting process any faculty member could use to move instructional content from a traditional lecture course to the web using a set of course templates. In addition, a comparison of technologies used to deliver content over the web, and a discussion of resources available to the web course developer is provided.


Web-based Instruction - Advantages

The issue with any new instructional delivery mode is improved levels of learning for the students. Clearly web-based courses offer advantages in access to course information, in providing links to a wider resource base, in providing an asynchronous delivery mode, and in handling administrative tasks. While these advantages do not guarantee increased knowledge, they do remove impediments from the learning process. It is also clear that for some courses, like history and language, access to information from across the world enhances the course content. Also, the opportunity for a greater understanding of concepts is present in situations where the www provides access to learning resources beyond that possible from a classroom or single-campus site. In addition, detaching course information from the ridged lecture schedule provides the opportunity for students to work at their own rate and their time schedule.

The ability to deliver course material to a wide range of operating systems, like UNIX, Windows, and Macintosh, from a single source is a major advantage that the web offers. In addition, the software or browser to view the course material is free and supports the display of multiple file formats without the need for the software that created the original document.

One of the two major disadvantages of web delivery is the static nature of html scripted pages. Instructors familiar with instructional technology software, like ToolBook, Authorware, and Hypercard would find the basic scripting languages for the web limiting. To overcome this shortcoming, the developers of the major technology software systems are making provisions to migrate their material to the web, and current web developments, like dynamic html (dhtml) and cascading style sheets (css), will give web pages dynamic characteristics. A second major disadvantage to delivery of course material in the non-traditional mode is the development time required. While the templates provided in this paper will not remove that impediment, they will reduce significantly the time required to get basic course material to the web.


Publishing on the Web

Web publishing starts with the identification of the course. While moving some courses to the web makes good pedagogical sense, not all courses are suited to web deliver. Educators often ask if courses suitable for web delivery have common characteristics. Courses that require the use of computers and software in the learning process are good candidates for web-delivery because the students use the computer as a natural course interface. Other characteristics include: courses that match up well with the resources availalbe at worldwide web sites, courses planned for distant learning, courses where the content is already in electronic format with no copywrite limitations, courses with a high level of information. After the course is identified, the following five activities are required.

  1. Organize the course material to maximize the impact on learning when the material is ported to the web.
  2. Create a course script in the hypertext markup language (html).
  3. Locate a server on the www.
  4. Move the document up to the server and test.
  5. Maintain and update the course.

Much of the work associated with step one is completed if the course is currently taught in the traditional lecture mode and has been well organized with transparencies or the equivalent. Materials used in the current course, like lecture notes, printed material, audio tapes, graphics, and still and video images, can be used in web delivery because the web offers the opportunity to integrate text, still graphics, animation, sound, and full motion video into instruction. The quality of web-delivery for these five types of instructional content is quite varied. The delivery of text information is excellent, still graphics, animation, and sound bites are good, real time or streaming audio is possible, but the practical delivery of full motion video for teaching is more difficult.

Another critical organizational issue is the strategy used for movement through the course material. In the traditional delivery mode, it is easy for the teacher to maintain full control of the pace and direction of movement through the course content. However, web courses become non-linear, and student movement through the course must be carefully planned and controlled with sufficient and affective navigational aids. The ability of students to move along different instructional paths as they navigate the material makes it difficult to verify that every topic was covered. In addition, the course designer must make sure that the learner does not get lost in a jungle of hypertext links between related material.

The work associated with step two (Create a course script in the hypertext markup language) is the most demanding because it is not uncommon for a course to have hundreds of html pages. Links to fourteen course templates in html format are provided in this paper to reduce the level of scripting required. Seven of the templates use basic html scripts to support delivery of basic course information, and another set use javascript to present the course from a frames enviroment. The links for the templates are provided below with additional links to examples of course material. The empty course templates include prompts for the location of the course information. An introduction to engineering technology course, developed at Penn State Altoona with these templates, is also provided. The following procedure provides a guide for using the templates.

  1. Use the Print command in the browser to print each of the template pages.
  2. Use the Save As command in the browser to save a copy of the html file for each of the template pages.
  3. Open the html file for the template in an html editor (You can use something as simple as Word Pad, the editor that comes with Netscape Communicator, or one of your choice. There is an extensive list of html editors provided on the resources page.
  4. Find the text prompts (i.e. Name of Your Course) that you want to change on the print out of the template page.
  5. Locate the same text prompt in the display of the html script provided by the html editor software.
  6. Change the text in the editor to reflect your course informaton, add and/or delete as you must to make the template fit your course, as you become more proficient with html you can change text style and color to enhance the pages. Save the results often and view them on a browser to verify that the look and feel of the online material agrees with your needs.
  7. Visit other course sites on the web (World Lecture Hall) and save the html code used to generate them. If you see something that you would like to use, check the html script used to generate the affect and modify it for your pages.
  8. The graphics that are visible in the templates are located in a folder (directory) called images that is located in the folder with the course pages. When you see the image it means that you need to add an image at that location or remove the image mark up script from the template. When you added images to the pages put them in the images folder. You can look at the image link format used on the templates in the html editor and use that same format for your graphics.


Standard Templates

Course Title Page


General Course Information

Course Schedule

Course Units

Course Exercises


Frames Based Template

When loaded with course information, these page templates replace many of the traditional course functions. For example, the Course Title Page provides an entry point to the course and represents the classroom. Another requirement in every course is a mechanism to support a dialog between the teacher and students for announcements, answers to questions, and general information. The Announcement Page supports that requirement. The General Course Information page is similar to a traditional course syllabus. The Course Topics, Units, and Exercises pages include the course content, and the Grades page is an on-line grade book with a final grade projection feature. The grade sheet starts with the highest possible grade applied to every assignment and test. As assignments and test are completed the red text indicating the maximum grade is replaced with the actual grade earned illustrated in black. At anytime students can see what work is recorded and the theoretical maximum grade they can be achieve in the course.

The last three activities in establishing a web-based course include: locating a server, moving the course to the server and testing the course, and maintaining the course. Many schools have a web-server that is available for course pages. If that is not available then it is not difficult to install a departmental server for the support of web-based courses. Cost of a computer configured to serve up pages on the web is not much greater than the cost of good desktop system. Moving the course pages to the server and maintaining the course material requires that the author have file transfer protocol (ftp) capability to the server where the course resides. A situation where all web pages are delivered on disk to the web-master for placement on the server should be avoided. If you do not have direct access to your course pages for updates and changes, the time required to get a functioning course will be extensive.


Publishing Other Course Elements

The course elements covered in the last section are just the minimum information required for the delivery of a course. However, in most engineering and engineering technology courses additional learning activities are present. These activities include:

Each of the additional course elements are addressed and suggestions and examples are provided to illustrate how they might be move to a web-based course.

Delivery of Problem Sets and Example Problems

Technical courses usually include some design and the solution and analysis problems. The most direct solution for web deliver of problem sets is to reference end-of-chapter problems and sample solutions in the course text or in other reference texts. An example of this approach illustrates the concept.

Another approach is to place links in the web course to documents stored on the server. Browsers can download most application files and launch the local application to display the document. For example, a problem set developed in MS Word can be downloaded from the server by students and viewed with their local Word application software. If the file is a text file it can be view by any text editor. To see how this would work, a word document file "webcou.doc" was placed on the server and you can access the file by selecting the active link. When it downloads, you get a choice of viewing it or saving it to disk. Any course material already developed in text format could be severed up in this manner.


Analysis of Case Studies

Case studies can be delivered with the same techniques used for problem sets. In addition, Adobe Acrobat software provides an excellent solution for delivery of course content. The course author uses the Acrobat software to convert most application documents into an Adobe format that can be view on the student's browser using the free Adobe Acrobat reader. Links to examples of this type of course delivery are provided in the following list. Note: The following links require that the free Adobe Acrobat reader be available to the browser. If you do not have that software use the link to the free software site to download it before trying the next links.

The advantage of the acrobat format is that files size is reduced by compression during the transfer to the .pdf format. For example, the file size for the acrobat version of the MS Word document was 79k bytes that was a magnitude of ten smaller than the original document which was 794k in size. This smaller file size translates into faster downloads over the web and reduced need for fast modems. In addition, the acrobat format compresses the documents into a single file. For example, when the same power point transparencies were saved using the Power Point command Save As html so that the files could be read with a web browser, they produced 34 separate files that had to be transferred to the server. In contrast, the acrobat conversion produced a single file that was significantly smaller and displayed the foils with all of their original styles, graphics, and colors. The link below is the same Power Point Transparencies save from the software using the Save As html command. You can see the difference in download time compared to the Adobe format and compare the quality of presentation. The only advance that the Power Point format offers is a navigation bar for viewing.


Development of Problem Solving Skills

Teaching students to be good problem solvers in the traditional classroom is difficult, so delivering that same instruction over the web is a real challenge. Many of the techniques used in the previous sections could be used here. In addition, interactive problem solving exercises can be developed with scripting languages like JaveScript and Vbscript. An example from the University of Tennessee at Chattanooga features a web based process control course with problem solving.


Development of Team Skills

Building team skills ranks in difficulty with problem solving for a web-based application. Several approaches can be used including teams linked by Internet mail working on common problems, progressive design exercises where each team member works on a portion of the design before passing it electronically to the next team member, and use of chat software technology to permit group interaction on a problem.


Performance of Laboratory Experiments

The most difficult aspect of teaching engineering/engineering technology courses online is delivering the laboratory experience. The creation of a virtual laboratory online that delivers equal or better experiences than a physical laboratory has not be achieved. A second example from the University of Tennessee at Chattanooga illustrates a web-based process control laboratory.


Additional Course Requirements

In addition to the course elements addressed earlier, the following three operational areas need to be covered:

Course taught in the traditional mode provide these basic student needs; therefore, the web-based course must also provide these elements. The use of forms on the web offer a good opportunity for collecting student feedback. The student information form and the course evaluation form in the following links illustrate how to collect student feedback online.

E-mail is used frequently in web-based courses for interaction between individual students and the instructor. Another web applications, list serve, is used for interaction between student groups and the instructor. In a list serve the input from anyone on the list can be broadcast to the entire group just like email is sent to group of recipients. Both techniques are easy to use and setup. Replicating the social aspect of the lecture room is not possible when students are separated by fiber and copper. However, the use of chat sessions does permit the exchange of dialog in real time similar to the classroom social atmosphere.

Moving the basic elements of the traditional engineering/engineering technology course to the www is not difficult if the page templates are used. Transferring the other course elements and requirements described earlier to the online mode requires the use of additional resources.


Web Development Resources

A unique aspect of the web is that the resources necessary to generate an online course are available online. Viewing these resources is far better than describing them; therefore, use the link to go to a web page with an extensive resource index and get started.

Go to resources page.



The movement of learning from the lecture hall to world wide web has begun to intensify. To participate in this pedagogy, the instructor starts with the migration of the basic course elements to a web server. This process is quite easy using the templates identified in this paper. The development of the web-base course then becomes an evolutionary process with regular enhancements to the course pages using techniques like JavaScripts, ActiveX controls, and applets that are packaged for specific affects. As the web continue to develop, resources and tools will become available to add additional functionality to the web-based course. Some of these tools have begun to emerge in the HTML 4 specification in the form of dynamic HTML and cascading style sheets. The web is leading the way to the virtual classroom.


This page is dynamic and changes frequently. Please send suggestion for improvement to James A. Rehg

Copyright © This page was developed by Jame A. Rehg, Engineering Department, The Pennsylvania State University, Altoona College, in 1998. If you use these materials in some way, please acknowledge the developer.

Penn State University
Altoona Campus
Updated 6-22-98

HTML Writers Guild