Chapter 4 Visual Elements & Graphics
A key component of a compelling Web site is the use of
interesting and appropriate graphics. This chapter introduces you to working
with visual elements on Web pages.
When you include images on your Web site, it is important to remember that
not all Web users are able to view them. Some users may have vision problems
and need assistive technology such as a screen reader application that reads the
Web page to them. In addition, search engines send out spiders and robots to
walk the Web and catalog pages for their indexes and databases; such programs
do not access your images. As a Web developer, you should create pages
that are enhanced by graphical elements but that are usable without them.
Resources & Chapter Links
Free Graphics Tutorials
Often students need a logo banner or a button for their first web site project but have not taken any graphics courses yet. You can learn how to create a logo and button with the free tutorials below:
Free Image Editors
Another option is to experiment with a free image editor — try Picnik.com or Google's Picasa.
Free Online Image Optimization Tools
Instant Buttons and Logo Banners
- Web 2.0 Logo Creator
- Background Pattern Generators (and more!)
- Glassy Buttons
- CoolText Buttons
- ButtonGenerator
- TomaWeb
- Free Buttons
- 3D TextMaker
- Animation Online
- CoolTextLogo
- CoolArchive
- ABC Banners
- Ad Designer
Graphic Resources
- Find free to use photos on Flickr.com — select the advanced search page and check Only search within Creative Commons-licensed content. Be sure to follow the instructions for attribution when indicated.
- everystockphoto
- StockVault
- Public Domain Photos
- Free Stock Photography — stock:xchng
- iStockphoto
- Guide to using Flickr Images
- Microsoft Design Gallery
- Free Stock Photos
- Indezine Stock Photos
- The Stock Solution
- Free Images
- Big Stock Photo
- Photos To Go
- SuperStock
- Fotosearch
- FamFamFam—free icons
- IconDrawer
- 30 Free Icons
Image Map Example
Image Map Code:
<map name="fishing">
<area href="http://nature.org/"
target="_blank"
shape="rect"
coords="0,51,416,170"
alt="The Nature Conservancy" />
<area href="http://www.doorcountyvacations.com/"
target="_blank"
shape="rect"
coords="24, 188, 339, 283"
alt="Door County Vacations" />
</map>
<div>
<img src="fishingboat.jpg" usemap="#fishing" border="0" alt="Door County"
width="416" height="350" />
</div>
Image Slicing
- Basics of Image Slicing
- Benefits of Image Slicing
- An alternative to Image Slicing — CSS Sprites
Chapter Updates
Page 123
The shorthand border style rule near the bottom of the page should be:
.dashedborder { border: 3px dashed #000033 }
Hands-On Practice 4.3 (Page 135)
There is some extraneous code in the starter file for Hands-On Practice 4.3. Download a clean starter3.html file before beginning this activity.
Fish Creek Case Study (page 159-160)
References to a class named imgnav should actually refer to an id named imgnav.
Fish Creek & Pete the Painter Case Studies
The Fish Creek and Pete the Painter case studies new sample page shows a " —" character, called an emdash, which you can configure using an HTML special character code.
Appendix B lists special character codes. Please update page 597 in Appendix B with the correct values for an emdash. You can configure an emdash with either of the following special character codes:
- —
- —
Prime Properties Case Study
Page 166, third bullet point:
Remove the sentence, "Place each image within its own paragraph."
Page 167, #2
Configure the nav id to display text in .70em font-size.
Questions or Comments?
The author would like to hear from you!
Send an e-mail to webdevfoundations@gmail.com