SCISI Computer Science, Summer 1997
Ileana Streinu
McConnell 210
Email: streinu@cs.smith.edu
Phone: x3827

Day 5, morning

Monday, July 7, 1997

Hands-On In-Class Lab Assignment

Part 1: More html: tables.

Part 2: GifBuiler: creating animated gifs.

Part 3: PhotoShop. Creating and modifying graphics.

What we do today: learn how animations are made from static pictures used as frames; learn how some of the nice gizmos you see in Web pages are created by artists using computer graphics tools such as PhotoShop.



In the afternoon, you will continue working on your own home page on the Web, inserting the pictures that you have created as you have played with PhotoShop and GifBuilder.

Part 1. Tables in Html.

In PageSpinner, type in the contents of the table. To make it easier to insert the tags, place each row on a separate line. Select then the whole contents of the table and from the menu click on Table/Table. Then select each row and from the Table menu click on Row. Do it for each row. The select the first cell and click on Table/Cell. Do it for each cell in the table.

This lather laborious procedure inserts the appropriate tags for a table with that contents.

Part 2. Animated Gifs.

To do this part you need an image to start with. It has to be in gif format. An animated gif is built up of a sequence of frames which are shown in a sequence and create the illusion of motion. First, you have to have the frames available. Here's how you could create fast a few.

Open your first image in GraphicConverter. Make a small change to it (for instance, erase a letter of some caption). Save in a new file: this will be your second frame. Continue doing small changes and saving in new files for 6-7 frames or so. Now, let's create the animation.

  1. Launch GifBuilder.
  2. If you do not see a Frames window, select Window/Show Frames.
  3. Select File/Add Frame and select the first frame that you created. Then repeat, inserting all the frames one after another.
  4. Save in a new file called, say, anim.gif.
  5. In Netscape, open the anim.gif file to view the animation. If you want, you can insert it in your web page.

Part 3. PhotoShop .

PhotoShop is a very sophisticated software which may take years to master. We will just play with it briefly and learn a few tricks. In the process, you will create your own graphics. This way you can insert in your web page your own creations, not just scanned pictures of images downloaded from the web.

Since we only have two copies of it in the lab, you will have to take turns in using the software, alternating with GifBuilder.

Open Netscape and go to http://www.andyart.com:80/photoshop. Browse the site to familiarize yourself with what can be done in PhotoShop. Then do on your own the first two of the described "tips": rectangles and circles of various colors and fills, and a button which creates a 3-dimensional illusion.

Last updated on July 7, 1997.