teaching machines

CS 318 Lab 7 – Images

February 15, 2017 by . Filed under cs318, lectures, spring 2017.

Dear students,

I first offer a brief list of recommendations about things I’ve seen you doing that will cause you unnecessary headache:

Okay, our focus today is on doing crazy things with images. We’ve already seen the img tag, but there’s much more that we can do with images. For example, let’s use an image for a page’s background! We can do so in CSS:

body {
  background-image: url(tile.png);

We’ll make some background images, explore various image formats, and make an animated GIF in the exercises below.

Here’s your TODO list for next time:

See you then!



We have a few goals for today’s lab:

Let’s get started!


Create a lab07 directory in your cs318 project. In file partners.html, provide your names.


Your first task is to create a page that compares versions of this image in PNG, GIF, and JPG formats:

Follow these steps:

  1. Create spiro.html and add the boilerplate of your page. Load in a stylesheet named spiro.css.
  2. Create a checkerboard pattern like the one you see behind transparent images. Do so in a 32×32-pixel image using an image editor of your choosing. Color the upper-left and bottom-right quadrants (each 16×16) with the same shade of gray. Color the other quadrants in a different shade. Save this image in your lab07 directory.
  3. Set the body‘s background to your checkerboard pattern.
  4. Down the spirograph image above and save it in your lab07 directory.
  5. Add an img to your page using the PNG version you just downloaded.
  6. Use an image editor to save the image into the GIF format. Add a second img element for this version.
  7. Use an image editor to save the image into the JPG format. Add a third img element for this version.

What differences do you notice between the three formats?

Moon Facts

Create a page of moon facts that looks like this:

  1. Create moon.html and add the boilerplate of your page. Load in a stylesheet named moon.css.
  2. Give the page an overall heading of Moon Facts.
  3. Find a list of a few moon facts, and structure them in an unordered list.
  4. Find an image of a star field, save it to your lab07 directory, and add it as the background-image of body.
  5. Adjust the text color so it can be read on the dark background. If you set the color in the body‘s style rules, all text will be affected.
  6. Restrict the content to a narrow strip by setting the body‘s width to some small number like 500px.
  7. Center the entire body element by letting its margin-left and margin-right be automatically calculated—by setting them to auto.
  8. Center the overall heading using the text-align property.
  9. Download this moon image from NASA and save it in your directory. Use an image editor to scale it to 32×32 or smaller, give it a transparent background, and save it as a PNG.
  10. Style the unordered list to use your moon image for its bullet. Use property list-style-image.
  11. Tweak the font size of the list items to better match the bullet size.
  12. Set the page’s favicon with a link tag much like the one you used for the stylesheet. Use icon for the rel attribute and image/png for the type attribute.
  13. Download Fred Espenak’s image of the moon’s phases and save it in your lab07 directory. We will turn this image into an animated GIF with a transparent background! Open it in Photoshop.
  14. Let’s start by making the background transparent. In the layers panel on the right, unlock the background layer. Select the magic wand tool by hitting Shift-W a couple of times. Click on the black background and cut or clear the selection.
  15. Now let’s slice up the image into individual frames. Hit Shift-C until the Slice tool is selected—it looks like an X-acto knife. Draw a rectangle that loosely fits around the 15 phases. Leave out the excess pixels on the left and right margins.
  16. Right-click on the slice you just made and select Divide Slice. Divide it into 15 frames.
  17. Click File / Export / Save for Web. Select PNG-24 as the output format. Click Save and set Slices to All User Slices. Save the images to your lab07 directory.
  18. Making an animated GIF in Photoshop is too much work, in my opinion. Let’s close it and open The GIMP. If The GIMP is not available, fall back on an online tool like Ezgif.
  19. Click File / Open as Layers and open all 15 frames at the same time. You should see an image with all the frames stacked on top of each other.
  20. Click File / Export As, navigate to your lab07 directory, and export as a file named phases.gif. (You may get a warning about the frames not all being the same size. Just click Crop.) Select As animation and Loop forever in the options dialog. Set Frame disposal to One frame per layer to clear the previous frame when drawing a new one.
  21. Whew! Now add an img element between the heading and the list to show your animated GIF.


Create in farm.html and farm.css a page that looks like this:

Assemble the page in any order you please, but accomplish this list of tasks:

The links don’t really need to link to anything.


Now, open GitHub Desktop and select your cs318 project. You should see a list of changes. Commit them and synchronize. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab07 in your browser.


Now, visit the W3C CSS Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and sync, until the validator reports no issues.