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:
- Adobe Fireworks CS3
- Adobe Photoshop CS3
- Adobe Fireworks CS4
- Adobe Photoshop CS4
- Adobe Fireworks CS5
- Adobe Photoshop CS5
Free Image Editors
Free online image editor applications:
Free image editor applications to download:
Free Online Image Optimization Tools:
Round the corners of rectangular images:
Create an icon from your image:
WebP —A New Image Format
Google Labs has developed a new image format for the Web called WebP (pronouced "weppy") that improves compression on photographic images. Currently it's supported by Google's Chrome browser.
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
- Public-Domain-Photos.com
- 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
- morgueFile
- openphoto
- PhotoRack
- unprofound.com
- freerange
- FreeDigitalPhotos
- FreeFoto.com
- DesignPacks
- SuperStock
- Fotosearch
- FamFamFam—free icons
- IconDrawer
- 30 Free Icons
- Default Icon
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 Figure 4.2
The two columns on the right should be labeled "Internet Explorer".
View new Figure 4.2
- Page 130 Figure 4.9
Due to the reduction in size of the image for printing, the difference between antialiased and aliased text is not clear. View new Figure 4.9
- JavaJam Case Study
- Hint: When you configure the thumbnail images on the Music page, feel free to tweak the dimensions (height and width) if needed. The page shown in Figure 4.27 uses height="80" width="80".
- Page 158 #3, 5th bullet point:
Replace "<h3>" with "<h2>"
- Page 158 #3, 6th bullet point & 8th bullet point:
Assign the paragraph to the details class instead of the content class. - Page 159, 1st bullet point:
Change "Modify the content id" to "Configure a content id selector"
- Prime Properties Case Study
Page 167, #1, The third bullet point should be as follows:"See Figure 4.47 and add a div with image links under the logo area. The navigation consists of image link buttons that use background color as a visual cue for visitors. The button for the current page has a blue background. The buttons for other pages have a green background. To configure this area for the Listings page, use primehomenav.gif (link to index.html), primelistingsbtn.gif (link to listings.html), primefinancingnav.gif (link to financing.html), and primecontactnav.gif (link to contact.html). Use appropriate attributes on the <img /> tag: alt, height, and width."
Questions or Comments?
The author would like to hear from you!
Send an e-mail to webdevfoundations@gmail.com