1. Images, Links, and Multimedia

2. Directories and Pathnames

3. Files index.html standard.css updatetime.js welcome.gif cis203syllabus.pdf depelmatt.doc internetbasics.ppt file name TIPS  NO spaces in file names.  Use all lowercase characters.  Short names.  Make names meaningful.  Use “standard” file extensions.  Browser Helper Objects and Viewers..extension

4. public_html componentscis203images materialssolutions Root Directories (subdirectories of public_html) (parent directory is public_html) Directories (subdirectories of cis203) (parent directory is cis203) Directory Structure (really a virtual root on most web servers)

5. Two Types of Pathname Absolute Pathname. Relative Pathname.

6. public_html componentscis203images materialssolutions../schedule.html../../standard.css../materials/introhtml.ppt../solutions/mycssdll.css../../images/welcome.gif /images/welcome.gif components/standard.jscis203/materials/depelmatt.doc components/standard.js../images/welcome.gif /components/standard.js introhtml.ppt Pathnames

7. Images

8. Common Image Types GIF –Clipart, logos, and other simple graphics. –Animated GIF. JPG –Photographs. PNG –Replacement for GIF. BMP –Anything – but huge files – avoid.

9. Size and Aspect Ratio 234 pixels 400 pixels Aspect Ratio == 1.709 horizontal vertical 400 pixels 234 pixels =

10. Resizing Guide New Size = Horizontal * change Vertical * change 400 * 0.25 234 * 0.25 =≈ 100 59 = 1.695 New Aspect Ratio = 1.695 Old Aspect Ratio = 1.709  Slight Distortion = 100 58.5 New Aspect Ratio = 100 58.5

11. Distortions Horizontal Distortion Vertical Distortion Aspect Ratio Preserved 200 pixels / 117 pixels Aspect Ratio Ok 100 pixels / 59 pixels

12. Color Depth Number of colors each pixel can take. Bits  Colors –1 bit  black and white –8 bit  256 colors –16 bit  65,536 colors –24 bit  16,777,216 colors –32 bit  4,294,967,296 colors More bits means more colors.

13. Image File Size Size  larger file! Color Depth – more bits  larger file! Larger file  slower download! Resize images before loading to web site. General: –Most displays are 1,024 by 768. –Often do not need 32 bit.

14. An Image on a Web Page <img src="bige.jpg“ alt="Einstein on the stairs" />

15. <img src="bige.jpg" alt="Einstein on the stairs" width="320" height="187" /> Resizing an Image with Attributes Preserve the Aspect Ratio! A better approach is to resize the image with graphics editing software. This saves space and improves download time.

16. <img src="bige.jpg" alt="Einstein on the stairs" style="width: 320px; height: 187px" /> Resizing an Image with CSS

17. Float Left Some days dinner is a little late. On those days, … a lazy human.

18. Float Right Some days dinner is a little late. On those days, … a lazy human.

19. Some Additional Comments KISS! Do not get too fancy too quickly! Avoid over use of images. Respect copyrights. Do not engage in “bandwidth theft!”