CS 200 – Graphics in Web Pages Banners, Bullets, Backgrounds, and Images

Where are Graphics in Web Pages? Banners & Mastheads Links & Buttons Bullets Background Image ("wallpaper") Photos in main content Image Maps (click areas for links) Some Terminology about Graphics (see next few slides) Bit-mapped image Vector images Layers

Bit-Mapped Images Every dot is remembered – Also called "raster graphics" – Created by programs such as MSPaint – Good for photos – Lines get "the jaggies" when enlarged (downside) – GIMP uses bit-mapped images

Vector Graphics "Formulas" are remembered for each line, square, circle, etc. – Created by Word, PowerPoint, Flash Flash can create a mixture of bit-mapped and vector graphics – Good for diagrams, etc. – Can enlarge to any size without distortion

Overall goal: Graphics Many Places First task: Use the Supplied Graphics

HTML tag: If image is at another location (don't forget the If image is on your own computer

So … code for the masthead

Kompozer Can Assist Position the cursor and add an image

Set size Two ways: Attributes (older method) Styles (newer method)

Using an image for bullets Images as bullets are done with a style and "normal" and tags: ul { list-style-image: url("bullet999.png") ; } Diamonds Necklaces

Animate Gif Same as other graphics: (image changes)

Background on whole page This is a style for body tag: body {background-image: url("background999.jpg") ; }

Float To make an image float left or right (and allow words around it): <img src=" x x.jpg" style="float: right;" />

Construct the page Construct the sample page. Then, the rest of the lab is to construct your own graphics and substitute them for the "999" images.

Stopping a "float" The table sometimes appeared adjacent to the paragraph with the floated image. To force the table down (technically to stop the float), use: