collect graphics for use on the web
become familiar with an image editor program
perform common manipulations on web graphics 

• resize a graphic
• create a thumbnail of a large/medium size graphic
• convert an image from JPEG to GIF format
• optimize(compress) a graphic for the web

create a new web graphic
place graphics on a web page
make a graphic hyperlink to an image file

Read the section Graphics on the Web in Chapter 3 of Niederst, pp. 34-41.  For more in depth treatment consult Chapters 14-17. 

1. Select a graphics editor to use to complete this lab. You may use any image editor that can perform the common web tasks you will undertake in this lab. 

Note: Different image editors have different terms of use: some offer a trial period, others do not; some are free, others require users to pay to use. Be sure to check on the piece of software you are using to ensure you are complying with all terms of use. 

Some inexpensive image editor programs you may want to consider using include the following: the built-in editor of FrontPage, PhotoDraw (the graphics editor in Microsoft Office 200 Premium), or PaintShopPro (downloadable from the FSU web site at http://www.frostburg.edu/admin/acacom/shareware/win95.htm; 30-day free trial then licensing fee required). 
 

2. Search the Internet for online tutorials on how to use the graphics editor you choose. Record the addresses of these tutorials; you will need them when you complete "Incorporate graphics into a web site" later in this lab.

Collect graphics for use in a web site

1. Scan at least one photograph of yourself. Save the image in a file with a JPEG format with a low resolution (72 ppi). Note: Scanners are available for student use in the University Computing Labs in Pullen Hall.



2. Have someone take at least one picture of yourself with a digital camera. Save the image in a file with a JPEG format with a low resolution (72 ppi). Note: Digital cameras are available for student use in the University Computing Labs in Pullen Hall. 

 
3. *Search the Web for at least three graphics (one GIF, one JPEG and one PNG) to download. (To download an image from the Web to your computer, place your mouse on the image and right-click. Then select Save Image As or Save Picture As.) Record the addresses of the sites where you found the images. You will need them when you complete "Incorporate graphics into a web site" later in this lab.

*To find web art on the web, type keywords like "free clip art," "web art," or "web graphics" in your favorite search engine.

Image Selection Guidelines: 
a. Select images from sites that clearly grant permission for re-use of the images. 

b. Be sure one of the images you select is appropriate for use as your page background (select a light-color background image if you will use dark text, or vice versa) when you build your assignment web page later in "Incorporate graphics into a web site". 
 

4. Search the Web for a medium/large-size (at least 2"x2") image (in JPEG format) of a water fall, landscape or sunset. Download the file to your computer. Be sure to record the address of the site where you found the image. You will need it when you complete "Incorporate graphics into a web site" later in this lab. 

Image Selection Guidelines: 
a. Select the image from a site that clearly grants permission for re-use of the image. 

1. Work through an online tutorial for the image editor you selected using one of the images you acquired in the previous section. As you work through the tutorial, note what you like and dislike about it, how helpful you find it and what you found most useful in it. You will need this when you complete "Incorporate graphics into a web site" later in this lab. 

Create and manipulate graphics 

1. (resize an image) Resize and modify (as desired) the JPEG images of yourself (collected in the previous section) to a size appropriate for the web. Generally speaking the width of the resized image should not exceed 400 to 500 pixels. 
    
2. (create a thumbnail) Resize the medium/large-size image you downloaded in the previous section. The resized image should be approximate 125 or 150 pixels in width. Save the resized image in a new file (as a JPEG format). 

 
3. (convert an image from JPEG to GIF) Save the medium/large-size landscape, waterfall or sunset image you downloaded in the previous section in a GIF file format. Note any changes in the clarity/quality of the new image. 

 
4. (create an image) Be creative... Create an icon that could be used as the logo of the COSC330 course. Include the words "COSC 330 WEB DEVELOPMENT" in the image. Save the image as myLogo330.gif; convert to a GIF format if necessary. Sample icons for FSU web-related courses are displayed below.

 

 
 

5. (optimize an image) This task will be performed using NetMechanic's GIFBot free online image optimizing program. You should note that GIFBot is just one of many optimizer/compression products available. 

Go to http://www.netmechanic.com/accelerate.htm and read about NetMechanic's GIFBot image optimizer. Familiarize yourself with what what the GIFBot program does and how it works by reading the GIFBot FAQs (http://www.netmechanic.com/GIFBot/faq.htm) and viewing the GIFBot Sample Results page (http://www.netmechanic.com/GIFBot/sample.htm).

Run the NetMechanic GIFBot online image optimizer on the lab 6 test page located at http://www.frostburg.edu/dept/cosc/htracy/COSC330/labs/opttestlab6.htm. Follow the on-screen GIFBot instructions to evaluate, select and save an optimized (compressed) version of the test page image to your computer. Record the file size and download speed of the original image and of the optimized version of the image you selected and saved. 

Incorporate graphics into a web site 

Publish a new web page, lab330-6.htm, which contains the following items/sections (this new page will be handed-in and graded for this lab). Be sure to use width, height and alt tags for all images (except background image) you use in your page.

• page background image - For the page background, use the background image you selected when completing "Collect graphics for use in a web site". 

 
• image editor tutorial section - This section must include the addresses of the tutorials you found for the image editor you chose to use. It must also contain a critique of the tutorial you worked through when you completed "Become familiar with an image editor program". 

 
• image credits section - The addresses of the sites from which you copied graphics images. Briefly explain why it is important to select your images from sites that grant permission for re-use. Explain the process you would follow if you wanted to use an image on a site that did not directly grant permission for re-use. 

 
• images of me section - This section should include two images of yourself (one scanned in and one captured using a digital camera). Label each image to identify its source (scanned or digital camera).

 
• image file section - This section should include the three images you downloaded (one GIF, one JPEG, and one PNG image). Label each image to identify its type (GIF, JPEG or PNG). 

 
• thumbnail section - This section should include the medium/large-size image you downloaded in JPEG form. It should also include the thumbnail image you created of the full-size image. The thumbnail image should hyperlink directly to the full size version of the image. List the file sizes of both the thumbnail and full size image. Briefly list the benefit of using thumbnail images instead of full-size images on a web page. Also give an example of a situation or type of web site where it would be appropriate to use thumbnail images linked to full-size images. 

 
• file conversion section - This section should include the medium/large-size landscape, waterfall or sunset image you downloaded in JPEG format. It should also include the GIF version of the image that you created in "Create and manipulate graphics" earlier in this lab. Describe and explain any changes in the clarity/quality of the new (GIF version) image. 

 
• new COSC330 logo section - This section should include the COSC330 logo you created.

 
• image optimization section - This section should include a link to the lab 6 test page containing the original image. Also it should include the optimized version of the image you chose to save. List the file size and download speed of both the original and the compressed image (this info displays on the GIFBot results page when you run the optimization exercise). 

• Briefly list why you should always run image optimization software on all images you use on a web page. Include information on how running optimization software effects an image (size and quality) and how it effects the web page which contains the image. 

 
• student comments section - In this section, list 3 things that you learned about working with graphics from this lab. Also briely explain the importance/benefits of using height, width and alt tags with all images. Next include information on how long it took you to complete each section of this lab and now long it took you to complete the total lab. Finally include any any suggestions you have on how to improve the learning experience of this lab.