CSci 220 - Lecture 12

Web Page Design

© Morris Firebaugh

 


I. Images, Image Maps, and Multimedia

A. Controlling Image Position

B. Image Download Tricks

C. Creating Image Maps

D. Integrating Multimedia

 


II. Controlling Image Position

The Problem:  How can we do Precision Page Layout? 


1. Approximate Positioning with <IMG> Attributes

The Pacific Crest Trail

Pacific Crest Trail ImageAs 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>
    
    
    

    Next, consider how we can right align images and flow text by them on the left:

     

    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.

    <IMG SRC="Icon.JPG" HSPACE=5 BORDER=2
    HEIGHT=95 WIDTH=50% ALIGN=RIGHT>
    <P  ALIGN=justify>


    2. Layout Grid using CyberStudio

    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.


    3. Precision layout using Adobe PDF Documents

     


    III. Image Download Tricks

    There are three neat tricks to getting faster downloads of images

     

     

     


    IV.  Creating Image Maps

    What happens when we click on the objects of this ImageMap?



    ImageMap - Better use Netscape 2.0+

    How do we do this magic?


    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.


    Image Maps with CyberStudio

     

    This is easily accomplished using the Map Tab of the Image Inspector

     


    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.

    Jiri Weiss - New Media

    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

     

     


    VI. Laboratory Assignment #6

     




    Updated February 19, 2001