1 / 8

Working Graphics

This lecture provides a comprehensive overview of graphics and their use in web development. It covers various graphical file types and their performance characteristics, such as size, color depth, and compression techniques. Additionally, it introduces the concept of image maps that allow for interactive links on web pages by defining hot zones within images. The session outlines best practices for creating image maps efficiently, emphasizing the use of dedicated tools for better usability. Gain insights into optimizing graphics for improved web performance.

edolie
Télécharger la présentation

Working Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Working Graphics

  2. Lecture Overview • Formatting Text • Understanding whitespace

  3. A Graphics Primer • There are several types of graphical files • Some work on the Web better than others • We could spend quite a bit of time talking about images and their characteristics • My discussion is quite cursory

  4. Graphics (Characteristics 1) • Images have various characteristics that affect performance • Size (number of pixels) – Large images can be several megabytes • Color (bits per pixel) – The more colors, the larger the image • Compression – Algorithms exist to compress images without any loss of fidelity

  5. Graphics (Characteristics 2) • Interlacing – loads and renders alternating lines to improve perceived performance

  6. Image Maps (Introduction) • Simply put, they allow you to create links to other Web pages using images • Different links are visited depending on where in the image the user clicked • These regions are called hot zones

  7. Image Maps (Creating) • Use the <img> element • The <src> element contains the name of the image file • The usemap attribute contains a bookmark • The <map> element contains multiple <area> elements • <area> elements define the shape and the link visited when the area is clicked

  8. Image Maps (Best Practices) • They are a pain to create by hand • You really need a tool to create these easily • See http://www.recreation.gov/browseMapsRecGov.do?topTabIndex=CampgroundMap

More Related