Transcript COS 125 - Ecom and COS classes

Day 4
 Assignment 1 Due
 Assignment 2 Posted
 Due Feb 9 @ 9:35 AM
 3 missing @ 8:30 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






Format
Color
Size/resolution
Speed
Transparency
Animation
 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
 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
 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/websafecolors.html
 Non web safe colors may be dithered or shifted
 Check colors in browser before you use them
 http://perleybrook.umfk.maine.edu/samples/colorchecker.html
 http://perleybrook.umfk.maine.edu/samples/colorpicker.htm
 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
 How fast can the picture be displayed?
 Factors
 Size of graphic file
 Size of graphic
 Color depth
 Compression
 Interlacing
 Sneak peek
 Use the right image format
 For Photo realistic images 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
 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
 Animated Gifs
 Flash
 Both work with frames
 Like cartoons
 Series of images with slight changes between each
image
 Buy or download
 Copyrights
 Scan existing images
 Blake library
 Digital camera
 Blake library
 Create using an image editing program
 Adobe Photoshop and Image ready
 Macromedia Fireworks
 JASC Paint Shop Pro
 Goggle image search
 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 …/>
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
 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
 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%”
 A thumbnail is a “mini” version of a larger image
 <a href=“large.jpg”><image src=“mini.jpg” alt=“A
thumbnail” height = “50” /></a>
 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.htm
 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
 Create a buffer around your image
 <img src=“image.gif” alt=“a picture” height=“100”
width=“100” hspace=“20” vspace=“20” />




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
 A horizontal rule is a line across the Web page
 <hr/>




size=“10” (how thick)
Width=“70%” (how much of the page width)
Align=“left” or “right” or “center”
noshade=“noshade”
 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)