Visual Elements and Graphics - Web Development and Design Foundations with XHTML

HTML and CSS Reference

In-Depth Information

href , and type . The value of the rel attribute is icon . The value of the href attribute

is the name of the image file. The value of the type attribute describes the MIME type

of the image—which defaults to image/x-icon for .ico files. The XHTML code to

associate a favorites icon named favicon.ico to a Web page is as follows:

Note that to be compatible with Internet Explorer and follow Microsoft's proprietary

syntax, you'll also need to code a second link tag:

Be aware that Internet Explorer's support of the favorites icon is somewhat buggy. You

may need to publish your files to the Web (see the FTP tutorial in the student files) in

order for the favicon to display in even current versions of Internet Explorer. Other

browsers, such as Firefox, Safari, Google Chrome, and Opera, display favicons more

reliably and also support GIF and PNG image formats. You'll get a chance to practice

using a favicon in Hands-On Exercise #6 at the end of the chapter.

Graphic artists and designers can create complex Web page images. Sometimes parts of

these images are better optimized as GIFs than as JPEGs. Some parts of these images

may be better optimized as JPEGs than as GIFs. By image slicing the single, complex

images into multiple, smaller images, you can optimize all portions for the most effi-

cient display. There may be times when you plan special mouse rollover effects for parts

of a large, complex image. In this case, parts of the image need to be individually acces-

sible to scripting languages and the image needs to be sliced. When an image is sliced, it

is broken into multiple graphic files. These multiple graphic files are formatted using an

XHTML table. Most graphics applications, such as Adobe Fireworks and Adobe

Photoshop, have features for image slicing that automatically create the XHTML for

you. Visit the textbook Web site at http://webdevfoundations.net/5e/chapter4.html for

more information on image slicing.

How do you obtain graphics for your pages? What are recommended ways to use

graphics? This section will help you answer these questions and discuss sources of

graphics as well as guidelines for using images on Web pages.

Sources of Graphics

There are many ways to obtain graphics: you can create them using a graphics applica-

tion, download them from a free site, purchase and download them from a graphics site,

purchase a graphics collection on a CD, take digital photographs, scan photographs,

scan drawings, or hire a graphic designer to create graphics for you. Popular graphic

applications include Adobe Photoshop, Adobe Fireworks, and Jasc Paint Shop Pro. These

applications usually include tutorials and sample images to help you get started. Visit the

textbook Web site at http://webdevfoundations.net/5e/chapter4.html, for tutorials on

using Adobe Fireworks and Adobe Photoshop to create a logo banner image.

Search WWH ::

Custom Search

Home