Kapiolani Community College

1

• Kapiolani Community College
• Art 128 Interface Programming 1
• In-class Presentation
• Week 6B

2
Calendar
3
Examples

• CSS Drive Gallery Examples
• http//www.cssdrive.com/index.php/examples/
• Dynmaic Drive CSS Library
• http//www.dynamicdrive.com/style/

4
Example

• Accessible Image Replacement Articles
• Mike Rundle technique
• http//phark.typepad.com/phark/2003/08/accessible_
  imag.html
• Seamus Leahy technique
• http//moronicbajebus.com/wordpress/wp-content/css
  play/image-replacement/

5
Todays Agenda

• Image Replacement
• What is it?
• A common practice where designers replace HTML
  text with an image.
• How do you do it?
• There are several techniques I will show two.
• The best techniques are those that work in all
  browsers and are accessible by screen readers.
• Why?
• Aesthetically, to allow designers to use any
  typeface they want without limited themselves to
  system fonts.
• TO USE IMAGES AND STILL BE ABLE TO MAKE YOUR SITE
  ACCESSIBLE!!
• To allow Google and other search engines to be
  able to parse through and index your site.
• To allow handicapped and disabled web users to be
  able to read ALL of the contents of your site,
  even images.

6
Assignment
due 02.21.06

• Assignment 7 watch and complete the video
  tutorial on image replacement (Mike Rundles
  technique using text-indent -9000px).
• Post your completed example online.
• Bring in any questions to class next week.
• Assignment 8 one page w/ top nav that uses
  ahover and images!
• Watch and complete the two video tutorials posted
  online.
• How to use ImageReady to save out images
• How to use Seamus Leahys CSS image replacement
  technique to implement CSS image rollovers on
  your top navigation
• Implement CSS image rollovers in your top
  navigation bar using Seamus Leahys technique on
  your own working web page that you have been
  using for your homework thus far.
• Post your completed example online.
• Bring in any questions to class next week.

7
(No Transcript)