View
216
Download
1
Category
Preview:
Citation preview
HTML 58.51A
ADDING GRAPHICS
Web Graphic Formats
• "GIF" (graphics interchange format)
• JPEG (Joint Photographic Expert Group)
GIF
• .gif
• Pronounced like the peanut butter (Jif).
• GIF files can only contain 256 colors or less.
• Used for line drawings, illustrations, type design, clip art, cartoons, and for logos!
• allows transparency and animation.
JPEGs
• .jpg
• Pronounced, jay-peg
• JPEGs are used for images with millions of colors, like photographs.
Converting Graphic Formats
• You can use PhotoShop [Mac/PC], Graphics Converter [Mac], Paint Shop Pro [PC], and L-View [PC], Fireworks and others to resize an image and convert from one graphic format to another.
• Professional non-web formats are usually in a PSD format.
The Image Tag
• <img src="logo.gif" />
• <img src=”picture.jpg”>
• Don’t forget to upload your graphic file. That is the most common mistake.
• Make sure you use all lower case for name and extensions.
Adjusting the Size
• <img src="logo.gif" width="83" height="27" />
• To keep a graphic at it’s default size, you don’t have to designate size attributes.
• Take a look at the links page to see what happens when you change the size.
• The file size will always remain the same.
Aligning Image/Text
• <img src="logo.gif" align=”top / middle / absmiddle / bottom “ />
• One thing to remember, these attributes indicate where the picture/image will be placed, in relation to the text.
• The attributes are aligning the picture, not the text.
Adding space around the Image
• Space around graphic -
• <img src ="logo.gif" vspace=”10" hspace=“10” />
• This can help you give a little space between an image an text.
• However, the use of tables is more effective.
ATL tags
• <img src=”logo.gif” alt="Company Logo" />• Atl tags are used to give short descriptions of an image.• Some people have their graphics turned off.• Used by Search engines.
• Most important, the legally blind often use text-to-speech synthesizers when browsing the Web. The synthesizer reads all the words on your page aloud, skipping the pictures.
Animated GIFS
• An animated gif takes advantage of the ability of gifs to store multiple images or frames within a single graphic file.
• This allows web designers to include animation and movement for a relatively low bandwidth.
• Just because you can easily add movement to the screen does not mean you should.
Thumbnails
• Linking Thumbnails to Larger Images -
• <a href=”mitchell-big.jpg"><img src=”mitchell-small.jpg" border=0></a>
• Or <a href=”mitchell.html"><img src="small-pic.jpg" border=0></a>
• Of course this means you are linking to another page with the bigger Image/file, but the advantage is you can format the graphic.
Image Maps
• The best way to create an Image Map is to use: Dreamweaver, GoLive, or ImageReady.
• There is also some freeware specifically for creating Image maps.
• Image maps are usually used in large descriptive images.
HomeWork
• 3-5 graphics 10 points• align text 10 points• alt tags (all) 10 points • Thumbnail to Larger image 10
points• One Animated Gif 10 points• Quiz Next week (All graphics)• Where should you be now (Final)
Recommended