Download presentation
Presentation is loading. Please wait.
Published byAmy Lang Modified over 9 years ago
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
10
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.
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 logo Compare JPG vs. GIF for a photo Compare JPG vs. GIF for a photo
13
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
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.