Upload
jason-cox
View
225
Download
1
Tags:
Embed Size (px)
Citation preview
Images, Links, and Multimedia
Directories and Pathnames
Filesindex.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
components cis203 images
materials solutions
RootDirectories
(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
components cis203 images
materials solutions
../schedule.html ../../standard.css
../materials/introhtml.ppt
../solutions/mycssdll.css
../../images/welcome.gif
/images/welcome.gif
components/standard.js cis203/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 = = 1.709horizontal
vertical
400 pixels
234 pixels=
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
Distortions
Horizontal Distortion
Vertical Distortion
Aspect Ratio Preserved200 pixels / 117 pixels
Aspect Ratio Ok100 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
<img src="littlee.jpg" style="float: left" /><p>Some days dinner is a little late. On those days, … a lazy human.</p>
Float Right
<img src="littlee.jpg" style="float: right" /><p>Some days dinner is a little late. On those days, … a lazy human.</p>
Some Additional Comments
• KISS! Do not get too fancy too quickly!
• Avoid over use of images.
• Respect copyrights.
• Do not engage in “bandwidth theft!”