HTML I Class Projects
Project Twenty-Four

[Back to the Projects Page]

Project Twenty-Four involves creating a "help page," a very common type of Web page on a corporate intranet. These pages help users learn a software application by taking them through common procedures in a step-by-step way. The graphics come in when you want to show people what the various interfaces and dialog boxes look like and to show them what buttons to click and boxes to fill in to do what they want to do.

Guidelines: This project should result in a page (or a series of pages) that would help a relatively inexperienced user make sense of whatever application (a computer program like Word or PowerPoint) you choose to take on for your project. Your help page should be very methodical and "user friendly," so that anyone could follow the steps you provide. Show people how to do one specific operation , and be sure that the procedure you help users with has a minimum of five separate steps, each illustrated with a graphic. Starting the program should not be step one.
NOTE: Be sure to convert your graphics into *.jpg files; the *.bmp files can get very large, are slow to load, and take up too much disk space.
Also, at this point, you should be able to incorporate tables and stylesheets to make your help page look organized and attractive. Keep using--and improving--those skills. Many of you are just scratching the surface of what style sheets will do, so try looking at this site for more useful information.

To do this project, you will need to learn how to make "screen captures." One way is to use the "Print Screen" key on the upper row of your keyboard (sometimes it only says "PrtSc"). When you press this key, the whole screen is copied to the "clipboard," a segment of the machine's memory. If you open a new file on a graphics application, you can use a paste command to put the copied image into the graphics program.
Please do not do it this way; it causes several problems. First, the image will be a bitmap (*.bmp), which causes certain problems as we have seen. Second, the resulting image will not have the cursor (mouse arrow) on it anywhere. It will be impossible to show the user what to do with the mouse this way.
You will have a much easier time if you use the screen capture capabilities of some graphics programs to help with this step. i_view.exe, found in my share directory, combines capture capabilities with the usual stuff graphics programs do--and it's free. The advantage of this technique is that the image does not have to be pasted into a graphics app--it's already there. As soon as you make the capture, Irfan-View pops up on your screen with the capture sitting there ready for editing. You also get much more detail on your image since things like the mouse cursor show up.
NOTE: Look HERE for a tutorial on I-view.
 
Regardless of how you capture screen images, you will need to crop them down to just the specific parts of the screen image you need to focus on. Resizing images too much results in fuzzy, unreadable text, so resize very little, if at all. Be sure to save images as *.jpg's to save on disk space and to speed loading of your page.

[Back to the Projects Page]

Valid XHTML 1.0! Valid CSS! Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0