Transcript COS 125 day 4 - Ecom and COS classes

COS 125
Day 4
Agenda
• Assignment 1 Due
• Assignment 2 Posted
– Due Feb 9 @ 9:35 AM
• Today we will look at creating and using images
• Examples
–
–
http://perleybrook.umfk.maine.edu/samples/imagesplay.htm
http://perleybrook.umfk.maine.edu/samples/bk.htm
Factors to Consider for Web
Image
•
•
•
•
•
•
Format
Color
Size/resolution
Speed
Transparency
Animation
Formats
• 3 Possibilities
– GIF
• Version 87a
– Older
• Version 89a
– Transparency and animations
• Interlaced or non-interlaced
– JPEG
• Compressed (variable)
– PNG
• Optimized or non-optimized palette
• Interlaced or non-interlaced
Color
• Depth (# of colors per pixel)
– 24 bit
• 16,777,216 possible colors
• “true color”
• Photo quality
– 16 bit
• 65,536 colors
– 8 bit
• 256 colors
Browser Colors
• Most Browser cheat!
– Lock palette to 256 specific colors
• Because of difference in O/S’s only 216 colors
are Web Safe
• http://www.cookwood.com/html/colors/websafe
colors.html
– Non web safe colors may be dithered or
shifted
Size and Resolution
• Pixels
– Monitors are 70-90 pixels per inch
– Printers are >200 ppi
– 800 X 600 image
• 10X7.5 inches on monitor
• 4X3 inches (or less) on printer
– The more pixels on a printer means greater detail
– The more pixels on a monitor means larger size
• Standard SVGA monitors are 800X600 16 bit
• XGA monitors are 1024X768 24 bit or better
Speed
• How fast can the picture be displayed?
• Factors
– Size of graphic file
• Size of graphic
• Color depth
• Compression
– Interlacing
• Sneak peek
How to make graphic load faster
• Use the right image format
– For Photo realistic use jpeg
• Lossy compression
• Use Gaussian blur and re-compress
– < 256 colors (logos, text, cartoons)
• Gif using LZW compression
• PNG
• Only covert images to web format after all
editing is done
Transparency
• Only for GIF and PNG
– “remove” one color from image
– Remove Background (or other color) to
make image non-rectangular and allow
web back ground to “bleed” through
– Remove color in image to create special
effects
Animations
• Animated Gifs
• Flash
• Both work with frames
– Like cartoons
– Series of images with slight changes
between each image
Where to get images
• Buy or download
• Scan existing images
– Blake library
• Digital camera
– Blake library
• Create using image editing program
• Goggle image search
Inserting a Image
• Determine after what element in your WebPage you want the
Image to appear
• Place cursor in your code after the element
• Type <img src=“image.url”/>
• “image.url” is location of the file
– http://www.server.com/images/image.gif
– ../images/image.gif
– images/image.gif
– image.gif
• Hint
– To place image on a new line use <br/> before <img …/>
Offering Alternative Text
•
•
•
•
•
If the image won’t appear, the “alternative text” will
<img src=“cat.gif” alt=“Picture of a cat”/>
alt is REQUIRED for XHTML
Can also use title attribute
On some browsers “Alt” text will be a mouse over
pop-up
• Examples
– http://perleybrook.umfk.maine.edu/samples/UsingImages.htm
Specify Size of Image
• Tell the Browser how large the picture is to speed
up loading
• <img src=“image.gif” alt=“a picture” height=“100”
width=“100” />
• Quick Way
–
–
–
–
Insert image in webpage without dimensions
View page and right mouse on image
Select properties and determine dimensions
Modify img tag with the dimensions
Scaling an Image
• Use new values for height and width
attributes
• CAREFUL –you must maintain aspect
ratios or you will distort image
– Just set height or width and Browser will
automatically set the other
• Can also set to percentage of Browser
viewable space
– height =“ 50%” width = “50%”
Thumbnails
• A thumbnail is a “mini” version of a
larger image
• <a href=“large.jpg”><image
src=“mini.jpg” alt=“A thumbnail” height =
“50” /></a>
Making Images “float”
• You can float images in the text
• You can move image to the left or to the
right relative to text
• <img src=“image.gif” align=“right”>
• Use <p></p> after img tag to get text to
“fill” left over space
• Example
– http://perleybrook.umfk.maine.edu/samples/textfloat.ht
m
Stopping Elements from
Wrapping Image
• You can control how text & other
elements “flows” around your images
• <br clear=“left”/> (or right)
– Next element goes to first available margin
on left
• <br clear=“all”/>
– Next element goes to first available spot
where both margins are clear
Adding Space around Image
• Create a buffer around your image
• <img src=“image.gif” alt=“a picture”
height=“100” width=“100” hspace=“20”
vspace=“20” />
Aligning images
•
•
•
•
NOTE: Not all directions work in all browsers
Used to align images with text
<img src=“image.gif” align=“direction”>
Where direction is
– TEXTTOP
• Top of image to top of text
– TOP
• Top of image to top of tallest element
– MIDDLE
• Middle of image with base of text
– ABSMIDDLE
• Middle of image to middle of tallest element
– BOTTOM
• Bottom of image to baseline of text
– ABSBOTTOM
• Bottom of image to bottom of tallest element
Adding Horizontal Rules
• A horizontal rule is a line across the Web page
• <hr/>
–
–
–
–
size=“10” (how thick)
Width=“70%”
Align=“left” or “right” or “center”
noshade=“noshade”
Creating images
• Next class we will be using Adobe
Photoshop and Image Ready along with
JASC’s paint shop pro to create and
modify images (including animations)