Images, Links, and Multimedia

Directories and Pathnames

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

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)

Two Types of Pathname Absolute Pathname. Relative Pathname.

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

Images

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

Size and Aspect Ratio 234 pixels 400 pixels Aspect Ratio == horizontal vertical 400 pixels 234 pixels =

Resizing Guide New Size = Horizontal * change Vertical * change 400 * * 0.25 =≈ = New Aspect Ratio = Old Aspect Ratio =  Slight Distortion = New Aspect Ratio =

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

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.

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.

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

<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.

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

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

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

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