Unit 3 - Images and Visual Elements
Associated Web Pages
Descriptions And HTML Code
1. Madame Sylvia's Skin Cream - This page is used to reveal some of the basics on making images accessible.
Filename: image1.html
<--Begin Page Description-->
Page has a white background with mixed-color text.
Page Title: Madame Sylvia's Home Page
Page Heading: Don't Let This Happen to You!
Below the heading, a cropped black and white photo close-up of an old man's wrinkly forehead and eyes. The skin is granular in appearance with enlarged pores, and there are bags beneath the eyes. The photo has a thick black border.
Below the photo, in large italics: Madame Sylvia's Skin Cream
At the bottom of the page, equidistant, are three sets of stacked text/graphic links:
On the left:
About (link)
Below: an icon of a dark pink question mark
In the middle:
Ingredients (link)
Below: a hand-drawn icon of a dark pink bowl
On the right:
Find a Store (link)
Below: a hand-drawn icon of a magnifying glass
<--End Page Description-->
<--Begin HTML Code-->
Madame Sylvia's Home Page
Don't Let This Happen to You!
Madame Sylvia's Skin Care Cream
<--End HTML Code-->
2. I Always Take Off Into the Wind - Example of LONGDESC attribute of the IMG element, plus a technique that performs the same function for users of older screen readers.
Filename: alwaystakeoffintothewind.html
<--Begin Web Page Description-->
A web page displaying artwork.
The far background is composed of pink and lavender stripes. The image is contained in a table layout, composed of color blocks with thin, pale yellow borders. The wide (10 px.) border of the table is a deep purple. The top row of the table is teal, with a blue image button reading "gallery" in white text. On the right side of this row is an attribution of the image title and artist (I Always Take Off Into The Wind by Noel Beebe) in black text. On the left edge of the table is a blank column of periwinkle. The bottom of the table is a mauve row containing links (About the Artist, Make Contact, Home), beneath which is a line reading "(c)2004 Noel Beebe." The central table cell is the same faintly yellow off-white that borders each segment, and serves as a background for the focal image. The focal image is of a fantastic winged, human-like creature, dressed in what looks like a toddler's rompers, which gives the impression that this is an immature creature. It is sitting in the crotch formed the tree trunk and a limb. Beneath the image, centered on the page is a link to a text description of the image. The title of the image is "Always Take Off Into the Wind," and the artist is listed as Noel Beebe.
<--End Web Page Description-->
<--Begin HTML Code-->
flashquake Gallery - Spring 2004 - Always Take Off Into the Wind by Noel Beebe
<--End HTML Code-->
3. Berry, Berry, Goode LLC. - How to use images for navigation, plus an example of redundant text links.
Filename: imagesfornav.html
Page Title: Using Images for Navigation
This is a mock-up of a web page for the law firm of Berry, Berry, Goode LLC. The title bar and left-side navigation bar appear seamless, and both have a dark forest green background. At the top of the page, the firm's name (Berry, Berry, Goode LLC) is in what appears to be a calligraphic script, in white.
Down the left side of the page, the following graphic buttons in various shades of green appear:
Home
About
Mission
Vision
Values
Beneath the buttons are redundant text links, in white.
On the right, the following text appears in black against a white background:
Our specialty is intellectual property law, and our goal is to protect our clients' intellectual property rights to the fullest extent of our ability.
Your business is creating. Why waste valuable time and effort worrying about the legal aspects of your work? Let us manage those risks on your behalf.
We represent the brightest and most innovative developers and designers in the industry, and our clients' achievements speak to their talent.
So take some time to browse our site, read about our partners, our clients, and our firm's mission, vision and values - and if you feel that our firm is the right choice to represent you, call or schedule a visit with one of our associates.
We promise that you won't find it a waste of your time!
Our Office Locations:
* Rensselaer Technology Park, Troy
* Computer Drive, Colonie
* One West Plaza, Saratoga Springs
* 311 State Street, Schenectady
Behind the text is a watermark of a hand-drawn light bulb, which scrolls along with the user.
<--End Description-->
<--Begin HTML Code-->
Using Images for Navigation
Our specialty is intellectual property law, and our goal is to protect our clients' intellectual property rights to the fullest extent of our ability.
Your business is creating. Why waste valuable time and effort worrying about the legal aspects of your work? Let us manage those risks on your behalf.
We represent the brightest and most innovative developers and designers in the industry, and our clients' achievements speak to their talent.
So take some time to browse our site, read about our partners, our clients, and our firm's mission, vision and values - and if you feel that our firm is the right choice to represent you, call or schedule a visit with one of our associates.
We promise that you won't find it a waste of your time!
Our Office Locations:
- Rensselaer Technology Park, Troy
- Computer Drive, Colonie
- One West Plaza, Saratoga Springs
- 311 State Street, Schenectady
<--End HTML Code-->
4. Not-So-Common Visitors to the Northeast Feeder - Illustrates another way of providing an enhanced description of an image.
Filename: linktonamedanchor.html
<--Begin Page Description-->
Page consists of black text on a white background.
Page Title: Example of linking an image to a named anchor within the document
Page Heading: Not-So-Common Visitors to Northeast Feeders
At the top left corner of the page, beneath the heading, is a picture of a bright blue bird, perched on a plant, surrounded by lush green vegetation. The picture has a thin border of blue, indicating that the image is a link. To the right of the image and below it is the majority of the page's text:
Many species are self sustaining, and you'll seldom see them at your feeders - robins, for example, feed almost exclusively on insects.
But there are plenty of other species that rely on the kindness of strangers, especially during the winter months. Chickadees, nuthatches, and sparrows winter over in the Northeast and will be frequent visitors to the stocked Northeast feeder.
But every so often, the patient birder will be rewarded by a glimpse of some of the more colorful and not-so-common diners sampling feeder fare.
The American Goldfinch (heading)
Goldfinches are smaller than chickadees, and sleeker. During the winter, the male's bright, lemon yellow plumage is exchanged for olive drab. The distinctive black wing bars are still distinguishable. The female of the species is a tan color, with less obvious markings.
The Scarlet Tanager (heading)
Scarlet Tanagers winter in the tropical forests of Northwest South America, and make a nocturnal migration to the northern U.S. Males are a bright red with black wings; females are similar in color to the American Goldfinch, but much larger (approx. 7" in length).
Eastern Bluebird (heading)
Although their numbers have decreased precipitously over the past few decades, you can still catch the occasional Eastern Bluebird at your feeder if you are tenacious. The male has a wonderful sky blue black and a russet chest not unlike the color of a male robin. Bluebirds are quite a bit smaller, though. Female Eastern Bluebirds have similar coloring on the chest, but their backs are a dull gray with blue edging the wings and the top of the head.
Indigo Bunting (heading)
The male Indigo Bunting is one of the most striking birds that will ever visit your feeder. Approximately 4.5" long, the male is a brilliant blue. The female is a dark, dull brown. The Bunting's diet is primarly insects, but it can be lured with a fruit/seed mixture and it prefers feeders with a perch.
<--End Page Description-->
<--Begin HTML Code-->
Example of linking an image to a named anchor within the document
Not-So-Common Visitors to Northeast Feeders
Many species are self sustaining, and you'll seldom see them at your feeders - robins, for example, feed almost exclusively on insects.
But there are plenty of other species that rely on the kindness of strangers, especially during the winter months. Chickadees, nuthatches, and sparrows winter over in the Northeast and will be frequent visitors to the stocked Northeast feeder.
But every so often, the patient birder will be rewarded by a glimpse of some of the more colorful and not-so-common diners sampling feeder fare.
The American Goldfinch
Goldfinches are smaller than chickadees, and sleeker. During the winter, the male's bright, lemon yellow plumage is exchanged for olive drab. The distinctive black wing bars are still distinguishable. The female of the species is a tan color, with less obvious markings.
The Scarlet Tanager
Scarlet Tanagers winter in the tropical forests of Northwest South America, and make a nocturnal migration to the northern U.S. Males are a bright red with black wings; females are similar in color to the American Goldfinch, but much larger (approx. 7" in length).
Eastern Bluebird
Although their numbers have decreased precipitously over the past few decades, you can still catch the occasional Eastern Bluebird at your feeder if you are tenacious. The male has a wonderful sky blue black and a russet chest not unlike the color of a male robin. Bluebirds are quite a bit smaller, though. Female Eastern Bluebirds have similar coloring on the chest, but their backs are a dull gray with blue edging the wings and the top of the head.
Indigo Bunting
The male Indigo Bunting is one of the most striking birds that will ever visit your feeder. Approximately 4.5" long, the male is a brilliant blue. The female is a dark, dull brown. The Bunting's diet is primarly insects, but it can be lured with a fruit/seed mixture and it prefers feeders with a perch.
<--End HTML Code-->
