Search class pages

The CATE System
Understanding, Building, and Teaching with Class Websites using SRJC's Computer-Assisted Teaching Environment

1. Introduction 2. Basic Concepts 3. Overall Structure 4. Personal Homepages 5. Course Homepages 6. Section Homepages 7. Images 8. Uploading Files 9. File Management Image-Picking Interface Link-Picking Interface 10. Nav Bars 11. Schedules Text-Entry Interface 12. Presentations 13. Tests and Exercises 14. Rosters and Student Management 15. Web Groups 16. Passwords and Authentication 17. Message Boards 18. Other Communications 19. Tools for Students 20. Gradebooks 21. The Next Step

7. Images This lesson provides a basic understanding of acquiring and using images on CATE pages. Assignments Read the material on this page Follow the links and read the relevant Help material Review the sample website Observe the FTF demonstration Do the exercises Introduction to Images This lesson isn't about creating or editing images. Likewise, the CATE system doesn't provide functionality for creating or editing images. If you want to do that kind of work -- such as cropping, rotating, or adjusting resolution or color depth -- you'll need to use suitable image editing software. Instead, this lesson is about acquiring the appropriate kinds of images for use with class websites. File formats for images There are many different kinds of file formats for images, which can be distinguished by their extensions. Here's a short list of some of the more common formats: .jpg and .jpeg (same thing) .gif .pict .tiff .png Many other formats (and extensions) also exist. For our purposes, you will almost always want to use .jpg (same as .jpeg; either one will be fine) or .gif. Some other formats -- such as .png -- are also suitable, but others aren't. In general, stick with .jpg and .gif and you'll be fine. Note that you can't just change a file format by changing the extension. For example, if you rename image.tiff to become image.jpg or image.tiff.jpg, the internal file format is not altered, so you gain nothing. All you do is completely confuse the browser (and probably your image editing software). Should you ever really need to convert an image file from one format to another, you'll need to use an application such as Graphic Converter. Sources of images Where can you get files in a suitable format for use at your class website? Plenty of sources exist. Here are a few: Digital camera CATE's Online Art Bazaar On the Web Scanning a print image Clip art packages Creating an image with graphics software Copyright restrictions If you snap the photo yourself or otherwise create the image, then you own it and you can do with it as you please. Otherwise, you can't just assume you automatically have the right to use it, even if you find it on the Web via a Google image search or something along those lines. Many images on the Web are copyrighted and require permission to use, and in some cases the owner expects remuneration. The TEACH Act and other Fair Use provisions give you some leeway in this area, but you still need to be aware of copyright issues and play by the rules. Note that any image in CATE's Online Art Bazaar is freely available to use without any problem. For the purpose of these lessons, as we acquire and use images, we'll only use images when we're confident they have no copyright restrictions. Snagging Images In theory, if you find a suitable image that already exists on the Web, you can use that copy of the image in your class website. All you need to do is get the URL (the Web address, such as http://server.com/directory/image.jpg) for the image and then plug that URL into your pages. In reality, however, that's usually a bad idea. Why? Because the image might disappear or change, and then you'll be out of luck. Thus, it's almost always best to have a copy under your own control so you can rely on its existence for as long as you want. Note, by the way, that you can rely on any image in the CATE Online Art Bazaar. Grab your own copy if you want, but those in our Art Bazaar should be there permanently, so you can always reliably point to our copy of the image. But, assuming you need to get your own copy of an image, how do you go about that? Fortunately, the process is already built into the Web and your browser, so it's really simple. The first step in getting your copy of the image is to locate it on the Web. When it's being displayed in your browser, then you need to snag it. To snag it, use your mouse to place the cursor over the image. Click the right button on your mouse. You'll then see a pop-up menu onscreen. Because this is built into your browser -- not part of the CATE system -- the exact options and wording will vary depending on your browser and your computer operating system. In any event, look for an option such as "Save Image" or "Download Image." Select that option and -- using the options built into your browser and computer -- save the file. You can save it just about anywhere, but remember where you put it! That's it. You now have an exact copy of the original image file under your control on your local computer. What To Do with Images Now that you have the image, what can you do with it? Images are ubiquitous on the Web, and you will probably want to use some in your class website. They can be strictly decorative (but don't get carried away!) or they can be an intrinsic component of what you're teaching. Images can also be used for other, more specialized purposes, such as buttons in nav bars. (More about that in an upcoming lesson.) In any event, in order to use an image in your class website, the image file needs to reside on a web server. That can be any web server to which you have access. Mostly, however, that means you'll want to put your image in your own directory space within your CATE account on the CATE server. (We'll cover that in an upcoming lesson.) When your image file is in place on a web server, you can then use it in any way you desire as part of your class website. Note that you can use the same image file in an unlimited number of locations, so you don't need to make multiple copies of the file. Finally, remember that every time you use the CATE system to place an image on a page, the system will present a field for you to enter the "ALT" tag. That's the description of the image for use by students with limited vision who are running specialized browsing software. Don't forget to enter a suitable ALT description. Help Documents How to...Snag an Image: http://online.santarosa.edu/catedocs/howto_snag.html CATE's Online Art Bazaar: http://online.santarosa.edu/graphics Art Tips for Faculty: http://online.santarosa.edu/catedocs/art_tips/index.html Sample Website To see how all the components covered in these lessons fit together, please visit the sample class website. Sample class website Demonstration (For face-to-face sessions) We'll demonstrate how to go through the step-by-step process of finding and snagging an image on the Web. Exercises To help you better understand the material, to integrate the different modules, and to demonstrate how an entire class can be constructed from various components, in each lesson you'll be creating a portion of a class website, so at the end of the process you'll have a complete model of an entire class. To begin with, you should always use a practice course (such as CATE 101, ROCK 101, or BASE 101) for your exercises. After you've mastered the process and created material that's ready for your students, then you can convert your practice class into a real class that you're actually teaching and make it accessible. Here's the exercise for this lesson: Find a suitable image on the Web. Ensure that no copyright restrictions exist. Snag the image. Make sure you know where the snagged image is stored on your local computer. Here's a little icon you can use if you just want an image for quick practice: Lab (For face-to-face sessions) We'll walk around the room and assist individually as you undertake the exercises for this material. Practice Quiz After studying all the material for this lesson, take the self-assessment quiz. CATE Online Training Quiz 03: Images Sample Class Websites WWII 101 A plain-vanilla sample class website Rock 101 A fancier sample class website Feedback Please provide us with comments, corrections, and/or suggestion regarding this material. Be sure to identify the lesson and the material to which you're referring. Thanks for taking the time to help us improve these online training materials. CATE Online Training Feedback

Search class pages