* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Graphics 1
Edge detection wikipedia , lookup
Free and open-source graphics device driver wikipedia , lookup
InfiniteReality wikipedia , lookup
Hold-And-Modify wikipedia , lookup
Portable Network Graphics wikipedia , lookup
Computer vision wikipedia , lookup
Anaglyph 3D wikipedia , lookup
Waveform graphics wikipedia , lookup
Apple II graphics wikipedia , lookup
Indexed color wikipedia , lookup
Framebuffer wikipedia , lookup
Graphics processing unit wikipedia , lookup
Spatial anti-aliasing wikipedia , lookup
Stereoscopy wikipedia , lookup
Tektronix 4010 wikipedia , lookup
Molecular graphics wikipedia , lookup
BSAVE (bitmap format) wikipedia , lookup
Medical image computing wikipedia , lookup
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>