Agenda HTML Workshop Session 4 8/9/06

Stuff from Last Week  Linked and targeted anchor

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

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)

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)

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)

Digital Graphic Basics

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

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.

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 logo  Compare JPG vs. GIF for a photo Compare JPG vs. GIF for a photo

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

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)

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

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

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

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

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