Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

IMAGES PRESENTATION

Teaching Presentation on Images
By:Shanalee Manwaring

  • Login to see the comments

  • Be the first to like this

IMAGES PRESENTATION

  1. 1. IMAGES BY: SHANALEE MANWARING CIT 230
  2. 2. GREAT IMAGES = AMAZING SITES
  3. 3. 3 RULES OF IMAGES 1. SAVE IMAGES IN THE RIGHT FORMAT 2. SAVE IMAGES AT THE RIGHT SIZE 3. ALWAYS MEASURE IMAGES IN PIXELS
  4. 4. SAVING FORMATS JPEG USED WHEN YOUR PICTURES HAVE MANY DIFFERENT COLORS. BEST FOR PHOTOGRAPHS GIF OFTEN USED WHEN YOUR PICTURE HAS SHARP LINES AND SOLID COLORS. ABILITY TO BE ANIMATED BEST FOR LOGOS AND ANIMATED IMAGES PNG SIMILAR TO GIF, BUT USED FOR TRANSPARENT BACKGROUNDS BEST USED FOR SCREEN GRAPHICS. THEY DO NOT LOOK GOOD PRINTED OUT
  5. 5. SIZING THE IMAGE • USING A PHOTO EDITOR WILL HELP YOU RESIZE AND CROP YOUR PICTURE. • ALWAYS SAVE THE IMAGE AT THE SAME WIDTH AND HEIGHT YOU WANT IT TO APPEAR ON THE WEBSITE. (MEASURED IN PIXELS)
  6. 6. INSERTING AN IMAGE ONTO YOUR SITE Images can be inserted into a web site by adding an image folder to your source folder and keeping all images need for the site in one location. Code to enter images looks like this: <img src=“imagefolder/imagename.format” Alt=“image” /> Images can be added as a picture or as a picture with caption. To add caption to a picture you must use the <figcaption> element. Code to add an image with caption would look like this: <figure> <img src=“imagefolder/imagename.format” Alt=“image” /> <br /> <figcaption>Description of your image</figcaption> </figure>
  7. 7. THE CODE THE RESULT =
  8. 8. SOURCES  HTTP://WWW.KILLERSITES.COM/ARTICLES_2005/THEORY/IMAGES-IN-WEBPAGES.PHP  HTTPS://PIXLR.COM/EDITOR/  HTML & CSS DESIGN AND BUILD WEBSITES; BY JON DUCKETT  HTTPS://COMMONS.WIKIMEDIA.ORG/WIKI/FILE:MANHATTAN_BEACH_SUNSET.JPG  HTTP://BELLARD.ORG/BPG/GALLERY2.HTML  HTTP://WWW.GIFS.NET/GIF/INDEX.PHP?N=IMAGE.PHP&IMAGE_ID=1530&IMAGE_NAME= 3D_CD

×