UNIT: Images
Activities
- Perform standard image manipulations for the web, including cropping, rotation, special effects and thumbnail sizing.
- Experiment with image manipulation software of your choosing.
- Create and publish a web site that includes your image manipulations.
- Diagnose common image link problems.
Overview and General Notes
- In this lab, you will be creating a page of thumbnail image links. When the
user clicks on a thumbnail link, they will be redirected to a new page featuring
that image. (See a sample lab submission
HERE.)
- Review the image chapter in your textbook.
- You will begin with a baseline image of your choosing, and then perform at
least three manipulations to that image. Be sure to save your baseline and each
manipulation in a separate file.
- The required Troubleshooting exercise will give you practice in diagnosing typical
image link problems.
- The Black Belt lab will guide an exploration into image formats and
compression algorithms.
- When you are finished, publish your web pages and image files to the HTA
server, and update your index file with a link to your completed lab.
Lab Directions
- Obtain a baseline image. You can utilize a photograph or create an original image using a software application package of your choice
- Perform three standard image manipulations on your baseline picture,
such as the following, at a minimum:
- Crop
- Rotation
- Special effect (ie, black and white, sepia, distortion, etc.)
Be sure to save each version of your baseline in a separate,
appropriately named image file.
- Now that you have 4 images (baseline + manipulations), create a thumbnail for each one. A thumbnail is essentially a resized version, about 100px - 200px in width. (Note that you will also need to resize your "full"-size images to an appropriate size. Make sure we can see the whole image without having to scroll.)
- Please do not use the height and width image attributes to resize your images. There are disadvantages to this "clever" approach, including a slower load time. Instead, resize on your local computer using photo editing software.
- Create an HTML file to host your thumbnail images, and a separate HTML page
for each regular-sized image. Display text to describe each picture.
- As always, make sure your HTML files pass validation at http://validator.w3.org/. Be sure to use either XHTML Strict or HTML5, not Transitional.
- Depending on the number of image manipulations you made, you should have at least 5 HTML files and 8 images. Upload those files and images to your course account on the HTA
server (with appropriate permissions), and update your index page to include a
link to your image host file.
- Awesome job! Now go straight to the Troubleshooting Lab immediately below.
Troubleshooting Lab (Required)
- The Troubleshooting Lab consists of correcting links to non-displaying
images so that they will display. View the page with broken links
HERE.
- Return to the page with broken links, and view the source code. Determine
what errors exist that might be keeping the images from displaying. Hint: Try
backing up a level in the directory structure by deleting the filename from the
end of the URL; this will let you view the parent directory contents. Compare
the directory contents to the image file source code.
- Once you have identified the errors, copy the source code to your local
directory and correct the errors. Correct any paths such that the corrected
file, once placed in your account on the HTA server, can find the images at
their CURRENT location. (ie, don't copy the images and place them in your local
directory; just point to them where they currently are.)
- Validate your page according to XHTML Strict or HTML5 standards.(There will likely be a few errors.)
- Save your corrected Image Troubleshooting file to the HTA server, and add an "Image Troubleshooting" link to
your course index file.
- Test your work
ON THE HTA SERVER to make certain that you have corrected all the errors.
Black Belt
- The purpose of this Black Belt exercise is to explore file formats and
various compression algorithms. The Image Black Belt exercise can be found
HERE.
- When you have completed the Black Belt exercise, add a Image Black Belt link
to your course index file and upload all required files to the HTA server.
The Celebration
GREAT JOB!!!! I'd say you certainly GET THE PICTURE!