CSci 220 - Lecture 12
Web Page Design
© Morris Firebaugh
A. Controlling Image Position
B. Image Download Tricks
C. Creating Image Maps
D. Integrating Multimedia
As we move from 1D to 2D graphics, we would like to do so in the context of representation issues. Representation is at the heart of computer science. Finding the optimal representation for a problem is often the key to its solution. By representation, we mean the description of graphical objects. "Graphical objects" implies an object-oriented description-both the data structures themselves as well as the operations allowable on the data must be defined. Representation occurs at various levels of abstraction. At the highest level, we have the purely mathematical representation of vectors, Xi, transformation matrices, Mj, and the relationships between them. The next lower-level of abstraction is the algorithmic level in which the sequence of operations required to solve the problem is specified. Finally, at the lowest level, we have the program which implements the algorithm. At this level actual data structures must be specified and specific plotting routines called.
<IMG SRC="PCT.JPG" ALT="Pacific Crest Trail Image" HEIGHT=138 WIDTH=185 ALIGN=LEFT HSPACE=10 BORDER=3>
We start the discussion of 2D graphics by introducing the more abstract, mathematical representations of graphical objects and conclude it with a chapter on issues of implementation. However, before looking at how points, lines, and so on are represented, it helpsto note how a 2D environment differs from that of 1D. Efforts to put computer graphics on a firm mathematical foundation constitute much of the academic research in computer graphics. A particularly good summary of these efforts is given by Eugene Fiume in the book based on his thesis research.
<IMG SRC="Icon.JPG" HSPACE=5 BORDER=2 HEIGHT=95 WIDTH=50% ALIGN=RIGHT>
|1. Select the Layout Grid Icon from the Palette, drag it to the page, and resize it as desired
2. Select the Image Icon, drag it to the desired spot on the Layout Grid and pick the image using the Inspector
3. Select the Layout Text Box Icon and drag it to the Grid and resize it as desired
4. Objects positions may be controlled by the arrows to the nearest grid and by <Option> arrows to the nearest pixel.
1. Select an image with well-defined objects (regions)
2. Call up ImageMapper and load selected image.
3. Select the appropriate shape to fit each object from the Tools menu.
4. Outline each object in the image.
5. Assign the Target of each object in the Object Info window.
6. Check each object in the Boundary option of the Object Info window.
7. Generate theMap using the Image window and save it.
8. Open theMap in HTML Editor and copy the <MAP> tag to the HEAD section of your HTML document and the <IMG> tag to the appropriate spot in your document.
The Web isn't a hyperlinked brochure. If your customers go online to learn about a new telephone service, they want to see a movie explaining it. If they check out the latest jazz album, they want to hear it. And if they're looking for directions, they want a custom map drawn on the fly. Now they won't be disappointed.
What are the major modes of WWW MultiMedia?
A good summary of MultiMedia Resources available on the Web is given by Marti of the University of California-Santa Cruz
In Jiri Weiss' survey of 50 Web site developers:
The downside of Web MultiMedia
Example 1: Animated GIFs
Example 2: QuickTime Animations
Example 3: QuickTime Movie
Example 4: QuickTime Movie
Example 5: Audio File