Chapter 5: Picture This! Using Images on your Web Site
Inline Images
<img src="/images/diagram.jpg" alt="graph showing that single men spend more more money on video games than food" />
Anatomy of the Image Element
- element: img
- src: attribute defines source
- alt: attribute for an alternate display
- Makes images useful to all users
- blind
- disable images due to slow connection
- so slow that images don't load
- height and width: define dimensions
Web Accessibility
- Examples of users needing excessive accessibility
- people with poor vision
- blind users
- deaf users
- mobility-impaired users
- people with reading difficulties
- What makes a good alt?
- If the image conveys useful information
- empty alts if the image is simply decorative
- describing the function for link images
GIF vs JPG vs PNG
- JPEG/JPG
- great for photographic images
- rectangular
- GIF
- great for logos and illustrations
- have transparency capabilities
- PNG
- King of transparency
- alpha channel transparency
- choose intensity of transparency
Adding an Image Gallery to the Site
- Updating the Navigation
- Adding the New Gallery Page
- Adding the First Image
- Formatting the Picture with CSS
- Captioning te Picture
Basic Image Editing
- Image Cropping
- Special Effects
- Resizing Large Images
- Filling Up the Gallery
Sourcing Images for your Web Site
Background Images in CSS
- Repeated Patterns:
- background-image: url(clouds.jpg);
- Horizontal Repeats:
- background-repeat: repeat-x;
- Vertical Repeats:
- background-repeat: repeat-y;
- Non-repeating Images:
- background-repeat: no repeat;
- background-position: top right;
- Shorthand Backgrounds:
- background: white url(palm-trees.jpg) no-repeat top right;
- Fixed heights and widths
- Setting a background for our navigation
- Applying a Fade to the Tag Line
- A Lick of Paint for the Main Heading
