1 / 19

Digital Graphics Basics & File Formats | Web Graphics Representation

Explore the world of digital graphics, learn about raster vs. vector methods, file formats like JPEG, GIF, and PNG, key characteristics like resolution, color depth, and compression. Understand image types and how to use HTML tags and CSS for effective web graphics.

sonya-foley
Download Presentation

Digital Graphics Basics & File Formats | Web Graphics Representation

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. Agenda HTML Workshop Session 4 8/9/06

  2. Stuff from Last Week • Linked and targeted anchor

  3. Two Methods of Graphic Representation • Vector - use math to draw the objects. • Raster - fill in a grid explicitly, pixel by pixel. Web graphics use this method (jpeg and gif).

  4. Raster Graphic Characteristics • Pixels (picture elements - "dots") • Resolution or dpi (how fine the grain is) • Color Depth (how true the color is) • Dimensions (height and width) • Compression (None vs. Lossless vs. Lossy)

  5. Raster Types of File Formats • PICT (Macintosh) • Bit Mapped (BMP) (PC) • Tagged Image File (Format) (TIFF or TIF) • Graphics Interchange Format (GIF) • Joint Photographic Experts Group (JPEG) • PNG's Not GIF (PNG or ping)

  6. Raster Types of File Formats • PICT (Macintosh) • Bit Mapped (BMP) (PC) • Tagged Image File (Format) (TIFF or TIF) • Graphics Interchange Format (GIF) • Joint Photographic Experts Group (JPEG) • PNG's Not GIF (PNG or ping)

  7. Digital Graphic Basics

  8. Digital Graphic Basics

  9. Digital Graphic Basics

  10. Digital Graphic Basics GIF does an orderly count after normalizing the palette to a 256 max color set. 5 white; 1 lt. Pink; 1 PinkOrange; 1 lt. Pink etc.

  11. Digital Graphic Basics JPEG samples the image and records a function of multiple 24-bit colors. F(2,2,alg223, FFFFFF, C72232) F(4,2,alg192, DC327B, 8A2107) F(2,4,alg074, FF814E, DF2232) Etc.

  12. Important Things to Remember • Use JPEG for images with high depth of color or variations (i.e., photo-like) • Use GIF for images with large fields of similar colors (i.e., logo-like) • Watch for PNG's expanded support • Compare JPG vs. GIF for a logo • Compare JPG vs. GIF for a photo

  13. Back to the IMG tag • Attribute study • No ending tag • src = file location (URL) • alt = alternative text • align = how the image fits in the text • height = height in pixels

  14. The IMG tag continued • width = width in pixels • border = border used when image is linked • hspace/vspace = pixel space around image • usemap = used for image mapping locally (CS) • ismap = used for remote mapping (SS)

  15. Server Side Includes • Server technology that allows the incorporation of domain-local files into each other • Can be used to standardize a site • Assembled prior to serving, so include file changes are immediate

  16. Dreamweaver Templates • Cookie-cutter pieces of code that DW manages for you • Unlike SSI, relative links within DW templates can dynamically change • Changes must be saved and posted in order to take effect

  17. DW Templates vs. SSI • Use DWTs when you wish to maintain relative links within a subsite • Use SSIs for items or sections that may change frequently, but can be identical regardless of nesting file location • SSIs are web-server dependent, while DWTs are application (DW) dependent

  18. Cascading Style Sheets • Styles generally define presentation characteristics • They can be defined at varying levels either within and/or outside of a document • Styles cascade, which means those that compete and are defined at different levels are implemented according to specific rules

  19. CSS Methods • Linking: Using the link tag to point to an external style sheet • Embedding: Defining styles within the document head either by tag, class or id • Importing: Including external style sheets within an embedded section • In-lining: Explicitly defining styles within the content

More Related