[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]