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.
Instant Buttons and Logo Banners
- Glassy Buttons
- CoolText Buttons
- ButtonGenerator
- TomaWeb
- Free Buttons
- 3D TextMaker
- Animation Online
- CoolTextLogo
- CoolArchive
- ABC Banners
- Ad Designer
Graphic Resources
- Public Domain Photos
- Microsoft Design Gallery
- Big Nose Bird
- Free Stock Photos
- Indezine Stock Photos
- The Stock Solution
- Free Images
- Big Stock Photo
- Photos To Go
- SuperStock
- Fotosearch
- FamFamFam—free icons
- IconDrawer
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
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.
Web Site 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:
- —
- —
Questions or Comments?
The author would like to hear from you!
Send an e-mail to webdevfoundations@gmail.com