Transcript Graphics 1
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: <img />
If image is at another location (don't forget the http://)
<img src = "http://www. ___. jpg" />
If image is on your own computer
<img src = " ___. jpg" />
So … code for the masthead
<body>
<img src="masthead999.jpg" />
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" <ul> and <li> tags:
<style>
ul { list-style-image: url("bullet999.png") ; }
</style>
<ul>
<li>Diamonds</li>
<li>Necklaces</li>
</ul>
Animate Gif
(image changes)
Same as other graphics:
<img src="animated999.gif" />
Background on whole page
This is a style for body tag:
<style>
body {background-image:
url("background999.jpg") ; }
</style>
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:
<div style="clear: both;"></div>