Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @...
-
Upload
dennis-bates -
Category
Documents
-
view
215 -
download
0
Transcript of Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @...
![Page 1: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/1.jpg)
COS 125
Day 4
![Page 2: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/2.jpg)
Agenda
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
![Page 3: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/3.jpg)
Factors to Consider for Web Image
Format Color Size/resolution Speed Transparency Animation
![Page 4: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/4.jpg)
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
![Page 5: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/5.jpg)
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
![Page 6: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/6.jpg)
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/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
![Page 7: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/7.jpg)
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
![Page 8: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/8.jpg)
Speed
How fast can the picture be displayed? Factors
Size of graphic file Size of graphic Color depth Compression
Interlacing Sneak peek
![Page 9: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/9.jpg)
How to make graphic load faster 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
![Page 10: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/10.jpg)
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
![Page 11: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/11.jpg)
Animations
Animated Gifs Flash Both work with frames
Like cartoons Series of images with slight changes between each
image
![Page 12: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/12.jpg)
Where to get images
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
![Page 13: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/13.jpg)
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 …/>
![Page 14: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/14.jpg)
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
![Page 15: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/15.jpg)
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
![Page 16: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/16.jpg)
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%”
![Page 17: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/17.jpg)
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>
![Page 18: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/18.jpg)
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.htm
![Page 19: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/19.jpg)
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
![Page 20: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/20.jpg)
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” />
![Page 21: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/21.jpg)
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
![Page 22: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/22.jpg)
Adding Horizontal Rules
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”
![Page 23: Day 4. Assignment 1 Due Assignment 2 Posted Assignment 2 Posted Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM Today we will look at creating and using.](https://reader035.fdocuments.us/reader035/viewer/2022062518/56649e7e5503460f94b81119/html5/thumbnails/23.jpg)
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)