Transcript Images and Graphics

.NET Web Forms
Images and Graphics
© 2002 by Jerry Post
1
Graphics Formats
 Many graphics formats
 Bitmap
 Vector
75 dpi GIF: 79,160 bytes
 Web browsers use two (bitmap)
 GIF
 Uses LZW compression.
 Can interleave rows.
 Can attach internal copyright.
 Giftool.exe, shareware: $10.
 JPEG (JPG)
 Joint photographic experts group.
 Can set loss level for high-ratio
compression.
JPEG (100): 6,062 bytes
 Can set a low quality (JPG) and high
quality image.
 PNG
 Combines best of both.
 Best for photos
2
Image Features
 Transparency (GIF and PNG). Select one color as
transparent, and background will show through.
GIF: 999 bytes, interlaced, transparency, 50 x 50 pixels
PNG: 1820 bytes, interlaced, transparency, 50 x 50 pixels
JPG: 5260 bytes, highest resolution, 50 x 50 pixels
3
Colors and Resolution
 Colors will appear differently on every screen. Live with it.
 Old browsers and old screens can only display a limited number of
colors (about 250). These colors are known as the Web color-safe
palette, which you should use if you are seriously concerned about
color compatibility.
 Always double-check the size of your images. Using too many
colors or too high of a resolution multiplies the image size.
 Pay attention to current hardware standards, so you know how to
scale your page and image sizes. A browser size of 800 x 600
pixels is relatively common, unless you are targeting cell phones or
PDAs.
4
Graphics Utilities
 Graphics utilities you need
 Screen capture.
 Print Screen, free
 Drawing package.
 PowerPoint
 Paintbrush
 Adobe Illustrator, $$$
 Photo edit package.
 Adobe Photoshop, $$$
 Corel, $$$
 Microsoft, $
 Coordinate mapping tool.
 MapThis, free
 MapEdit, shareware
5
Web Graphics: Images
 A simple graphics image
 <IMG SRC=“myfile.gif”>
 <IMG SRC=“myfile.gif
WIDTH=400 HEIGHT=300>
 Graphics tools provide size.
 If different, browser will
scale.
 Speed trick: low resolution flip
 <IMG SRC=“myfile.gif”
LOWSRC=“myfile.jpg”>
 First downloads and displays
low resolution file (fast), then
downloads full graphic.
 For faster page building,
include the width and height.
 Options
 SRC: graphics file name
 ALT: (alternate) text to display
 ALIGN: bottom, top, middle, . . .
(relationship to text)
 HEIGHT: pixels
 WIDTH: pixels
 BORDER: size of border
 LOWSRC: smaller low res file
 Whenever possible, set the
Height and Width so the browser
can build the page to the proper
size before the file is fully
loaded.
6
Web Graphics: MapThis
7
Web Graphics: Links
 Clickable images require a map (or use ASPX button)
 Click on spot within graphic, link to a new page.
 Server side (old)
 Client side
 Easiest to use software: MapThis
 Identify spots on image
 Map file for server
 Locations for client
 Both server and client:
 <A HREF=“myimage.map”> <IMG SRC=“myimage.gif”
USEMAP=#map1” ISMAP></A>
 <MAP NAME=“map1”>
 <AREA SHAPE=“RECT” COORDS=“left,top,right,bottom”
HREF=“link1.htm”>
 <AREA SHAPE=“CIRCLE” COORDS=“center,center,radius"
fHREF="Syl440.htm">
 </MAP>
8
Web Graphics Maps
Client map: everything inside the html file.
<MAP NAME="Map1">
<AREA SHAPE="RECT" COORDS="218,176,352,279" HREF="PostVita.htm">
<AREA SHAPE="RECT" COORDS="1,18,164,162" HREF="Syl343.htm">
<AREA SHAPE="RECT" COORDS="167,19,283,166" HREF="Syl345.htm">
<AREA SHAPE="RECT" COORDS="288,9,504,166" HREF="Syl440.htm">
<AREA SHAPE="RECT" COORDS="9,170,147,294" HREF="MISText.htm">
</MAP>
<A HREF="graphics/indexmnu.map">
<IMG SRC="graphics/post0.gif" ALT="Select from list below." BORDER=0
USEMAP="#Map1" ISMAP>
</A>
9
Web Graphics: Backgrounds
 Backgrounds used to be common, but
are painful. Sometimes useful in tables
or frames to highlight a section. Use the
style sheet to set the background.
 Watch colors.
PowerPoint
samples
 Light background, dark text.
 Dark background, light text.
 Avoid backgrounds with mixed light/dark.
 Use small files
 Save on download time.
 They are automatically replicated.
 Check for unexpected patterns.
 Sources




Hand-drawn sample.
Browser automatically
tiles it (without spaces).
Web/beware of copyrights.
CDs/art sources.
Graphics package/draw your own.
Scanner: paper, cloth, . . .
10
Graphics in .NET (a hint)
 Images used for pictures, backgrounds, and buttons are still
created the same way—by hand in a good graphics package.
 With .Net, you can drag-and-drop most things onto the page
 It is easy to add images, just drop the Image control on the design
page and enter the URL, height, and width.
 You can also add buttons with images on them (ImageButton).
 Use the style sheet to assign images to list bullets, and backgrounds.
11
Animation: GIF and Flash
 Best advice: avoid animation. Most people gave up on
the dancing bear websites years ago.
 Animation of objects on a page is distracting.
 Flash does provide better images and smoother
animation. But it is still pointless on most websites.
 Those little introductory “movies” are boring and pointless.
 If you really want to animate:
 (1) Take an art course.
 (2) Take a movie-making course (or animation if available).
 (3) Get a really good software tool (Adobe or Macromedia).
 (4) Spend 100 hours for 2 minutes of animation.
 (5) Spend some time and money and get reviews.
12
Rollovers
 Button rollover effects are relatively common today. When the user
moves the mouse over a button, the button appears to animate or
change characteristics. For example, it might be highlighted with a
line, or brighten into a different color.
 This effect is achieved in two main steps:
 Creating two (sometimes three) versions of the button image.
 Create the primary (non highlighted) button first.
 Copy it, and make the changes. Be careful that you do not change the
height or width of the image.
 Using client-side script to swap the button on rollover and rollout. This
script will be covered later, but several tools will generate it for you
automatically.
 With Visual Studio (and assuming IE browser!), add two attributes
to the image tag:
onmouseover="this.src='images/DeleteButton2.gif';"
onmouseout="this.src='images/DeleteButton1.gif';"
13