PowerPoint Presentation

SLIDE FORMAT
Generally, slides have a white background behind black text.  Due to the nature of this section, there are many images included in the presentation; all of them will be described.

SLIDE 1
SLIDE TITLE:  Accessible Images and Visual Elements
SLIDE CONTENT:
The slide is divided into two vertical columns below the title.
On the left:
Prepared by:
The NYS Forum for Information Resource Management
IT Accessibility Committee
On the right:
Photo of an animal cracker in the shape of an elephant.  One bite has been taken out.

SLIDE 2
SLIDE TITLE:  Accessible Images and Visual Elements
SLIDE CONTENT:
OBJECTIVE:  The learner will list four techniques by which information conveyed visually will be available to all visitors, and identify under which circumstances each is appropriate 


SLIDE 3
SLIDE TITLE:  Accessible Images and Visual Elements
SLIDE CONTENT:
* Plain-text pages are often unattractive and intimidating - people like graphics!
* Using visual elements alone to convey information risks excluding some of your visitors
* Providing textual information only also excludes some visitors
* Provide information in alternative formats to be sure all users can access at least one form of it
SLIDE NOTES:
INITIALLY, LEAVE THIS PAGE UP FOR JUST A FEW SECONDS, THEN SKIP TO THE NEXT SLIDE.
Use an example of providing instructions in assembling a bookcase.  If you provide an instruction sheet with directions for putting it together as a series of pictures, people with visual impairments will not be able to assemble the bookcase.  If you provide instructions as a textual step by step series of tasks that culminate in an assembled book case, people with reading problems may have difficulty completing the procedure - or, if you've outsourced the job of producing written instructions to someone for whom English is a second language, all of us may have difficulty with written instructions.

SLIDE 4
SLIDE TITLE:  This slide intentionally left blank.
SLIDE CONTENT:
NONE (this slide works in concert with the previous slide.)

SLIDE 5
SLIDE TITLE:  Using Colors to Convey Information
SLIDE CONTENT:
The image on the slide is of a form with predominantly navy blue text.  The form reads:
Registration Form
Items in red (the word "red" is in red) are required.
Name:(in red) [Edit box]
Age:(in red) [Edit box]
Telephone Number:(in red) [Edit box]
E-mail Address: [Edit Box]
Street Address: [Edit Box]
SLIDE NOTES:
Note that the form expects that the user will be able to perceive that the name, age, and telephone number element labels are provided in red.  

SLIDE 6
SLIDE TITLE:  If You Are Colorblind...
SLIDE CONTENT:
The form used in slide 4 is shown in black and white.
The caption below the black-and-white version of the form reads:
Can you tell for sure which items are red?

SLIDE 7
SLIDE TITLE:  Using Colors to Convey Information
SLIDE CONTENT:
Registration Form
Items in red (the word "red" is in red) are required.
Name:(in red) [Mary L. Smith]
Age:(in red) [39]
Telephone Number:(in red) []
E-mail Address: [mlsmith@albany.com]
Street Address: [107 Pinewood Lane Colonie NY 39874]
SLIDE NOTES:
Mary Smith is killing time by surfing the web with her Palm Pilot while she waits in her doctor's office.  She comes across Madame Sylvia's site and wants to register to receive Madame's newsletter.  But Mary's Palm Pilot has a monochrome display.  Mary doesn't know that "Telephone Number:" denotes a required field.

SLIDE 8
SLIDE TITLE:  Using Colors to Convey Information
SLIDE CONTENT:
At the top left of the frame, in red, is written:  "STOP!  You skipped a required field!"
In the top right corner is an image of a stoplight, with red, yellow and green "lights."  The red light is brightest, indicating "stop."
Below is the form Mary filled out:
Name:(in red) [Mary L. Smith]
Age:(in red) [39]
Telephone Number:(in red) []
E-mail Address: [mlsmith@albany.com]
Street Address: [107 Pinewood Lane Colonie NY 39874]
SLIDE NOTES:
Luckily for Mary, the programmer of this form included a text note in addition to the stop light indicating that there was a problem.  Mary's also fortunate in that this is a short form, and there's only one field she omitted.  Imagine if this had been a form with thirty-five fields instead of just five!

SLIDE 9
SLIDE TITLE:  Using Colors to Convey Information
SLIDE CONTENT:
This slide is the same as the one above, except it shows that Mary has now entered a telephone number into the blank field.
SLIDE NOTES:
Mary adds her telephone number and submits the form again.

SLIDE 10
SLIDE TITLE:  Using Colors to Convey Information
SLIDE CONTENT:
At the top left of the frame, in navy blue, is written:  "Thank you for your registration."
In the top right corner is an image of a stoplight, with red, yellow and green "lights."  The green light is brightest, indicating "go."
Below is the form Mary filled out:
Name:(in red) [Mary L. Smith]
Age:(in red) [39]
Telephone Number:(in red) [555-555-5555]
E-mail Address: [mlsmith@albany.com]
Street Address: [107 Pinewood Lane Colonie NY 39874]
SLIDE NOTES:
Mary's gotten the green light now, although she won't know it.  But she does see from the programmer's note that her registration has been completed, and she's done.


SLIDE 11
SLIDE TITLE:  The View From Lynx
SLIDE CONTENT:
This frame shows a screen shot from the program Lynx, a text-based web browser, of the same web form as was used in our previous examples.  Lynx is often used to approximate screen reader output for web pages.  

The background is gray, and the text is all black (except for the heading "Images and Visual Elements - Form Example for Lynx" which is highlighted in yellow text against a blue background).  Form labels, like other text, is displayed in black.  Edit boxes are represented by blue lines.
Below the form elements, in blue:  "Click to Submit Information," and below that are navigational commands used in Lynx.

The caption below the screen shot reads:
"Which items are required??"

SLIDE 12
SLIDE TITLE:  A Better Way!
SLIDE CONTENT:
This slide shows the same form as was initially introduced, but composed in an accessible fashion.  All text is written in navy blue:
Registration Form
Items with an asterisk (*) are required.
Name*: [Mary L. Smith]
Age*: [39]
Telephone Number*: [555-555-5555]
E-mail Address: [mlsmith@albany.com]
Street Address: [107 Pinewood Lane Colonie NY 39874]

SLIDE 13
SLIDE TITLE:  The View from Lynx
SLIDE CONTENT:
This frame contains another screen shot of a Lynx browser, reading the same form.  However, asterisks now clearly identify the required fields.  A caption beneath the screen shot reads:  "Now you can tell which fields you need to enter."
SLIDE NOTES:
Use an alternate method to denote required fields, like an asterisk.  Screen reader users will hear the asterisk; visual users will see it and it doesn't matter whether the visitor has a color display.

SLIDE 14
SLIDE TITLE:  Why use images at all?
SLIDE CONTENT:
The slide is divided into two columns, illustrating possible web pages.
On the left:
A sample web page layout with a white background appears against a black background, labelled "Web Site #1."  On the sample web page:
"Don't let this happen to you!"
Below the text is a black-and-white photo close-up of an old man's face, showing wrinkled, pouchy eyes.  The large, italicized caption below the photo, also serving as the title of the site, is "Madame Sylvia's Skin Care Cream."  Below the caption are three columns.  In the left column is the word "About" with a question mark icon beneath it.  In the center is the word "Ingredients," below which is a icon of a bowl.  In the right column is the phrase "Find a Store," with a magnifying glass icon below it.
On the right:
A sample web page layout with a pink background appears against a black background, labelled "Web Site #2."  On this sample web page, there are no graphics, just black text:
Madame Sylvia's
Skin Care Cream
About
Ingredients
Find a Store
SLIDE NOTES:
Point out that the page on the left gives a visual reference for the problem our product prevents, where the page on the right provides no real information.

SLIDE 15
SLIDE TITLE:  Images can serve as shorthand
SLIDE CONTENT:
The slide is divided into two vertical columns.  
On the left is the web page sample previously labeled web site #1 (the one with the graphics.)
On the right:
* Question marks can mean "About" or "FAQ"
* Magnifying glass can mean "Search"
SLIDE NOTES:
Call up image1.html for a better look at this screen.

<--Below is the content and code for image1.html-->

<--Begin Web Page Content-->
Don't Let This Happen to You!
Madame Sylvia's Skin Care Cream
ABOUT     INGREDIENTS     FIND A STORE
<--End Web Page Content-->

<--Begin HTML Code-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Madame Sylvia's Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
	body {background-color:white; color:black; margin-left:10%; margin-right:10%; }
	font {family:Times New Roman, serif; }
	strong {font-weight:bold; }
	p {font:12pt; }
	h1 {font:24pt; font-weight:bold; }
	h2 {font:14pt; font-weight:bold; }
	h3 {font:12pt; font-weight:bold; }
	h4 {font:10pt; font-weight:bold; }
	h5 {font:8pt; font-weight:bold; }
	h6 {font:6pt; font-weight:bold; }
	a {font:12pt; font-weight:bold; }
	.image {font:18pt; font-weight:bold; color:#6600cc; }
	caption {font:16pt; font-weight:bold; padding-top:30px; padding-bottom:20px; }
	td {font:12pt; }
	th {font:12pt; font-weight:bold; }
	sup {font:6pt; }
</style>
</head>

<body>
<div align="center">
<h2>Don't Let This Happen to You!</h2>

<img src="../braillable/paulbowleseyes.jpg" border="5" alt="Black and white photo of an old man's eyes and the wrinkled skin around them">

<h1><em>Madame Sylvia's Skin Care Cream</em></h1>

<table border=0 width="90%" summary="for layout only">
<tr>
	<td width=33% align="center"><a class="image" href="../braillable/about.html">ABOUT</a><br />
	<a href="../braillable/about.html"><img src="../braillable/quesmark.gif" border=0 alt="Link to About Page"></a></td>
	<td width="33%" align="center"><a class="image" href="../braillable/ingredients.html">INGREDIENTS</a><br />
	<a href="../braillable/ingredients.html"><img src="../braillable/bowl.gif" border=0 alt="Link to Ingredients Page"></a></td>
	<td width="33%" align="center"><a class="image" href="../braillable/search.html">FIND A STORE</a><br />

	<a href="../braillable/search.html"><img src="../braillable/magglass.gif" border=0 alt="Link to Find a Store Page"></a>
</tr>
</table>
</div>
</body>
</html>
<--End HTML Code-->

SLIDE 16
SLIDE TITLE:  What About the Images?
SLIDE CONTENT:
An image of the sample page for web site #1 (the one with the old man's wrinkly eyes) occupies the center left of the frame.  Various captions radiate around it in a clockwise fashion, from the one o'clock position:
* With the appropriate HTML code, your images can convey meaningful information
* In a text box with yellow background, "Photo of an old man's very wrinkled eyes."  An arrow is drawn from this text box to the photo of the old man's face.
* In a text box with yellow background, "Find a Store."  An arrow is drawn from this text box to the icon of the magnifying glass beneath the text Find a Store.
* In a text box with yellow background, "Ingredients."  An arrow is drawn from this text box to the icon of a bowl beneath the text Ingredients.
* In a text box with yellow background, "About Madame Sylvia's."  An arrow is drawn from this text box to the icon of a question mark beneath the text About.
SLIDE NOTES:
This page is arguably effective at portraying a condition to be avoided, and implies that Madame Sylvia's Skin Care Cream will help you to avoid it.  The images used have been chosen for their impact - the man's eyes for shock value; the icons for their association.  

SLIDE 17
SLIDE TITLE:  What About the Images?
SLIDE CONTENT:
An image of the sample page for web site #1 (the one with the old man's wrinkly eyes) occupies the center left of the frame.  Various captions radiate around it in a clockwise fashion, from the one o'clock position:
* Here's the HTML code for these images, with a descriptive ALT attribute added to each IMG element
* In a text box with yellow background:
  <img src=../braillable/%93oldeyes.jpg%94 alt="Photo of an old man's very wrinkled eyes"> 
  An arrow is drawn from this text box to the photo of the old man's face.
* In a text box with yellow background:
  <img src=../braillable/%93magglass.jpg%94 alt="Link to the Find a Store page">
  An arrow is drawn from this text box to the icon of the magnifying glass beneath the text Find a Store.
* In a text box with yellow background:
  <img src=../braillable/%93bowl.jpg%94 alt="Link to Ingredients">
  An arrow is drawn from this text box to the icon of a bowl beneath the text Ingredients.
* In a text box with yellow background:
  <img src=../braillable/%93question.jpg%94 alt="Link to the About Madame Sylvia's Page">
  An arrow is drawn from this text box to the icon of a question mark beneath the text About.

SLIDE 18
SLIDE TITLE:  The View From Lynx
SLIDE CONTENT:
It makes sense even without the pictures!
Beneath this caption is a Lynx screen shot, and all of the information necessary to use the page is represented:
* Don't Let This Happen To You!
* Black and white photo of an old man's very wrinkled eyes
* Madame Sylvia's Skin Care Cream
* About/Link to About Page
* Ingredients/Link to Ingredients Page
* Find a Store/Link to Find a Store Page

SLIDE 19
SLIDE TITLE:  For More Complex Images ...
SLIDE CONTENT:
The slide is divided into two vertical columns.
On the left:
A cropped screen shot of a web page displaying artwork.  
The far background is composed of pink and lavender stripes.  The image is contained in a table layout.  The border of the table is a deep purple.  The top row is teal, with a blue image button reading "gallery."  On the right side of this row is an attribution of the title and artist.  On the left edge of the inset is a blank column of periwinkle.  The bottom of the inset is a mauve row containing links.  The central column is an faintly yellow off-white, which serves as a background for the focal image.  The image is of a fantastic winged, human-like creature, dressed in what looks like a toddler's rompers, sitting in the crotch of a tree and a limb.  The title of the image is "Always Take Off Into the Wind," and the artist is listed as Noel Beebe.
On the right:
Like:
* Artwork
* Pie Charts
* Multi-Layered Bar Charts
* Line Charts
* Maps

SLIDE 20
SLIDE TITLE:  This slide intentionally left blank.
SLIDE CONTENT:
None.
SLIDE NOTES:
Open alwaystakeoffintothewind.html (from the Images section index page).  This is the full page that was used as an image on the previous slide.  Look at page source, point out that if desired, the text link to the image's description could be formatted to blend into the background color.

<--Begin Web Page Content-->
flashquake Spring 2004 - Gallery - Always Take Off Into the Wind by Noel Beebe
Gallery
Always Take Off Into the Wind
by Noel Beebe
(image) ALT text:  Always Take Off Into the Wind 
Link to Text Description
Always Take Off Into the Wind
by Noel Beebe
About the Artist | Make Contact | Home
(c) 2004 Noel Beebe
<--End Web Page Content-->

<--Begin HTML Code -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="Author" content="dorton@flashquake.org">
   <meta name="GENERATOR" content="Notepad">
   <meta name="keywords" content="flash fiction, flash literature, sudden fiction, short-short, flash memoirs, flash nonfiction, short story, creative nonfiction, poetry, artwork, literature, literary journal, flashquake">
   <title>flashquake Gallery - Spring 2004 - Always Take Off Into the Wind by Noel Beebe</title>
   
   <SCRIPT LANGUAGE="Javascript"><!--
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
var EnableRightClick = 0;
if(isNS) 
document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
  if(EnableRightClick==1){ return true; }
  else {return false; }
}
function mousehandler(e){
  if(EnableRightClick==1){ return true; }
  var myevent = (isNS) ? e : event;
  var eventbutton = (isNS) ? myevent.which : myevent.button;
  if((eventbutton==2)||(eventbutton==3)) return false;
}
function keyhandler(e) {
  var myevent = (isNS) ? e : window.event;
  if (myevent.keyCode==96)
    EnableRightClick = 1;
  return;
}
document.oncontextmenu = mischandler;
document.onkeypress = keyhandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
//-->
</script>
   
<style type="text/css">
	body {color: black; font-family: Times New Roman, Garamond, serif; font-size: 100%;}
 	font {family: Times New Roman,Garamond,serif; }
	strong {font-weight:bold; }
	h1 {font-size:140%; }
	h2 {font-size:130%; }
	h3 {font-size:120%; }
	h4 {font-size:110%; }
</style>


</head>
<body text="#000000" background="../braillable/images/spg04wallpaper.jpg" alt="lavender and pink stripes">

<div align="center">
<table border=0 width=700 summary="for layout only" cellpadding=10 bgcolor="#660066">
<tr>
	<td align="center">
<table border=0 width=670 summary="for layout only" cellpadding=10 bgcolor="#ffffcc">

<tr bgcolor="#99cccc">


	<td colspan=3><img src="../braillable/images/gallery2.jpg" alt="Gallery" align="left"><br /><h1 align="right">Always Take Off Into the Wind<br />by Noel Beebe</h1></td>
</tr>
<tr>
	<td align="center" width=15% bgcolor="#9999cc">&nbsp;</td>
		
	        <td> <div align="center">
	
<img src="../braillable/images/ialways.jpg" alt="Always Take Off Into the Wind" longdesc="alwaystakeoffintothewind.txt" border=1>

<p align="center"><a href="../braillable/alwaystakeoffintothewind.txt">Link to Text Description</a></p>

<h2><em>Always Take Off Into the Wind</em><br />by Noel Beebe</h2>	
</div> </td>
</tr>


<tr>

	<td colspan="2" bgcolor="#cc6699" align="center"> 

<p align="center"><a href="http://www.flashquake.org/archives/vol3iss3/contributors.html#beebe">About the Artist</a> | <a href="mailto:letters@flashquake.org?subject=Always Take Off Into the Wind by Noel Beebe">Make Contact</a> | <a href="http://www.flashquake.org/archives/vol3iss3/index.html">HOME</a></p>

<p align="center">© 2004 Noel Beebe</p>

</td></tr>

</table>
</td></tr></table>
</div>

</body>

</html>
<--End HTML Code-->

SLIDE 21
SLIDE TITLE:  A Close-Up View
SLIDE CONTENT:
The slide is divided into two vertical columns.
On the left:
A close-up of the image with surrounding background, cropped from a screen shot of the web page.
On the right:
Image Code:  LONGDESC attribute with text file's path
Below are two text boxes:
Inside the upper text box with yellow background, linked by an arrow to the close-up image:
<img src="../braillable/ialways.jpg" alt="Always Take Off Into the Wind" longdesc="alwaystakeoffintothewind.txt" border=1>
Inside the lower text box with yellow background, linked by an arrow to "Link to Text Description":
<p align="center"><a href="../braillable/alwaystakeoffintothewind.txt">Link to Text Description</a></p>

SLIDE 22
SLIDE TITLE:  The Text File
SLIDE CONTENTS:
Inside a text box with a teal background in the center of the slide:
"Always Take Off Into the Wind by Noel Beebe

"Our cover piece for the Spring 2004 issue of flashquake features a creature that is half-human, half-insect, in a fantasy landscape.  The skull of the creature has ridges of bone that form a triangular pattern on the forehead.  The same bony ridges encircle the eyes like a pair of aviator goggles.   The creature seems to be wearing a jumper of the type worn by infants.

"The creature's transparent wings seem too delicate to lift the weight of the body.   The creature takes the foreground with bright colors compared to the mysterious dark tangle of tree trunks that form the background."

SLIDE 23
SLIDE TITLE:  The LONGDESC Attribute
SLIDE CONTENTS:
* Used with the IMG element
* Can link to a text or HTML file containing a description of the image 
* Value is the path/filename of the description

SLIDE 24
SLIDE TITLE:  When Less Is More
SLIDE CONTENTS:
A small icon of a blue, embossed fleur-de-lis is used as a bullet for each item in this list:
* This is Item 1.
* This is Item 2.
* This is Item 3.
Below these three bulleted items is text box with a teal background:
"We wanted something a little jazzier than the standard round bullet, so we used an image of a more attractive fleur-de-lis.  But does this image add any information to this bulleted list (beyond our obviously well-developed aesthetic sense)?"
SLIDE NOTES:  
Lead participants through discussion of repetitive images and how annoying it might become to have to hear "bullet" or "fleur-de-lis bullet" twenty or thirty times over several pages.

SLIDE 25
SLIDE TITLE:  When Less Is More
What NOT To Describe  
SLIDE CONTENTS:
The following list items use the small blue embossed fleur-de-lis used in earlier slides:
* Graphical bullets that do not impart information
* Images used as separators (e.g., graphic lines)
* "Spacer" images
Inside a yellow text box:
<img src="../braillable/rrsbullet.gif" alt=" ">

SLIDE 26
SLIDE TITLE:  Linking an Image to Description Within Page
SLIDE CONTENTS:
The slide is divided into two vertical columns.  
On the left:
A cropped image of a web page, consisting of black text on a white background, featuring a prominent, colorful image of a deep blue Indigo Bunting (bird) against lush green vegetation.
On the right:
We used a picture of our favorite bird to illustrate an article on occasional visitors to bird feeders in our area.  The image has an ALT attribute, but also has a description of the bird further down on the page.

SLIDE 27
SLIDE TITLE:  Linking an Image to Description Within Page
SLIDE CONTENTS:
The slide is divided into two vertical columns.  
On the left:
A cropped image of a web page, consisting of black text on a white background, featuring a prominent, colorful image of a deep blue Indigo Bunting (bird) against lush green vegetation.  This image varies from the first because there is a jagged line (indicating excised text) and below is a section of the page with the heading "Indigo Bunting."
On the right:
In a text box with a yellow background:  Method 1 - Using the Image as a Link
Beneath the text box, linked by an arrow to the photo of the Indigo Bunting:
<a href=../braillable/%93#bunting%94 name="Link to information about Indigo Buntings"><img src="../braillable/bunting.jpg" 
alt="Photo of a male Indigo Bunting" border=1 hspace=10 vspace=5 align="left"></a>
Toward the bottom of the slide, linked by an arrow that points to the "Indigo Bunting" heading:
<a name="bunting">

SLIDE 28
SLIDE TITLE:  Linking an Image to Description Within Page
SLIDE CONTENTS:
The slide is divided into two vertical columns.  
On the left:
A cropped image of a web page, consisting of black text on a white background, featuring a prominent, colorful image of a deep blue Indigo Bunting (bird) against lush green vegetation.  This image varies from the first because there is a jagged line (indicating excised text) and below is a section of the page with the heading "Indigo Bunting."
On the right:
In a text box with a yellow background:  Method 2 - Using the LONGDESC attribute of the IMG element
Beneath the text box, linked by an arrow to the photo of the Indigo Bunting:
<img src="../braillable/bunting.jpg" alt="Photo of a male Indigo Bunting" border=1 hspace=10 vspace=5 align="left" longdesc="#bunting">
Toward the bottom of the slide, linked by an arrow that points to the "Indigo Bunting" heading:
<a name="bunting">

SLIDE 29
SLIDE TITLE:  Using Images for Navigation
SLIDE CONTENTS:
The slide is divided into two vertical columns.  
On the left:  
A cropped portion of a web page screen capture shows a close up of graphic buttons used as navigation.  The background is a deep forest green.  The buttons are varying shades of seafoam green, and read (from top to bottom):  Home, About, Mission, Vision, Values.
On the right:
You often see images used as web site navigation, such as in this example on the left.

SLIDE 30
SLIDE TITLE:  Using Images for Navigation
SLIDE CONTENTS:
The slide is divided into two vertical columns.  
On the left:  
A cropped portion of a web page screen capture shows the entire web page from which the navigation buttons were cropped.  On the top, against a deep green background (which continues down the left side of the web page), the company name is written in a white quasi-script font:  Berry, Berry, Goode LLC.  Down the left, the buttons are varying shades of seafoam green, and read (from top to bottom):  Home, About, Mission, Vision, Values.  Below the buttons, the links are repeated in plain white text.  On the right of the image, below the heading, next to the buttons, is the page text, which is too small to be read clearly.  Behind the text, there is a watermark of a hand-drawn light bulb.
On the right:
Here the images you saw earlier are used as navigational buttons for the Berry, Berry, Goode law firm's web site.

Each button is a link to a section of the site, and the links are duplicated in plain text at the bottom of the section.
SLIDE NOTES:
Switch to the browser and call up images/imagesfornav.html.  This is the full page shown here as a clip.  Note, however, that there are no target pages, although the links are coded.

SLIDE 31
SLIDE TITLE:  Using Images for Navigation
SLIDE CONTENT:
The slide is divided into two vertical columns.  
On the left:  
A cropped portion of a web page screen capture shows part of a web page.  On the top, against a deep green background (which continues down the left side of the web page), the company name is written in a white quasi-script font:  Berry, Berry,.  Down the left, the buttons are varying shades of seafoam green, and read (from top to bottom):  Home, About, Mission, Vision, Values.  Below the buttons, the links are repeated in plain white text.
On the right of the image, below the heading, next to the buttons, is the page text, which is too small to be read clearly.  
On the right:
At the top of the right column, in a text box with a yellow background which is linked by an arrow to the "Mission" button on the left side of the image:  <a href="../braillable/vision.html" name="vision"><img src="../braillable/visionbutton.gif" border=0 alt="Link to a Glimpse of Our Vision"></a>
In the middle of the right column is a text box with a teal background, with italicized text:  Two different ways of getting to the same place!
Toward the bottom of the right column is another text box with a yellow background which is liked by an arrow to the "Mission" text link beneath the navigation buttons:  <a href="../braillable/mission.html">Mission</a>

SLIDE 32
SLIDE TITLE:  QUIZ
SLIDE CONTENT:
None.

<--End PowerPoint Presentation-->