# Web Page Design

## II. Controlling Image Position

### The Problem:  How can we do Precision Page Layout?

• There are three solutions

1. Approximate it with the LEFT, RIGHT, & HSPACE attributes of the <IMG> tag

2. Layout Grid of CyberStudio

3. Write your document as a PDF File and use Adobe Acrobat Reader for the Portable Document Format

## The Pacific Crest Trail

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.

### This is done with the HTML code:

```
<IMG SRC="PCT.JPG" ALT="Pacific Crest Trail Image"  HEIGHT=138 WIDTH=185 ALIGN=LEFT HSPACE=10 BORDER=3>

```

## The Mandelbrodt Set

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.

• This is done with the HTML code:
```<IMG SRC="Icon.JPG" HSPACE=5 BORDER=2
HEIGHT=95 WIDTH=50% ALIGN=RIGHT>```
•  Note: The full justification is performed with the code:
`<P  ALIGN=justify>`

### 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.

• The Output above was produced by the Layout Grid as shown

• The only limitation on the Layout Grid approach of CyberStudio is that the browser must support tables.
• To achieve this flexibility and fine control produces some ugly HTML code.

### There are three neat tricks to getting faster downloads of images

• Saving your image file as an "Interlaced GIF"

• Saving your image file as a "Progressive JPEG"

• Using the LOWSRC attribute of the <IMG> tag

## How do we do this magic?

• Answer: Using a client-side ImageMap
• Client-side ImageMap protocol invented by James Seidman of Spyglass, Inc.
• Client-side imagemaps much better the server-side imagemaps
• Server-side maps come in two flavors: NCSA and CERN
• This client-side ImageMap was created by ImageMapper

### The steps to creating an ImageMap with ImageMapper include:

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.

## V.  Integrating Multimedia

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?

• Audio
• Animation
• Video (Archives and Live)
• 3D Virtual Reality

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:

• 84% plan to add audio
• 92% plan to add video
• 82% plan to add 3D

The downside of Web MultiMedia

• There are already 65 plug-ins for Netscape 3.0
• Seventy more are under development
• MultiMedia documents must be "bandwidth agile"

Example 1: Animated GIFs

Example 2: QuickTime Animations

Example 3: QuickTime Movie

Example 4: QuickTime Movie

Example 5: Audio File

• From these examples we learn two things:
• Must "flatten" Mac QuickTime files with flattenMOOV
• Must name files with extension ".mov"

## VI. Laboratory Assignment #6

Updated February 19, 2001