CSci 220 - Lecture 9

Web Page Design

© Morris Firebaugh

 


I. Chapter 9: Adding Images and Other Page Elements

A. The Image Tag Syntax

B. Image Compression Formats - GIF & JPEG

C. Image Size and Resolution

D. Advanced Image Formats

E. Embedding Other Page Elements

 


II. The Image Tag Syntax

The Image Tag is a single <IMG> with lots of attributes:


GoLive Example:



Specifying Image Files

 

 

 


Effects of the ALIGN attribute:

This is some follow-on text



This is some follow-on text



This is some follow-on text


 


Making Space Around Images

 

 


Providing Alternative Text with the ALT attribute

 


III. Image Compression Formats - GIF, JPEG, and PNG

The Problem with Images --> Size

How big is the file?

Answ: 8 x 10 x 3002 x 3 = 21.6 Mb


HTML supports Three Image Compression File Formats


Features of GIF


Features of JPEG


Other graphics formats


To demonstrate the effects of compression, consider the following image from the Pacific Crest Trail:

 


Summary of file compression results:

 

 All these can be inter-transformed with GraphicConverter


IV. Image Size and Resolution

The general rule is: Keep graphics files to 600 x 300 pixels or less

 

How about scanning images?

 


Some Image-Size Common Terms

Button = Small in-line picture, about 15x15 pixels
Bar = decorative horizontal rule, typically 600 x 10 pixels
Icon = Active button causing link action, typically 40 x 40 pixels
Thumbnail = In-line image serving as link to another image/URL, 50 x 50 pixels
Portrait = Informative picture, typically 150 x 200 pixels
Banner = Full-width, decorative image, usually 600 x 100 pixels
Panel = Image dominating screen, typically 600 x 400 pixels

 


Introduction to GraphicConverter

Author:

Description:

Features:


Demonstrate: 



V. Advanced Image Formats

GIF may be on the way out and JPEG is lossy. Can't we do better?


PNG (Portable Network Graphics)

 


Vector Graphics (OOP)




VI. Embedding Other Page Elements

Other Elements we demonstrate here, and explore more in detail later, include


Java Applets


 Sound Files


QuickTime Video Clips


Horizontal Rule

The HTML tag

<hr noshade size="15" width="15" align="left">

produces



CyberObjects

Button

Date & Time

Mon, Feb 12, 2001, 4:18 PM




VII. Laboratory Assignment #5

 



 

 


Updated February 12, 2001