Download imglnkmulti - High Point University

Images, Links, and Multimedia
Directories and Pathnames
Files
index.html
file name . extension
standard.css
TIPS
updatetime.js
welcome.gif
cis203syllabus.pdf
depelmatt.doc
internetbasics.ppt
 NO spaces in file names.
 Use all lowercase characters.




Short names.
Make names meaningful.
Use “standard” file extensions.
Browser Helper Objects and Viewers.
Directory Structure
public_html
Directories
Root
(really a virtual
root on most
cis203
web servers) components
Directories
(subdirectories
of public_html)
images
(parent directory
is public_html)
(subdirectories
of cis203)
materials
solutions
(parent directory
is cis203)
Two Types of Pathname
• Absolute Pathname.
• Relative Pathname.
Pathnames
public_html
components/standard.js
components
cis203/materials/depelmatt.doc
cis203
images
components/standard.js
materials
solutions
../schedule.html
../../standard.css
../materials/introhtml.ppt
../../images/welcome.gif
introhtml.ppt
/images/welcome.gif
../solutions/mycssdll.css
/components/standard.js
../images/welcome.gif
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
400 pixels
horizontal
Aspect Ratio =
=
vertical
= 1.709
234 pixels
Resizing Guide
400 * 0.25
Horizontal * change
New Size =
=
Vertical * change
=
234 * 0.25
100
58.5
58.5
100
≈
New Aspect Ratio =
100
= 1.695
59
New Aspect Ratio = 1.695
 Slight Distortion
Old Aspect Ratio = 1.709
Distortions
Aspect Ratio Preserved
200 pixels / 117 pixels
Horizontal Distortion
Vertical Distortion
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" />
Resizing an Image with Attributes
<img src="bige.jpg"
alt="Einstein on the stairs"
width="320" height="187" />
Preserve the Aspect Ratio!
A better approach is to resize
the image with graphics
editing software. This saves
space and improves
download time.
Resizing an Image with CSS
<img src="bige.jpg"
alt="Einstein on the stairs"
style="width: 320px; height: 187px" />
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!”