Kapi’olani Community College Art 128 Interface Programming 1 In-class Presentation Week 6B

Art 128 :: Interface Programming 1 :: Week 6 :: B In-class Presentation :: Calendar

Art 128 :: Interface Programming 1 :: Week 6 :: B In-class Presentation :: Examples  CSS Drive Gallery & Examples   Dynmaic Drive CSS Library 

Art 128 :: Interface Programming 1 :: Week 6 :: B In-class Presentation :: Example  Accessible Image Replacement Articles  Mike Rundle technique   Seamus Leahy technique  replacement/ replacement/

Art 128 :: Interface Programming 1 :: Week 6 :: B In-class Presentation :: Today’s 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.

Art 128 :: Interface Programming 1 :: Week 6 :: B In-class Presentation :: Assignment  Assignment #7: watch and complete the video tutorial on image replacement (Mike Rundle’s technique using text-indent: px;).  Post your completed example online.  Bring in any questions to class next week.  Assignment #8: one page w/ top nav that uses a:hover and images!  Watch and complete the two video tutorials posted online.  How to use ImageReady to save out images  How to use Seamus Leahy’s CSS image replacement technique to implement CSS image rollovers on your top navigation  Implement CSS image rollovers in your top navigation bar using Seamus Leahy’s 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. due ::